@import "global.css";

html,body {width: 100%; height: 100%; }

#wrap {min-width: 1170px;}

#footer {width: 100%; position:relative; z-index:20; background-color:#f4f4f4;}
#footer .inner_box {width: 1170px; height: 170px; margin: 0 auto; box-sizing: border-box; padding-top: 20px; font-size:12px; line-height:20px; color:#a5a5a5; text-align:center; }
#footer .btn_box {border-bottom: solid 1px #e1e1e1; padding: 35px 0; text-align:center; }
#footer .btn_box a {display:inline-block; border: solid 1px #bebebe; width: 126px; height: 34px; font-size:14px; line-height:34px; color:#000000;}
#footer .comment {font-size:14px; line-height:56px; color:#007548; text-align:center; }
#footer span {color:#686868;}

#header {width: 100%; border-top: solid 1px #007548; background-color:#f8f8f8;}
#header .inner_box {width: 1170px; height: 88px; margin: 0 auto; position:relative; }
#header .logo {position:absolute; left:0px; top:0px; } 
#header .logo a {display:block; width: 248px; height: 88px; background:url(../images/logo.png) 0 center no-repeat; }

.section1 {width: 100%; background:url(../images/img_sec1_1.jpg) center center no-repeat; background-size: cover;}
.section1 .inner_box {width: 1170px; height: 891px;  margin: 0 auto; position:relative; overflow:hidden; }
.section1 .txt1 {position:absolute; left:17px; top:302px; width: 585px; height: 265px; background:url(../images/img_sec1_2.png) center center no-repeat;}
.section1 .txt2 {position:absolute; left:0px; top:379px; width: 576px; height: 119px; background:url(../images/img_sec1_2_1.png) center center no-repeat;}
.section1 .scroll_txt {display:inline-block; width: 45px; height: 9px; position:absolute; left:50%; bottom:27px; background:url(../images/img_sec1_3.png) center top no-repeat;
	animation: scroll 0.5s ease-in-out 0s infinite alternate ;
} 
.section1 .scroll_txt:after {content:''; position:absolute; left:50%; top:27px; margin-left: -1px; display:inline-block; width: 2px; height: 30px; background-color:#fff;}

.section2 {width: 100%; overflow:hidden; position:relative; }
.section2 .left_area {position:absolute; left:0px; top:0px; z-index:10; width: 50%; padding-right: 116px; box-sizing: border-box; }
.section2 .left_area .out_box {width: 100%; height: 100%; background-color:#00724a; position:relative; }
.section2 .left_area .in_box {position:absolute; right:0px; top:0px; width: 470px; height: 100%;}
.section2 .left_area .in_box .txt1 {position:absolute; left:0px; top:123px; z-index:5; width: 411px; height: 167px; background:url(../images/img_sec2_2.jpg) center center no-repeat;}
.section2 .left_area .in_box .txt2 {position:absolute; left:0px; top:187px; z-index:5; width: 186px; height: 78px; background:url(../images/img_sec2_5.png) 0 0 no-repeat; transition:all 0.5s;}
.section2 .left_area.second .in_box .txt2 {background-position: 0 -222px;}
.section2 .left_area .in_box .comment1 {position:absolute; left:0px; top:327px; z-index:5; width: 232px; height: 79px; background:url(../images/img_sec2_3.png) center center no-repeat; transform: translate(0, 0); transition:all 0.7s;}
.section2 .left_area .in_box .comment2 {position:absolute; left:0px; top:327px; z-index:5; width: 287px; height: 79px; background:url(../images/img_sec2_4.png) center center no-repeat; transform: translate(0, 20px); opacity:0; transition:all 0.7s;}
.section2 .left_area.second .in_box .comment1 {opacity:0; transform: translate(0, 20px);}
.section2 .left_area.second .in_box .comment2 {opacity:1; transform: translate(0, 0);}
.section2 .left_area .tags {width: 170px; height: 360px; position:absolute; left:0px; bottom:123px; background:url(../images/img_sec2_1.jpg) center center no-repeat;}
.section2.fixed .left_area {position:fixed; }
.section2 .right_area {width: 100%; }
.section2.right_fixed .right_area {position:fixed; left:0px; bottom:0px; }
.section2 .right_area .out_box {width: 50%; float: right; position:relative; }
.section2 .right_area .in_box {width: 1075px; position:relative; left:-116px; }
.section2 .right_area .section2_1 {width: 100%; position:relative; overflow:hidden; }
.section2 .right_area .section2_1:before {content:''; display:block; width: 100%; height: 490px; position:absolute; left:0px; top:0px; background-color:#f2b520;}
.section2 .right_area .section2_1 .in_box {height: 1125px; background:url(../images/img_sec2_7.jpg) 0 0 no-repeat;}
.section2 .right_area .section2_1 a.btn_support {position:absolute; left:130px; top:965px; display:inline-block; width: 346px; height: 80px; background:url(../images/img_sec2_btn1.jpg) 0 0 no-repeat;}
.section2 .right_area .section2_1 a.btn_support span {display:inline-block; width: 346px; height: 80px; background:url(../images/img_sec2_btn2.jpg) 0 0 no-repeat; vertical-align:top; opacity:0; transition:all 0.3s;}
.section2 .right_area .section2_1 a.btn_support:hover span {opacity:1;}
.section2 .right_area .section2_2 {width: 100%; position:relative; overflow:hidden; }
.section2 .right_area .section2_2:before {content:''; display:block; width: 100%; height: 490px; position:absolute; left:0px; top:0px; background-color:#febf13;}
.section2 .right_area .section2_2 .in_box {height: 979px; background:url(../images/img_sec2_8.jpg) 0 0 no-repeat;}
.section2 .right_area .section2_2 a.btn_support {position:absolute; left:130px; top:744px; display:inline-block; width: 346px; height: 80px; background:url(../images/img_sec2_btn1.jpg) 0 0 no-repeat;}
.section2 .right_area .section2_2 a.btn_support span {display:inline-block; width: 346px; height: 80px; background:url(../images/img_sec2_btn2.jpg) 0 0 no-repeat; vertical-align:top; opacity:0; transition:all 0.3s;}
.section2 .right_area .section2_2 a.btn_support:hover span {opacity:1;}
.section2 .right_area .section2_3 {width: 100%; position:relative; overflow:hidden; }
.section2 .right_area .section2_3:before {content:''; display:block; width: 100%; height: 490px; position:absolute; left:0px; top:0px; background-color:#e3ae17;}
.section2 .right_area .section2_3 .in_box {height: 979px; background:url(../images/img_sec2_9.jpg) 0 0 no-repeat;}
.section2 .right_area .section2_3 a.btn_support {position:absolute; left:130px; top:834px; display:inline-block; width: 346px; height: 80px; background:url(../images/img_sec2_btn3.jpg) 0 0 no-repeat;}
.section2 .right_area .section2_3 a.btn_support span {display:inline-block; width: 346px; height: 80px; background:url(../images/img_sec2_btn4.jpg) 0 0 no-repeat; vertical-align:top; opacity:0; transition:all 0.3s;}
.section2 .right_area .section2_3 a.btn_support:hover span {opacity:1;}
.section2 .right_area .section2_4 {width: 100%; position:relative; overflow:hidden; }
.section2 .right_area .section2_4:before {content:''; display:block; width: 100%; height: 490px; position:absolute; left:0px; top:0px; background-color:#febe13;}
.section2 .right_area .section2_4 .in_box {height: 979px; background:url(../images/img_sec2_10.jpg) 0 0 no-repeat;}
.section2 .right_area .section2_4 a.btn_support {position:absolute; left:130px; top:736px; display:inline-block; width: 346px; height: 80px; background:url(../images/img_sec2_btn3.jpg) 0 0 no-repeat;}
.section2 .right_area .section2_4 a.btn_support span {display:inline-block; width: 346px; height: 80px; background:url(../images/img_sec2_btn4.jpg) 0 0 no-repeat; vertical-align:top; opacity:0; transition:all 0.3s;}
.section2 .right_area .section2_4 a.btn_support:hover span {opacity:1;}

.section3 {width: 100%; position:relative; z-index:20; background:url(../images/img_sec3.jpg) center center no-repeat #f0f0f0;}
.section3 .inner_box {width: 1170px; height: 980px; margin: 0 auto; position:relative; }
.section3 .box1 {position:absolute; left:0px; top:316px; z-index:5; width: 610px; height: 513px; background:url(../images/img_sec3_1.jpg) center center no-repeat; transform: translate(-100px, -100px); opacity:0; transition:all 0.5s ease-in-out;}
.section3 .box2 {position:absolute; right:0px; top:362px; width: 629px; height: 518px; background:url(../images/img_sec3_2.jpg) center center no-repeat; transform: translate(100px, 100px); opacity:0; transition:all 0.5s ease-in-out;}
.section3.active .box1 {transform: translate(0px, 0px); opacity:1;}
.section3.active .box2 {transform: translate(0px, 0px); opacity:1;}

.section4 {width: 100%; position:relative; z-index:20; background:url(../images/img_sec4.jpg) center center no-repeat #41464f;}
.section4 .inner_box {width: 1170px; height: 979px; margin: 0 auto; position:relative; }
.section4 .infor1 {width: 301px; height: 190px; position:absolute; left:36px; bottom:103px; background:url(../images/img_sec4_1.jpg) center center no-repeat;}
.section4 .infor2 {width: 301px; height: 190px; position:absolute; left:435px; bottom:103px; background:url(../images/img_sec4_2.jpg) center center no-repeat;}
.section4 .infor3 {width: 301px; height: 190px; position:absolute; left:834px; bottom:103px; background:url(../images/img_sec4_3.jpg) center center no-repeat;}
/*
.section4.active .infor1 {transform: translate(0, 0); opacity:1; transition:all 0.5s ease-in-out;}
.section4.active .infor2 {transform: translate(0, 0); opacity:1; transition:all 0.5s ease-in-out 0.3s;}
.section4.active .infor3 {transform: translate(0, 0); opacity:1; transition:all 0.5s ease-in-out 0.6s;}
*/

.section5 {width: 100%; position:relative; z-index:20; background:url(../images/img_sec5.jpg) center center no-repeat #d1392d;}
.section5 .inner_box {width: 1170px; height: 806px; margin: 0 auto; position:relative; }
.section5 a.btn_support {position:absolute; left:670px; bottom:156px; display:inline-block; width: 316px; height: 90px; background:url(../images/img_sec5_1.jpg) 0 0 no-repeat;}

.pagination {position:fixed; right:50px; top:0px; height: 100%; z-index:50; width: 8px; }
.pagination ul {width: 8px;position:absolute; left:0px; top:50%; margin-top: -96px; }
.pagination ul li {width: 8px; height: 8px; padding: 12px 0; }
.pagination ul li span {display:inline-block; width: 8px; height: 8px; background-color:#333333; border-radius: 8px; opacity:0.15; transition:all 0.5s;}
.pagination ul li.on span {background-color:#ff4873; opacity:1;} 
.pagination.white ul li span {background-color:#fff;} 
.pagination.white ul li.on span {background-color:#fff; opacity:1;} 

@keyframes anker {
	0% { transform: translate(0, 0) scale(0.98, 0.98); opacity:0.5;}		
	80% { transform: translate(0, 0) scale(1.0, 1.0); opacity:1;}
	100% { transform: translate(0, 0) scale(1.0, 1.0); opacity:1;}
}

@keyframes btn {
	0% { transform: scale(1.0, 1.0);}
	100% { transform: scale(1.03, 1.03);}
}

@keyframes scroll {
	0% { transform: translate(0, 0) ;}
	100% { transform: translate(0, -10px);}
}