/* 右侧导航 */ #fullPage-nav { _display: none; font-size: 12px;} #fullPage-nav li { width: 90px; height: 21px; margin: 10px 0 0; vertical-align: middle;} #fullPage-nav li a { float: right; width: 21px; height: 21px; color: #6aa84f; text-decoration: none; text-align: right; background: url(../../images/images/dot.png) 5px 5px no-repeat;} #fullPage-nav li .active { background-position: 0 bottom;} #fullPage-nav span { display: none;} .fullPage-tooltip { float: left; top: 0; margin-right: 5px; font: 12px "Microsoft Yahei"; color: #6aa84f; line-height: 21px;} .section { position: relative; overflow: hidden;} .section .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .section .bg img { display: block; width: 100%; height: 100%;} /*secx1*/ .bg1{opacity: 0; transition: all 1.7s; } .s_top1a{ position: relative; top: -90px; opacity: 0;transition: all 1s; display: flex; justify-content: flex-end; align-items: center; padding-top: 60px;} .s_top1a a{ display: block; font-size: 16px; color: #FFFFFF; margin-left: 60px;} .secx1_1{ position: absolute; top: 80px; width: 100%; height: calc(100% - 80px); display: flex; align-items: center; justify-content: center;} .secx1_1a{ width: 1200px; margin: 0 auto; } .secx1_1aL{ flex-shrink: 0;padding-right: 130px;position: relative; left: -100%; opacity: 0;transition: all 1s;} .secx1_1aR{ flex-grow: 1;} .secx1_1aR1{ font-size: 32px; color: #FFFFFF; line-height: 140%;position: relative; right: -100%; opacity: 0;transition: all 1s;} .secx1_1aR2{ font-size: 48px; color: #FFFFFF; line-height: 140%; margin: 10px 0px;position: relative; right: -100%; opacity: 0;transition: all 1.2s;} .secx1_1aR3{ font-size: 14px; color: #FFFFFF; line-height: 150%;position: relative; right: -100%; opacity: 0;transition: all 1.4s;} .secx1_1aR4{ font-size: 16px; color: #FFFFFF; padding: 20px 0px;position: relative; right: -100%; opacity: 0;transition: all 1.6s;} .secx1_1aR4 a{ display: block; width: 150px; height: 50px; text-align: center; line-height: 50px; border-radius: 25px; background:rgba(85,222,137,1); color: #FFFFFF; } .secx1_1aR5{ font-size: 14px; color: #FFFFFF; line-height: 150%;position: relative; right: -100%; opacity: 0;transition: all 1.8s;} /*end 1*/ /*secx2_1*/ .secx2_1{position: absolute; top: 0px; width: 100%; height: 100%;overflow: hidden; display: flex; align-items: center; justify-content: center;} .div_1200{ width: 1200px; padding: 0px 10px; margin:0 auto; } .secx2_1x{width: 1200px; padding: 0px 10px; margin:0 auto; height: 571px;} .s2_tit{position: relative; top: -100%; opacity: 0; width: 100%; transition: all 1.5s;} .s2_tit span{ display: block; font-size: 20px; color: rgb(153, 153, 153); text-align: center; height: 31px; line-height: 31px;} .s2_tit font{ display: block; font-size: 36px; height: 55px; line-height: 55px; text-align: center;} .s2_lst{ padding-top: 70px; } .s2_lone{ position: relative; width: 230px; height: 415px;} .s2_lone1{ position: relative; width: 230px; height: 230px; overflow: hidden;} .s2_lone1 span{ display: block; position:absolute; top: 0; left: 0; transition: all .4s;} .s2_lone1 font{ display: block; position:absolute; top: -230px; left: 0;transition: all .4s;} .s2_lone:hover .s2_lone1 span{ position: absolute; top: 230px; transition: all .4s;} .s2_lone:hover .s2_lone1 font{ position: absolute; top: 0; transition: all .4s;} .s2_lone2{ text-align: center; height: 30px; line-height: 30px; margin: 30px 0px 15px 0px; overflow: hidden; font-size: 18px; color: #333333;} .s2_lone3{ text-align: center; height: 120px; line-height: 30px; overflow: hidden; font-size: 14px; color: #333333;} .s2_lonemr{ margin-left: 93px; } .s2_loxa1{position: relative; left: -100%; opacity: 0;transition: all 1.4s;} .s2_loxb1{position: relative; left: -100%; opacity: 0;transition: all 1.6s;} .s2_loxc1{position: relative; left: -100%; opacity: 0;transition: all 1.8s;} .s2_loxa2{position: relative; left: -100%; opacity: 0;transition: all 0.5s;} .s2_loxb2{position: relative; left: -100%; opacity: 0;transition: all 0.8s;} .s2_loxc2{position: relative; left: -100%; opacity: 0;transition: all 1s;} .s2_loxa3{position: relative; right: -100%; opacity: 0;transition: all 0.5s;} .s2_loxb3{position: relative; right: -100%; opacity: 0;transition: all 0.8s;} .s2_loxc3{position: relative; right: -100%; opacity: 0;transition: all 1s;} .s2_loxa4{position: relative; right: -100%; opacity: 0;transition: all 1.4s;} .s2_loxb4{position: relative; right: -100%; opacity: 0;transition: all 1.6s;} .s2_loxc4{position: relative; right: -100%; opacity: 0;transition: all 1.8s;} /*end 2*/ /*secx3*/ .secx3_1{position: absolute; top: 0px; width: 100%; height: 100%;} .secx3_1x{ width: 1200px; height: 100%; padding: 0px 10px; margin: 0 auto; display: flex; align-items:center; justify-content:space-between;} .secx3_1L{flex-shrink: 0;padding-right: 80px;position: relative; left: -100%; opacity: 0;transition: all 1s;} .secx3_1R{ flex-grow: 1; padding-bottom: 120px;} .secx3_1R1{ font-size: 36px; height: 80px; line-height: 80px; margin-bottom: 20px; position: relative; right: -100%; opacity: 0;transition: all 0.8s;} .secx3_1R2{ font-size: 14px; line-height: 25px; height: 75px; position: relative; right: -100%; opacity: 0;transition: all 1.2s;} /*end 3*/ /*secx4*/ .secx4_1{position: absolute; top: 0px; width: 100%; height: 100%; } .secx4_1x{ width: 1200px; height: 100%; padding: 0px 10px; margin: 0 auto; display: flex; align-items:center; justify-content:space-between;} .secx4_1L{ flex-grow: 1; padding-bottom: 30px;} .secx4_1Ltit{ font-size: 36px; height: 50px; line-height: 50px; margin-bottom: 20px; position: relative; left: -100%; opacity: 0;transition: all 0.4s;} .secx4_1Llst1{ background: url(../../images/images/1.png) no-repeat center left; padding-left: 80px; margin-bottom: 25px; position: relative; left: -100%; opacity: 0;transition: all 0.8s;} .secx4_1Llst1 span{ display: block; font-size: 18px; height: 30px; line-height: 30px; overflow: hidden;} .secx4_1Llst1 font{ display: block; font-size: 12px; height: 25px; line-height: 25px; overflow: hidden;color: rgb(153, 153, 153);} .secx4_1Llst2{ background: url(../../images/images/2.png) no-repeat center left; padding-left: 80px; margin-bottom: 25px; position: relative; left: -100%; opacity: 0;transition: all 1s;} .secx4_1Llst2 span{ display: block; font-size: 18px; height: 30px; line-height: 30px; overflow: hidden;} .secx4_1Llst2 font{ display: block; font-size: 12px; height: 25px; line-height: 25px; overflow: hidden;color: rgb(153, 153, 153);} .secx4_1Llst3{ background: url(../../images/images/3.png) no-repeat center left; padding-left: 80px; margin-bottom: 25px; position: relative; left: -100%; opacity: 0;transition: all 1.2s;} .secx4_1Llst3 span{ display: block; font-size: 18px; height: 30px; line-height: 30px; overflow: hidden;} .secx4_1Llst3 font{ display: block; font-size: 12px; height: 25px; line-height: 25px; overflow: hidden;color: rgb(153, 153, 153);} .secx4_1Llst4{ background: url(../../images/images/4.png) no-repeat center left; padding-left: 80px; position: relative; left: -100%; opacity: 0;transition: all 1.4s;} .secx4_1Llst4 span{ display: block; font-size: 18px; height: 30px; line-height: 30px; overflow: hidden;} .secx4_1Llst4 font{ display: block; font-size: 12px; height: 25px; line-height: 25px; overflow: hidden;color: rgb(153, 153, 153);} .secx4_1R{flex-shrink: 0;padding-left: 50px;position: relative; right: -100%; opacity: 0;transition: all 1s;} /*end 4*/ /*secx5*/ .secx5_1{position: absolute; top: 0px; width: 100%; height: 100%;} .secx5_1x{ width: 1200px; height: 100%; padding: 0px 10px; margin: 0 auto; display: flex; align-items:center; justify-content:space-between;} .secx5_1L{flex-shrink: 0;padding-right: 80px;position: relative; left: -100%; opacity: 0;transition: all 1s;} .secx5_1R{ flex-grow: 1; padding-bottom: 120px;} .secx5_1R1{ font-size: 36px; height: 80px; line-height: 80px; margin-bottom: 20px; position: relative; right: -100%; opacity: 0;transition: all 0.8s;} .secx5_1R2{ font-size: 14px; line-height: 25px; height: 75px; position: relative; right: -100%; opacity: 0;transition: all 1.2s;} /*end 5*/ /*secx6*/ .secx6_1{position: absolute; top: 0px; width: 100%; height: 100%;} .secx6_1x{ width: 600px; height: 100%; padding: 0px 10px; margin: 0 auto; display: flex; align-items:center; justify-content:space-between;} .secx6_1y{ height: 450px; width: 100%;} .secx6_1tit{ position: relative; top: -100%; opacity: 0;transition: all 1s;} .secx6_1tit span{ display: block; text-align: center; font-size: 36px; height: 55px; line-height: 55px; color: #FFFFFF;} .secx6_1tit font{ display: block; text-align: center; font-size: 14px; height: 50px; line-height: 50px; color: #FFFFFF; margin-bottom: 20px;} .secx6_1tit a{ display: block; width: 150px; margin: 0 auto; text-align: center; background: rgba(85,222,137,1); color: #FFFFFF; font-size: 16px; text-align: center; border-radius: 25px; height: 50px; line-height: 50px;} .secx6_1lst{ padding-top: 60px; height: 180px;} .secx6_1lst1{ margin-bottom: 10px; position: relative; bottom: -100%; opacity: 0;transition: all 1s;} .secx6_1lst1 input{ border: 1px solid #ffffff; background: none; outline: none; height: 48px; line-height: 48px; font-size: 16px; padding: 0px 19px; width: 560px; overflow: hidden; color: #FFFFFF;} .secx6_1lst1x{margin-bottom: 10px; position: relative; bottom: -100%; opacity: 0;transition: all 1.4s;} .secx6_1lst1x input{ border: 1px solid #ffffff; background: none; outline: none; height: 48px; line-height: 48px; font-size: 16px; padding: 0px 19px; width: 560px; overflow: hidden; color: #FFFFFF;} .secx6_1lst2{ position: relative; bottom: -100%; opacity: 0;transition: all 1.6s;} .secx6_1lst2 a{ display: block; height: 45px; line-height: 45px; background: #1672d4; color: #FFFFFF; font-size: 14px; text-align: center;} .secx6_1lst2 a:hover{ background: rgba(85,222,137,1); } .secx6_1lst1 input::-webkit-input-placeholder {color: #ffffff;} .secx6_1lst1 input::-moz-input-placeholder {color: #ffffff;} .secx6_1lst1 input::-ms-input-placeholder {color: #ffffff;} .secx6_1lst1x input::-webkit-input-placeholder {color: #ffffff;} .secx6_1lst1x input::-moz-input-placeholder {color: #ffffff;} .secx6_1lst1x input::-ms-input-placeholder {color: #ffffff;} /*end 6*/ /*secx7*/ .secx7_1{position: absolute; top: 0px; width: 100%; height: 100%;} .secx7_1x{ width: 1200px; height: 100%; padding: 0px 10px; margin: 0 auto; display: flex; align-items:center; justify-content:space-between;} .secx7_1y{ height: 570px; width: 1200px;} .secx7_1xtit{ text-align: center; height:80px; margin-bottom: 10px;} .secx7_1xtit span{ display: block; text-align: center; font-size: 18px; height: 30px; line-height: 30px; margin-bottom: 10px; position: relative; top: -100%; opacity: 0;transition: all 1.2s;} .secx7_1xtit font{ display: block; text-align: center; font-size: 28px; height: 40px; line-height: 40px; position: relative; top: -100%; opacity: 0;transition: all 1s;} .secx7_1xmap{ width: 100%; height: 240px; background: #f4f4f4; margin: 40px 0px 50px 0px;position: relative; left: -100%; opacity: 0;transition: all 1.5s;} .secx7_1xlst1{ text-align: center; font-size: 20px; height: 40px; line-height: 40px; margin-bottom: 5px;position: relative; left: -100%; opacity: 0;transition: all 1.8s;} .secx7_1xlst2{ text-align: center; font-size: 14px; height: 40px; line-height: 40px; margin-bottom: 25px;position: relative; right: -100%; opacity: 0;transition: all 2s;} .secx7_1xlst2 span{ padding: 0px 15px; } .secx7_1xlst3{ text-align: center; font-size: 20px; height: 40px; line-height: 40px; display: flex; justify-content: center;position: relative; bottom: -100%; opacity: 0;transition: all 2.4s;} .secx7_1xlst3 span{ display: block; } .secx7_1xlst3 span a{ display: block; background: rgba(0,121,215,1);transition: all 0.4s; color: #FFFFFF; font-size: 14px; width: 160px; height: 48px; line-height: 48px; text-align: center; border-radius: 10px;} .secx7_1xlst3 span a:hover{background: rgba(0,121,215,0.9); transition: all 0.4s;} .secx7_1xlst3 font{ display: block; padding-left: 70px;} .secx7_1xlst3 font a{ display: block; border:1px solid rgba(0,121,215,1);transition: all 0.4s; color: rgba(0,121,215,1); font-size: 14px; width: 160px; height: 48px; line-height: 48px; text-align: center; border-radius: 10px;} .secx7_1xlst3 font a:hover{background: rgba(0,121,215,1); color: #FFFFFF; transition: all 0.4s;} /*end 7*/ /*secx8*/ .secx8_1{position: absolute; top: 0px; width: 100%; height: 100%;overflow: hidden; display: flex; align-items: center; justify-content: center;} .secx8_1x{width: 1200px; padding: 0px 10px; margin:0 auto; height: 360px;} .sapp8_a{ display: flex; justify-content: space-between; } .sapp8_a1{width: 400px;} .sapp8_a1img{ border: 1px solid #CCCCCC; padding: 10px; width: 220px; height: 220px; margin: 0 auto;} .sapp8_a1img span{ display: block; width: 220px; height: 220px; text-align: center; } .sapp8_b{ padding-top: 5px; display: flex; justify-content: space-between; } .sapp8_b1{width: 400px;} .sapp8_b1 span{ display: block; text-align: center; font-size: 16px; height: 95px; line-height: 95px;} .sapp8_b1 font{ display: block; text-align: center;} .sapp8_apos{position: relative; top: -100%; opacity: 0;transition: all 0.8s;} .sapp8_bpos{position: relative; bottom: -100%; opacity: 0;transition: all 0.8s;} /*end 8*/ /*secx9*/ .s_top9a{ position: relative; top: -90px; opacity: 0;transition: all 1s; display: flex; justify-content: flex-end; align-items: center; padding-top: 60px;} .s_top9a a{ display: block; font-size: 16px; color: #FFFFFF; margin-left: 60px;} .secx9_1{ position: absolute; top: 80px; width: 100%; height: calc(100% - 80px); display: flex; align-items: center; justify-content: center;} .secx9_1a{ width: 1200px; margin: 0 auto; } .secx9_1aL{ flex-shrink: 0;padding-right: 130px; } .secx9_1aLx{ width: 500px; position: relative; top: 0; height: 506px;} .secx9_1aLx1{ position:absolute; top: 0px; left: 100px; z-index: 10;} .secx9_1aLx1pos{ position: absolute; top: 30px; left: 0px; } .secx9_1aLx2pos{ position: absolute; top: 80px; right: 20px;} .secx9_1aLx3pos{ position: absolute; bottom: 80px; right: 50px; z-index: 5;} .secx9_1aLx4pos{ position: absolute; bottom:30px; right: 40px;} .secx9_1aLx5pos{position:absolute; top: 0px; left: 100px; z-index: 11;} .secx9_1aLx5pos span{ display: block; width: 260px; height: 505px; text-align: center; line-height: 455px; font-size: 24px; color: #FFFFFF; } .secx9_1aR{ flex-grow: 1;} .secx9_1aR1{ font-size: 32px; color: #FFFFFF; line-height: 140%;position: relative; right: -100%; opacity: 0;transition: all 1s;} .secx9_1aR2{ font-size: 48px; color: #FFFFFF; line-height: 140%; margin: 10px 0px;position: relative; right: -100%; opacity: 0;transition: all 1.2s;} .secx9_1aR3{ font-size: 14px; color: #FFFFFF; line-height: 150%;position: relative; right: -100%; opacity: 0;transition: all 1.4s;} .secx9_1aR4{ font-size: 16px; color: #FFFFFF; padding: 20px 0px;position: relative; right: -100%; opacity: 0;transition: all 1.6s;} .secx9_1aR4 a{ display: block; width: 150px; height: 50px; text-align: center; line-height: 50px; border-radius: 25px; background:rgba(85,222,137,1); color: #FFFFFF; } .secx9_1aR5{ font-size: 14px; color: #FFFFFF; line-height: 150%;position: relative; right: -100%; opacity: 0;transition: all 1.8s;} /*end 9*/ /* CSS3过度及动画 */ .active .bg1{ opacity: 1; transition-delay: 0.7s; } .active .s_top1 div{ opacity: 1; left: 0; transition-delay: 0.7s;} .active .s_top1a{ opacity: 1; top: 0; transition-delay: 0.7s;} .active .secx1_1aL{ opacity: 1; left: 0; transition-delay: 0.7s;} .active .secx1_1aR1{ opacity: 1; right: 0; transition-delay: 0.7s;} .active .secx1_1aR2{ opacity: 1; right: 0; transition-delay: 0.7s;} .active .secx1_1aR3{ opacity: 1; right: 0; transition-delay: 0.7s;} .active .secx1_1aR4{ opacity: 1; right: 0; transition-delay: 0.7s;} .active .secx1_1aR5{ opacity: 1; right: 0; transition-delay: 0.7s;} .active .s2_tit{ opacity: 1; top: 0; transition-delay: 0.7s;} .active .s2_loxa1{ opacity: 1; left: 0; transition-delay: 0.7s;} .active .s2_loxb1{ opacity: 1; left: 0; transition-delay: 0.7s;} .active .s2_loxc1{ opacity: 1; left: 0; transition-delay: 0.7s;} .active .s2_loxa2{ opacity: 1; left: 0; transition-delay: 0.7s;} .active .s2_loxb2{ opacity: 1; left: 0; transition-delay: 0.7s;} .active .s2_loxc2{ opacity: 1; left: 0; transition-delay: 0.7s;} .active .s2_loxa3{ opacity: 1; right: 0; transition-delay: 0.7s;} .active .s2_loxb3{ opacity: 1; right: 0; transition-delay: 0.7s;} .active .s2_loxc3{ opacity: 1; right: 0; transition-delay: 0.7s;} .active .s2_loxa4{ opacity: 1; right: 0; transition-delay: 0.7s;} .active .s2_loxb4{ opacity: 1; right: 0; transition-delay: 0.7s;} .active .s2_loxc4{ opacity: 1; right: 0; transition-delay: 0.7s;} .active .secx3_1L{ opacity: 1; left: 0; transition-delay: 0.7s; } .active .secx3_1R1{ opacity: 1; right: 0; transition-delay: 0.7s; } .active .secx3_1R2{ opacity: 1; right: 0; transition-delay: 0.7s; } .active .secx4_1Ltit{ opacity: 1; left: 0; transition-delay: 0.7s;} .active .secx4_1Llst1{ opacity: 1; left: 0; transition-delay: 0.7s;} .active .secx4_1Llst2{ opacity: 1; left: 0; transition-delay: 0.7s;} .active .secx4_1Llst3{ opacity: 1; left: 0; transition-delay: 0.7s;} .active .secx4_1Llst4{ opacity: 1; left: 0; transition-delay: 0.7s;} .active .secx4_1R{ opacity: 1; right: 0; transition-delay: 0.7s;} .active .secx5_1L{ opacity: 1; left: 0; transition-delay: 0.7s; } .active .secx5_1R1{ opacity: 1; right: 0; transition-delay: 0.7s; } .active .secx5_1R2{ opacity: 1; right: 0; transition-delay: 0.7s; } .active .secx6_1tit{ opacity: 1; top: 0; transition-delay: 0.7s;} .active .secx6_1lst1{ opacity: 1; bottom: 0; transition-delay: 0.7s;} .active .secx6_1lst1x{ opacity: 1; bottom: 0; transition-delay: 0.7s;} .active .secx6_1lst2{ opacity: 1; bottom: 0; transition-delay: 0.7s;} .active .secx7_1xtit span{ opacity: 1; top: 0; transition-delay: 0.7s;} .active .secx7_1xtit font{ opacity: 1; top: 0; transition-delay: 0.7s;} .active .secx7_1xmap{ opacity: 1; left: 0; transition-delay: 0.7s;} .active .secx7_1xlst1{ opacity: 1; left: 0; transition-delay: 0.7s;} .active .secx7_1xlst2{ opacity: 1; right: 0; transition-delay: 0.7s;} .active .secx7_1xlst3{ opacity: 1; bottom: 0; transition-delay: 0.7s;} .active .sapp8_apos{opacity: 1; top: 0; transition-delay: 0.7s;} .active .sapp8_bpos{opacity: 1; bottom: 0; transition-delay: 0.7s;} .active .s_top9 div{ opacity: 1; left: 0; transition-delay: 0.7s;} .active .s_top9a{ opacity: 1; top: 0; transition-delay: 0.7s;} .active .secx9_1aR1{ opacity: 1; right: 0; transition-delay: 0.7s;} .active .secx9_1aR2{ opacity: 1; right: 0; transition-delay: 0.7s;} .active .secx9_1aR3{ opacity: 1; right: 0; transition-delay: 0.7s;} .active .secx9_1aR4{ opacity: 1; right: 0; transition-delay: 0.7s;} .active .secx9_1aR5{ opacity: 1; right: 0; transition-delay: 0.7s;}