body,span,h2,h3{ font-family: 'Noto Sans TC', sans-serif, Microsoft YaHei, Arial,sans-serif ; color: #000;}
a{ text-decoration: none}
section{ width: 100%; display: block; position: relative}
.center{ text-align: center}
.wrapbig{ width: 1400px; margin: 0 auto; background: #fff;}
.wrap{ width: 1200px; margin: 0 auto; position: relative}
.abs{ position: absolute}
.fll{ float: left;}
.flr{ float: right;}
.col-left{ float: left;}
.col-right{ float: right;}
.clear{ clear: both}
p{ line-height: 30px; font-size: 18px;}
.bold{ font-weight: bold;}
.block{ display: block}
.in-blk{ display: inline-block}
.disb{ display: block}
.no-show{ display: none}
.w50{ width: 50%;}
.w33p{ width: 31%; display: inline-block}
.w100p{ width: 100%;}

.width700{ width: 700px; margin: 0 auto}
.width800{ width: 800px; margin: 0 auto}
.width900{ width: 900px; margin: 0 auto}

.mgb-10{ margin-bottom: 10px}
.mgb-20{ margin-bottom: 20px}
.mgb-30{ margin-bottom: 30px}
.mgb-50{ margin-bottom: 50px}
.mgt-10{ margin-top: 10px}
.mgt-20{ margin-top: 20px}
.mgt-30{ margin-top: 30px}
.mgt-40{ margin-top: 40px}
.mgt-50{ margin-top: 50px}
.mgt-50{ margin-top: 50px}
.pgb-30{ padding-bottom: 30px;}
.pgt-20{ padding-top: 20px;}
.pgt-30{ padding-top: 30px;}
.pgt-40{ padding-top: 40px;}
.pgt-50{ padding-top: 50px;}


.color-w{ color: #fff}
.color-bk{ color: #000}
.color-blue{ color: #3260c6}

:root {
  --animate-delay: 0.5s;
}
.text-center{text-align: center}
.text-left{ text-align: left}
.txet-jus{ text-align: justify}
.container{ width: 1200px; margin: 0 auto; position: relative}

body{ font-size: 18px; line-height: 32px;}
/*hamburg*/
#hamburg{ position: absolute; right: 10px; top: 9px; display: block; z-index: 1; }
#hamburg .line{ width: 50px; height: 50px; background: #fff; transition: all 0.5s; }
#hamburg .line span{ position: relative; width: 75%; height: 2px; background: #FF0000; margin: 0 auto; display: block; top: 33.333333%; }
#hamburg .line span:nth-child(2){ top: 66.666666%; }
#hamburg.active .line{ -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -o-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg); } 

.head{ width: 100%; min-height: 100px; opacity: 1; transition: all 0.2s; display: block;z-index: 99; background: #fff; }
.head.fadein{ position: fixed;top: 0;z-index: 9}
.head .container{ width: 1200px; }
.logo{ display: inline-block; width: 200px; margin-top: 25px;}
nav{ text-align: center; float: right; margin-right: 100px; margin-top: 10px;}
nav span{ display: block; font-size: 14px; color:#231815;  margin-top: 5px; }
nav a{display: inline-block; font-size: 20px;font-weight: 700; border: 0; text-align: center; padding: 0 10px; color: #333 ; transition: all 0.5s;position: relative; padding: 20px 20px; text-decoration: none; line-height: 25px;}
nav a.active{color: #0274ba; text-decoration: none;}

nav a:hover{ transition: all 0.5s; text-decoration: none; color: #0274ba}

a:focus{ outline: 0}

/*****************Pages************************/

.kv{ width: 100%; min-height: 700px; background: url(../images/bg-kv.png) top center no-repeat; position: relative}
.kv .container{ text-align: right}
.kv .main{ width: 460px;display: inline-block; margin-right: 120px; margin-top: 120px;}
.scroll{ position: absolute; right: 290px; text-align: center; color: #fff; font-weight: bold; margin-top: 70px;}
.scroll span{  display:block; text-align: center; margin: 0 auto; margin-top: 30px;}

.s1{ width: 100%; min-height: 985px; padding-top: 140px; background: url(../images/bg-s1.png) top center no-repeat}
.s1 .txt{ width: 830px; margin: 0 auto; margin-top: 100px; margin-bottom: 90px; text-align: center; font-size: 21px;}
.s1 .ti{ font-size: 48px;font-weight: bold; text-align: center; color: #00a000; font-weight: 900;}
.s1 .ti2{ text-align: center; margin-bottom: 60px;}
.s1 .ti2 i{ display: inline-block; position: relative; top: 50px; left: -20px}
.s1 .ti2 h2{ display: inline-block; font-size: 36px;font-weight: bold; text-align: center; color: #00a000; border-bottom: 4px solid #00a000; padding-bottom: 10px;}
.s1 .ti2 em{ font-style: italic; margin-right: 15px;}

.slider{ margin-top: 50px;}
.slider .item{ width: 540px; box-sizing: border-box; display: inline-block;background: #fff; padding: 35px 30px; box-shadow: 3px 3px 10px #ddd; margin: 20px; border-radius: 30px; min-height: 390px; vertical-align: top; position: relative}
.slider .t01{ font-size: 28px;  color: #0374ba; margin-bottom: 20px;}
.slider p{ font-size: 20px; color: #666; margin-bottom: 20px;}
.slider span{ font-size: 16px; color: #000}
.slider a{ position: absolute; right: 10px; bottom: 30px;}
.slick-next{ width: 25px; height: 30px; display: inline-block; background: url(../images/right.svg) no-repeat; background-size: contain; text-indent: -9999px;}
.slick-next:hover,.slick-next:focus{ width: 25px; height: 30px;background: url(../images/right.svg) no-repeat; background-size: contain; }
.slick-prev{ width: 25px; height: 30px; display: inline-block; background: url(../images/left.svg) no-repeat; background-size: contain; text-indent: -9999px;}
.slick-prev:hover,.slick-prev:focus{ width: 25px; height: 30px;background: url(../images/left.svg) no-repeat;background-size: contain;  }
.slick-prev, .slick-next{ top: 51%}


.s2{width: 100%; min-height: 701px; padding: 100px 0; background: url(../images/bg-s2.png) #03d4ff top center no-repeat}
.s2 .container{ width: 1000px; margin: 0 auto}

.s2 .col-md-4{ text-align: center; margin-bottom: 30px; transition: all 0.5s}
.s2 .ti{font-size: 48px;font-weight: bold; text-align: center; color: #fff; font-weight: 900; margin-bottom: 60px;}
.s2 .tpimg{ max-width: 232px; margin-bottom: 20px;}
.s2 .col-md-3{ text-align: center}
.s2 a{ color: #fff; font-weight: bold; font-size: 24px;padding-top: 22px;}
.s2 .col-md-4:hover img{transform: scale(1.1); transition: all 0.5s}
.s2 .col-md-4:hover a{ color: #000; transition: all 0.5s}
.s2 a:hover{ color: #000}
.s2 a:hover,.s2 a:visited,.s2 a:focus{ text-decoration: none}
.bt01{ width: 280px; height: 115px; background: url(../images/btn-b2.svg) no-repeat; display: inline-block; text-align: center}
.bt01:hover{ width: 280px; height: 115px; background: url(../images/btn-b2-h.svg) no-repeat}
.bt02{ width: 280px; height: 115px; background: url(../images/btn-w2.svg) no-repeat; display: inline-block; text-align: center}
.bt02:hover{ width: 280px; height: 115px; background: url(../images/btn-w2-h.svg) no-repeat}

.s3{width: 100%; min-height: 1800px; padding: 100px 0; padding-bottom: 0; box-sizing: border-box; background: url(../images/bg-s3-2.png) top center no-repeat}
.s3 .ti{font-size: 48px;font-weight: bold; text-align: center; color: #8bc741; font-weight: 900; margin-bottom: 60px;}
.s3 .item { text-align: center; margin-bottom: 100px;}
.s3 .item img{ width: 100%;}
.s3 h3{ font-size: 28px; font-weight: bold; margin-top: 20px; margin-bottom: 15px; color: #8bc741 }
.s3 p{ font-size: 28px; color: #fff}



.s4{width: 100%; min-height: 5800px; padding-top: 100px;background: url(../images/bg-s4-2.png) top center no-repeat}
.s4 .ti{font-size: 48px;font-weight: bold; text-align: center; color: #000; font-weight: 900; margin-bottom: 60px;}
.s4 a.cfa{ position: absolute; right: 10px; bottom: 0}
.s4 span{ color: #000; background: #fff; padding: 0 10px;}
.s4 .tit{color: #000; margin: 15px 0; font-size: 28px; font-weight: 700;}
.s4 p{ color: #000;}
.s4 .col-md-6{ margin-bottom: 60px; min-height: 640px;}

.pages{ background: #f2f2f2}
article{ width: 1010px; margin: 0 auto; padding-top: 90px; color: #16110f; font-size: 20px;}
article .top .ti{ font-size: 20px; color: #00a961; margin-bottom: 10px;}
article .top h4{font-size: 28px; color: #000; margin-bottom: 30px;}
article .top h2{ font-size: 42px; color: #0374ba; font-weight: 700; margin-bottom: 50px; line-height: 50px;}
article .light{color: #666666}
article .mainimg{ margin-bottom: 30px;}
article .note{font-size: 16px; color: #0374ba;}
article p{ margin-bottom: 65px; line-height: 36px;}
article h3{ color: #00a961; font-size: 28px; margin-bottom: 50px;}
article .date{ color: #666; font-size: 13px;}



#footer{width: 100%; background: #fff; padding: 30px 0; text-align: center}
#footer .row{ margin-bottom: 0;}
#footer span{font-size: 30px; font-weight: bold; margin-right: 20px; display: inline-block; float: left; margin-top: 30px;}
#footer .container div{}
#footer img{ position: relative; top: 0px;}

.backtop{ position: fixed; bottom: 15%; right: -30px;  opacity: 0;z-index: 999;transition: all 0.5s; }
.backtop.fadein{ opacity: 1;right: 10px; transition: all 0.5s; display: block}

.btm-btn{ width: 1040px;margin: 0 auto}
.mb-btm{ position: fixed;bottom: 0}

/*****************RWD************************/
.mb{ display: none;}
.box{ display: none;}

@media only screen and (max-width: 1400px) {
  
}
@media only screen and (max-width: 1200px) {
   
    .container{ width: 100%;}
    .head .container{ width: 100%;}
    .kv{ margin-top: 0px;}
    .kv .sp{ right: calc(50% - 244px); bottom: 20px;}
    nav a:hover:after{display: none}
    nav{ display: none; width: 100%; left: 0; z-index: 99999; position: fixed;background: #fff;}
    nav a{ width: 100%; color: #0076c8; padding: 15px 0; border-bottom: 1px solid #ddd; border-right: 0}
    nav a:hover span{ border: 0; padding: 0}
    nav a.active:after{ display: none;}
    nav a.active{}
    
    
 
  
}
@media only screen and (max-width: 1100px) {
    article{ width: 100%; padding: 50px 5%}
    article img{ width: 100%;}
    .s2 .container{ width: 100%;}
}
@media only screen and (max-width: 1000px) {
    body{ font-size: 16px;}
    .mb{ display: block;}
    .mb section{ width: 100%; float: left;}
    .mb img{ display: inline-block;}
    .pc{ display: none !important}
    .wrap{ width: 100% !important}
    .box{ display: block}
    .head {  padding-top: 0;}
    .head.fadein{ padding-bottom: 0;}
    .mbkv{ background: #f5f3f8}
    .s1 .ti,.s2 .ti,.s3 .ti,.s4 .ti{font-size: 36px; line-height: 55px;}
    .s1{ background-size: cover; padding-bottom: 55px; padding-top: 50px;}
    .slider{ margin-top: 20px;}
    .s1 .txt{ width: 100%; margin-bottom: 60px; margin-top: 60px; font-size: 18px;}
    .s1 .ti2{ margin-bottom: 25px;}
    .s1 .ti2 h2{ font-size: 26px;}
    .s1 .ti2 i{ width: 100%; display: block; text-align: center;position: inherit; top: inherit;left: inherit}
    .s1 .ti2 img{ width: 50px; display: inline-block; text-align: center; }
    .s2{ background:none; background-color: #03bbff;padding-top: 50px; padding-bottom: 50px;}
    .s2 a{font-size: 20px;}
    .s2 .col-md-3{ margin-bottom: 40px;}
    .slider .item{ width: 90%;}
    .slider .t01{ font-size: 26px;}
    .s3{ background-size: cover; padding: 50px 0}
    .s4{ background-size: cover; min-height: inherit; padding: 50px 0}
    
    .s4 .tit{ font-size: 24px;}
    .s4 .col-md-6{ min-height: inherit; margin-bottom: 30px; display: inline-block}
    
    .s4 a.cfa{ position: inherit; right: inherit; bottom: inherit; display: inline-block; float: right; margin-top: 15px;}
    .s4 a.cfa img{ width: 70%; text-align: right; float: right;}
    
}
/*tablet*/
@media only screen and (max-width: 768px) {

    .slick-prev, .slick-next{ width: 20px; top: inherit; bottom: -40px; width: 20px;}
    .slick-prev:hover, .slick-next:hover{ width: 20px;}
    .slick-next{ right: 10%}
    .slick-prev{ left: 10%}
    .s3 .item iframe{ height: 200px;}
    .s3 h3,.s3 p{ font-size: 24px;}
    .s4 .col-md-6{ min-height: 610px;}
    .slider a{ position: inherit; right: inherit; bottom:inherit; float: right; margin-top: 25px;}
    .s2 .col-md-4 img{ width: 100%;}
    
}
   
@media only screen and (max-width: 480px) {
   
    .mb-btm img{ max-width: 240px;}
    .s3 .item iframe{ height: 180px;}
    .s4 .col-md-6{ min-height: inherit}
    
    .slider .item img{ width: 70%; text-align: right; float: right;}
    
    article .top h2{ font-size: 36px;}
    .s2 .tpimg{ margin-bottom: 10px;}
    .s2 .col-md-4 { min-height: 275px;margin-bottom: 15px;}
    .s2 .col-md-4 a{ font-size: 20px;}
}


/*updown*/
@-webkit-keyframes updown {
	0% {
		-webkit-transform: translateY(-12%);
		-moz-transform: translateY(-12%);
		-ms-transform: translateY(-12%);
		-o-transform: translateY(-12%);
		transform: translateY(-12%);
	}
	100% {
		-webkit-transform: translateY(0%);
		-moz-transform: translateY(0%);
		-ms-transform: translateY(0%);
		-o-transform: translateY(0%);
		transform: translateY(0%);
	}
}

@-moz-keyframes updown {
	0% {
		-webkit-transform: translateY(-30%);
		-moz-transform: translateY(-30%);
		-ms-transform: translateY(-30%);
		-o-transform: translateY(-30%);
		transform: translateY(-30%);
	}
	100% {
		-webkit-transform: translateY(0%);
		-moz-transform: translateY(0%);
		-ms-transform: translateY(0%);
		-o-transform: translateY(0%);
		transform: translateY(0%);
	}
}

@-ms-keyframes updown {
	0% {
		-webkit-transform: translateY(-30%);
		-moz-transform: translateY(-30%);
		-ms-transform: translateY(-30%);
		-o-transform: translateY(-30%);
		transform: translateY(-30%);
	}
	100% {
		-webkit-transform: translateY(0%);
		-moz-transform: translateY(0%);
		-ms-transform: translateY(0%);
		-o-transform: translateY(0%);
		transform: translateY(0%);
	}
}

@-o-keyframes updown {
	0% {
		-webkit-transform: translateY(-30%);
		-moz-transform: translateY(-30%);
		-ms-transform: translateY(-30%);
		-o-transform: translateY(-30%);
		transform: translateY(-30%);
	}
	100% {
		-webkit-transform: translateY(0%);
		-moz-transform: translateY(0%);
		-ms-transform: translateY(0%);
		-o-transform: translateY(0%);
		transform: translateY(0%);
	}
}

@keyframes updown {
	0% {
		-webkit-transform: translateY(-30%);
		-moz-transform: translateY(-30%);
		-ms-transform: translateY(-30%);
		-o-transform: translateY(-30%);
		transform: translateY(-30%);
	}
	100% {
		-webkit-transform: translateY(0%);
		-moz-transform: translateY(0%);
		-ms-transform: translateY(0%);
		-o-transform: translateY(0%);
		transform: translateY(0%);
	}
}

.updown{
	-webkit-animation: updown 700ms forwards ease-in-out infinite alternate;
	-moz-animation: updown 700ms forwards ease-in-out infinite alternate;
	-ms-animation: updown 700ms forwards ease-in-out infinite alternate;
	-o-animation: updown 700ms forwards ease-in-out infinite alternate;
	animation: updown 700ms forwards ease-in-out infinite alternate;
}





/* 
green: #3FAF82

*/

.box {
  position: absolute;
  top: 25px;
  right:10px;
/*  transform: translate(-50%, -50%);*/
  width:60px;
  height: 50px;
  background: #0076c8;
    z-index: 99999;
/*  box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3);*/
}

.btnnav {
  position: absolute;
  top: 25px;
  right: -13px;
  transform: translate(-50%, -50%);
  width: 43px;
  cursor: pointer;
}
.btnnav.active{ top: 33px; right: -12px;}
.box .active span+span{ margin-top: 11px;}
.btnnav span {
  display: block;
  width: 100%;
/*  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.3);*/
/*  border-radius: 3px;*/
  height: 5px;
  background: #fff;
  transition: all .3s;
  position: relative;
}

.box span + span {
  margin-top: 7px;
}

.box .active span:nth-child(1) {
  animation: ease .7s top forwards;
}

.box .not-active span:nth-child(1) {
  animation: ease .7s top-2 forwards;
}

.box .active span:nth-child(2) {
  animation: ease .7s scaled forwards;
}

.box .not-active span:nth-child(2) {
  animation: ease .7s scaled-2 forwards;
}

.box .active span:nth-child(3) {
  animation: ease .7s bottom forwards;
}

.box .not-active span:nth-child(3) {
  animation: ease .7s bottom-2 forwards;
}

@keyframes top {
  0% {
    top: 0;
    transform: rotate(0);
  }
  50% {
    top: 22px;
    transform: rotate(0);
  }
  100% {
    top: 10px;
    transform: rotate(45deg);
  }
}

@keyframes top-2 {
  0% {
    top: 22px;
    transform: rotate(45deg);
  }
  50% {
    top: 22px;
    transform: rotate(0deg);
  }
  100% {
    top: 0;
    transform: rotate(0deg);
  }
}

@keyframes bottom {
  0% {
    bottom: 0;
    transform: rotate(0);
  }
  50% {
    bottom: 22px;
    transform: rotate(0);
  }
  100% {
    bottom: 22px;
    transform: rotate(135deg);
  }
}

@keyframes bottom-2 {
  0% {
    bottom: 22px;
    transform: rotate(135deg);
  }
  50% {
    bottom: 22px;
    transform: rotate(0);
  }
  100% {
    bottom: 0;
    transform: rotate(0);
  }
}

@keyframes scaled {
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes scaled-2 {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes barjump {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    top: -10px;
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
    top: 150px;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    top: 250px;
  }
}



.mous{ position: absolute; display: inline-block; bottom: 50px; left: 280px;}
.mous em{ display: block; position: absolute; background: none; top: -30px; left: -22px; color: #01ffff;}
.mous span{ display: block;}
.mous span:after {
  content: "";
  position: absolute;
    z-index: 9999;
}

.mous > span:before {
  background-color: #fff;
  width: 1px;
  height: 30px;
  top: 50%;
  right: 0;
    z-index: 999;
  transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
}

.mous > span:after {
  background-color: #01ffff;
  width: 1px;
  height: 80px;
  top: 50%;
  right: -8px;
    z-index: 999;
  transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  animation-name: mouse;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes mouse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    top: -10px;
    opacity: 0;
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
    top: 40px;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    top: 70px;
    opacity: .3;
  }
}
.biggerbtn{ animation: biggerbtn 500ms forwards ease-in-out infinite alternate;}
@keyframes biggerbtn {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  
  }
}
@keyframes biggerbtn2 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
  
  }
}


/* GENERAL BUTTON STYLING */
.btn-5,
.btn-5::after {
  -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
    transition: all 0.3s;
}

.btn-5 {
  display: block;
  position: relative;
  text-transform: uppercase;
}

.btn-5::before,
.btn-5::after {
  background: #fff;
  content: '';
  position: absolute;
  z-index: -1;
}

.btn-5:hover {
  color: #333;
}
/* BUTTON 5 */
.btn-5 {
  overflow: hidden;
}

.btn-5::after {
  /*background-color: #f00;*/
  height: 100%;
  left: -55%;
  top: 0;
  transform: skew(50deg);
  transition-duration: 0.6s;
  transform-origin: top left;
  width: 0;
}

.btn-5:hover:after {
  height: 100%;
  width: 155%;
}




.biggerbtn{
    animation: biggerbtn 500ms forwards ease-in-out infinite alternate;
}

@keyframes biggerbtn {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  
  }
}
