body,span,h2,h3{ font-family: Microsoft JhengHei, Microsoft YaHei, Arial,sans-serif !important; color: #000}
a{ text-decoration: none}
.clear{ clear: both}
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;}
.clear{ clear: both}
.block{ display: block}
.in-blk{ display: inline-block}
.mgb-50{ margin-bottom: 50px}
.mgb-10{ margin-bottom: 10px}
.mgb-20{ margin-bottom: 20px}
.mgb-30{ margin-bottom: 30px}
.mgt-30{ margin-top: 30px}
.mgt-40{ margin-top: 40px}
.pgb-30{ padding-bottom: 30px;}
.pgt-20{ padding-top: 20px;}
.pgt-30{ padding-top: 30px;}


/*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); } 

.nav2{float: right; margin-top: 50px; margin-top: 30px; }
.nav2 span{ display: block; font-size: 14px; color:#231815;  margin-top: 5px; }
.nav2 a{display: inline-block;  font-size: 22px;font-weight: bold; border: 0; text-align: center;border-right: 1px solid #c9c5c6; padding: 0 20px; color: #231815; transition: all 0.5s}
.nav2 a.active{ color: #FF0000; padding-bottom: 10px;}
.nav2 a:hover{ opacity: 0.7; transition: all 0.5s;}
.nav2 a:hover span{border-bottom: 2px solid #FF0000; padding-bottom: 5px;}
.nav2 a.active span{color: #FF0000; font-size: 14px;;}
.nav2 a:last-child{ border: 0}


#head{ border-bottom: 1px solid #ddd; height: 34px; line-height: 30px;}
#footer{ font-size: 12px; text-align: center;  display: block; clear: both}
#footer p{ font-size: 12px;}
#head span{ float: right; font-size: 12px; margin-right: 15px;}
.hdwrap{ width: 1200px; margin: 0 auto}
.head{ width: 100%; height: 100px;}
.head.fixed{ background: #fff; transition: all 0.5s}
.logo{ display: inline-block; margin-left: 30px; margin-top: 35px; width: 200px;}
.title{ width: 100%; text-align: center}



.kv-ch1{ width: 100%; height: 730px; background: url(../images/ch1-kv-slogan-bg.jpg) center no-repeat}
.kv-ch1 .slogan-01{ position: absolute; top: 5%; left: 20%; z-index: 5}
.kv-ch1 .slogan-02{ position: absolute; top: 18%; left: 38%; z-index: 1}
.kv-ch1 .slogan-03{ position: absolute; top: 5%; left: 10%; z-index: 1}

.kv-ch2{ width: 100%; height: 765px; background: url(../images/ch2-kv-bg.jpg) center no-repeat}
.kv-ch2 .slogan-01{ position: absolute; top: 90px; left: 350px; z-index: 5}
.kv-ch3{ width: 100%; height: 765px; background: url(../images/ch3-kv-bg.jpg) center no-repeat}
.kv-ch3 .slogan-01{ position: absolute; top: 90px; left: 470px; z-index: 5}
.kv-ch3 .slogan-02{ position: absolute; top: 320px; left: 470px; z-index: 5}
.kv-ch4{ width: 100%; height: 765px; background: url(../images/ch4-kv-bg.jpg) center no-repeat}
.kv-ch4 .slogan-01{ position: absolute; top: 45px; left: 410px; z-index: 5}
.kv-ch5{ width: 100%; height: 765px; background: url(../images/ch5-kv-bg.jpg) center no-repeat}
.kv-ch5 .slogan-01{ position: absolute; top: 60px; right: 230px; z-index: 5}

/*****************CH 1************************/

.ch1 .p1{ width: 100%; min-height: 670px; background: url(../images/ch1-p1-bg.jpg) center; padding-top: 80px;}
.ch1 .p2{ width: 100%; min-height: 1180px; background: url(../images/ch1-p2-bg.jpg) center top repeat-y}
.ch1 .p3{ width: 100%; min-height: 450px; background: url(../images/ch1-p3-bg.jpg) center top; padding-top: 180px;}
.ch1 .p4{ width: 100%; min-height: 755px; background: url(../images/ch1-p4-bg.jpg) center top}
.ch1 .p5{ width: 100%; min-height: 185px; background: url(../images/ch1-p5-bg.jpg) center top; cursor: pointer}


.ch1 .p3 .flow > div{ display: inline-block}
.ch1 .p5 .txt{ font-size: 40px; text-align: center; color: #fff; line-height: 180px; font-weight: bold;}
.ch1 .p1 .wrap{ width: 1120px; text-align: center}
.ch1 .p1 .wrap > div{ display: inline-block;}
.ch1 .p2 .wrap{ width: 1000px; text-align: center}
.ch1 .p2 .center{ display: inline-block}
.ch1 .p2 .fll:first-child{ margin-right: 30px; margin-left: 30px;}
.ch1 .p4 .txt .in-blk{ vertical-align: top; margin-right: 30px;} 
.ch1 .p4 .pic{ width: 100%; margin-top: 40px;} 
.ch1 .p4 .pic img{ width: 100%;}
.ch1 .p4 .pic > div{ width: 25%; height: 310px; float: left; overflow: hidden}
.ch1 .p4 .pic > .wp{ height: 310px; overflow: hidden; position: relative}
.ch1 .p4 .pic > .wp:after{ content: ''; width: 5px; height: 310px; background: #fff; display: inline-block; position:absolute; right: 0; top: 0}
.ch1 .p4 .pic > .wp:last-child:after{ display: none}

.ch1 .p4 .pic .allin1{ width: 100%; background: url(../images/ch1-p4-05.jpg) center; display: inline-block;height: 310px; transition: all 0.5s }
.ch1 .p4 .pic .allin1:hover{ transform: scale(1.1)}
.ch1 .p4 .pic .allin2{ width: 100%; background: url(../images/ch1-p4-06.jpg) center;display: inline-block;height: 310px; transition: all 0.5s }
.ch1 .p4 .pic .allin2:hover{ transform: scale(1.1)}
.ch1 .p4 .pic .allin3{ width: 100%;  background: url(../images/ch1-p4-07.jpg) center;display: inline-block;height: 310px; transition: all 0.5s }
.ch1 .p4 .pic .allin3:hover{ transform: scale(1.1)}
.ch1 .p4 .pic .allin4{ width: 100%;  background: url(../images/ch1-p4-08.jpg) center;display: inline-block;height: 310px; transition: all 0.5s }
.ch1 .p4 .pic .allin4:hover{ transform: scale(1.1)}


.job{ width: 960px; margin: 0 auto}
.job .list{ width: 350px; float: left; margin-right: 10px;}
.job .list a{ display: block; font-size: 20px; background-color:#0b4a97; color: #fff; padding: 10px 15px; margin-bottom: 1px; position: relative}
.job .list a i{ margin-right: 20px;}
.job .list a.active{ background: #fe0000}
.job .list a.active:after{content: '';display: block; background: url(../images/icon-arrow.png); width: 11px;height: 13px; position: absolute; right: 10px; top: 15px}
.job .list a.active{background-color:#fe0000}
.job .jb-ct{ width: 600px; min-height: 530px; float: left; background: #fff; box-shadow: 3px 3px 5px #ddd}
.job .box{ padding-top: 70px; padding-left: 25px; display: none}
.job .box.active{ display: block}
.job .box .ti{ width: 100%; margin-bottom: 30px; font-size: 22px; line-height: 36px; font-weight: bold;}
.job .box .ti img{ float: left; margin-right: 15px;}
.job .box ul{ display: block; padding-top: 30px;}
.job .box ul li{ width: 30%; text-align: center; display: inline-block; margin-bottom: 30px; font-size: 22px; font-weight: bold;}
.job .box ul a{ width: 121px; height: 31px; background: url(../images/ch1-p2-join-btn.png); display: inline-block; text-indent: -9999px; margin-top: 5px;}
.job .box ul a:hover{ width: 121px; height: 31px; background: url(../images/ch1-p2-join-btn-hover.png); display: inline-block}

/*****************CH 2************************/
.ch2 .p1{ width: 100%; min-height: 1445px; background: url(../images/ch2-p1-bg.jpg) bottom center no-repeat; display: inline-block}
.ch2 .p2{ width: 100%; min-height: 742px; background: url(../images/ch2-p2-bg.jpg) center no-repeat; padding-top: 30px;}
.ch2 .p3{ width: 100%; min-height: 1101px; background: url(../images/ch2-p3-bg.jpg) center no-repeat; padding-top: 200px;}
.ch2 .chen{ position: relative; top: 90px;}

/*****************CH 3************************/

.ch3 .p1{ width: 100%; min-height: 1235px; background: url(../images/ch3-p1-bg.jpg) center}
.ch3 .p3{ width: 100%; min-height: 858px; background: url(../images/ch3-p3-bg.jpg) center bottom no-repeat; padding-bottom: 200px;}
.ch3 .p4{ width: 100%; min-height: 1530px; background: url(../images/ch3-p4-bg.jpg) center bottom; display: inline-block}
.ch3 .p5{ width: 100%; min-height: 624px; background: url(../images/ch3-p5-bg.jpg) center; padding-top: 200px; }

.ch3 .ct01{ width: 830px; height: 300px; margin: 0 auto; margin-bottom: 30px; position: relative; text-align: center}
.ch3 .ct01 .fll:first-child{ margin-right: 30px;}
.ch3 .man {text-align: center}
.ch3 .man > div{ display: inline-block; margin-right: 30px; margin-top: 80px; cursor: pointer}
.ch3 .man > div a{ display: block; height: 350px;}
.ch3 .m01{ width: 333px; height: 359px; background: url(../images/ch3-p1-06.png)}
.ch3 .m01:hover{ background: url(../images/ch3-p1-06-hover.png)}
.ch3 .m02{ width: 333px; height: 359px; background: url(../images/ch3-p1-07.png)}
.ch3 .m02:hover{ background: url(../images/ch3-p1-07-hover.png)}
.ch3 .m03{ width: 333px; height: 359px; background: url(../images/ch3-p1-08.png)}
.ch3 .m03:hover{ background: url(../images/ch3-p1-08-hover.png)}
.ch3 .p3 .title{ margin-bottom: 40px;}
.ch3 .p4 > div{ margin-bottom: 55px;}
.ch3 .taiwan{ position: relative; width: 1004px; height: 377px; background: url(../images/ch3-p5-02-new.png); margin: 0 auto; position: relative}
.ch3 .taw01{ width: 323px; height: 45px; position: absolute; top: 28px; left: 0px; background: url(../images/ch3-p5-02-btn-01.png);}
.ch3 .taw02{ width: 323px; height: 45px;position: absolute; top: 98px; left: 0px;background: url(../images/ch3-p5-02-btn-08.png);}
.ch3 .taw03{ width: 323px; height: 45px;position: absolute; top: 166px; left: 0px;background: url(../images/ch3-p5-02-btn-02.png);}
.ch3 .taw04{ width: 323px; height: 45px;position: absolute; top: 236px; left: 0px;background: url(../images/ch3-p5-02-btn-03.png);}
.ch3 .taw05{width: 323px; height: 45px; position: absolute; top: 306px; left: -2px;background: url(../images/ch3-p5-02-btn-04.png);}
.ch3 .taw06{width: 271px; height: 45px; position: absolute; top: 97px; right: 0px;background: url(../images/ch3-p5-02-btn-05.png);}
.ch3 .taw07{width: 271px; height: 45px;  position: absolute; top: 170px; right: 0px;background: url(../images/ch3-p5-02-btn-06.png);}
.ch3 .taw08{ width: 271px; height: 45px; position: absolute; top: 245px; right: 0px;background: url(../images/ch3-p5-02-btn-07.png);}

.ch3 .taw01:hover{background: url(../images/ch3-p5-02-btn-01-hover.png);}
.ch3 .taw02:hover{ background: url(../images/ch3-p5-02-btn-08-hover.png);}
.ch3 .taw03:hover{ background: url(../images/ch3-p5-02-btn-02-hover.png);}
.ch3 .taw04:hover{ background: url(../images/ch3-p5-02-btn-03-hover.png);}
.ch3 .taw05:hover{background: url(../images/ch3-p5-02-btn-04-hover.png);}
.ch3 .taw06:hover{background: url(../images/ch3-p5-02-btn-05-hover.png);}
.ch3 .taw07:hover{background: url(../images/ch3-p5-02-btn-06-hover.png);}
.ch3 .taw08:hover{ background: url(../images/ch3-p5-02-btn-07-hover.png);}


/*****************CH 4************************/
.ch4 .p1{ width: 100%; min-height: 1027px; background: url(../images/ch4-p1-bg.jpg) center}
.ch4 .p1 .title img{ position: relative; left: 60px;}
.ch4 .man {text-align: center}
.ch4 .man > div{ display: inline-block; margin-right: 30px; margin-top: 80px; cursor: pointer}
.ch4 .m01{ width: 328px; height: 394px; background: url(../images/ch4-p1-02.png)}
.ch4 .m01:hover{ background: url(../images/ch4-p1-02-hover.png)}
.ch4 .m02{ width: 329px; height: 394px; background: url(../images/ch4-p1-03.png)}
.ch4 .m02:hover{ background: url(../images/ch4-p1-03-hover.png)}
.ch4 .m03{ width: 328px; height: 394px; background: url(../images/ch4-p1-04.png)}
.ch4 .m03:hover{ background: url(../images/ch4-p1-04-hover.png)}
.ch4 .p3 .title{ margin-bottom: 40px;}


/*****************CH 5************************/
.ch5 .p1{ width: 100%; min-height: 2219px; background: url(../images/ch5-p1-bg.jpg) center bottom no-repeat}
.ch5 .p1 { padding-top: 80px;}
.ch5 .p1 .wrap > div{ margin-bottom: 50px;}







.footer{ width: 100%; background: url(../images/bg-benefit.jpg); padding-top: 80px; text-align: center; padding-bottom: 110px;}
.footer .center{ display: inline-block;}

.backtop{ position: fixed; top: 40%; right: 50px; display: none; opacity: 0;z-index: 999;transition: all 0.5s}
.backtop.fadein{ opacity: 1; transition: all 0.5s; display: block}
.backtop:hover{ opacity: 0.7}

.cartop{ position: fixed; top: 40%; right: 50px; display: none; opacity: 0;z-index: 999;transition: all 0.5s}
.cartop.fadein{ opacity: 1; transition: all 0.5s; display: block}
.cartop:hover{ opacity: 0.7}



/*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(-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%);
	}
}

@-ms-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%);
	}
}

@-o-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%);
	}
}

@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%);
	}
}

.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;
}



.mb{ display: none;}
#hamburg{ display: none;}
@media only screen and (max-width: 1250px) {
    .hdwrap{ width: 100%;}
    .logo{ width: 300px;}
    .logo img{width: 100%}
    .ch1 .p1 .wrap > div img{ width: 90%;}
    .ch1 .p3 .flow > div{ width: 19%;}
    .ch1 .p3 .flow > div img{ width: 100%;}
    .ch2 .p1 .fll{ width: 50%}
    .ch2 .p1 .flr{ width: 50%}
    .ch2 .chen{ left: 30px;}
    .ch2 .p3 .fll{ width: 50%}
    .ch2 .p3 .fll img{ width: 100%}
    .ch2 .p3 .flr{ width: 50%}
    .ch2 .p3 .flr img{ width: 100%}
    .ch3 .p3 img{ width: 100%;}
    .ch4 .p3 img{ width: 100%;}
    .kv-ch4 .slogan-01{ left: 280px}
    .ch5 .p1 img{ width: 100%; max-width:1057px; }
}


@media only screen and (max-width: 1100px) {
    .wrap{ width: 100% !important}
    .kv-ch1 .slogan-01{ top: 5%; left: 10%; }
    .kv-ch1 .slogan-02{ top: 18%; left: 30%; }
    .kv-ch1 .slogan-03{ top: 5%; left: 5%; }
    .ch1 .p1 .wrap > .fll,.ch1 .p1 .wrap > .flr{ width: 50%;}
    .kv-ch2 .slogan-01{ left: 300px;}
    .kv-ch3 .slogan-01{ left: 370px}
    .kv-ch3 .slogan-02{ left: 360px}
    .ch3 .ct01{ position: relative;left: -2%}
    .ch3 .man > div{ margin: 0}
    .ch4 .man > div{ margin-right: 0;}
    .ch3 .p1{ min-height: 1165px}
    .kv-ch5 .slogan-01{ right: 120px;}
    
    
}


@media only screen and (max-width: 1000px) {
    .pc{ display: none !important}
    .mb{ display: block;}
    #hamburg{ display: block}
    .head { height: 65px;}
    .nav2{ display: none; width: 100%; margin-top: 13px; z-index: 99; position: relative; background: #fff;}
    .nav2 a{ width: 100%;; padding: 15px 0; border-bottom: 1px solid #ddd; border-right: 0}
    .nav2 a:hover span{ border: 0; padding: 0}
    .wrap,.hdwrap{ width: 100%;}
    .logo{ width: inherit; max-width: 60%; margin-top: 20px; margin-left: 15px;}
    .logo img{width: 100%; max-width: 320px;}
    .fixad{ position: fixed; right: 0; top: 200px;z-index: 3}
    .carfixad{ position: fixed; right: 0; top: 200px;z-index: 3}
    .m33{ margin-top: 50px; text-align: center}
    .m33 span{ width: 30%; display: inline-block; vertical-align: top}
    
    .kv-ch1 .slogan-01{ top: 5%; left: 5%; }
    .kv-ch1 .slogan-02{ top: 21%; right: 25%; }
    .kv-ch1 .slogan-03{ top: 5%; left: 2%; }
    .mb-rarrow{ text-align: center; width: 100%;}
    
    .mbkv-faq{ width: 100%; background: url(../images/mb/m-CH5-kv.jpg); background-size:cover; padding-top: 80%;}
    .mbkv-faq .slo{ width: 40%; position: absolute; right: 10%; top: 30px}
    .mbkv-fut{ width: 100%; background: url(../images/mb/m-CH4-kv-bg.jpg); background-size:cover; padding-top: 80%;}
    .mbkv-fut .slo{ width: 60%; position: absolute; right: 10%; top: 20px}
    
    .mbkv-drea{ width: 100%; background: url(../images/mb/m-CH3-kv.jpg); background-size:cover; padding-top: 80%;}
    .mbkv-drea .slo{ width: 70%; position: absolute; right: 0%; top: 20px}
    .mbkv-drea .slo2{ width: 35%; position: absolute; left: 35%; top: 5%}
    .mbkv-move{ width: 100%; background: url(../images/mb/m-CH2-KV.jpg); background-size:cover; padding-top: 80%;}
    .mbkv-move .slo{ width: 70%; position: absolute; right: 10%; top: 20px}
    
    .m30{ width: 100%;}
    .m30 span{ width: 32%; display: inline-block}
    .m30 span img{ width: 100%;}
    
    
    .mjob{ width: 90%; margin: 0 auto; position: relative; z-index: 99999}
    .mjob .list{ width: 100%; }
    .mjob .list > a{ display: block; font-size: 20px; background-color:#0b4a97; color: #fff; padding: 10px 15px; margin-bottom: 1px; position: relative}
    .mjob .list > a i{ margin-right: 20px;}
    .mjob .list > a.active{ background: #fe0000}
    .mjob .list > a.active:after{content: '';display: block; background: url(../images/mb/arrow-up.png); width: 13px;height: 11px; position: absolute; right: 10px; top: 15px}
    .mjob .list > a:after{content: '';display: block; background: url(../images/mb/arrow-down.png); width: 13px;height: 11px; position: absolute; right: 10px; top: 15px}
    .mjob .list > a.active{background-color:#fe0000}

    .mjob .jb-ct{ width: 90%; margin: 0 auto; min-height: 530px; background: #fff; box-shadow: 3px 3px 5px #ddd}
    .mjob .box{ padding-top: 20px; padding-left: 5px; display: none; border: 1px solid #ddd; background: #fff;}
    .mjob .box.active{ display: block; background: #fff;}
    .mjob .box .ti{ width: 100%;  margin-bottom: 30px; font-weight: bold; display: inline-block}
    .mjob .box .ti span{width: calc(100% - 205px) ; display: inline-block; float: right; font-size: 18px;line-height: 26px; }
    .mjob .box .ti img{ width: 170px; float: left; margin-right: 15px; margin-left: 20px;}
    .mjob .box ul{ display: block; border-top: 1px solid #ddd; }
    .mjob .box ul li{ width: 43%; text-align: center; display: inline-block; padding: 3%; border-bottom: 1px solid #ddd;border-right: 1px solid #ddd; font-size: 17px; font-weight: bold;}
    .mjob .box ul li:nth-child(even){ border-right: 0}
    .mjob .box ul li span{ width: 45%; float: left; font-size: 14px;}
    .mjob .box ul i{ float: right; width: 70px; height: 18px; background: url(../images/ch1-p2-join-btn.png); background-size:contain; display: inline-block; text-indent: -9999px; margin-top: 5px;}
    .mjob .box ul li a{ display: inline-block; width: 100%;}
    .tawp { text-align: center}
    .tawp .t01{ width: 29.4%; float: left;}
    .tawp .t02{ width: 40%; float: left;}
    .tawp .t03{ width: 29.2%; float: left; position: relative;z-index: 66}


    
}