@charset "utf-8";

html{
	font-size: 62.5%; /* sets the base font to 10px for easier math */
}

body {  
  font-size: 16px;
  font-size: 1.6rem;  
  /* sets the default sizing to make sure nothing is actually 10px */
}

*::-webkit-scrollbar {
    width: 0.5em;
}
 
*::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
*::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

.bannerArea{clear:both; position:relative;}
.bannerArea .wrap{width:100%; padding:0}
.bannerArea h1{font-size: 35px; font-size: 3.5rem; font-weight:200; text-align:center; color:#fff;}
.bannerArea h2{font-size: 35px; font-size: 3.5rem; font-weight:200; text-align:center; color:#fff;}
.bannerArea .Txt{font-size: 18px; font-size:1.8rem; text-align:center; color:#fff; line-height: 1.8em; padding:2rem 10% 0 10%;}
.bannerArea .btn{float:none; margin:10px 0 0 0}
.bannerArea .triangle{position:relative; left:50%; margin-left:-57.5px; margin-top:50px; margin-bottom: 20px; pointer-events: none;}
.bannerArea .triTop1{width:115px; height:50px; position:relative; border-top:1px solid #fff; opacity: 0.8}
.bannerArea .triTop2{width:115px; height:50px; position:relative; border-top:1px solid #fff; margin-top:-25px; opacity: 0.5}
.bannerArea .triBottom{position:absolute; margin:auto; top:-40px; left:0; right:0; width:80px; height:80px; transform:rotate(45deg); border-right: 1px solid #fff; border-bottom: 1px solid #fff;}


/* ----------- Animation start----------- */

.bannerArea h1{animation:fadeIn 3s;}
.bannerArea h2{animation:fadeIn 3s;}
.bannerArea .Txt{animation:fadeIn 5s;}
.bannerArea .btn{animation: fadeInUp 3s;}
.bannerArea .triangle{animation: fadeIn 1s infinite alternate}
@keyframes fadeInUp {
	0% {margin-top:150px; opacity: 0;}
	50% {margin-top:50px; opacity: 0.5;}
	100% {opacity: 1;}
}

@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform:translateY(0);}
	40% {transform:translateY(-30px);}
	60% {transform:translateY(-15px);}
}
/* ----------- Animation end----------- */

.btn { font-size: 16px; font-size: 1.6rem; }

.bannerArea .mainBanner, .bannerArea .wrap, .bannerArea {height:100%;}
.bannerArea h1{padding-top:10%;}
.bannerArea h2{padding:2rem 20% 0 20%;}
.bannerArea .wrap{background:url(../images/banner_bg.jpg) no-repeat #000 center -10px fixed; background-size:cover}
.bannerArea .mainBanner{box-shadow: inset 0px 0px 400px 50px rgba(0, 0, 0, .7); transition: height 0.5s;}

.aboutArea {background:#011f3b; color:#fff;}
.aboutArea {padding:15% 5% 0 5%; height:100%; box-sizing: border-box;}
.aboutArea .wrap{height:100%;}
.aboutArea ul{list-style:none; height:90%;}
.aboutArea ul li{padding:0; margin:0; height:100%;}
.aboutArea ul li:last-child{display:inline-block; text-align:center}
.aboutArea h2{font-size: 24px; font-size:2.4rem; font-weight:200; margin:0 0 1em 0}
.aboutArea h2 em{display:block; font-size: 38px; font-size:3.8rem;}
.aboutArea img{display:inline-block; margin:0 0 1em 0; padding:0; width:auto; max-height: 90%; max-width: 100%;}

.productArea{background:#eee;}
.productArea{padding:10% 5% 0 5%; height:100%; box-sizing: border-box;}
.productArea .wrap{height:100%;}
.productArea .titleBox{text-align:center;}
.productArea ul.row{height:70%;list-style: none}
.productArea ul.row li{height:100%;border-left:1px solid #ddd;}
.productArea ul.row li{padding:0 0 0 0; position:relative;}
.productArea ul.row li:first-child{border:none;}
.productArea ul.row li .Img{height:68%;text-align:center; margin:0 auto}
.productArea ul.row li .Img img{width:auto; max-height: 100%;}
.productArea ul.row li .Txt{margin: 0 1em;}
.productArea ul.row li .Txt h3{font-size:30px;font-size:3rem; font-weight:200; color:#333; position:relative; text-align:center;}
.productArea ul.row li .Txt p{margin-top:1em; font-size:14px; font-size:1.4rem; color:#333; line-height:1.4em;}
.productArea ul.row li:nth-child(1){transition-delay:0.2s !important;}
.productArea ul.row li:nth-child(2){transition-delay:0.4s !important;}
.productArea ul.row li:nth-child(3){transition-delay:0.6s !important;}
.productArea ul.row li:nth-child(4){transition-delay:0.8s !important;}
.productArea h2{font-size:24px; font-size:2.4rem; font-weight:200; margin:0 0 0.5em 0}
.productArea h2 em{font-size:50px; font-size:5rem;}
.productArea p{font-size:14px; font-size:1.4rem;} 
.productArea .btn{margin-top:0.8em;}

.partnerArea {background: #fff; color:#333;}
.partnerArea {padding:15% 5% 0 5%; height:100%; box-sizing: border-box;}
.partnerArea .wrap{height: 100%;}
.partnerArea ul{height: 80%;list-style:none}
.partnerArea ul li{height: 100%;display:inline-block;}
.partnerArea ul li{padding:0; margin:0;}
.partnerArea ul li:first-child{margin:-20px 0 0 0;}
.partnerArea ul li:last-child{margin:0 0 0 50px;}
.partnerArea img{display:block; margin:0; padding:0; width:auto; max-height: 90%; max-width: 100%;}
.partnerArea h2{font-size:24px; font-size:2.4rem; font-weight:200; margin:0 0 0.5em 0}
.partnerArea h2 em{font-size:50px; font-size:5rem;}
.productArea p{font-size:14px; font-size:1.4rem;} 

.contactArea{background:#eee; position:relative; overflow:hidden;}
.contactArea{padding:10% 5% 0 5%; height:100%; box-sizing: border-box;}	
.contactArea .titleBox{text-align:center;}
.contactArea .row{margin:0;}
.contactArea .Img p{margin-top:25px; font-size:14px; font-size:1.4rem; color:#666; line-height:2;}
.contactArea .Img b{color:#6f60aa; font-size:25px; font-size:2.5rem; font-weight:bolder}
.contactArea .Img .phone{color:#d60000; font-weight:600; letter-spacing:0; white-space:nowrap}
.contactArea .formBox{padding:0}
.contactArea .formBox .box{border-radius:4px; position:relative;}
.contactArea .formBox .box i{display:block; font-size:16px; color:#aaa; width:37px; line-height:35px; text-align:center; position:absolute; right:-2px; top:-2px; border-radius:4px; transition:all 0.4s ease;}
.contactArea .formBox .box input[type="text"], .contactArea .formBox .box textarea{border:none; background:#fff; outline:none; width:100%; padding:5px 40px 5px 5px; box-sizing:border-box; font-size:0.9em; font-family:"Microsoft YaHei UI", "Microsoft JhengHei", Helvetica, Arial, sans-serif;}
.contactArea .formBox .box input[type="text"]{height:35px; -webkit-appearance:none;}
.contactArea .formBox .box textarea{height:15vh; min-height: 35px; max-height: 100px; -webkit-appearance:none;}
.contactArea .formBox .box input[type="text"]:focus ~ i, .contactArea .formBox .box textarea:focus ~ i{color:#6f60aa;}
.contactArea .formBox label{color:#a9a9a9; line-height:2.5em}
.contactArea .formBox .btn{margin:0 0 0 10px;}
.contactArea .formBox .btn .hvr-icon-forward:before{right:11px; top:11px;}
.contactArea .map{width:100%; height:100%; position:absolute; left:0; top:0; z-index:1;}
.contactArea .error{box-shadow:0 0 2px 1px #F30;}
.contactArea h2{font-size:15px; font-size:1.5rem; font-weight:200; margin:0 0 1em 0}
.contactArea h2 em{font-size:30px; font-size:3rem;}
.contactArea .Img{padding:0}	
.contactArea .Img .phone{font-size:20px;font-size:2rem}	
.contactArea form > div { padding-top: 0; }

.careerArea{background: linear-gradient(#d9e4f0 15%, #f2f2f2 50%); color:#333;}
.careerArea .titleBox{text-align:center;}
.careerArea .remark{text-align:right; font-size:0.9em; margin:0 0 0.5em 0; color:#666}
.careerArea .content{margin:20px 0 0 0}
.careerArea h3{background:#fff; padding:10px 15px; font-weight:300; margin:0 0 2px 0; color:#6f60aa}
.careerArea h4{font-size:1em; margin:0.5em 0 0.5em 15px; font-weight:600;}
.careerArea ul{width:100%; margin:0 0 1em 0;}
.careerArea ul li {list-style:disc; margin:0 0 0.5em 45px; font-size:0.8em;}
.careerArea ul p {margin:0 0 0.5em 15px; font-size:0.8em; line-height:2.5em}
.careerArea .postDetail{display:none; width:100%; background:rgba(255,255,255,0.4); padding:15px 10px; margin:2px 0; box-sizing:border-box}
.careerArea .contralBtn{float:right; padding:0 10px;font-size:1.5em; color:#6f60aa; cursor:pointer}
.careerArea .job a{color:#4285f4; border:1px solid #4285f4; padding:5px 10px;}
.careerArea .openBtn{display:block;}
.careerArea .closeBtn{display:none;}
.careerArea{padding:120px 0 120px 0;}	
.careerArea h2{font-size:15px; font-size:1.5rem; font-weight:200; margin:0 0 1em 0}
.careerArea h2 em{font-size:20px;font-size:2rem;}
.careerArea h3{font-size:13px;font-size:1.3rem;} 
.careerArea .btn{margin-top:50px}

#section6 {display: none;}

section {
	width: 100%;
	height: 100vh;
}

@media only screen and (min-width:1366px){

section {
	min-height: 717px;
}
	
}

@media only screen and (max-width:1366px){

section {
	min-height: 682px;
}

}

@media only screen and (max-width:1024px){

section {
	min-height: 682px;
}

html{
	font-size: 55%;
}

}

@media only screen and (max-width:768px){

section {
	min-height: 682px;
}

html{
	font-size: 55%;
}

.bannerArea h1 {padding-top: 15%;}

}

@media only screen and (max-width:720px){

section {
	min-height: auto;
	max-height: none;
	height: auto;
}

html{
	font-size: 55%;
}

.aboutArea,
.productArea,
.partnerArea,
.contactArea {padding-bottom:5%;}

.bannerArea .Txt{padding:2rem 10% 0 10%;}

.productArea ul.row li {border-left: 0px;}

.partnerArea ul li:last-child{margin:0 0 0 0;}

.bannerArea h1 {padding-top: 15%;}
.aboutArea {padding:15% 10% 5% 5%;}
.productArea {padding:15% 10% 5% 5%;}
.partnerArea {padding:20% 10% 5% 5%;}
.contactArea {padding:15% 10% 5% 5%;}

}


@media only screen and (min-device-width: 320px) 
  and (max-device-width: 736px)
{

section {
	min-height: auto;
	max-height: none;
	height: auto;
}

html{
	font-size: 55%;
}

.aboutArea,
.productArea,
.partnerArea,
.contactArea {padding-bottom:5%;}

.productArea ul.row li {border-left: 0px;}

}


/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* Portrait */
@media only screen and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
 { 

 .bannerArea .wrap{background:url(../images/banner_bg.jpg) no-repeat #000 center 1em fixed; background-size:240%}	
 .bannerArea .mainBanner{box-shadow: inset 0px 0px 150px 30px rgba(0, 0, 0, .7);}
 .bannerArea .Txt{padding:2rem 10% 0 10%;}
 .bannerArea h1 {padding-top: 25%;}
 .bannerArea .btn {margin: 10px 0 0 0;}

 .aboutArea {padding:20% 10% 5% 5%;}
 .productArea {padding:20% 10% 5% 5%;}
 .productArea ul.row li .Img img {width:90%;}
 .partnerArea {padding:25% 10% 5% 5%;}
 .partnerArea ul li:last-child{margin:0 0 0 0;}
 .contactArea {padding:25% 10% 5% 5%;}

 footer .Txt .info{margin-right: 15%;}

}

/* Landscape */
@media only screen and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

  .bannerArea h1 {padding-top: 10%;}
  .aboutArea {padding:10% 10% 5% 5%;}
  .productArea {padding:10% 10% 5% 5%;}
  .partnerArea {padding:15% 10% 5% 5%;}
  .contactArea {padding:10% 10% 5% 5%;}

}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

  .bannerArea .wrap{background:url(../images/banner_bg.jpg) no-repeat #000 center 2em fixed; background-size:240%}	
  .bannerArea .mainBanner{box-shadow: inset 0px 0px 150px 30px rgba(0, 0, 0, .7);}
  
  .bannerArea h1 {padding-top: 30%;}
  .bannerArea .btn {margin: 10px 0 0 0;}

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

  .bannerArea .wrap{background:url(../images/banner_bg.jpg) no-repeat #000 62% -1em fixed; background-size:200%}	
  .bannerArea .mainBanner{box-shadow: inset 0px 0px 150px 30px rgba(0, 0, 0, .7);}

  .bannerArea .Txt{padding:2rem 10% 0 10%;}
  .bannerArea .btn {margin: 10px 0 0 0;}
  .aboutArea {padding:10% 10% 5% 5%;}
  .productArea {padding:10% 10% 5% 5%;}
  .partnerArea {padding:15% 10% 5% 5%;}
  .contactArea {padding:10% 10% 5% 5%;}

}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

  html{
	  font-size: 60%;
  }

  .bannerArea .wrap{background:url(../images/banner_bg.jpg) no-repeat #000 50% 2.5em fixed; background-size:250%}	
  .bannerArea .mainBanner{box-shadow: inset 0px 0px 150px 30px rgba(0, 0, 0, .7);}

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

  html{
	  font-size: 60%;
  }

  .bannerArea .wrap{background:url(../images/banner_bg.jpg) no-repeat #000 62% -2em fixed; background-size:160%}
  .bannerArea .mainBanner{box-shadow: inset 0px 0px 150px 30px rgba(0, 0, 0, .7);} 

  .bannerArea .Txt{padding:2rem 10% 0 10%;}
  .bannerArea .btn {margin: 10px 0 0 0;}
  .aboutArea {padding:10% 10% 5% 5%;}

}

/* ----------- iPhone X ----------- */
/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

  section {
	  min-height: auto;
	  max-height: none;
	  height: auto;
  }

  .bannerArea .wrap {
	background-size: 300%;
  }

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

  section {
	  min-height: auto;
	  max-height: none;
	  height: auto;
  }

}


/* ----------- iPad 1, 2, Mini and Air ----------- */
/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

  section {
	  min-height: auto;
	  max-height: none;
	  height: auto;
  }

  html{
	  font-size: 70%;
  }

  .aboutArea,
  .productArea,
  .partnerArea,
  .contactArea {padding-bottom:5%;}

  .bannerArea .wrap{background:url(../images/banner_bg.jpg) no-repeat #000 50% 2.5em fixed; background-size:200%}	
  .bannerArea .mainBanner{box-shadow: inset 0px 0px 180px 50px rgba(0, 0, 0, .7);}
  .bannerArea .Txt {padding: 2rem 10% 0 10%;}

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

  section {
	  min-height: auto;
	  max-height: none;
  }

  html{
	  font-size: 70%;
  }

  .bannerArea .wrap{background:url(../images/banner_bg.jpg) no-repeat #000 62% -4em fixed; background-size:150%}	
  .bannerArea .mainBanner{box-shadow: inset 0px 0px 180px 50px rgba(0, 0, 0, .7);}
  .bannerArea .Txt {font-size: 15px; font-size:1.5rem;; padding: 2rem 10% 0 10%;}

  .bannerArea h1 {padding-top: 10%;}

}



/* ----------- iPad Pro 12.9" ----------- */

/* Portrait */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

  section {
	  min-height: auto;
	  max-height: none;
	  height: auto;
  }

  html{
	  font-size: 85%;
  }

  .aboutArea,
  .productArea,
  .partnerArea,
  .contactArea {padding-bottom:5%;}

  .bannerArea .wrap{background:url(../images/banner_bg.jpg) no-repeat #000 50% 0em fixed; background-size:180%;}	
  .bannerArea .mainBanner{box-shadow: inset 0px 0px 180px 50px rgba(0, 0, 0, .7);}
  .bannerArea .Txt {padding: 2rem 10% 0 10%;}
  
}

/* Landscape */
@media only screen 
  and (min-device-width: 1366px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

  section {
	  min-height: auto;
	  max-height: none;
  }

  html{
	  font-size: 85%;
  }

  .bannerArea .wrap{background:url(../images/banner_bg.jpg) no-repeat #000 62% -4em fixed; background-size:150%}	
  .bannerArea .mainBanner{box-shadow: inset 0px 0px 180px 50px rgba(0, 0, 0, .7);}
  .bannerArea .Txt {padding: 2rem 10% 0 10%;}

  .bannerArea h1 {padding-top: 15%;}

}