@charset "utf-8";
/* CSS Document */

@import url("reset.css");

html { width:100%; height: 100%;}
html, body { margin:0; padding:0;}
body { font-family:"微軟正黑體",Arial, Helvetica, sans-serif; font-size:13px ; line-height:18px; color:#555; width:100%; letter-spacing:1px; -webkit-text-size-adjust: none; overflow-x: hidden; background:#FFF;}
a{ text-decoration:none;}

.banner{ display:block; width:100%; max-height:500px; position:relative; z-index:1; overflow:hidden;}
.banner img{ display:block; width:100%; height:auto;}
.banner .mask{ display:block; width:100%; height:280px; position:absolute; left:0; bottom:0; background:url(../images/banner_mask.png) no-repeat center bottom;}
.banner .logo{ display:block; width: 709px; margin:-170px 0 0 -354px; position:absolute; top:50%; left:50%;}
.banner .logo h1{ display:block; width:60%; max-width:424px; height:37px; background:url(../images/slogen.png) no-repeat; background-size:100% auto; position:absolute; top:55%; left:30%; text-indent:-5000px;}
.banner .logo img{ width:100%; height: auto;}
.banner .logo .flash{ display:block; width:60%; max-width:424px; height:37px; background:url(../images/slogen2.png) no-repeat; background-size:100% auto; position:absolute; top: 55%; left:30%; text-indent:-5000px;}

.part1{ display:block; width:90%; max-width:1200px; margin:-7% auto 50px auto; overflow:hidden; position:relative; z-index:9; padding:30px 0 0 0;}
.part1 .phone{ display:block; width:32%; margin:0 0 0 10%; float:left;}
.part1 .phone img{ width:100%; height:auto; opacity:0; transform:scale(0.8,0.8)}

.part1 .main{ display:block; width:55%; padding:10% 0 70px 0; float:right; background:url(../images/people01.png) no-repeat 100% 100%;}
.part1 .main h2{ display:block; width:100%; max-width:520px; font-size:40px; line-height:50px; color:#1b1b1b; letter-spacing:0; text-align:center;}
.part1 .main h2 strong{ color:#ff8e14;}
.part1 .main p.text1{ display:block; width:100%; max-width:520px; margin:0 0 20px 0;  font-size:33px; line-height:45px; color:#1b1b1b; font-weight: bold; text-align:center;}
.part1 .main p.text1 strong{ color:#ff8e14;}
.part1 .main p.text2{ display:block; width:100%; max-width:520px;  margin:0 0 30px 0;  font-size:22px; line-height:45px; color:#FFF; font-weight: bold; text-align:center; background:#308e2f;background: linear-gradient(to right,#70b557,#2f8e2f); border-radius:25px;}
.part1 .main p.text3{ display:block; width:100%; max-width:450px;  margin:0 0 30px 0;  font-size:20px; line-height:35px; color:#1b1b1b; text-align:center; letter-spacing:0;}
.part1 .main p.text3 img{ display: inline-block; width:20px; height:20px; margin:0 5px 0 0px;}
.part1 .main p.text3 span{ display:inline-block; margin:0 15px 0 0;}
.part1 .main p.tel{display:block; width:100%; max-width:450px;  font-size:20px; line-height:45px; color:#1b1b1b; text-align:center;}
.part1 .main p.tel a{ display:inline-block; margin:0 0 0 10px; font-size:50px; line-height:55px; color:#a01313; font-family:Arial; font-weight: bolder;}

.part2{ display:block; width:100%;  margin:0 auto 0 auto; position:relative; z-index:9; background:url(../images/part2_bg.jpg) repeat-x left bottom;}
.part2 .main{ display:block; width:90%; max-width:1200px; margin:0 auto 0 auto; padding:250px 0 0 0; position:relative;}
.part2 img.peopel{ display: block; width:100%; max-width:749px; margin:0 0 0 10%;}
.part2 .main ul{ display:block; width:100%; position: absolute; top:0; left:0;}
.part2 .main ul li{ display:block; width:50%; position:absolute;}
.part2 .main ul li img{ width:100%; height:auto;}
.part2 .main ul li.text1{ max-width:289px; left:0; top:200px; opacity:0; transform:scale(0.8,0.8)}
.part2 .main ul li.text2{ max-width:282px; left:23%; top:0px; opacity:0; transform:scale(0.8,0.8)}
.part2 .main ul li.text3{ max-width:282px; left:54%; top:0px; opacity:0; transform:scale(0.8,0.8)}
.part2 .main ul li.text4{ max-width:289px; right:0%; top:200px; opacity:0; transform:scale(0.8,0.8)}

.part3{ display:block; width:100%; max-width:1200px;  margin:0 auto 100px auto; padding:150px 0 0 0; overflow:hidden; position:relative; background: url(../images/line.png) no-repeat center top;}
.part3 .phone{ display:block; width:50%; max-width:567px; float:left;}
.part3 .phone img{ width:100%; height:auto;}
.part3 .text{ display:block; width:60%; max-width:674px; margin:0 0 0 -10%; padding:30px 0 0 0; float:right;}
.part3 .text .text1{ display:block; width:100%; max-width:633px; margin:0 auto 0px auto; position:relative;}
.part3 .text .text1 img{ width:100%; height:auto;}
.part3 .text .text1 .icon{ display:block; width:78px; height:100%; position: absolute; left:-78px; top:0;}
.part3 .text .text1 .icon img{ width:100%; height:auto;}
.part3 .text .text2{ display:block; width:100%; max-width:674px; margin:0 auto 0px auto; position:relative;}
.part3 .text .text2 img.slo{ position:absolute; top:8%; left:9%;}
.part3 .text .text2 img.people{ position:absolute; bottom:0%; right:0%;}
.part3 .text .text2 .mob{ display: none;}
.part3 .text p.tel{display:block; width:100%; font-size:20px; line-height:45px; color:#1b1b1b; text-align:center;}
.part3 .text p.tel a{ display:inline-block; margin:0 0 0 10px; font-size:50px; line-height:55px; color:#a01313; font-family:Arial; font-weight: bolder;}

.part4{ display:block; width:100%; max-width:1200px;  margin:0 auto 0 auto; position:relative; text-align:center;}
.part4 img{ width:100%; max-width:966px; height:auto; opacity:0; transform:scale(0.8,0.8)}
.part4 img.mol{ display: none;}

.part5{ display:block; width:100%;  margin:-10px auto 0 auto; padding:150px 0 0 0; overflow:hidden; position:relative; background: url(../images/line.png) no-repeat center top;}
.part5 h3{ margin:0 0 50px 0; font-size:35px; line-height:42px; color:#108010; text-align:center;}
.part5 .main{ display:block; width:100%; margin:0 auto; background:url(../images/part5_bg.jpg) repeat-x left bottom;}
.part5 .main .form{ display: block; width:90%; max-width:1024px; margin:0 auto; padding:50px 0; background:#ededed; border-radius:25px;}
.part5 .main .form h4{ display:block; width:90%; margin:0 auto 30px auto; font-size:28px; line-height:65px; color:#FFF; background:#80644c; text-align:center; border-radius:40px;}
.part5 .main .form ul{ display:block; width:90%; margin:0 auto}
.part5 .main .form ul li{ display:block; width:100%; margin:0 0 20px 0; padding:0 0 30px 0; background:url(../images/line2.png) repeat-x left bottom; overflow:hidden;}
.part5 .main .form ul li.last{ margin:0; padding:0; background: none;}
.part5 .main .form ul li p.text{ display:block; width:32%; margin:0 2% 0 0; font-size:20px; line-height:45px; color:#1f1d1d; float:left; font-weight: bold;}
.part5 .main .form ul li p.text.last{ margin:0;}
.part5 .main .form ul li p.text strong{ color:#900d0d;}
.part5 .main .form ul li p.text input{ display:block; width:100%; height:55px; padding:0 20px; background:#FFF; border:1px solid #cccccc; font-size:16px; color:#111;}
.part5 .main .form ul li p.text2{ display:block; width:100%; margin:0 0 0 0; font-size:20px; line-height:45px; color:#1f1d1d; font-weight: bold;}
.part5 .main .form ul li p.text2 strong{ color:#900d0d;}
.part5 .main .form ul li span{ display:inline-block; margin: 0 30px 0 0; font-size:20px; line-height:45px; color:#333;}
.part5 .main .form ul li span input{ display:inline-block; margin:0 10px 0 0;}
.part5 .main .form ul li textarea{ display:block; width:100%; height:150px; padding:20px; background:#FFF; border:1px solid #cccccc; font-size:16px; line-height:21px; color:#111;}
.part5 .main .form ul li .code{ display:block; width:100%; overflow:hidden; position:relative;}
.part5 .main .form ul li .code input{ display:block; width:43%; height:55px; padding:0 20px; background:#FFF; border:1px solid #cccccc; font-size:16px; color:#111; float:left;}
.part5 .main .form ul li .code p{ display:block; height:38px; margin:0 0 0 10px; position:absolute; left:calc( 40% - 110px); top:8px;}
.part5 .main .form ul li .code p a{ display:inline-block; width:38px; height:38px; background:url(../images/reload.jpg) no-repeat;}
.part5 .main .form ul li .code a.submin{ display:block; width:33%; height:60px; float: right; background:#292929 url(../images/submin_icon.png) no-repeat 90% center; border-radius:30px; font-size:20px; line-height:60px; color:#FFF; text-align:center; font-weight: bold;}

footer{ display:block; width:100%; padding:30px 0 30px 0; background:#389335; font-size:18px; line-height:35px; color:#FFF; letter-spacing:3px; text-align:center;}
footer a{ color:#FFF;}

.flashm{ -webkit-animation-name: flash;  -moz-animation-name: flash;  animation-name: flash; -webkit-animation-duration: 0.8s; -moz-animation-duration: 0.8s;  animation-duration: 0.8s;  -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both;  animation-fill-mode: both;  animation-iteration-count: infinite;}

/*bg1*/
@keyframes flash { 
0% { opacity:0;  }
50% { opacity:1; }
100% { opacity:0; }
}
@-moz-keyframes flash { 
0% { opacity:0;}
50% { opacity:1;}
100% { opacity:0;}
}
@-webkit-keyframes flash { 
0% { opacity:0; }
50% { opacity:1;}
100% { opacity:0; }
}

.flashm2{ -webkit-animation-name: flash2;  -moz-animation-name: flash2;  animation-name: flash2; -webkit-animation-duration: 0.8s; -moz-animation-duration: 0.8s;  animation-duration: 0.8s;  -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both;  animation-fill-mode: both;  animation-iteration-count: infinite;}

/*bg1*/
@keyframes flash2 { 
0% { color:#a01313;  }
50% { color:#e9506d; }
100% { color:#a01313; }
}
@-moz-keyframes flash2 { 
0% { color:#a01313;  }
50% { color:#e9506d; }
100% { color:#a01313; }
}
@-webkit-keyframes flash2 { 
0% { color:#a01313;  }
50% { color:#e9506d; }
100% { color:#a01313; }
}

.flashm3{ -webkit-animation-name: flash3;  -moz-animation-name: flash3;  animation-name: flash3; -webkit-animation-duration: 0.8s; -moz-animation-duration: 0.8s;  animation-duration: 0.8s;  -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both;  animation-fill-mode: both;  animation-iteration-count: infinite;}

/*bg1*/
@keyframes flash3 { 
0% { color:#108010;  }
50% { color:#ffad1f; }
100% { color:#108010; }
}
@-moz-keyframes flash3 { 
0% { color:#108010;  }
50% { color:#ffad1f; }
100% { color:#108010; }
}
@-webkit-keyframes flash3 { 
0% { color:#108010;  }
50% { color:#ffad1f; }
100% { color:#108010; }
}

.bgm2{ -webkit-animation-name: bgf;  -moz-animation-name: bgf;  animation-name: bgf; -webkit-animation-duration: 0.8s; -moz-animation-duration: 0.8s;  animation-duration: 0.8s;  -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both;  animation-fill-mode: both;  animation-iteration-count: infinite;}

/*bg1*/
@keyframes bgf { 
0% { background-position:100% 100%; background-size: 261px 261px;}
50% {  background-position:100% 90%; background-size: 261px 271px;}
100% {  background-position:100% 100%; background-size: 261px 261px;}
}
@-moz-keyframes bgf { 
0% { background-position:100% 100%; background-size: 261px 261px;}
50% {  background-position:100% 90%; background-size: 261px 271px;}
100% {  background-position:100% 100%; background-size: 261px 261px;}
}
@-webkit-keyframes bgf { 
0% { background-position:100% 100%; background-size: 261px 261px;}
50% {  background-position:100% 90%; background-size: 261px 271px;}
100% {  background-position:100% 100%; background-size: 261px 261px;}
}

.fadeInUp{ -webkit-animation-name: fade;  -moz-animation-name: fade;  animation-name: fade; -webkit-animation-duration: 0.6s; -moz-animation-duration: 0.6s;  animation-duration: 0.6s;  -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both;  animation-fill-mode: both;}

/*bg1*/
@keyframes fade { 
0% { opacity:0; transform:scale(0.8,0.8)}
80% { opacity:1; transform:scale(1.1,1.1)}
100% { opacity:1; transform:scale(1,1)}
}
@-moz-keyframes fade { 
0% { opacity:0; transform:scale(0.8,0.8)}
80% { opacity:1; transform:scale(1.1,1.1)}
100% { opacity:1; transform:scale(1,1)}
}
@-webkit-keyframes fade { 
0% { opacity:0; transform:scale(0.8,0.8)}
80% { opacity:1; transform:scale(1.1,1.1)}
100% { opacity:1; transform:scale(1,1)}
}

@media screen and (min-width: 1020px) {
}

@media screen and (max-width: 960px) {
}
@media screen and (max-width: 780px) {
	.banner{ max-height:300px;}
	.banner img{ display:block; width:250%; height:auto; margin:0 0 0 -140%;}
	.banner .logo{ width:100%; background-size:100% auto; margin:0; top:12%; transform: translate(-50%,0%)}
	.banner .logo img{ margin:0;}
	.banner .mask{ background-position: 46% 100%}
	.part1{ width:80%; margin:-20% auto 0px auto;}
	.part1 .phone{ width:70%; float: none; margin:0 auto;}
	.part1 .main{ width:100%; padding:0 0 280px 0; background-size: auto 220px;}
	.part1 .main h2{ font-size:30px; line-height:40px; text-align:left;}
	.part1 .main p.text1{ font-size:25px; line-height:30px; text-align:left;}
	.part1 .main p.text2{ font-size:18px; line-height:22px; padding:10px 0; margin:0 0 10px 0;}
	.part1 .main p.text3{ text-align:left;}
	.part1 .main p.tel{ text-align:left; line-height:30px;}
	.part1 .main p.tel a{ font-size:40px; margin:0;}
	
	.part2 .main{ width:100%;  background:#e8e8e8; padding:50px 0 0 0;}
	.part2 .main ul{ position: relative!important;}
	.part2 .main ul li{ width:100%; margin:0 auto 20px auto; position: relative!important; top: inherit !important; left:inherit !important;}
	.part2 img.peopel{ margin:0;}
	
	.part3{ padding:80px 0 0 0;}
	.part3 .phone{ width:100%; float:none;}
	.part3 .text{ width:90%; float:none; margin:0 auto;}
	.part3 .text .text1{ margin:0 auto 20px auto;}
	.part3 .text .text1 .icon{ display: none;}
	.part3 .text .text2{ margin:0 auto 20px auto;}
	.part3 .text .text2 img{ display: none;}
	.part3 .text .text2 img.slo{ display: block; width:90%; left:5%; top:5%;}
	.part3 .text .text2 img.people{ display:block; width:50%; top: -250px; left:inherit !important; float:right;}
	.part3 .text .text2 .mob{ display: block; width:100%;}
	.part3 .text p.tel{ margin:0px 0 0 0; clear: both; text-align:left;}
	.part3 .text p.tel a{ margin:0;}
	.part4 img{ display: none;}
	.part4 img.mol{ display: block; width:90%; margin:0 auto;}
	.part5 h3{ width:90%; margin:0 auto 20px auto; font-size:30px; line-height:35px;}
	.part5 .main .form ul li p.text{ width:100%; margin:0 0 15px 0;}
	.part5 .main .form ul li .code p{ left: calc(calc( 100% - 135px))}
	.part5 .main .form ul li .code input{ width:100%; margin:0 0 20px 0; float: none;}
	.part5 .main .form ul li .code a.submin{ width:100%; float: none;}
	
	
	footer{ padding:20px 10px 30px 10px; line-height:29px;}
	footer a{ display:inline-block;}
}