html { font-size: 136px; } @media screen and (min-width: 768px){ html{ font-size: 100px; } } @media screen and (min-width: 1200px){ html{ font-size: 136px; } } .cb { clear: both } .txt { display: inline-block; vertical-align: middle } .pop { display: none; position: fixed; z-index: 999; top: 0; left: 0; width: 100%; height: 100% } .box { position: absolute; z-index: 2; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 100vw; height: 100vh; background: #fff; overflow: visible; text-align: center } .mask { position: absolute; z-index: 1; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.5) } .red_btn, a.red_btn, a.red_btn:link, a.red_btn:visited { color: #fff; text-align: center; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; background: #eb4642; background-image: -moz-linear-gradient(top, #ff9184, #fe975e); background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #ff9184), color-stop(1, #fe975e)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9184', endColorstr='#fe975e', GradientType='0') } a.red_btn:hover { background-color: #ed5d59; background-image: -moz-linear-gradient(top, #ff7a65, #fc5f5b); background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #ff7a65), color-stop(1, #fc5f5b)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF7A65', endColorstr='#FC5F5B', GradientType='0') } a.red_btn:active { background-color: #e92f2b; background-image: -moz-linear-gradient(top, #ff7a65, #fc5f5b); background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #ff7a65), color-stop(1, #fc5f5b)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF7A65', endColorstr='#FC5F5B', GradientType='0') } .blue { color: #5d9cee } body { position: relative; height: 100%; overflow: hidden; } .layout { /* 怀疑这个导致刷新白屏 */ /* position: absolute; left: 0; right: 0; top: 0; bottom: 0; */ /* height: 800%; */ -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; -o-transition: -o-transform 1s; -moz-transition: transform 1s, -moz-transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s; } .top_all { position: fixed; z-index: 10; width: 100%; height: 0.367647rem; background: #fff; } .top { position: absolute; top: 0; left: 0; right: 0; z-index: 6; width: 100%; text-align: left; margin-top: 1% } .banner_txt { /* position: absolute; */ -webkit-transform: translateY(0.610294rem); -moz-transform: translateY(0.610294rem); -ms-transform: translateY(0.610294rem); -o-transform: translateY(0.610294rem); transform: translateY(0.610294rem); /* left: 0; right: 0; z-index: 7; width: 100%; text-align: center; animation: banner_txt .5s .3s forwards; opacity: 0; padding-top: 16.81818182% */ } .section_title1 { /* position: absolute; */ top: 0; left: 0; right: 0; width: 100%; margin: 0 auto; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s; white-space: nowrap } .section_title1 h1 { font-size: 0.323529rem; line-height: 1; } .section_title1_txt { width: 100%; margin: 0.169118rem auto 0.205882rem; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s; white-space: nowrap; opacity: .6; } .section_title1_txt h2 { font-family: MicrosoftYaHei; font-size: 0.176471rem; font-weight: 300; font-stretch: normal; line-height: 1; letter-spacing: 0rem; color: #7d8390; } a.banner_btn { display: block; margin: 0 auto; width: 1.852941rem; height: 0.397059rem; line-height: 0.397059rem; border-radius: 0.205882rem; font-size: 0.176471rem; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s; } .verson_txt { position: absolute; top: 92%; left: 0; right: 0; margin: 0 auto; opacity: .6 } .box { position: relative; width: 100%; height: 100vh; } .section { /* opacity: 0; display: none; */ position: relative; width: 100%; height: 100%; margin: 0 auto; overflow: hidden; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .box_dot { position: fixed; z-index: 11; top: 50%; right: 0.220588rem; margin-top: -1.025735rem; height: 2.051471rem; } .box_dot li { width: 0.058824rem; height: 0.058824rem; border-radius: 0.058824rem; background-color: #f1f2f4; margin: 0.147059rem 0; cursor: pointer; outline: none; -webkit-transition: height .5s, background-color .5s; -o-transition: height .5s, background-color .5s; -moz-transition: height .5s, background-color .5s; transition: height .5s, background-color .5s } .box_dot li.active { height: 0.147059rem; background-color: #eb5451; outline: none; } .section_center1 { position: relative; width: 100%; max-width: 8.823529rem; height: 100%; margin: 0 auto; -webkit-transition: max-width .5s; -o-transition: max-width .5s; -moz-transition: max-width .5s; transition: max-width .5s } .section_center { position: relative; width: 100%; max-width: 8.823529rem; height: 100%; margin: 0 auto; -webkit-transition: max-width .5s; -o-transition: max-width .5s; -moz-transition: max-width .5s; transition: max-width .5s } .section_center_box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; /* padding-top: 65.59766764%; */ max-height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* the last section */ #section8 .section_center_box { background-image: url(../img/7_bg.png); -o-background-size: contain; background-size: contain; } .img1 { position: absolute; /* bottom: 0; */ top: 27.27%; left: 0; right: 0; width: 100%; height: 64.44%; /* padding-top: 56.36363636%; */ -webkit-animation: img1 .5s .8s forwards; -moz-animation: img1 .5s .8s forwards; -o-animation: img1 .5s .8s forwards; animation: img1 .5s .8s forwards; opacity: 0; } .img1_bg { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; background: url("../img/1_center.png") no-repeat; -o-background-size: 100% auto; background-size: 100% auto } .img1_word { position: absolute; z-index: 1; top: 16.29032258%; left: 8.63636364%; width: 11.818182%; height: 22.451613%; background: url("../img/1_img_left.png") no-repeat; -o-background-size: 100% auto; background-size: 100% auto; -webkit-animation: img1_word 1s 1s forwards; -moz-animation: img1_word 1s 1s forwards; -o-animation: img1_word 1s 1s forwards; animation: img1_word 1s 1s forwards; opacity: 0; } .img1_ppt { position: absolute; z-index: 1; top: 8.741935%; right: 27.545455%; width: 11.727273%; height: 20.322581%; background: url("../img/1_img_right.png") no-repeat; -o-background-size: 100% auto; background-size: 100% auto; -webkit-animation: img1_ppt 1s 1s forwards; -moz-animation: img1_ppt 1s 1s forwards; -o-animation: img1_ppt 1s 1s forwards; animation: img1_ppt 1s 1s forwards; opacity: 0; } .girl_body, .left_foot, .right_foot, .girl_hand, .img1_pad { top: 0; left: 0; width: 100%; height: 100%; -o-background-size: 100% auto; background-size: 100% auto; background-repeat: no-repeat } .girl_body { position: absolute; z-index: 1; background-image: url("../img/1_person_body.svg?v=4-22-15-6") } .girl_hand { position: absolute; z-index: 4; background-image: url("../img/1_person_hand.svg?v=4-22-15-6"); -webkit-animation: girl_hand 4s infinite linear; -moz-animation: girl_hand 4s infinite linear; -o-animation: girl_hand 4s infinite linear; animation: girl_hand 4s infinite linear; -webkit-transform-origin: 5.97014925% 46.60194175%; -moz-transform-origin: 5.97014925% 46.60194175%; -ms-transform-origin: 5.97014925% 46.60194175%; -o-transform-origin: 5.97014925% 46.60194175%; transform-origin: 5.97014925% 46.60194175% } */ .left_foot { position: absolute; z-index: 3; background-image: url("../img/1_person_left_foot.svg?v=4-22-15-6"); -webkit-animation: left_foot 1s alternate infinite ease-in-out; -moz-animation: left_foot 1s alternate infinite ease-in-out; -o-animation: left_foot 1s alternate infinite ease-in-out; animation: left_foot 1s alternate infinite ease-in-out; -webkit-transform-origin: 66.41791045% 60.67961165%; -moz-transform-origin: 66.41791045% 60.67961165%; -ms-transform-origin: 66.41791045% 60.67961165%; -o-transform-origin: 66.41791045% 60.67961165%; transform-origin: 66.41791045% 60.67961165% } .right_foot { position: absolute; z-index: 2; background-image: url("../img/1_person_right_foot.svg?v=4-22-15-6"); -webkit-animation: right_foot 1s alternate infinite ease-in-out; -moz-animation: right_foot 1s alternate infinite ease-in-out; -o-animation: right_foot 1s alternate infinite ease-in-out; animation: right_foot 1s alternate infinite ease-in-out; -webkit-transform-origin: 75.37313433% 59.70873786%; -moz-transform-origin: 75.37313433% 59.70873786%; -ms-transform-origin: 75.37313433% 59.70873786%; -o-transform-origin: 75.37313433% 59.70873786%; transform-origin: 75.37313433% 59.70873786% } .img1_pad { position: absolute; z-index: 4; background-image: url("../img/1_pad.svg?v=4-22-15-6") } .img1_book { position: absolute; z-index: 3; bottom: 0.588235rem; z-index: 2; width: 17.27272727%; height: 18.06451613%; background: url("../img/1_book.svg?v=4-22-15-6") no-repeat; -o-background-size: 100% auto; background-size: 100% auto; left: 1% } .img1_tree { position: absolute; z-index: 3; width: 11.09090909%; height: 29.67741935%; bottom: 0.588235rem; right: -1.54545455% } .img1_tree_bg, .tree_2leap, .tree_1leap { top: 0; left: 0; width: 100%; height: 100%; -o-background-size: 100% auto; background-size: 100% auto; background-repeat: no-repeat } .img1_tree_bg { position: absolute; z-index: 3; background-image: url("../img/1_flower_bottom.svg?v=4-22-15-6") } .tree_1leap { position: absolute; z-index: 2; background-image: url("../img/1_flower_1leaf.svg?v=4-22-15-6"); -webkit-animation: tree_1leap 1.5s alternate infinite linear; -moz-animation: tree_1leap 1.5s alternate infinite linear; -o-animation: tree_1leap 1.5s alternate infinite linear; animation: tree_1leap 1.5s alternate infinite linear; -webkit-transform-origin: 43.44262295% 59.7826087%; -moz-transform-origin: 43.44262295% 59.7826087%; -ms-transform-origin: 43.44262295% 59.7826087%; -o-transform-origin: 43.44262295% 59.7826087%; transform-origin: 43.44262295% 59.7826087% } .tree_2leap { position: absolute; z-index: 1; background-image: url("../img/1_flower_2leaf.svg?v=4-22-15-6") } @-webkit-keyframes top_center { from { opacity: 0 } to { opacity: 1 } } @-moz-keyframes top_center { from { opacity: 0 } to { opacity: 1 } } @-o-keyframes top_center { from { opacity: 0 } to { opacity: 1 } } @keyframes top_center { from { opacity: 0 } to { opacity: 1 } } @-webkit-keyframes banner_txt_scoll_none { from { -webkit-transform: translateY(2%); transform: translateY(2%); opacity: 1 } to { -webkit-transform: translateY(50%); transform: translateY(50%); opacity: 1 } } @-moz-keyframes banner_txt_scoll_none { from { -moz-transform: translateY(2%); transform: translateY(2%); opacity: 1 } to { -moz-transform: translateY(50%); transform: translateY(50%); opacity: 1 } } @-o-keyframes banner_txt_scoll_none { from { -o-transform: translateY(2%); transform: translateY(2%); opacity: 1 } to { -o-transform: translateY(50%); transform: translateY(50%); opacity: 1 } } @keyframes banner_txt_scoll_none { from { -webkit-transform: translateY(2%); -moz-transform: translateY(2%); -o-transform: translateY(2%); transform: translateY(2%); opacity: 1 } to { -webkit-transform: translateY(50%); -moz-transform: translateY(50%); -o-transform: translateY(50%); transform: translateY(50%); opacity: 1 } } @-webkit-keyframes banner_txt_scoll { from { -webkit-transform: translateY(50%); transform: translateY(50%); opacity: 1 } to { -webkit-transform: translateY(2%); transform: translateY(2%); opacity: 1 } } @-moz-keyframes banner_txt_scoll { from { -moz-transform: translateY(50%); transform: translateY(50%); opacity: 1 } to { -moz-transform: translateY(2%); transform: translateY(2%); opacity: 1 } } @-o-keyframes banner_txt_scoll { from { -o-transform: translateY(50%); transform: translateY(50%); opacity: 1 } to { -o-transform: translateY(2%); transform: translateY(2%); opacity: 1 } } @keyframes banner_txt_scoll { from { -webkit-transform: translateY(50%); -moz-transform: translateY(50%); -o-transform: translateY(50%); transform: translateY(50%); opacity: 1 } to { -webkit-transform: translateY(2%); -moz-transform: translateY(2%); -o-transform: translateY(2%); transform: translateY(2%); opacity: 1 } } @-webkit-keyframes banner_btn_none { from { top: 0; right: 0; -webkit-transform: translateX(0) scale(.5, .5); transform: translateX(0) scale(.5, .5) } to { top: 60%; right: 50%; -webkit-transform: translateX(50%) scale(1, 1); transform: translateX(50%) scale(1, 1) } } @-moz-keyframes banner_btn_none { from { top: 0; right: 0; -moz-transform: translateX(0) scale(.5, .5); transform: translateX(0) scale(.5, .5) } to { top: 60%; right: 50%; -moz-transform: translateX(50%) scale(1, 1); transform: translateX(50%) scale(1, 1) } } @-o-keyframes banner_btn_none { from { top: 0; right: 0; -o-transform: translateX(0) scale(.5, .5); transform: translateX(0) scale(.5, .5) } to { top: 60%; right: 50%; -o-transform: translateX(50%) scale(1, 1); transform: translateX(50%) scale(1, 1) } } @keyframes banner_btn_none { from { top: 0; right: 0; -webkit-transform: translateX(0) scale(.5, .5); -moz-transform: translateX(0) scale(.5, .5); -o-transform: translateX(0) scale(.5, .5); transform: translateX(0) scale(.5, .5) } to { top: 60%; right: 50%; -webkit-transform: translateX(50%) scale(1, 1); -moz-transform: translateX(50%) scale(1, 1); -o-transform: translateX(50%) scale(1, 1); transform: translateX(50%) scale(1, 1) } } @-webkit-keyframes banner_btn { from { top: 60%; right: 50%; -webkit-transform: translateX(50%) scale(1, 1); transform: translateX(50%) scale(1, 1) } to { top: 0; right: 0; -webkit-transform: translateX(0) scale(.5, .5); transform: translateX(0) scale(.5, .5) } } @-moz-keyframes banner_btn { from { top: 60%; right: 50%; -moz-transform: translateX(50%) scale(1, 1); transform: translateX(50%) scale(1, 1) } to { top: 0; right: 0; -moz-transform: translateX(0) scale(.5, .5); transform: translateX(0) scale(.5, .5) } } @-o-keyframes banner_btn { from { top: 60%; right: 50%; -o-transform: translateX(50%) scale(1, 1); transform: translateX(50%) scale(1, 1) } to { top: 0; right: 0; -o-transform: translateX(0) scale(.5, .5); transform: translateX(0) scale(.5, .5) } } @keyframes banner_btn { from { top: 60%; right: 50%; -webkit-transform: translateX(50%) scale(1, 1); -moz-transform: translateX(50%) scale(1, 1); -o-transform: translateX(50%) scale(1, 1); transform: translateX(50%) scale(1, 1) } to { top: 0; right: 0; -webkit-transform: translateX(0) scale(.5, .5); -moz-transform: translateX(0) scale(.5, .5); -o-transform: translateX(0) scale(.5, .5); transform: translateX(0) scale(.5, .5) } } @-webkit-keyframes banner_txt { from { -webkit-transform: translateY(100%); transform: translateY(100%) } to { -webkit-transform: translateY(50%); transform: translateY(50%); opacity: 1 } } @-moz-keyframes banner_txt { from { -moz-transform: translateY(100%); transform: translateY(100%) } to { -moz-transform: translateY(50%); transform: translateY(50%); opacity: 1 } } @-o-keyframes banner_txt { from { -o-transform: translateY(100%); transform: translateY(100%) } to { -o-transform: translateY(50%); transform: translateY(50%); opacity: 1 } } @keyframes banner_txt { from { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%) } to { -webkit-transform: translateY(50%); -moz-transform: translateY(50%); -o-transform: translateY(50%); transform: translateY(50%); opacity: 1 } } @-webkit-keyframes img1 { 0% { -webkit-transform: translateY(20%); transform: translateY(20%); opacity: 0 } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1 } } @-moz-keyframes img1 { 0% { -moz-transform: translateY(20%); transform: translateY(20%); opacity: 0 } 100% { -moz-transform: translateY(0); transform: translateY(0); opacity: 1 } } @-o-keyframes img1 { 0% { -o-transform: translateY(20%); transform: translateY(20%); opacity: 0 } 100% { -o-transform: translateY(0); transform: translateY(0); opacity: 1 } } @keyframes img1 { 0% { -webkit-transform: translateY(20%); -moz-transform: translateY(20%); -o-transform: translateY(20%); transform: translateY(20%); opacity: 0 } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1 } } @-webkit-keyframes img1_word { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 0 } 100% { -webkit-transform: translate(-72.57142857%, -71.71428571%); transform: translate(-72.57142857%, -71.71428571%); opacity: 1 } } @-moz-keyframes img1_word { 0% { -moz-transform: translate(0, 0); transform: translate(0, 0); opacity: 0 } 100% { -moz-transform: translate(-72.57142857%, -71.71428571%); transform: translate(-72.57142857%, -71.71428571%); opacity: 1 } } @-o-keyframes img1_word { 0% { -o-transform: translate(0, 0); transform: translate(0, 0); opacity: 0 } 100% { -o-transform: translate(-72.57142857%, -71.71428571%); transform: translate(-72.57142857%, -71.71428571%); opacity: 1 } } @keyframes img1_word { 0% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); opacity: 0 } 100% { -webkit-transform: translate(-72.57142857%, -71.71428571%); -moz-transform: translate(-72.57142857%, -71.71428571%); -o-transform: translate(-72.57142857%, -71.71428571%); transform: translate(-72.57142857%, -71.71428571%); opacity: 1 } } @-webkit-keyframes img1_ppt { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 0 } 100% { -webkit-transform: translate(200%, -90.8%); transform: translate(200%, -90.8%); opacity: 1 } } @-moz-keyframes img1_ppt { 0% { -moz-transform: translate(0, 0); transform: translate(0, 0); opacity: 0 } 100% { -moz-transform: translate(200%, -90.8%); transform: translate(200%, -90.8%); opacity: 1 } } @-o-keyframes img1_ppt { 0% { -o-transform: translate(0, 0); transform: translate(0, 0); opacity: 0 } 100% { -o-transform: translate(200%, -90.8%); transform: translate(200%, -90.8%); opacity: 1 } } @keyframes img1_ppt { 0% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); opacity: 0 } 100% { -webkit-transform: translate(200%, -90.8%); -moz-transform: translate(200%, -90.8%); -o-transform: translate(200%, -90.8%); transform: translate(200%, -90.8%); opacity: 1 } } @-webkit-keyframes left_foot { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(-3deg); transform: rotate(-3deg) } } @-moz-keyframes left_foot { 0% { -moz-transform: rotate(0deg); transform: rotate(0deg) } 100% { -moz-transform: rotate(-3deg); transform: rotate(-3deg) } } @-o-keyframes left_foot { 0% { -o-transform: rotate(0deg); transform: rotate(0deg) } 100% { -o-transform: rotate(-3deg); transform: rotate(-3deg) } } @keyframes left_foot { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); transform: rotate(-3deg) } } @-webkit-keyframes right_foot { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(8deg); transform: rotate(8deg) } } @-moz-keyframes right_foot { 0% { -moz-transform: rotate(0deg); transform: rotate(0deg) } 100% { -moz-transform: rotate(8deg); transform: rotate(8deg) } } @-o-keyframes right_foot { 0% { -o-transform: rotate(0deg); transform: rotate(0deg) } 100% { -o-transform: rotate(8deg); transform: rotate(8deg) } } @keyframes right_foot { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg); -o-transform: rotate(8deg); transform: rotate(8deg) } } @-webkit-keyframes girl_hand { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 33% { -webkit-transform: rotate(-6deg); transform: rotate(-6deg) } 66% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } } @-moz-keyframes girl_hand { 0% { -moz-transform: rotate(0deg); transform: rotate(0deg) } 33% { -moz-transform: rotate(-6deg); transform: rotate(-6deg) } 66% { -moz-transform: rotate(0deg); transform: rotate(0deg) } 100% { -moz-transform: rotate(0deg); transform: rotate(0deg) } } @-o-keyframes girl_hand { 0% { -o-transform: rotate(0deg); transform: rotate(0deg) } 33% { -o-transform: rotate(-6deg); transform: rotate(-6deg) } 66% { -o-transform: rotate(0deg); transform: rotate(0deg) } 100% { -o-transform: rotate(0deg); transform: rotate(0deg) } } @keyframes girl_hand { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg) } 33% { -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg); -o-transform: rotate(-6deg); transform: rotate(-6deg) } 66% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg) } } @-webkit-keyframes img1_man { 0% { -webkit-transform: translateY(0); transform: translateY(0) } 50% { -webkit-transform: translateY(-0.014706rem); transform: translateY(-0.014706rem) } 100% { -webkit-transform: translateY(0); transform: translateY(0) } } @-moz-keyframes img1_man { 0% { -moz-transform: translateY(0); transform: translateY(0) } 50% { -moz-transform: translateY(-0.014706rem); transform: translateY(-0.014706rem) } 100% { -moz-transform: translateY(0); transform: translateY(0) } } @-o-keyframes img1_man { 0% { -o-transform: translateY(0); transform: translateY(0) } 50% { -o-transform: translateY(-0.014706rem); transform: translateY(-0.014706rem) } 100% { -o-transform: translateY(0); transform: translateY(0) } } @keyframes img1_man { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } 50% { -webkit-transform: translateY(-0.014706rem); -moz-transform: translateY(-0.014706rem); -o-transform: translateY(-0.014706rem); transform: translateY(-0.014706rem) } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } } @-webkit-keyframes tree_1leap { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg) } } @-moz-keyframes tree_1leap { 0% { -moz-transform: rotate(0deg); transform: rotate(0deg) } 100% { -moz-transform: rotate(-5deg); transform: rotate(-5deg) } } @-o-keyframes tree_1leap { 0% { -o-transform: rotate(0deg); transform: rotate(0deg) } 100% { -o-transform: rotate(-5deg); transform: rotate(-5deg) } } @keyframes tree_1leap { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg) } } .section_all { width: 100%; max-width: 100% } .section_content { position: relative; top: 0; width: 100%; height: 100%; max-width: 100% } .section_title { position: absolute; z-index: 666; top: 15.3%; left: 0; right: 0; width: 100%; font-size: 0.323529rem; line-height: 1; text-align: center; } .section_title h2 { font-size: 0.323529rem; } .section_title_txt { z-index: 666; position: absolute; top: 23.7%; left: 0; right: 0; width: 100%; font-size: 0.176471rem; font-weight: 100; text-align: center; opacity: .6; } .section_title_txt h3 { font-size: 0.176471rem; } .img2 { position: absolute; /* bottom: 0.419118rem; */ left: 0; height: 74.847%; max-height: 4.507353rem; right: 0; top: 22.899%; width: 100%; /* padding-top: 50.08333333%; */ background: url(../img/2_bg.png) no-repeat; -o-background-size: 100% 100%; background-size: 100% 100%; z-index: 3; } .img2_top { position: absolute; bottom: 0.036765rem; left: 0; right: 0; width: 49.16666667%; margin: 0 auto; height: 0.220588rem; text-align: left; z-index: 1; text-align: center; } .img2_logo1, .img2_logo2, .img2_logo3 { display: inline-block; vertical-align: middle; position: relative; width: 0.110294rem; height: 0.110294rem; background-color: #dddddd; border-radius: 0.330882rem; /* margin-right: 0.117647rem; */ margin: 0 0.073529rem; } .img2_logo1_active, .img2_logo2_active, .img2_logo3_active { position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; background-color: #fe9761; border-radius: 0.330882rem; } /* .img2_logo1 { background: url("../img/2_logo1.svg?v=4-22-15-6") no-repeat; } .img2_logo2 { background: url("../img/2_logo2.svg?v=4-22-15-6") no-repeat; } .img2_logo3 { background: url("../img/2_logo3.svg?v=4-22-15-6") no-repeat; } */ .img2_logo1_active { -webkit-animation: img2_logo1 18s -1s infinite; -moz-animation: img2_logo1 18s -1s infinite; -o-animation: img2_logo1 18s -1s infinite; animation: img2_logo1 18s -1s infinite } .img2_logo2_active { -webkit-animation: img2_logo1 18s 5s infinite; -moz-animation: img2_logo1 18s 5s infinite; -o-animation: img2_logo1 18s 5s infinite; animation: img2_logo1 18s 5s infinite } .img2_logo3_active { -webkit-animation: img2_logo1 18s 11s infinite; -moz-animation: img2_logo1 18s 11s infinite; -o-animation: img2_logo1 18s 11s infinite; animation: img2_logo1 18s 11s infinite } .img2_main { position: absolute; width: 48.2%; height: 60.03%; /* bottom: 19.8%; */ top: 20.065%; left: .4%; right: 0; margin: 0 auto; overflow: hidden; border-radius: 0.073529rem; } .img2_ul { position: absolute; width: 300%; height: 100%; top: 0; left: 0; -webkit-animation: img2_change 18s infinite; -moz-animation: img2_change 18s infinite; -o-animation: img2_change 18s infinite; animation: img2_change 18s infinite; } .img2_1, .img2_2, .img2_3 { position: relative; width: 33.33%; height: 100%; float: left; -o-background-size: 100% 100%!important; background-size: 100% 100%!important; } .img2_1 { background: url("../img/2_img1.png") no-repeat; } .img2_2 { background: url("../img/2_img2.png") no-repeat; } .img2_3 { background: url("../img/2_img3_bg.png") no-repeat; } .img2_title { position: absolute; top: 32.724458%; left: 27.6%; color: #242f44; font-size: 0.176471rem; height: 0.242647rem; line-height: 0.242647rem; padding: 0.014706rem; } .img2_title .txt { position: relative; display: block; top: 0; left: 0; color: #465675; z-index: 2; } .img2_select { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0.441176rem; width: 0; height: 100%; -webkit-animation: img2_select 18s 1s infinite forwards; -moz-animation: img2_select 18s 1s infinite forwards; -o-animation: img2_select 18s 1s infinite forwards; animation: img2_select 18s 1s infinite forwards; background: rgba(235, 84, 81, 0.6); border-radius: 0.014706rem /* 2/16 */ } .img2_text_mouth { position: absolute; top: -20%; left: -0.220588rem; bottom: 0; width: 0.073529rem; height: 140%; background: url("../img/2_text_mouth.png") no-repeat center center; -o-background-size: contain; background-size: contain; -webkit-animation: img2_text_mouth 18s 1s infinite forwards; -moz-animation: img2_text_mouth 18s 1s infinite forwards; -o-animation: img2_text_mouth 18s 1s infinite forwards; animation: img2_text_mouth 18s 1s infinite forwards } .img2_pop { position: absolute; width: 39.1634981%; height: 34.6749226%; top: 44.393189%; left: 47.041825%; background: url("../img/2_img1_pop.png") no-repeat; -o-background-size: contain; background-size: contain; -webkit-animation: img2_pop 18s 2s infinite forwards ease-out; -moz-animation: img2_pop 18s 2s infinite forwards ease-out; -o-animation: img2_pop 18s 2s infinite forwards ease-out; animation: img2_pop 18s 2s infinite forwards ease-out; opacity: 0; -webkit-transform: translateY(0.073529rem); -moz-transform: translateY(0.073529rem); -ms-transform: translateY(0.073529rem); -o-transform: translateY(0.073529rem); transform: translateY(0.073529rem); } .img2_2_change { z-index: 2; width: 100%; height: 100%; background: url("../img/2_img2_change.png") no-repeat; -o-background-size: contain; background-size: contain; -webkit-animation: img2_2_change 18s 6s infinite forwards; -moz-animation: img2_2_change 18s 6s infinite forwards; -o-animation: img2_2_change 18s 6s infinite forwards; animation: img2_2_change 18s 6s infinite forwards; opacity: 0; } .img2_2_night_bg { position: absolute; z-index: 3; width: 6.08365019%; height: 7.907121%; top: 16%; left: 40.102662%; background: url("../img/2_img2_night_bg.png") no-repeat; -o-background-size: contain; background-size: contain; opacity: .7; -webkit-animation: img2_2_night_bg 1s 7s infinite forwards; -moz-animation: img2_2_night_bg 1s 7s infinite forwards; -o-animation: img2_2_night_bg 1s 7s infinite forwards; animation: img2_2_night_bg 1s 7s infinite forwards; } .img2_2_mouth { position: absolute; z-index: 4; width: 3.604563%; height: 5.383901%; top: 28.195046%; left: 44.863118%; background: url("../img/2_img2_mouth.png") no-repeat; -o-background-size: contain; background-size: contain; opacity: 0; -webkit-animation: img2_2_mouth 18s 6s infinite forwards; -moz-animation: img2_2_mouth 18s 6s infinite forwards; -o-animation: img2_2_mouth 18s 6s infinite forwards; animation: img2_2_mouth 18s 6s infinite forwards; } .img2_2_pop { position: absolute; z-index: 3; width: 21.29277567%; height: 46.43962848%; top: 25.07739938%; left: 67.4904943%; background: url("../img/2_img2_pop.png") no-repeat; -o-background-size: contain; background-size: contain; opacity: 0; -webkit-animation: img2_2_pop 18s 6s infinite forwards; -moz-animation: img2_2_pop 18s 6s infinite forwards; -o-animation: img2_2_pop 18s 6s infinite forwards; animation: img2_2_pop 18s 6s infinite forwards; -webkit-transform: translate(0, -6.66666667%); -moz-transform: translate(0, -6.66666667%); -ms-transform: translate(0, -6.66666667%); -o-transform: translate(0, -6.66666667%); transform: translate(0, -6.66666667%) } .img2_2_select_bg { position: absolute; z-index: 3; width: 13.68821293%; height: 6.50154799%; top: 43.34365325%; left: 71.29277567%; background: url("../img/2_img2_select_bg.png") no-repeat; -o-background-size: contain; background-size: contain; opacity: 0; -webkit-animation: img2_2_select_bg 18s 6s infinite forwards; -moz-animation: img2_2_select_bg 18s 6s infinite forwards; -o-animation: img2_2_select_bg 18s 6s infinite forwards; animation: img2_2_select_bg 18s 6s infinite forwards } .img2_3_mouth { position: absolute; z-index: 4; width: 3.604563%; height: 6.383901%; top: 30.390093%; left: 53.121673%; background: url("../img/2_img2_mouth.png") no-repeat; -o-background-size: contain; background-size: contain; opacity: 0; -webkit-animation: img2_3_mouth 18s 12s infinite forwards; -moz-animation: img2_3_mouth 18s 12s infinite forwards; -o-animation: img2_3_mouth 18s 12s infinite forwards; animation: img2_3_mouth 18s 12s infinite forwards; } .img2_3_night_bg { position: absolute; z-index: 3; width: 6.08365019%; height: 9.90712074%; top: 17.3374613%; left: 29.08745247%; background: url("../img/2_img2_night_bg.svg?v=4-22-15-6") no-repeat; -o-background-size: contain; background-size: contain; opacity: 0; -webkit-animation: img2_3_night_bg 18s 12s infinite forwards; -moz-animation: img2_3_night_bg 18s 12s infinite forwards; -o-animation: img2_3_night_bg 18s 12s infinite forwards; animation: img2_3_night_bg 18s 12s infinite forwards } .img2_3_gray { position: absolute; z-index: 4; width: 100%; height: 100%; opacity: 0; -webkit-animation: img2_3_gray 18s 12s infinite forwards; -moz-animation: img2_3_gray 18s 12s infinite forwards; -o-animation: img2_3_gray 18s 12s infinite forwards; animation: img2_3_gray 18s 12s infinite forwards; background: #000 } .img2_3_change { position: absolute; z-index: 4; width: 100%; height: 100%; background: url("../img/2_img3_change_bg.png") no-repeat #fff; -o-background-size: contain; background-size: contain; -webkit-animation: img2_3_change 18s 12s infinite forwards; -moz-animation: img2_3_change 18s 12s infinite forwards; -o-animation: img2_3_change 18s 12s infinite forwards; animation: img2_3_change 18s 12s infinite forwards; opacity: 0 } .img2_3_control { position: absolute; z-index: 5; width: 28.51711027%; height: 4.95356037%; top: 0; right: 1.90114068%; /* background: url("../img/2_img3_control.png") no-repeat; */ -o-background-size: contain; background-size: contain; -webkit-animation: img2_3_control 18s 12s infinite forwards; -moz-animation: img2_3_control 18s 12s infinite forwards; -o-animation: img2_3_control 18s 12s infinite forwards; animation: img2_3_control 18s 12s infinite forwards; opacity: 0 } .img2_circle { position: absolute; width: 7.5%; height: 14.9750416%; top: -7.4875208%; left: 0; background: url("../img/2_left.png") no-repeat; -o-background-size: contain; background-size: contain; -webkit-animation: img2_circle 2s ease-in-out alternate infinite; -moz-animation: img2_circle 2s ease-in-out alternate infinite; -o-animation: img2_circle 2s ease-in-out alternate infinite; animation: img2_circle 2s ease-in-out alternate infinite; -webkit-transform: translateY(0.110294rem); -moz-transform: translateY(0.110294rem); -ms-transform: translateY(0.110294rem); -o-transform: translateY(0.110294rem); transform: translateY(0.110294rem) } .img2_clock { position: absolute; width: 13.66666667%; height: 27.28785358%; top: -10.31613977%; right: -3.99334443%; background: url("../img/2_right.png") no-repeat; -o-background-size: contain; background-size: contain; } @-webkit-keyframes img2_logo1 { 0% { opacity: 0 } 3% { opacity: 1 } 33% { opacity: 1 } 36% { opacity: 0 } } @-moz-keyframes img2_logo1 { 0% { opacity: 0 } 3% { opacity: 1 } 33% { opacity: 1 } 36% { opacity: 0 } } @-o-keyframes img2_logo1 { 0% { opacity: 0 } 3% { opacity: 1 } 33% { opacity: 1 } 36% { opacity: 0 } } @keyframes img2_logo1 { 0% { opacity: 0 } 3% { opacity: 1 } 33% { opacity: 1 } 36% { opacity: 0 } } @-webkit-keyframes img2_change { 0% { /* transform: translateX(0) */ margin-left: 0; } 27.8% { /* transform: translateX(0) */ margin-left: 0; } 33.3% { /* transform: translateX(-33.33%) */ margin-left: -100%; } 61.1% { /* transform: translateX(-33.33%) */ margin-left: -100%; } 66.6% { /* transform: translateX(-66.66%) */ margin-left: -200%; } 94.4% { /* transform: translateX(-66.66%) */ margin-left: -200%; } 100% { /* transform: translateX(0) */ margin-left: 0; } } @-moz-keyframes img2_change { 0% { /* transform: translateX(0) */ margin-left: 0; } 27.8% { /* transform: translateX(0) */ margin-left: 0; } 33.3% { /* transform: translateX(-33.33%) */ margin-left: -100%; } 61.1% { /* transform: translateX(-33.33%) */ margin-left: -100%; } 66.6% { /* transform: translateX(-66.66%) */ margin-left: -200%; } 94.4% { /* transform: translateX(-66.66%) */ margin-left: -200%; } 100% { /* transform: translateX(0) */ margin-left: 0; } } @-o-keyframes img2_change { 0% { /* transform: translateX(0) */ margin-left: 0; } 27.8% { /* transform: translateX(0) */ margin-left: 0; } 33.3% { /* transform: translateX(-33.33%) */ margin-left: -100%; } 61.1% { /* transform: translateX(-33.33%) */ margin-left: -100%; } 66.6% { /* transform: translateX(-66.66%) */ margin-left: -200%; } 94.4% { /* transform: translateX(-66.66%) */ margin-left: -200%; } 100% { /* transform: translateX(0) */ margin-left: 0; } } @keyframes img2_change { 0% { /* transform: translateX(0) */ margin-left: 0; } 27.8% { /* transform: translateX(0) */ margin-left: 0; } 33.3% { /* transform: translateX(-33.33%) */ margin-left: -100%; } 61.1% { /* transform: translateX(-33.33%) */ margin-left: -100%; } 66.6% { /* transform: translateX(-66.66%) */ margin-left: -200%; } 94.4% { /* transform: translateX(-66.66%) */ margin-left: -200%; } 100% { /* transform: translateX(0) */ margin-left: 0; } } @-webkit-keyframes img2_select { 0% { width: 0 } 6% { width: 100% } 50% { width: 100% } 51% { width: 0 } } @-moz-keyframes img2_select { 0% { width: 0 } 6% { width: 100% } 50% { width: 100% } 51% { width: 0 } } @-o-keyframes img2_select { 0% { width: 0 } 6% { width: 100% } 50% { width: 100% } 51% { width: 0 } } @keyframes img2_select { 0% { width: 0 } 6% { width: 100% } 50% { width: 100% } 51% { width: 0 } } @-webkit-keyframes img2_text_mouth { 0% { left: -0.073529rem } 6% { left: 1.139706rem /* 135/16 */ ; opacity: 1 } 7% { left: 1.139706rem /* 135/16 */ ; opacity: 0 } 50% { left: 1.139706rem /* 135/16 */ ; opacity: 0 } 51% { left: -0.073529rem /* 30/16 */ ; opacity: 1 } } @-moz-keyframes img2_text_mouth { 0% { left: -0.073529rem } 6% { left: 1.139706rem /* 135/16 */ ; opacity: 1 } 7% { left: 1.139706rem /* 135/16 */ ; opacity: 0 } 50% { left: 1.139706rem /* 135/16 */ ; opacity: 0 } 51% { left: -0.073529rem /* 30/16 */ ; opacity: 1 } } @-o-keyframes img2_text_mouth { 0% { left: -0.073529rem } 6% { left: 1.139706rem /* 135/16 */ ; opacity: 1 } 7% { left: 1.139706rem /* 135/16 */ ; opacity: 0 } 50% { left: 1.139706rem /* 135/16 */ ; opacity: 0 } 51% { left: -0.073529rem /* 30/16 */ ; opacity: 1 } } @keyframes img2_text_mouth { 0% { left: -0.073529rem } 6% { left: 1.139706rem /* 135/16 */ ; opacity: 1 } 7% { left: 1.139706rem /* 135/16 */ ; opacity: 0 } 50% { left: 1.139706rem /* 135/16 */ ; opacity: 0 } 51% { left: -0.073529rem /* 30/16 */ ; opacity: 1 } } @-webkit-keyframes img2_pop { 0% { opacity: 0; -webkit-transform: translateY(0.073529rem); transform: translateY(0.073529rem) } 3% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } 34% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } 35% { opacity: 0; -webkit-transform: translateY(0.073529rem); transform: translateY(0.073529rem) } } @-moz-keyframes img2_pop { 0% { opacity: 0; -moz-transform: translateY(0.073529rem); transform: translateY(0.073529rem) } 3% { opacity: 1; -moz-transform: translateY(0); transform: translateY(0) } 34% { opacity: 1; -moz-transform: translateY(0); transform: translateY(0) } 35% { opacity: 0; -moz-transform: translateY(0.073529rem); transform: translateY(0.073529rem) } } @-o-keyframes img2_pop { 0% { opacity: 0; -o-transform: translateY(0.073529rem); transform: translateY(0.073529rem) } 3% { opacity: 1; -o-transform: translateY(0); transform: translateY(0) } 34% { opacity: 1; -o-transform: translateY(0); transform: translateY(0) } 35% { opacity: 0; -o-transform: translateY(0.073529rem); transform: translateY(0.073529rem) } } @keyframes img2_pop { 0% { opacity: 0; -webkit-transform: translateY(0.073529rem); -moz-transform: translateY(0.073529rem); -o-transform: translateY(0.073529rem); transform: translateY(0.073529rem) } 3% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } 34% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } 35% { opacity: 0; -webkit-transform: translateY(0.073529rem); -moz-transform: translateY(0.073529rem); -o-transform: translateY(0.073529rem); transform: translateY(0.073529rem) } } @-webkit-keyframes img2_2_change { 0% { opacity: 0 } 14.8% { opacity: 0 } 18.5% { opacity: 1 } } @-moz-keyframes img2_2_change { 0% { opacity: 0 } 14.8% { opacity: 0 } 18.5% { opacity: 1 } } @-o-keyframes img2_2_change { 0% { opacity: 0 } 14.8% { opacity: 0 } 18.5% { opacity: 1 } } @keyframes img2_2_change { 0% { opacity: 0 } 14.8% { opacity: 0 } 18.5% { opacity: 1 } } @-webkit-keyframes img2_2_night_bg { 0% { opacity: .7 } 1.85% { opacity: .7 } 3.7% { opacity: 1 } 5.55% { opacity: .7 } 100% { opacity: .7 } } @-moz-keyframes img2_2_night_bg { 0% { opacity: .7 } 1.85% { opacity: .7 } 3.7% { opacity: 1 } 5.55% { opacity: .7 } 100% { opacity: .7 } } @-o-keyframes img2_2_night_bg { 0% { opacity: .7 } 1.85% { opacity: .7 } 3.7% { opacity: 1 } 5.55% { opacity: .7 } 100% { opacity: .7 } } @keyframes img2_2_night_bg { 0% { opacity: .7 } 1.85% { opacity: .7 } 3.7% { opacity: 1 } 5.55% { opacity: .7 } 100% { opacity: .7 } } @-webkit-keyframes img2_2_mouth { 0% { opacity: 0 } 1.85% { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0) } 5.55% { -webkit-transform: translate(-75%, -150%); transform: translate(-75%, -150%) } 7.4% { -webkit-transform: scale(1) translate(-75%, -150%); transform: scale(1) translate(-75%, -150%) } 9.25% { opacity: .8; -webkit-transform: scale(.9) translate(-75%, -150%); transform: scale(.9) translate(-75%, -150%) } 11.1% { opacity: 1; -webkit-transform: scale(1) translate(-75%, -150%); transform: scale(1) translate(-75%, -150%) } } @-moz-keyframes img2_2_mouth { 0% { opacity: 0 } 1.85% { opacity: 1; -moz-transform: translate(0, 0); transform: translate(0, 0) } 5.55% { -moz-transform: translate(-75%, -150%); transform: translate(-75%, -150%) } 7.4% { -moz-transform: scale(1) translate(-75%, -150%); transform: scale(1) translate(-75%, -150%) } 9.25% { opacity: .8; -moz-transform: scale(.9) translate(-75%, -150%); transform: scale(.9) translate(-75%, -150%) } 11.1% { opacity: 1; -moz-transform: scale(1) translate(-75%, -150%); transform: scale(1) translate(-75%, -150%) } } @-o-keyframes img2_2_mouth { 0% { opacity: 0 } 1.85% { opacity: 1; -o-transform: translate(0, 0); transform: translate(0, 0) } 5.55% { -o-transform: translate(-75%, -150%); transform: translate(-75%, -150%) } 7.4% { -o-transform: scale(1) translate(-75%, -150%); transform: scale(1) translate(-75%, -150%) } 9.25% { opacity: .8; -o-transform: scale(.9) translate(-75%, -150%); transform: scale(.9) translate(-75%, -150%) } 11.1% { opacity: 1; -o-transform: scale(1) translate(-75%, -150%); transform: scale(1) translate(-75%, -150%) } } @keyframes img2_2_mouth { 0% { opacity: 0 } 1.85% { opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0) } 5.55% { -webkit-transform: translate(-75%, -150%); -moz-transform: translate(-75%, -150%); -o-transform: translate(-75%, -150%); transform: translate(-75%, -150%) } 7.4% { -webkit-transform: scale(1) translate(-75%, -150%); -moz-transform: scale(1) translate(-75%, -150%); -o-transform: scale(1) translate(-75%, -150%); transform: scale(1) translate(-75%, -150%) } 9.25% { opacity: .8; -webkit-transform: scale(.9) translate(-75%, -150%); -moz-transform: scale(.9) translate(-75%, -150%); -o-transform: scale(.9) translate(-75%, -150%); transform: scale(.9) translate(-75%, -150%) } 11.1% { opacity: 1; -webkit-transform: scale(1) translate(-75%, -150%); -moz-transform: scale(1) translate(-75%, -150%); -o-transform: scale(1) translate(-75%, -150%); transform: scale(1) translate(-75%, -150%) } } @-webkit-keyframes img2_2_pop { 0% { opacity: 0 } 5.55% { opacity: 0 } 8.32% { opacity: 1; -webkit-transform: translate(0); transform: translate(0) } 14.8% { opacity: 1; -webkit-transform: translate(0); transform: translate(0) } 18.5% { opacity: 0; -webkit-transform: translate(0); transform: translate(0) } } @-moz-keyframes img2_2_pop { 0% { opacity: 0 } 5.55% { opacity: 0 } 8.32% { opacity: 1; -moz-transform: translate(0); transform: translate(0) } 14.8% { opacity: 1; -moz-transform: translate(0); transform: translate(0) } 18.5% { opacity: 0; -moz-transform: translate(0); transform: translate(0) } } @-o-keyframes img2_2_pop { 0% { opacity: 0 } 5.55% { opacity: 0 } 8.32% { opacity: 1; -o-transform: translate(0); transform: translate(0) } 14.8% { opacity: 1; -o-transform: translate(0); transform: translate(0) } 18.5% { opacity: 0; -o-transform: translate(0); transform: translate(0) } } @keyframes img2_2_pop { 0% { opacity: 0 } 5.55% { opacity: 0 } 8.32% { opacity: 1; -webkit-transform: translate(0); -moz-transform: translate(0); -o-transform: translate(0); transform: translate(0) } 14.8% { opacity: 1; -webkit-transform: translate(0); -moz-transform: translate(0); -o-transform: translate(0); transform: translate(0) } 18.5% { opacity: 0; -webkit-transform: translate(0); -moz-transform: translate(0); -o-transform: translate(0); transform: translate(0) } } @-webkit-keyframes img2_2_select_bg { 0% { opacity: 0 } 12.95% { opacity: 0 } 14.8% { opacity: 1 } 18.5% { opacity: 0 } } @-moz-keyframes img2_2_select_bg { 0% { opacity: 0 } 12.95% { opacity: 0 } 14.8% { opacity: 1 } 18.5% { opacity: 0 } } @-o-keyframes img2_2_select_bg { 0% { opacity: 0 } 12.95% { opacity: 0 } 14.8% { opacity: 1 } 18.5% { opacity: 0 } } @keyframes img2_2_select_bg { 0% { opacity: 0 } 12.95% { opacity: 0 } 14.8% { opacity: 1 } 18.5% { opacity: 0 } } @-webkit-keyframes img2_3_night_bg { 0% { opacity: 0 } 7.4% { opacity: .7 } 9.25% { opacity: 1 } 11.1% { opacity: .7 } 14.8% { opacity: 0 } } @-moz-keyframes img2_3_night_bg { 0% { opacity: 0 } 7.4% { opacity: .7 } 9.25% { opacity: 1 } 11.1% { opacity: .7 } 14.8% { opacity: 0 } } @-o-keyframes img2_3_night_bg { 0% { opacity: 0 } 7.4% { opacity: .7 } 9.25% { opacity: 1 } 11.1% { opacity: .7 } 14.8% { opacity: 0 } } @keyframes img2_3_night_bg { 0% { opacity: 0 } 7.4% { opacity: .7 } 9.25% { opacity: 1 } 11.1% { opacity: .7 } 14.8% { opacity: 0 } } @-webkit-keyframes img2_3_mouth { 0% { opacity: 0 } 1.85% { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0) } 5.55% { -webkit-transform: translate(-75%, -150%); transform: translate(-75%, -150%) } 7.4% { -webkit-transform: scale(1) translate(-75%, -150%); transform: scale(1) translate(-75%, -150%) } 9.25% { opacity: .8; -webkit-transform: scale(.9) translate(-75%, -150%); transform: scale(.9) translate(-75%, -150%) } 11.1% { opacity: 1; -webkit-transform: scale(1) translate(-75%, -150%); transform: scale(1) translate(-75%, -150%) } 14.8% { opacity: 0 } } @-moz-keyframes img2_3_mouth { 0% { opacity: 0 } 1.85% { opacity: 1; -moz-transform: translate(0, 0); transform: translate(0, 0) } 5.55% { -moz-transform: translate(-75%, -150%); transform: translate(-75%, -150%) } 7.4% { -moz-transform: scale(1) translate(-75%, -150%); transform: scale(1) translate(-75%, -150%) } 9.25% { opacity: .8; -moz-transform: scale(.9) translate(-75%, -150%); transform: scale(.9) translate(-75%, -150%) } 11.1% { opacity: 1; -moz-transform: scale(1) translate(-75%, -150%); transform: scale(1) translate(-75%, -150%) } 14.8% { opacity: 0 } } @-o-keyframes img2_3_mouth { 0% { opacity: 0 } 1.85% { opacity: 1; -o-transform: translate(0, 0); transform: translate(0, 0) } 5.55% { -o-transform: translate(-75%, -150%); transform: translate(-75%, -150%) } 7.4% { -o-transform: scale(1) translate(-75%, -150%); transform: scale(1) translate(-75%, -150%) } 9.25% { opacity: .8; -o-transform: scale(.9) translate(-75%, -150%); transform: scale(.9) translate(-75%, -150%) } 11.1% { opacity: 1; -o-transform: scale(1) translate(-75%, -150%); transform: scale(1) translate(-75%, -150%) } 14.8% { opacity: 0 } } @keyframes img2_3_mouth { 0% { opacity: 0 } 1.85% { opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0) } 5.55% { -webkit-transform: translate(-75%, -150%); -moz-transform: translate(-75%, -150%); -o-transform: translate(-75%, -150%); transform: translate(-75%, -150%) } 7.4% { -webkit-transform: scale(1) translate(-75%, -150%); -moz-transform: scale(1) translate(-75%, -150%); -o-transform: scale(1) translate(-75%, -150%); transform: scale(1) translate(-75%, -150%) } 9.25% { opacity: .8; -webkit-transform: scale(.9) translate(-75%, -150%); -moz-transform: scale(.9) translate(-75%, -150%); -o-transform: scale(.9) translate(-75%, -150%); transform: scale(.9) translate(-75%, -150%) } 11.1% { opacity: 1; -webkit-transform: scale(1) translate(-75%, -150%); -moz-transform: scale(1) translate(-75%, -150%); -o-transform: scale(1) translate(-75%, -150%); transform: scale(1) translate(-75%, -150%) } 14.8% { opacity: 0 } } @-webkit-keyframes img2_3_gray { 0% { opacity: 0 } 11.1% { opacity: 0 } 13.8% { opacity: 1 } 16.65% { opacity: 0 } } @-moz-keyframes img2_3_gray { 0% { opacity: 0 } 11.1% { opacity: 0 } 13.8% { opacity: 1 } 16.65% { opacity: 0 } } @-o-keyframes img2_3_gray { 0% { opacity: 0 } 11.1% { opacity: 0 } 13.8% { opacity: 1 } 16.65% { opacity: 0 } } @keyframes img2_3_gray { 0% { opacity: 0 } 11.1% { opacity: 0 } 13.8% { opacity: 1 } 16.65% { opacity: 0 } } @-webkit-keyframes img2_3_change { 0% { opacity: 0 } 13.8% { opacity: 0 } 16.65% { opacity: 1 } 33% { opacity: 1 } } @-moz-keyframes img2_3_change { 0% { opacity: 0 } 13.8% { opacity: 0 } 16.65% { opacity: 1 } 33% { opacity: 1 } } @-o-keyframes img2_3_change { 0% { opacity: 0 } 13.8% { opacity: 0 } 16.65% { opacity: 1 } 33% { opacity: 1 } } @keyframes img2_3_change { 0% { opacity: 0 } 13.8% { opacity: 0 } 16.65% { opacity: 1 } 33% { opacity: 1 } } @-webkit-keyframes img2_3_control { 0% { opacity: 0 } 16.67% { opacity: 0; -webkit-transform: translateY(0); transform: translateY(0) } 22.22% { opacity: 1; -webkit-transform: translateY(100%); transform: translateY(100%) } 50% { opacity: 1; -webkit-transform: translateY(100%); transform: translateY(100%) } } @-moz-keyframes img2_3_control { 0% { opacity: 0 } 16.67% { opacity: 0; -moz-transform: translateY(0); transform: translateY(0) } 22.22% { opacity: 1; -moz-transform: translateY(100%); transform: translateY(100%) } 50% { opacity: 1; -moz-transform: translateY(100%); transform: translateY(100%) } } @-o-keyframes img2_3_control { 0% { opacity: 0 } 16.67% { opacity: 0; -o-transform: translateY(0); transform: translateY(0) } 22.22% { opacity: 1; -o-transform: translateY(100%); transform: translateY(100%) } 50% { opacity: 1; -o-transform: translateY(100%); transform: translateY(100%) } } @keyframes img2_3_control { 0% { opacity: 0 } 16.67% { opacity: 0; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } 22.22% { opacity: 1; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%) } 50% { opacity: 1; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%) } } @-webkit-keyframes img2_circle { 0% { -webkit-transform: translateY(0.110294rem); transform: translateY(0.110294rem) } 100% { -webkit-transform: translateY(0); transform: translateY(0) } } @-moz-keyframes img2_circle { 0% { -moz-transform: translateY(0.110294rem); transform: translateY(0.110294rem) } 100% { -moz-transform: translateY(0); transform: translateY(0) } } @-o-keyframes img2_circle { 0% { -o-transform: translateY(0.110294rem); transform: translateY(0.110294rem) } 100% { -o-transform: translateY(0); transform: translateY(0) } } @keyframes img2_circle { 0% { -webkit-transform: translateY(0.110294rem); -moz-transform: translateY(0.110294rem); -o-transform: translateY(0.110294rem); transform: translateY(0.110294rem) } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } } .img3 { position: absolute; /* bottom: 0.433824rem; */ left: 0; top: 27.8481%; right: 0; width: 100%; height: 65.3624%; background: url(../img/3_bg.png) no-repeat; -o-background-size: contain; background-size: contain; background-position-x: center; } /* .img3_main { position: absolute; bottom: -3.75rem; left: 0; right: 0; width: 100%; padding-top: 50.08333333%; background: url("../img/3_bg.png") no-repeat; } */ .img3_left { position: absolute; width: 8.33333333%; height: 16.63893511%; top: 23.371048%; left: -1.25%; background: url("../img/3_left.png") no-repeat; -o-background-size: contain; background-size: contain; -webkit-animation: img2_circle 2s ease-in-out alternate infinite; -moz-animation: img2_circle 2s ease-in-out alternate infinite; -o-animation: img2_circle 2s ease-in-out alternate infinite; animation: img2_circle 2s ease-in-out alternate infinite; -webkit-transform: translateY(0.110294rem); -moz-transform: translateY(0.110294rem); -ms-transform: translateY(0.110294rem); -o-transform: translateY(0.110294rem); transform: translateY(0.110294rem); } .img3_right { position: absolute; width: 8.33333333%; height: 16.63893511%; top: 18.510815%; right: -6.25%; background: url("../img/3_right.png") no-repeat; -o-background-size: contain; background-size: contain; -webkit-animation: img2_circle 2s ease-in-out alternate infinite; -moz-animation: img2_circle 2s ease-in-out alternate infinite; -o-animation: img2_circle 2s ease-in-out alternate infinite; animation: img2_circle 2s ease-in-out alternate infinite; -webkit-transform: translateY(0.110294rem); -moz-transform: translateY(0.110294rem); -ms-transform: translateY(0.110294rem); -o-transform: translateY(0.110294rem); transform: translateY(0.110294rem); } .img3_top { position: absolute; width: 8.33333333%; height: 16.63893511%; top: -12.489185%; right: 72.75%; background: url("../img/3_top.png") no-repeat; -o-background-size: contain; background-size: contain; -webkit-animation: img2_circle 2s ease-in-out alternate infinite; -moz-animation: img2_circle 2s ease-in-out alternate infinite; -o-animation: img2_circle 2s ease-in-out alternate infinite; animation: img2_circle 2s ease-in-out alternate infinite; -webkit-transform: translateY(0.110294rem); -moz-transform: translateY(0.110294rem); -ms-transform: translateY(0.110294rem); -o-transform: translateY(0.110294rem); transform: translateY(0.110294rem); } .img4 { position: absolute; bottom: 0.433824rem; top: 30.3797%; left: 0; right: 0; width: 100%; height: 62.8308%; /* padding-top: 50.08333333%; */ background: url(../img/4_bg.png) no-repeat; background-position-x: center; -o-background-size: contain; background-size: contain; } .img4_p_left { position: absolute; width: 11%; height: 17.950083%; top: -4.299501%; right: 90.083333%; background: url("../img/4_Pleft.png") no-repeat; -o-background-size: contain; background-size: contain; -webkit-animation: img2_circle 2s ease-in-out alternate infinite; -moz-animation: img2_circle 2s ease-in-out alternate infinite; -o-animation: img2_circle 2s ease-in-out alternate infinite; animation: img2_circle 2s ease-in-out alternate infinite; -webkit-transform: translateY(0.110294rem); -moz-transform: translateY(0.110294rem); -ms-transform: translateY(0.110294rem); -o-transform: translateY(0.110294rem); transform: translateY(0.110294rem); } .img4_p_right { position: absolute; width: 8.33333333%; height: 16.63893511%; top: 37.339434%; left: 101.416667%; background: url("../img/4_Pright.png") no-repeat; -o-background-size: contain; background-size: contain; -webkit-animation: img2_circle 2s ease-in-out alternate infinite; -moz-animation: img2_circle 2s ease-in-out alternate infinite; -o-animation: img2_circle 2s ease-in-out alternate infinite; animation: img2_circle 2s ease-in-out alternate infinite; -webkit-transform: translateY(0.110294rem); -moz-transform: translateY(0.110294rem); -ms-transform: translateY(0.110294rem); -o-transform: translateY(0.110294rem); transform: translateY(0.110294rem); } .img4_w { position: absolute; width: 8.33333333%; height: 16.63893511%; top: 33.339434%; left: -4.583333%; background: url("../img/4_W.png") no-repeat; -o-background-size: contain; background-size: contain; -webkit-animation: img2_circle 2s ease-in-out alternate infinite; -moz-animation: img2_circle 2s ease-in-out alternate infinite; -o-animation: img2_circle 2s ease-in-out alternate infinite; animation: img2_circle 2s ease-in-out alternate infinite; -webkit-transform: translateY(0.110294rem); -moz-transform: translateY(0.110294rem); -ms-transform: translateY(0.110294rem); -o-transform: translateY(0.110294rem); transform: translateY(0.110294rem); } .img4_e { position: absolute; width: 8.33333333%; height: 16.63893511%; top: -6.660566%; left: 92.416667%; background: url("../img/4_E.png") no-repeat; -o-background-size: contain; background-size: contain; -webkit-animation: img2_circle 2s ease-in-out alternate infinite; -moz-animation: img2_circle 2s ease-in-out alternate infinite; -o-animation: img2_circle 2s ease-in-out alternate infinite; animation: img2_circle 2s ease-in-out alternate infinite; -webkit-transform: translateY(0.110294rem); -moz-transform: translateY(0.110294rem); -ms-transform: translateY(0.110294rem); -o-transform: translateY(0.110294rem); transform: translateY(0.110294rem); } .img4_logo_pdf { position: absolute; z-index: 2; width: 19.8%; height: 39.400166%; right: 0.9117rem; top: 1.3235rem; opacity: 0; background-image: url("../img/4_circle.gif"); background-repeat: no-repeat; -webkit-animation: img4_main .3s 1s forwards, img4_logo_pdf .5s 1s forwards; -moz-animation: img4_main .3s 1s forwards, img4_logo_pdf .5s 1s forwards; -o-animation: img4_main .3s 1s forwards, img4_logo_pdf .5s 1s forwards; animation: img4_main .3s 1s forwards, img4_logo_pdf .5s 1s forwards; -o-background-size: contain; background-size: contain; } .img4_main { position: absolute; z-index: 1; width: 30%; height: 59.90016639%; right: 17.08333333%; top: 23.7936772%; opacity: 0; -webkit-animation: auto; -moz-animation: auto; -o-animation: auto; animation: auto; } .img4_main_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; -o-background-size: 100% auto; background-size: 100% auto } .img4_logo_et, .img4_logo_img, .img4_logo_cad, .img4_logo_ppt, .img4_logo_doc { position: absolute; width: 38.88888889%; height: 38.88888889%; background-repeat: no-repeat; -o-background-size: contain; background-size: contain; -webkit-animation: img4_logo 5s 1s infinite linear; -moz-animation: img4_logo 5s 1s infinite linear; -o-animation: img4_logo 5s 1s infinite linear; animation: img4_logo 5s 1s infinite linear } .img4_main_bg { background-image: url("../img/4_circle.gif") } .img4_logo_et { top: 34.72222222%; left: -6.38888889%; background-image: url("../img/4_logo_et.svg?v=4-22-15-6") } .img4_logo_img { top: 5.83333333%; left: 36.94444444%; background-image: url("../img/4_logo_img.svg?v=4-22-15-6") } .img4_logo_cad { top: 11.38888889%; left: 65.83333333%; background-image: url("../img/4_logo_cad.svg?v=4-22-15-6") } .img4_logo_ppt { top: 51.11111111%; left: 47.77777778%; background-image: url("../img/4_logo_ppt.svg?v=4-22-15-6") } .img4_logo_doc { top: 62.77777778%; left: 11.66666667%; background-image: url("../img/4_logo_doc.svg?v=4-22-15-6") } @-webkit-keyframes img4_main { 0% { opacity: 0 } 100% { opacity: 1 } } @-moz-keyframes img4_main { 0% { opacity: 0 } 100% { opacity: 1 } } @-o-keyframes img4_main { 0% { opacity: 0 } 100% { opacity: 1 } } @keyframes img4_main { 0% { opacity: 0 } 100% { opacity: 1 } } @-webkit-keyframes img4_main_rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0) } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } @-moz-keyframes img4_main_rotate { 0% { -moz-transform: rotate(0); transform: rotate(0) } 100% { -moz-transform: rotate(360deg); transform: rotate(360deg) } } @-o-keyframes img4_main_rotate { 0% { -o-transform: rotate(0); transform: rotate(0) } 100% { -o-transform: rotate(360deg); transform: rotate(360deg) } } @keyframes img4_main_rotate { 0% { -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0) } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg) } } @-webkit-keyframes img4_logo_pdf { 0% { -webkit-transform: scale(0); transform: scale(0) } 60% { -webkit-transform: scale(1.1); transform: scale(1.1) } 100% { -webkit-transform: scale(1); transform: scale(1) } } @-moz-keyframes img4_logo_pdf { 0% { -moz-transform: scale(0); transform: scale(0) } 60% { -moz-transform: scale(1.1); transform: scale(1.1) } 100% { -moz-transform: scale(1); transform: scale(1) } } @-o-keyframes img4_logo_pdf { 0% { -o-transform: scale(0); transform: scale(0) } 60% { -o-transform: scale(1.1); transform: scale(1.1) } 100% { -o-transform: scale(1); transform: scale(1) } } @keyframes img4_logo_pdf { 0% { -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); transform: scale(0) } 60% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1) } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1) } } @-webkit-keyframes img4_logo { 0% { -webkit-transform: rotate(360deg); transform: rotate(360deg) } 100% { -webkit-transform: rotate(0); transform: rotate(0) } } @-moz-keyframes img4_logo { 0% { -moz-transform: rotate(360deg); transform: rotate(360deg) } 100% { -moz-transform: rotate(0); transform: rotate(0) } } @-o-keyframes img4_logo { 0% { -o-transform: rotate(360deg); transform: rotate(360deg) } 100% { -o-transform: rotate(0); transform: rotate(0) } } @keyframes img4_logo { 0% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg) } 100% { -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0) } } @-webkit-keyframes img4_logo_img { 0% { opacity: 0; -webkit-transform: translate(-0.102941rem, 0.058824rem); transform: translate(-0.102941rem, 0.058824rem) } 100% { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0) } } @-moz-keyframes img4_logo_img { 0% { opacity: 0; -moz-transform: translate(-0.102941rem, 0.058824rem); transform: translate(-0.102941rem, 0.058824rem) } 100% { opacity: 1; -moz-transform: translate(0, 0); transform: translate(0, 0) } } @-o-keyframes img4_logo_img { 0% { opacity: 0; -o-transform: translate(-0.102941rem, 0.058824rem); transform: translate(-0.102941rem, 0.058824rem) } 100% { opacity: 1; -o-transform: translate(0, 0); transform: translate(0, 0) } } @keyframes img4_logo_img { 0% { opacity: 0; -webkit-transform: translate(-0.102941rem, 0.058824rem); -moz-transform: translate(-0.102941rem, 0.058824rem); -o-transform: translate(-0.102941rem, 0.058824rem); transform: translate(-0.102941rem, 0.058824rem) } 100% { opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0) } } @-webkit-keyframes img4_logo_cad { 0% { opacity: 0; -webkit-transform: translate(-0.117647rem, -0.058824rem); transform: translate(-0.117647rem, -0.058824rem) } 100% { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0) } } @-moz-keyframes img4_logo_cad { 0% { opacity: 0; -moz-transform: translate(-0.117647rem, -0.058824rem); transform: translate(-0.117647rem, -0.058824rem) } 100% { opacity: 1; -moz-transform: translate(0, 0); transform: translate(0, 0) } } @-o-keyframes img4_logo_cad { 0% { opacity: 0; -o-transform: translate(-0.117647rem, -0.058824rem); transform: translate(-0.117647rem, -0.058824rem) } 100% { opacity: 1; -o-transform: translate(0, 0); transform: translate(0, 0) } } @keyframes img4_logo_cad { 0% { opacity: 0; -webkit-transform: translate(-0.117647rem, -0.058824rem); -moz-transform: translate(-0.117647rem, -0.058824rem); -o-transform: translate(-0.117647rem, -0.058824rem); transform: translate(-0.117647rem, -0.058824rem) } 100% { opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0) } } @-webkit-keyframes img4_logo_ppt { 0% { opacity: 0; -webkit-transform: translate(-0.117647rem, -0.117647rem); transform: translate(-0.117647rem, -0.117647rem) } 100% { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0) } } @-moz-keyframes img4_logo_ppt { 0% { opacity: 0; -moz-transform: translate(-0.117647rem, -0.117647rem); transform: translate(-0.117647rem, -0.117647rem) } 100% { opacity: 1; -moz-transform: translate(0, 0); transform: translate(0, 0) } } @-o-keyframes img4_logo_ppt { 0% { opacity: 0; -o-transform: translate(-0.117647rem, -0.117647rem); transform: translate(-0.117647rem, -0.117647rem) } 100% { opacity: 1; -o-transform: translate(0, 0); transform: translate(0, 0) } } @keyframes img4_logo_ppt { 0% { opacity: 0; -webkit-transform: translate(-0.117647rem, -0.117647rem); -moz-transform: translate(-0.117647rem, -0.117647rem); -o-transform: translate(-0.117647rem, -0.117647rem); transform: translate(-0.117647rem, -0.117647rem) } 100% { opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0) } } @-webkit-keyframes img4_logo_doc { 0% { opacity: 0; -webkit-transform: translate(-0.044118rem, -0.147059rem); transform: translate(-0.044118rem, -0.147059rem) } 100% { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0) } } @-moz-keyframes img4_logo_doc { 0% { opacity: 0; -moz-transform: translate(-0.044118rem, -0.147059rem); transform: translate(-0.044118rem, -0.147059rem) } 100% { opacity: 1; -moz-transform: translate(0, 0); transform: translate(0, 0) } } @-o-keyframes img4_logo_doc { 0% { opacity: 0; -o-transform: translate(-0.044118rem, -0.147059rem); transform: translate(-0.044118rem, -0.147059rem) } 100% { opacity: 1; -o-transform: translate(0, 0); transform: translate(0, 0) } } @keyframes img4_logo_doc { 0% { opacity: 0; -webkit-transform: translate(-0.044118rem, -0.147059rem); -moz-transform: translate(-0.044118rem, -0.147059rem); -o-transform: translate(-0.044118rem, -0.147059rem); transform: translate(-0.044118rem, -0.147059rem) } 100% { opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0) } } .img5 { position: absolute; /* bottom: 0.544118rem; */ top: 29.6892%; left: 0; right: 0; width: 100%; height: 61.7951%; /* padding-top: 50.08333333%; */ background: url(../img/5_bg.png) no-repeat; -o-background-size: contain; background-size: contain; background-position-x: center; } .img5_left { position: absolute; width: 15%; height: 29.95008319%; top: -17.13810316%; right: 6.25%; background: url("../img/5_left.png") no-repeat; -o-background-size: contain; background-size: contain; -webkit-animation: img2_circle 2s ease-in-out alternate infinite; -moz-animation: img2_circle 2s ease-in-out alternate infinite; -o-animation: img2_circle 2s ease-in-out alternate infinite; animation: img2_circle 2s ease-in-out alternate infinite; -webkit-transform: translateY(0.110294rem); -moz-transform: translateY(0.110294rem); -ms-transform: translateY(0.110294rem); -o-transform: translateY(0.110294rem); transform: translateY(0.110294rem) } .img5_right { position: absolute; width: 8.33333333%; height: 16.63893511%; top: -8.31946755%; left: 4.16666667%; background: url("../img/5_right.png") no-repeat; -o-background-size: contain; background-size: contain; -webkit-animation: img2_circle 2s ease-in-out alternate infinite; -moz-animation: img2_circle 2s ease-in-out alternate infinite; -o-animation: img2_circle 2s ease-in-out alternate infinite; animation: img2_circle 2s ease-in-out alternate infinite; -webkit-transform: translateY(0.110294rem); -moz-transform: translateY(0.110294rem); -ms-transform: translateY(0.110294rem); -o-transform: translateY(0.110294rem); transform: translateY(0.110294rem) } .section_title7 { top: 15.1898% } .img6 { position: absolute; top: 27.5028%; bottom: 0; left: 0; right: 0; width: 100%; /* padding-top: 53.01633987% */ } .img6_main { position: absolute; top: 0; left: 0; bottom: 0; right: 0 } .img6_list { float: left; width: 2.794118rem; height: 1.397059rem; line-height: 1.397059rem; margin-bottom: 0.220588rem; margin-left: 0.220588rem; -webkit-box-shadow: 0 0.029412rem 0.102941rem 0 rgba(36,47,68,0.08); box-shadow: 0 0.029412rem 0.102941rem 0 rgba(36,47,68,0.08); font-size: 0; border-radius: 0.147059rem; } .img6_list:nth-child(3n+1){ margin-left: 0; } .img6_logo { display: inline-block; vertical-align: middle; width: 0.661765rem; height: 0.661765rem; -o-background-size: contain; background-size: contain; background-repeat: no-repeat; margin-right: 0.176471rem; /* margin: 13.5% 6.25% 13.5% 8.33333333% */ } .img6_logo1 { background-image: url("../img/6_logo1.png") } .img6_logo2 { background-image: url("../img/6_logo2.png") } .img6_logo3 { background-image: url("../img/6_logo3.png") } .img6_logo4 { background-image: url("../img/6_logo4.png") } .img6_logo5 { background-image: url("../img/6_logo5.png") } .img6_logo6 { background-image: url("../img/6_logo6.png") } .img6_info { display: inline-block; vertical-align: middle; width: 1.5514rem; text-align: left; line-height: 0.176471rem; height: 100%; } .img6_info .title { font-size: 0.132353rem; line-height: 0.132353rem; color: #36425a; margin-bottom: 0.0808rem; margin-top: 0.3676rem; } .img6_info .txt { font-size: 0.102941rem; color: #8b97af; line-height: 0.1617rem; } /* 教程 */ .img7 { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; padding-top: 53%; } .img7 .img6_main ul { max-width: 8.823529rem; margin: 0 auto; } .img7 .img6_main li { width: -webkit-calc((100% - 0.220588rem) / 2); width: -moz-calc((100% - 0.220588rem) / 2); width: calc((100% - 0.220588rem) / 2); margin: 0; margin-bottom: 0.220588rem; float: left; overflow: hidden; } .img7 .img6_main li:nth-child(2n) { margin-left: 0.220588rem; } .article-unit { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0.198529rem 0.125rem 0.169118rem 0.110294rem; -webkit-box-shadow: 0 0.029412rem 0.102941rem 0 rgba(36, 47, 68, 0.08); box-shadow: 0 0.029412rem 0.102941rem 0 rgba(36, 47, 68, 0.08) } .setTop { display: inline-block; width: 0.264706rem; height: 0.147059rem; background-color: #f5f5f5; border-radius: 0.073529rem; border: solid 0.007353rem #ffa66e; margin-right: 0.044118rem; font-family: MicrosoftYaHei; font-size: 0.088235rem; line-height: 0.147059rem; letter-spacing: 0rem; color: #ffa66e; } .setTop+a{ font-size: 0.102941rem; float: left; } .articleCover { margin-right: 0.117647rem; width: 0.7352rem; float: left; } .articleCover+div { float: left; width: -webkit-calc(100% - 0.852941rem); width: -moz-calc(100% - 0.852941rem); width: calc(100% - 0.852941rem); } .article-short { display: block; text-align: left; width: 3.220588rem; font-family: MicrosoftYaHei; font-size: 0.088235rem; line-height: 0.147059rem; overflow: hidden; height: 0.294118rem; letter-spacing: 0rem; color: #999999; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; margin: 0.073529rem 0; } .short-footer { font-size: 0.088235rem; color: #999; clear: both; overflow: hidden; } .short-footer >div{ display: inline; vertical-align: middle; } .short-footer .fl >*{ vertical-align: text-bottom; } .short-footer .fl .short-footer .fr{ line-height: 0.117647rem; } .short-footer img { width: auto !important; } .short-footer .article-Link+.article-Link{ margin-left: 0.073529rem; } .article-username, .article-date { margin-left: 0.036765rem; margin-right: 0.080882rem; } .viewTime { margin-left: 0.044118rem; } .links { height: 0.389706rem; margin-top: 0.448529rem; background-color: #ffffff; border: solid 1px #dddddd; font-family: MicrosoftYaHei; font-size: 0.117647rem; line-height: 0.389706rem; letter-spacing: 0; color: #253045; z-index: 9527; text-align: left; } .links a:hover { color: #fe9761; } .links span { background-color: #ffffff; margin-left: 0.191176rem; margin-right: 0.147059rem; } .links ul { width: 6.617647rem; display: inline; } .links li { margin: 0; width: auto; display: inline; } .links li+li { margin-left: 0.220588rem; } /* 反馈-轮播 */ #feedback{ background: url("../img/swiper-bg.png"); -o-background-size: 100% 100%; background-size: 100% 100%; } .feedback-wrap{ width: 8.823529rem; height: 4.463235rem; margin: 0 auto; } .feedback-wrap h2{ font-family: MicrosoftYaHei; font-size: 0.220588rem; font-weight: normal; font-stretch: normal; line-height: 0.161765rem; letter-spacing: 0.014706rem; color: #333333; margin-top: 0.397059rem; margin-bottom: 0.323529rem; text-align: center; } .swiperUnit{ padding: 0.213235rem 0.147059rem; text-align: center; } .swiperUnit>*{ display: block; } .swiperUnit img{ height: 0.536765rem; width: 0.536765rem; border-radius: 50%; } .swiperUnit h3{ font-family: MicrosoftYaHei-Bold; font-size: 0.117647rem; line-height: 0.161765rem; letter-spacing: 0rem; color: #333333; margin-top: 0.147059rem; margin-bottom: 0.073529rem; } .swiperUnit .position{ font-family: MicrosoftYaHei; font-size: 0.088235rem; line-height: 0.161765rem; letter-spacing: 0rem; color: #999999; } .swiperUnit .divider{ width: 1.794118rem; height: 0.007353rem; background-color: #dddddd; margin-top: 0.110294rem; margin-bottom: 0.301471rem; } .swiperUnit .content{ display: block; font-family: MicrosoftYaHei; font-size: 0.102941rem; white-space: normal; width: 1.772059rem; word-break:break-all!important; line-height: 0.176471rem; letter-spacing: 0rem; color: #444444; text-align: left; } #certify { position: relative; width: 8.823529rem; margin: 0 auto } #certify .swiper-container{ width: 6.911765rem; overflow: visible; } #certify .swiper-slide { width: 2.095588rem!important; height: 2.904412rem!important; background: #fff; -webkit-box-shadow: 0 0.029412rem 0.102941rem #ddd; box-shadow: 0 0.029412rem 0.102941rem #ddd; border-radius: 0.073529rem; } #certify .swiper-pagination { width: 100%; bottom: 0.147059rem; } #certify .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 0.036765rem; border: 0.022059rem solid #fff; background-color: #d5d5d5; width: 0.073529rem; height: 0.073529rem; opacity: 1; } #certify .swiper-pagination-bullets .swiper-pagination-bullet-active { border: 0.022059rem solid #00aadc; background-color: #fff; } .swiper-button-prev { left: 0; width: 0.330882rem; height: 0.330882rem; } .swiper-button-next { right: 0; width: 0.330882rem; height: 0.330882rem; } .swiper-button-next::after, .swiper-button-prev::after{ content: unset; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next, .swiper-button-next, .swiper-container-rtl .swiper-button-prev{ outline: unset; background: unset!important; background-image: none!important; } .bottom { position: absolute; top: 0; left: 0; right: 0; /* background: url("../img/8_bg.png?v=4-22-15-6") no-repeat top center; */ -o-background-size: 100% auto; background-size: 100% auto; height: 100%; margin: 0 auto; text-align: center; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .section_title8 { top: 17.33333333% } .section_title_txt8 { top: 25%; letter-spacing: 0.029412rem; } .bottom_main { position: absolute; top: 0; left: 0; right: 0; bottom: 0 } a.footer_btn { position: absolute; top: 37%; left: 0; right: 0; width: 1.852941rem; height: 0.397059rem; line-height: 0.397059rem; border-radius: 0.198529rem; font-size: 0.176471rem; margin: 0 auto } .footer { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: 0.102941rem; /* padding: 2.8125em 0 2.8125em; */ color: #999ca6 } .footer a, .footer a:link, .footer a:hover { color: #999ca6 } .footer img { display: inline-block; vertical-align: middle; margin-bottom: 0.029412rem /* 4/16 */ } .footer_txt { position: absolute; top: 46%; left: 0; right: 0; text-align: center; color: #999ca6; font-size: 0.102941rem; opacity: .5 } /* 其他页的footer */ .beforeFooter { height: 3.455882rem; } .beforeFooter h2 { font-family: MicrosoftYaHei; font-size: 0.323529rem; letter-spacing: 0rem; color: #253045; } .beforeFooter h3 { font-family: MicrosoftYaHeiLight; font-size: 0.176471rem; letter-spacing: 0rem; color: #7d8390; margin-top: 0.169118rem; margin-bottom: 0.183824rem; } .beforeFooter .downloadBtn { width: 1.852941rem; height: 0.397059rem; font-size: 0.176471rem; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; background-image: -webkit-gradient(linear, left top, right top, from(#ff9184), to(#fe975e)), -webkit-gradient(linear, left top, left bottom, from(#253045), to(#253045)); background-image: -webkit-linear-gradient(left, #ff9184 0%, #fe975e 100%), -webkit-linear-gradient(#253045, #253045); background-image: -moz-linear-gradient(left, #ff9184 0%, #fe975e 100%), -moz-linear-gradient(#253045, #253045); background-image: -o-linear-gradient(left, #ff9184 0%, #fe975e 100%), -o-linear-gradient(#253045, #253045); background-image: linear-gradient(90deg, #ff9184 0%, #fe975e 100%), linear-gradient(#253045, #253045); background-blend-mode: normal, normal; border-radius: 0.198529rem; color: #fff; } .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto!important; }