/* ------------------------------------------------------------------
author:        谷辰網路資訊
email:         service@gcii.tw
website:       http://www.gcii.tw
 -------------------------------------------------------------------*/
 
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

html, body {
  width: 100%;
  height: 100%;
  font-family:"Arial","微軟正黑體","Microsoft JhengHei",sans-serif;
  font-weight: 300;
  font-size: 15px;
  color: #333;
  padding: 0;
  margin: 0;
}

header {
  width: 100%;
  height: 80px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9000;
  background: rgba(0,0,0,0.6);
  transition: height 0.5s;
  -moz-transition: height 0.5s;
  -webkit-transition: height 0.5s;
  -ms-transition: height 0.5s;
  -o-webkit-transition: height 0.5s;  
}
a { 
  text-decoration:none; 
  transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
  -ms-transition: opacity 0.3s;
  -o-webkit-transition: opacity 0.3s;
  color: #555;
  text-decoration: none;
}

ul {list-style:none;padding:0;margin:0;}
.wrapper {width:100%;background-color:transparent;}
.clean {position:relative;display:block;clear:both;}

/* header */
.container {margin:0 auto;}
.container h1 {float:left;height:40px;margin:20px 0 0 10px;}
.container h1 a {display:block;height:46px;line-height:65px;}
.container nav.top {float:right;margin:0;}
.container nav.top ul.navmenu {list-style:none;padding:0;margin:0;}
.container nav.top ul.navmenu li {list-style:none;float:left;padding:0;margin:0;line-height:90px;height:79px;font-size:15px;color:#FFF;}
.container ul.navmenu li a {color:#FFF;}
.container ul.navmenu li:hover a {color:#FF8019;}
.container ul.navmenu li:hover {border-bottom:1px solid #FF8019;color:#FF8019;}
.container ul.submenu {display:block;padding:0;position:absolute;top:60px;display:none;height:40px;}
.container ul.submenu li {line-height:40px;height:40px;float:left;font-size:13px;width:105px;}
.container ul.submenu li a{border-right: none;color:#fff;}
.container ul.submenu li:first-child { margin:0; }
.container ul.submenu li:hover {border-bottom: none;}
.container ul.submenu li:hover a{color:#FF8019;}
.container nav.top ul.navmenu li a{ border-right: 1px solid #ccc;padding-right: 22px;padding-left: 22px;}
.container nav.top ul.navmenu li:last-child a{border-right:none;}
.container .slogan {font-size:10px;color:#e5e5e5;float:left;margin-left:15px;}
@media (max-width:500px) {
  .container .slogan {display:none;}
}

.menu-icon {/*position: fixed;display: block;*/width: 2.0em;height: 2.0em;cursor: pointer;}
.menu-icon:hover span {background: #fff;}
.menu-icon:hover span:before, .menu-icon:hover span:after {background:#fff;}
.menu-icon > span {position:absolute;top:50%;display:block;width:100%;height:0.15em;background-color:#bbbbbb;/*border-radius:3px;*/-webkit-transition:-webkit-transform 0.3s, background 0.25s ease;transition:transform 0.3s, background 0.25s ease;}
.menu-icon > span:before, .menu-icon > span:after {content:"";position:absolute;width:100%;height:100%;background-color:#bbbbbb;/*border-radius:3px;*/-webkit-transition:-webkit-transform 0.3s, background 0.25s ease;transition:transform 0.3s, background 0.25s ease;}
.menu-icon > span:before {-ms-transform:translateY(-0.75em);-webkit-transform:ranslateY(-0.75em);transform:translateY(-0.75em);}
.menu-icon > span:after {-ms-transform:translateY(0.75em);-webkit-transform:translateY(0.75em);transform:translateY(0.75em);}

/* OPENED */
.menu-icon.menu-icon-open {-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}
.menu-icon.menu-icon-open > span:before {-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}
.menu-icon.menu-icon-open > span:after {-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}
.navmenu2 {position:absolute;display:inline-block;margin:0;top:20px;right:5%;}
.navmenu2 .menu-icon {display:none;}
@media (max-width:979px) {
  .navmenu2 .menu-icon {position:relative;display:block;overflow:hidden;}
  nav ul.navmenu {display:none;}
  header {height:60px;}
  .container h1 {margin:8px 0 0 8px;}
}

.mini-menu {width:100%;height:60px;position:fixed;left:0;top:60px;display:none;overflow:auto;border-top:1px solid #a4a4a4;}
.mini-menu ul {width:400%;list-style:none;padding:0;margin:0;display:block;}
.mini-menu ul li {float:left;padding:5px 5px;margin:0;line-height:40px;height:40px;font-size:15px;color:#FFF;}
.mini-menu ul li a {color:#fff;}
.mini-menu ul li a {border-right:1px solid #a4a4a4;padding-right:15px;}
.mini-menu ul li:last-child a {border-right:none;padding-right:0;}
/* header */

/* about */
#about1 {background: url(../images/about_1.jpg) 50% 0% / cover no-repeat;}
#about2 {background: url(../images/about_2.jpg) 50% 0% / cover no-repeat;}
#about3 {background: url(../images/about_3.jpg) 50% 0% / cover no-repeat;}
#about4 {background: url(../images/about_4.jpg) 50% 0% / cover no-repeat;}
.about_item {/*position:absolute;bottom:150px;left:45%;right:auto;*/width:320px;text-align:center;color:#fff;padding:0 10px;}
.about_item h2 {font-size:38px;line-height:40px;font-weight:200;letter-spacing:1px;opacity:1}
.about_item div {font-size:18px;letter-spacing:1.5px;opacity:1;}
.oar_scroll_down {position:absolute;margin:15px 0 0 65px;transform:translateX(-50%);color:#fff;font-size:12px;}
@media (max-width:400px) {
  .about_item {width:300px;}
}
@media (max-height:1500px) {
  .about_item {margin:500px auto 0 auto;}
}
@media (max-height:830px) {
  .about_item {margin:400px auto 0 auto;}
}
@media (max-height:720px) {
  .about_item {margin:300px auto 0 auto;}
}
@media (max-height:620px) {
  .about_item {margin:250px auto 0 auto;}
}
@media (max-height:568px) {
  .about_item {margin:150px auto 0 auto;}
}
@media (max-height:460px) {
  .about_item {margin:100px auto 0 auto;}
  .about_item h2 {font-size:30px;line-height:32px;}
  .about_item div {font-size:15px;}
  .about_item img {width:50%}
  
}
@media (max-height:390px) {
  .about_item {margin:60px auto 0 auto;}
  .about_item h2 {font-size:26px;line-height:30px;}
  .about_item img {width:45%}
}
@media (max-height:340px) {
  .about_item {margin:50px auto 0 auto;}
  .about_item h2 {font-size:20px;line-height:25px;}
  .about_item img {width:40%}
}
/* about */

/* service */
#service1 {background: url(../images/about_5.jpg) 50% 0% / cover no-repeat;}
#service2 {background: url(../images/about_6.jpg) 50% 0% / cover no-repeat;}
#service3 {background: url(../images/about_7.jpg) 50% 0% / cover no-repeat;}
#service4 {background: url(../images/about_8.jpg) 50% 0% / cover no-repeat;}
#service5 {background: url(../images/about_9.jpg) 50% 0% / cover no-repeat;}
.service_item {/*position:absolute;bottom:150px;left:5%;right:5%;*/width:320px;text-align:center;color:#fff;padding:0 10px;}
.service_item h4 {font-size:38px;line-height:40px;font-weight:200;letter-spacing:1px;opacity:1;margin:5px 0;}
.service_item h5 {font-size:32px;line-height:36px;font-weight:200;letter-spacing:1px;opacity:1;color:#FF8019;margin:5px 0;;}
.service_item .service_bl {color:#333;}
.service_item div {margin-top:20px;font-size:18px;letter-spacing:1.5px;opacity:1;}
@media (max-width:400px) {
  .service_item {width:300px;}
}
@media (max-height:1500px) {
  .service_item {margin:500px auto 0 auto;}
}
@media (max-height:830px) {
  .service_item {margin:400px auto 0 auto;}
}
@media (max-height:720px) {
  .service_item {margin:300px auto 0 auto;}
}
@media (max-height:620px) {
  .service_item {margin:250px auto 0 auto;}
}
@media (max-height:568px) {
  .service_item {margin:150px auto 0 auto;}
}
@media (max-height:460px) {
  .service_item {margin:100px auto 0 auto;}
  .service_item h4 {font-size:32px;line-height:36px;}
  .service_item h5 {font-size:28px;line-height:32px;}
  .about_item div {font-size:15px;}
}
@media (max-height:390px) {
  .service_item {margin:60px auto 0 auto;}
  .service_item h4 {font-size:30px;line-height:34px;}
  .service_item h5 {font-size:26px;line-height:30px;}
}
@media (max-height:340px) {
  .service_item {margin:50px auto 0 auto;}
  .service_item h4 {font-size:28px;line-height:30px;}
  .service_item h5 {font-size:22px;line-height:28px;}
}
/* service */

/* portfolio */
#portfolio-wrap {min-height:600px;float:left;margin:0;padding:0;width:100%;overflow:visible;}
#filter {width:980px;margin:140px auto 0 auto;border-bottom:1px solid rgba(0,0,0,0.5); overflow:hidden;}
#filter ul {display:block;list-style:none;margin:0; padding:0;float:left; height:170px;}
#filter ul li {display:block;list-style:none;margin:0; padding:0;float:left;font-size:14px;line-height:28px}
#filter ul li:first-child {font-size:18px;line-height:36px;height:36px;width:100%}
#filter ul li span {display:block;float:left}
#filter ul li span:first-child {width:30px}
#filter input[type="checkbox"] {display:none;}
#filter input[type="checkbox"] + label span {display:block;float:left;margin:8px 10px 0 0;width:10px;height:10px;border:1px solid #666;border-radius:6px;transition:background-color 0.2s;-moz-transition:background-color 0.2s;-webkit-transition:background-color 0.2s;-ms-transition:background-color 0.2s;-o-webkit-transition:background-color 0.2s;}
#filter input[type="checkbox"]:checked + label span {background:rgba(255,255,255,0.7);}
#industry {width:600px;}
#industry li {width:300px;}
#status {width:220px;}
#status li {width:220px;}
#focus-area {width:160px;}
#focus-area li {width:160px;}
#portfolio {min-height:230px;width:270px;margin:0 auto;text-align:center}
#portfolio ul {list-style:none;padding:0;margin:0;position: relative;}
#portfolio ul:first-child {margin:10px 0 10px 0;}
#portfolio ul:nth-child(4n+1) {margin:10px 0 10px 0;}
#portfolio ul li {display:block;list-style:none;text-align:center;position: relative;}
#portfolio .logo {height:160px;overflow:hidden;z-index:0;}
#portfolio ul li.logo a {position: relative;display:block;}
#portfolio ul li.logo img {position: relative;display:block;width:270px;height:auto;margin:0 auto;padding:0;transition:margin 0.3s ease;text-align:center;}
#portfolio ul:hover li.logo img {margin:-165px auto 0 auto;} 
#portfolio ul li.description {position:absolute;top:300px;z-index:9999 !important;background:rgba(0,0,0,0.7);display:block;width:270px;display:none;opacity:0;overflow:hidden;border-radius:5px;margin-top:40px;overflow:auto;}
#portfolio ul li.description h2 {display:block;width:100%;padding:20px 25px 0 25px;font-size:18px;font-weight:bold;color:#FF8019;line-height:22px;letter-spacing:3px;}
#portfolio ul li.description p {display:block;width:100%;padding:5px 25px 15px 25px;font-size:14px; line-height:18px;color:#fff;float:left;margin:0;}
#portfolio ul li.titi {text-align:center;font-size:18px;color:#333;line-height:30px;font-weight: bold;margin-top: 10px;}
#portfolio ul li.des {text-align:center;font-size:13px;color:#888;line-height:20px;}

.cbp-l-project-related-wrap {margin:0 auto;overflow:hidden;}
/*.cbp-l-project-related-item {margin:0 1%;width:31%;}*/
.cbp-l-project-title-share {width:250px;float:right;margin-top:-45px;}
@media (max-width:1000px) {
  .cbp-l-project-related-item {margin-right:5%;max-width:30%;}
}
@media (max-width:850px) {
  .cbp-l-project-related-item:last-child {margin:0 auto;}
  .slick-prev {left:10px;}
  .slick-next {right:10px;}
  .cbp-l-project-related-item #portfolio {width:100%;margin:0 auto;text-align:center}
  .cbp-l-project-related-item #portfolio .logo {height:100px;}
  .cbp-l-project-related-item #portfolio .logo img {display:block;width:100%;height:auto;}  
  .cbp-l-project-related-item #portfolio ul:hover li.logo img {margin-top:-125px;text-align:center;} 
}
@media (max-width:600px) {
  .cbp-l-project-title-share {margin:-95px 15px 0 0;}
  .cbp-l-project-related-item #portfolio .logo {height:50px;}
  .cbp-l-project-related-item #portfolio ul:hover li.logo img {margin-top:-70px;text-align:center;} 
}
/* portfolio */

/* contact */
.con_box{max-width:960px;margin:0 auto;margin-top:120px;}
.con_box h2{font-style: 14px;line-height:24px; font-size: bold;margin-bottom: 10px;font-weight: bold;color:#fff;}
.con_box .des{ background: rgba(255,255,255,.9); border-radius:10px; padding:20px 30px;margin-bottom:20px;}
.con_box .des h3{ font-weight: bold;margin-bottom: 15px; font-size: 18px;}
.con_box .des label{margin-right: 20px;margin-bottom: 10px; font-weight: bold;}
.con_box .in {padding:20px 30px;}
.con_box .con_box_link a {color:#fff;border:1px solid #eee;padding:5px 8px;margin:0 20px 0 0;}
.con_box .con_box_link a:hover {background:#FF8019;}
.con_txt {color: #fff; line-height:30px;}
.con_txt li {padding-bottom:20px;}
.con_txt label {width:200px !important;}
.con_txt input {border:1px solid #eee;padding:9px;margin-left:10px;border-radius:3px;width:270px}
.con_txt option {padding:9px;margin-left:10px;}
.con_txt select {border:1px solid #eee;padding:8px;margin-left:10px;border-radius:3px;width:82px}
.con_txt textarea {border:1px solid #eee;padding:9px;margin-left:10px;border-radius:3px;height:120px;}
.con_txt .con_textarea {width:650px !important;height:100px;}
.con_txt .con_textarea2 {width:270px;height:100px;}
.con_txt  .con_add {width:395px}
@media (max-width:800px) {
  .con_txt input {width:550px}
  .con_txt .con_textarea2 {width:550px}
  .con_txt .con_textarea {width:550px !important;}
  .con_txt .con_add {width:295px}
}
@media (max-width:635px) {
  .con_txt input {width:450px}
  .con_txt .con_textarea2 {width:450px}
  .con_txt .con_textarea {width:270px !important;}
}
@media (max-width:540px) {
  .con_txt input {width:300px}
  .con_txt .con_textarea2 {width:300px}
  .con_txt .con_textarea {width:270px !important;}
}
.btnn {padding:10px 20px;border:2px solid #fff;border-radius:3px;color:#fff;background:transparent; letter-spacing: 2px; cursor: pointer; font-weight: bold;}
.btnn:hover {color:#fff;background:#FF8019;border:2px solid #FF8019;}
.des_c {border-radius:4px;background:#ccc;position:absolute;z-index: 9999;display:none;padding:20px;top:120px;}
@media (max-width:360px) {
	.con_txt input {width:200px}
	.con_txt .con_textarea2 {width:200px}
	.con_txt select {padding:8px 5px;margin-left:5px;border-radius:3px;width:65px}
	.con_txt .con_textarea {width:200px !important;}
	.con_txt .con_add {width:200px}
}
/* contact */

/* blog */
.blog {margin:0 auto;padding-top:150px;}
.blog_menu {width:170px;float:left;padding:0 30px 0 5px;}
.blog_list {float:left;width:730px;border-left:#FF6633 1px solid;padding:0 20px;}
.blog_list_item {width:100%;margin-bottom:15px;}
.blog_list_title {float:left;overflow:hidden;margin-left:15px;width:625px;}
.blog_list_title .sty_5 {font-weight: bold;}
@media (max-width:980px) {
  /*.blog {margin-top:100px;margin-bottom:200px;}*/
  .blog_menu {width:600px;margin-bottom:20px;}
  .blog_list {width:610px;border-left:none;padding:0 5px;}
  .blog_list_item {width:610px;}
  .blog_list_title {width:490px;margin-left:5px;}
  #blog_nav_2 {display:none;}
}
@media (max-width:500px) {  
  .blog_menu {width:350px;margin-bottom:20px;}
  .blog_list {width:360px;border-left:none;padding:0 5px;}
  .blog_list_item {width:360px;}
  .blog_list_title {width:250px;margin-left:5px;}
}
@media (max-width:320px) {  
  .blog_menu {width:320px;margin-bottom:20px;}
  .blog_list {width:330px;border-left:none;padding:0 5px;}
  .blog_list_item {width:330px;}
  .blog_list_title {width:220px;margin-left:5px;}
}
@media (max-height:768px) {
  .blog {padding-top:120px;}
}
@media (max-height:736px) {
  .blog {padding-top:100px;}
}
@media (max-height:600px) {
  .blog {padding-top:90px;}
}
#blog_nav {margin-bottom:30px;overflow:hidden;margin-top:30px;}
#blog_nav ul {padding:0;margin:0;list-style:none;}
#blog_nav li {overflow:hidden;font-size:12px;color:#fff;margin-bottom:4px;}
#blog_nav li a {background-color:#AAAAAA;overflow:hidden;padding:5px;border-radius:5px;font-size:12px;display:block;color:#fff;}
#blog_nav li a:hover {background-color:#EE7E00;display:block;padding:5px;}
#blog_nav_2 {margin-bottom:30px;overflow:hidden;margin-top:30px;}
#blog_nav_2 ul {padding:0;margin:0;list-style:none;}
#blog_nav_2 li {font-size:12px;color:#fff;margin-bottom:4px;}
#blog_nav_2 li a {color:#555;text-decoration:none;padding:5px;font-size:12px;display:block;border-left:#CCCCCC 1px solid;}
#blog_nav_2 li a:hover {padding:5px;font-size:12px;display:block;border-left:#CCCCCC 1px solid;}
.blog_list a {color:#555;text-decoration:none;}
/* blog */

/* footer */
.footer {position:fixed;left:0;bottom:-87px;z-index:9000;background:rgba(255,255,255,1);transition:height 0.5s;-moz-transition:height 0.5s;-webkit-transition:height 0.5s;-ms-transition:height 0.5s;-o-webkit-transition:height 0.5s;width:100%;height:85px;border-top:1px solid #FF8019;}
.copyright {margin:20px auto 0 auto;color:#444;font-size:13px;line-height:30px;padding:5px 10px 0 10px;}
.copyright a {color:#444}
.copyright .footerlogo {float:left;width:152px;}
.copyright .footerlogo div {float:left;display:none;width:200px;}
.copyright .footerinfo {margin-left:15px;float:left;border-left:#FF6600 1px solid;padding-left:15px;line-height:12px;font-size:12px;}
.copyright .footerinfo p {margin:5px 0;}
.copyright .fg {list-style:none;float:right;}
.copyright .fg li {float:left;}
.copyright2 {display:none;}
@media (max-width:700px) {
  .fg {display:none;}
}
@media (max-width:625px) {
  .footerlogo {display:none;}
  .footer {height:85px;}
  .copyright {margin:5px auto 0 auto;}
  .copyright .footerlogo img {float:left;width:25%;margin:0 20px 0 0;}
  .copyright .footerlogo div {display:inline;float:left;}
  .copyright .footerlogo div p {margin:3px 0 0 0;line-height:15px;}  
  .copyright .footerlogo {width:600px;margin:0 0 5px 0;}
  .copyright .footerinfo {border-left:none;margin-left:0px;padding-left:0px;}
  .copyright .footerinfo span {display:none;}
  .copyright2 {display:block;}
  /*.copyright .footerinfo p:first-child {display:none;}*/
  /**/
}
/* footer */

/* page */
nav[role="navigation"] {text-align:center;}
.cd-pagination {width:90%;max-width:768px;margin:2em auto 4em;text-align:center;}
.cd-pagination li {display:none;margin:0 .2em;}
.cd-pagination li.button {display:inline-block;}
.cd-pagination a, .cd-pagination span {display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:5px 6px;font-size:15px;}
.cd-pagination a {border:1px solid #e6e6e6;border-radius:0.25em;}
.no-touch .cd-pagination a:hover {background-color:#f2f2f2;}
.cd-pagination a:active {-webkit-transform:scale(0.9);-moz-transform:scale(0.9);-ms-transform:scale(0.9);-o-transform:scale(0.9);transform:scale(0.9);}
.cd-pagination a.disabled {color:rgba(46, 64, 87, 0.4);pointer-events:none;}
.cd-pagination a.disabled::before, .cd-pagination a.disabled::after {opacity:.4;}
.cd-pagination .button:first-of-type a::before {content:'\00ab  ';}
.cd-pagination .button:last-of-type a::after {content:' \00bb';}
.cd-pagination .current a {background-color:#ff9900;/*border-color:#ff9900;*/color:#ffffff;pointer-events:none;}
@media only screen and (min-width: 768px) {
  .cd-pagination li {
    display: inline-block;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-pagination {
    margin: 4em auto 8em;
  }
}
/* page */

/* RWD */
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
@media (min-width: 768px) and (max-width: 979px) {
  .container {
    width: 724px;
  }
}
@media (max-width: 767px) {
  .container {
    width: auto;
  }
}
/* RWD */
.tp-caption.rev-Button, .rev-Button {
    color: rgba(255,255,255,1.00);
    font-size: 14px;
    line-height: 14px;
    font-weight: 500;
    font-style: normal;
    font-family: Raleway;
    padding: 10px 30px 10px 30px;
    text-decoration: none;
    background-color: rgba(0,0,0,0);
    border-color: rgba(255,255,255,0.50);
    border-style: solid;
    border-width: 1px;
    border-radius: 0px 0px 0px 0px;
    letter-spacing: 3px;
    text-align: left;
}
.content_max_width {
    margin: auto;
}