@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,300,800);
@import url("layout.css");

/*************************
*******Typography******
**************************/

html {
  box-sizing:border-box;
  font-family: 'Open Sans', sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-size: 14px;
}
body {
  background: #fff;
  font-family: "微軟正黑體", 'Open Sans', sans-serif, LiHei Pro Medium, Heiti TC, Microsoft JhengHei;
  color: #333333;
}

h1,
h2,
h3,
h4,
h5,
h6 { 
  font-family: "微軟正黑體", 'Open Sans', sans-serif, LiHei Pro Medium, Heiti TC, Microsoft JhengHei;;
  color:#4e4e4e;
  /*font-weight: 600;*/
}

h1 {font-size: 2rem; min-height: 1rem;}
h2 {font-size: 1.5rem;}
h3 {font-size: 1.125rem;}

.center {text-align: center;}
hr {border-bottom: 1px dotted #b2b2b2;}


/*************************
******* Home Page ******
**************************/

#header .navbar-brand .logo.white {display: none;}
#header .navbar-brand img {height: 25px;}
#header .navbar-nav > li > a {line-height: 35px; padding: 10px 13px;}
.navbar-fixed-top .navbar-collapse {max-height: 100%;}

#main-slider {position: relative;}
#main-slider .carousel-caption.mobile {display: none;}

.no-margin {margin: 0; padding: 0;}

#main-slider .carousel h2 {color: #fff;}
#main-slider .carousel .slider-img{text-align: right; position: absolute;}
#main-slider .carousel .item {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  left: 0 !important;
  opacity: 0;
  top: 0;
  position: absolute;
  width: 100%;
  display: block !important;
  height: 400px;
  -webkit-transition: opacity ease-in-out 500ms;
  -moz-transition: opacity ease-in-out 500ms;
  -o-transition: opacity ease-in-out 500ms;
  transition: opacity ease-in-out 500ms;
}

#main-slider .carousel-inner {height: 400px;}

#main-slider .carousel .item:first-child {top: auto; position: relative;}
#main-slider .carousel .item.active {
  opacity: 1;
  -webkit-transition: opacity ease-in-out 500ms;
  -moz-transition: opacity ease-in-out 500ms;
  -o-transition: opacity ease-in-out 500ms;
  transition: opacity ease-in-out 500ms;
  z-index: 1;
}
#main-slider .carousel-control.left, #main-slider .carousel-control.right {background-image: none;}
#main-slider .prev:hover,
#main-slider .next:hover {
  background-color: #000;
}
#main-slider .prev {left: 10px;}
#main-slider .next {right: 10px;}
#main-slider .carousel-indicators li {
  width: 10px;
  height: 10px;
  background-color: #fff;
  margin: 0 15px 0 0;
  position: relative;
}
#main-slider .carousel-indicators .active {
  width: 10px;
  height: 10px;
  background-color: #e4523f;
   margin: 0 15px 0 0;
   border: 1px solid #e4523f;
   position: relative;
}
#main-slider .carousel-indicators .active:after {
  position: absolute;
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background: #e4523f;
  border: 1px solid #e4523f;
  left: -3px;
  top: -3px;
}
#main-slider .carousel-caption {top: 20%; text-align: left;}
#main-slider .carousel-caption h1 {color: #fff;}
#main-slider .carousel-caption h2 {color: #fff;} 
#main-slider .active .animation.animated-item-1 {
  -webkit-animation: fadeInUp 300ms linear 300ms both;
  -moz-animation: fadeInUp 300ms linear 300ms both;
  -o-animation: fadeInUp 300ms linear 300ms both;
  -ms-animation: fadeInUp 300ms linear 300ms both;
  animation: fadeInUp 300ms linear 300ms both;
}
#main-slider .active .animation.animated-item-2 {
  -webkit-animation: fadeInUp 300ms linear 600ms both;
  -moz-animation: fadeInUp 300ms linear 600ms both;
  -o-animation: fadeInUp 300ms linear 600ms both;
  -ms-animation: fadeInUp 300ms linear 600ms both;
  animation: fadeInUp 300ms linear 600ms both;
}
#main-slider .active .animation.animated-item-3 {
  -webkit-animation: fadeInUp 300ms linear 900ms both;
  -moz-animation: fadeInUp 300ms linear 900ms both;
  -o-animation: fadeInUp 300ms linear 900ms both;
  -ms-animation: fadeInUp 300ms linear 900ms both;
  animation: fadeInUp 300ms linear 900ms both;
}
#main-slider .active .animation.animated-item-4 {
  -webkit-animation: fadeInUp 300ms linear 1200ms both;
  -moz-animation: fadeInUp 300ms linear 1200ms both;
  -o-animation: fadeInUp 300ms linear 1200ms both;
  -ms-animation: fadeInUp 300ms linear 1200ms both;
  animation: fadeInUp 300ms linear 1200ms both;
}

#feature {padding: 30px 0}
#feature .item {text-align: center;}
#feature img {max-width: 100%; width: 40%;}
#feature span {color: #8cc63e;}

#services {margin-bottom: 30px;}
#services a {display: block;}
.services-wrap {position: relative; margin-bottom: 2em;}
.services-wrap  img {width: 100%; border-radius: 5px;}
.services-wrap .overlay {
  position: absolute;
  background: rgba(0,0,0, .5);
  bottom: 0;
  border-radius: 0 0 5px 5px;
  color: #fff;
  padding:  1.5rem 2rem;
  width: 100%;
}
.services-wrap .overlay h2 {color: #fff; margin-top: 0;}


/*************************
******* About Page ******
**************************/
.about .banner-header {background: url(../img/pages/about.jpg); background-size: cover;}
.services .banner-header {background-image: url(../img/pages/services.jpg); background-size: cover;}
.solution .banner-header {background-image: url(../img/pages/solution.jpg); background-size: cover;}
.news .banner-header {background-image: url(../img/pages/news.jpg); background-size: cover;}
.cooperation .banner-header {background-image: url(../img/pages/cooperation.jpg); background-size: cover;}
.faq .banner-header {background-image: url(../img/pages/faq.jpg); background-size: cover;}
.careers .banner-header {background-image: url(../img/pages/careers.jpg); background-size: cover;}
.contact .banner-header {background-image: url(../img/pages/contact.jpg); background-size: cover;}
.policy .banner-header {background-image: url(../img/pages/policy.jpg); background-size: cover;}
.sitemap .banner-header {background-image: url(../img/pages/sitemap.jpg); background-size: cover;}


.banner-header {position: relative; background-position: 100% 100%; background-repeat: no-repeat; width: 100%;}
.banner-header .header {position: absolute; width: 100%; bottom: 0; background: rgba(0,0,0, .3);}
.banner-header h1 {color: #fff; margin: .6rem 0; font-size: 1.57em;}
.banner-q {color: #fff; font-size: 1.28rem; padding: 8em 0 8em 9em;}
.banner-q.blue {color: #329db8;} 

.about .header {color: #e4523f;}
.about ul {padding-left: 4em;}
.about .vision {margin-bottom: 2rem;}
.about .vision h2 {font-size: 1.14rem; margin-top: 0;}
.about .vision .underline {padding-bottom: .6rem;}
.about video {width: 100%; height: auto;}

/***********************
******* News Page ******
************************/
.t-list.header {border-bottom: 2px solid #ddd; padding: .5em; font-weight: 600;}
.t-list {border-bottom: 1px solid #ddd; padding: .5em;}
.t-list:last-child {border: none;}
.news .header .time {color: rgba(37, 39, 95, .8);}

/***************************
******* Solution Page ******
****************************/
.solution .item .header {color: #e4523f;}
.brick.seemore {border-top: 4px solid #8cc63e; padding: 1.5em}
.seemore h2 {font-weight: 700; margin: 0 0 1em;}
.seemore .btn {background: #e4523f; color: #fff;}

/***************************
******* Demozone Page ******
****************************/
.demozone {background: url(../img/demozone_bg.jpg) center center no-repeat; background-size: cover;}
.demozone .navbar-default {background: none; border: none;}
.demozone .navbar-brand .logo {display: none;}
.demozone #header .navbar-brand .logo.white {display: block; !importent;}
.demozone .navbar-default .navbar-nav > li > a {color: #fff;}
.demozone .dropdown-menu {background: rgba(255,255,255,.8);}
.demozone .demo-login {margin-top: 10%}
.demozone .demo-login h3 {color: #fff;}
.demozone .demo-login .btn {background: #e4523f; color: #fff;}
.demozone #footer {background: transparent; height: auto;}
.demozone .header.red {color: #e4523f;}
.demozone .header {line-height: 1.7; font-size: 1.7rem;}
.demozone .sub.header {color: #333;}

/***********************************************************************
******* Cooperation / FAQ / Careers / Contact / policy / Sitemap *******
************************************************************************/
.cooperation .media {margin: 30px 0;}
.cooperation .media:first-child {margin-top: 0;}
.cooperation .media-left, .media>.pull-left {padding-right: 20px;}
.cooperation .media-body h4 {margin-bottom: 15px;}

#FAQ .panel-title {color: #e4523f; font-size: 1.28rem; font-weight: 500;}
#FAQ .panel-body {line-height: 1.6;}

.careers .underline.header {color: #25275f; font-size: 1.7rem; margin: 3em 0 1em; border-left: 5px solid #8cc63e; padding-left: 1rem;}
.careers .content-c {padding-left: 1.5rem; line-height: 1.6;}
.careers .content p, .about .content p {margin-bottom: 2rem;}

.policy .item {margin-bottom: 3em; line-height: 1.6;}
.policy ol {counter-reset: ordered;}

.contact form {margin:20px 0 30px;}
.brick.contact-c {position:relative; border-top: 4px solid #8cc63e; margin-bottom:2em; padding: 2.5em 5em;}
.contact-c .underline.header {color: #25275f; font-size: 1.5rem; line-height: 1.7;}
.contact-c .sub.header {color: rgba(37, 39, 95, .8);}
.contact-c .btn {background: #e4523f; color: #fff; margin-bottom: 15px;}
.pen {position: absolute; right: 2em; bottom: -1em;}

.sitemap h3 {font-weight: 600; margin-bottom: 2em;}
.sitemap ul {padding: 0; list-style: none;}
.sitemap .item-sm {height: 200px; text-align: center;}

/***************************
******* Module / View ******
****************************/
#main > .content {margin: 3em 0 2em;}
#main > .content  h1 {font-size: 1.5rem; margin: 0 0 1em; line-height: 1.7;}
.content {line-height: 1.6;}
.content p {margin-bottom: 2rem;}

.items {margin-bottom: 3em;}
.item .content .header {font-size: 1.28rem;}
.item .discription img {max-width: 100%; margin: 2em 0;}


/***************************
******* Module / Elem ******
****************************/
.brick {position: relative; background-color: #fff; margin-bottom: 2em; padding: 1em; border-radius: 5px; border: 1px solid rgba(34, 36, 38, .2)}
.underline, .underline.header {padding-bottom: .3rem; border-bottom: 1px solid rgba(34,36,38,.15);}
.header.wiered {color: #e4523f;}
.header.wieblue {color: #25275f;}

.header .content {display:inline-block; vertical-align: middle;}
.header > img {display: inline-block; margin-top: .14em; width: 1.5em; height: auto; vertical-align: middle;}
.header .sub.header {font-size: 1rem;}

form .error {color: #1ca0d8; margin-bottom: 0; font-weight: normal;}

/*************************
*********** RWD **********
**************************/
@media screen and (min-width: 768px) and (max-width: 979px) {
  #main-slider .carousel-caption {top: 20%;}
  #main-slider .carousel-caption h1 {font-size: 1.5rem;}
  #main-slider .carousel-caption h2 {font-size: 1.28rem; margin-top: 0}
  
  .demozone {background: url(../img/demozone_bg2.jpg) center center no-repeat; background-size: cover;}
  #feature img {max-width: 100%; width: 40%;}
  #main-slider .carousel-inner {height: auto;}
  .cpy.navbar-right {float: none !important;}
  .about .header .content {font-size: 1.28rem;}

  .about .banner-header {background: url(../img/pages/about_p.jpg); background-size: cover;}
  .services .banner-header {background-image: url(../img/pages/services_p.jpg); background-size: cover;}
  .solution .banner-header {background-image: url(../img/pages/solution_p.jpg); background-size: cover;}
  .news .banner-header {background-image: url(../img/pages/news_p.jpg); background-size: cover;}
  .cooperation .banner-header {background-image: url(../img/pages/cooperation_p.jpg); background-size: cover;}
  .faq .banner-header {background-image: url(../img/pages/faq_p.jpg); background-size: cover;}
  .careers .banner-header {background-image: url(../img/pages/careers_p.jpg); background-size: cover;}
  .contact .banner-header {background-image: url(../img/pages/contact_p.jpg); background-size: cover;}
  .policy .banner-header {background-image: url(../img/pages/policy_p.jpg); background-size: cover;}
  .sitemap .banner-header {background-image: url(../img/pages/sitemap_p.jpg); background-size: cover;}

}

@media screen and (max-width: 767px) {
  .navbar-fixed-top {position: initial;}
  #main {padding-top: 0;}
  .navbar {margin-bottom: 0;}
  
  #main-slider .carousel-caption {top: 10%;}
  #main-slider .carousel-caption h1 {font-size: 1.5rem;}
  #main-slider .carousel-caption h2 {font-size: 1.28rem; margin-top: 0}
  #main-slider .carousel-inner {height: auto;}
  
  #feature img {max-width: 100%; width: 20%;}
  .demozone {background: url(../img/demozone_bg2.jpg) center center no-repeat; background-size: cover;}
  .demozone #footer {background: #fff; bottom: initial;}
  .demozone .navbar-default {background: #f8f8f8;}
  .demozone .navbar-brand .logo {display: block;}
  .demozone #header .navbar-brand .logo.white {display: none; !importent;}
  .demozone .navbar-default .navbar-nav > li > a {color: #777;}
  .demozone .navbar-default .navbar-nav > li > a:hover {color: #333;}
  .cpy.navbar-right {float: none !important;}
  .about .header .content {font-size: 1.28rem;}

  .sitemap .item-sm {height: auto; text-align: left; padding-left: 30px;}

  .about .banner-header {background: url(../img/pages/about_p.jpg); background-size: cover;}
  .services .banner-header {background-image: url(../img/pages/services_p.jpg); background-size: cover;}
  .solution .banner-header {background-image: url(../img/pages/solution_p.jpg); background-size: cover;}
  .news .banner-header {background-image: url(../img/pages/news_p.jpg); background-size: cover;}
  .cooperation .banner-header {background-image: url(../img/pages/cooperation_p.jpg); background-size: cover;}
  .faq .banner-header {background-image: url(../img/pages/faq_p.jpg); background-size: cover;}
  .careers .banner-header {background-image: url(../img/pages/careers_p.jpg); background-size: cover;}
  .contact .banner-header {background-image: url(../img/pages/contact_p.jpg); background-size: cover;}
  .policy .banner-header {background-image: url(../img/pages/policy_p.jpg); background-size: cover;}
  .sitemap .banner-header {background-image: url(../img/pages/sitemap_p.jpg); background-size: cover;}

  .t-list.header {display: none;}
}
@media screen and (max-width: 480px) {
  .navbar-fixed-top {position: initial;}
  #main {padding-top: 0;}
  .navbar {margin-bottom: 0;}

  /*#main-slider {background-image: url(../img/banner-phone.jpg); height: 250px;}*/
  #main-slider .carousel-indicators {display: block; bottom: 0;}
  #main-slider .carousel-inner {display: block;}
  #main-slider .carousel-inner img {max-width: 200%;}

  #main-slider .carousel-caption {top: 20%;}
  #main-slider .carousel-caption h1 {font-size: 1.5rem;}
  #main-slider .carousel-caption h2 {}
  #main-slider .carousel .item {height: 200px;}
  
  #main-slider .carousel-caption.mobile {display: none;}
  #main-slider .carousel-caption.mobile h1 {display: none; color: #e4523f; text-shadow: none;}

  .demozone {background: url(../img/demozone_bg3.jpg) center center no-repeat;}
  #feature img {max-width: 100%; width: 25%;}

  .banner-q {padding: 5em 0 6em 3em;}
  .brick.contact-c {padding: 1.5em 3em;}
  .cooperation img {width: 50px;}

  .about .banner-header {background: url(../img/pages/about_m.jpg); background-size: cover;}
  .services .banner-header {background-image: url(../img/pages/services_m.jpg); background-size: cover;}
  .solution .banner-header {background-image: url(../img/pages/solution_m.jpg); background-size: cover;}
  .news .banner-header {background-image: url(../img/pages/news_m.jpg); background-size: cover;}
  .cooperation .banner-header {background-image: url(../img/pages/cooperation_m.jpg); background-size: cover;}
  .faq .banner-header {background-image: url(../img/pages/faq_m.jpg); background-size: cover;}
  .careers .banner-header {background-image: url(../img/pages/careers_m.jpg); background-size: cover;}
  .contact .banner-header {background-image: url(../img/pages/contact_m.jpg); background-size: cover;}
  .policy .banner-header {background-image: url(../img/pages/policy_m.jpg); background-size: cover;}
  .sitemap .banner-header {background-image: url(../img/pages/sitemap_m.jpg); background-size: cover;}


}


/*******************************
*********** Bootstrap **********
********************************/
/*===== Five equal columns in twitter bootstrap =====*/
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

/*************************
*********** RWD **********
**************************/

@media screen and (min-width: 720px){ 
	#main_bn{display:block;}
	#content_pc{display:block;}
	#tablet_bn{display:none;}
	#phone_bn{display:none;}
	#content_mobile{display:none;}
}
/*@media screen and  (min-width:720px) and (max-width: 768px)  { 
	#tablet_bn{display:block;}
	#main_bn{display:none;}
	#phone_bn{display:none;}
}*/
@media screen and (max-width: 720px){ 
	#main_bn{display:none;}
	#content_pc{display:none;}
	#tablet_bn{display:none;}
	#phone_bn{display:block;}
	#content_mobile{display:block;}
}

/*pc banner*/
#main_bn{
	width:100%;
	text-align:center;
}
.bn .bnimg{
	margin:0 auto;
    position:relative;
    overflow:hidden;
	box-sizing:border-box;
}
.bnimg > img { 
height:100%; 
width:100%; 
border:0; 
} 
.bn .bnimg:after{
	padding-top: 20.208%;
    content:"";
    display: block;
}
.bn .bnimg_img{
	position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    width:100%;
    margin:auto;
}

/*tablet banner*/
#tablet_bn{
	width:100%;
	text-align:center;
}
.tabletbn .bnimg{
	margin:0 auto;
    position:relative;
    overflow:hidden;
	box-sizing:border-box;
}
.bnimg > img { 
height:100%; 
width:100%; 
border:0; 
} 
.tabletbn .bnimg:after{
	padding-top: 28.8281%;
    content:"";
    display: block;
}
.tabletbn .bnimg_img{
	position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    width:100%;
    margin:auto;
}

/*phone banner*/
#phone_bn{
	width:100%;
	text-align:center;
}
.phonebn .bnimg{
	margin:0 auto;
    position:relative;
    overflow:hidden;
	box-sizing:border-box;
}
.bnimg > img { 
	height:100%; 
	width:100%; 
	border:0; 
} 
.phonebn .bnimg:after{
	padding-top: 62.37%;
    content:"";
    display: block;
}
.phonebn .bnimg_img{
	position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    width:100%;
    margin:auto;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {background: none;}
.nav > li > a:focus, .nav > li > a:hover {background: none;}
.navbar-brand {padding: 15px 10px;}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {background: rgba(255,255,255,.2);}
.floatimage{ margin: 18px; }
.clear{  clear: both; }
.floatbox{ width:auto ; max-width: 1200px; margin:0px auto;  position: relative; padding-bottom: 30px; padding-top: 15px }
.box{ width:100% ; max-width: 1200px; margin:0px auto; margin-top: 10px; margin-bottom: 10px; position: relative;