.center {text-align: center; width: 100%; height: auto; margin-top: -3%; } .text .text-2 ul li {font-size: 16px; } .resp0 {height: 700px; transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform-origin: center; -webkit-transform-origin: center; -moz-transform-origin: center; -ms-transform-origin: center; display: inline-block; vertical-align: middle; } html, body {margin: 0; padding: 0; overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } @-webkit-keyframes bouncedelay {0%, 80%, 100% {-webkit-transform: scale(0.0) } 40% {-webkit-transform: scale(1.0) } } @keyframes bouncedelay {0%, 80%, 100% {transform: scale(0.0); -webkit-transform: scale(0.0); } 40% {transform: scale(1.0); -webkit-transform: scale(1.0); } } #menu {position: fixed; right: 32px; top: 50%; width: 150px; height: 535px; list-style-type: none; z-index: 50; margin-top: -200px; transition: all .4s; -webkit-transition: all .4s; } #menu.xt {margin-top: -537px; } #menu ul {border-right: 1px dashed #fff; transition: all .4s; -webkit-transition: all .4s; } #menu li {width: 120px; text-align: right; position: relative; margin-bottom: 20px; } #menu li.active:after {width: 15px; height: 14px; border-radius: 50%; background: #fff; content: ''; display: block; position: absolute; right: -37px; top: 6px; transition: all .4s; -webkit-transition: all .4s; } #menu li a {font-size: 15px; color: #fff; transition: all .4s; -webkit-transition: all .4s; } #menu .a1 {background: url(../images/app/menu_1.png) no-repeat center; width: 22px; height: 33px; position: absolute; right: -5px; transition: all .4s; -webkit-transition: all .4s; } #menu .a2 {background: url(../images/app/menu_2.png) no-repeat center; width: 51px; height: 33px; position: absolute; right: 52px; transition: all .4s; -webkit-transition: all .4s; } #menu .a2 i {background: url(../images/app/menu_3.png) no-repeat; width: 7px; height: 9px; display: block; position: absolute; left: 50%; margin-left: -3.5px; transition: all .4s; -webkit-transition: all .4s; } #menu .a2 i.s1 {background-position: center top; top: 2px; } #menu .a2 i.s2 {background-position: center bottom; bottom: 2px; } #menu.on ul {border-right: 1px dashed #724009; } #menu.on li.active:after {background: #724009; } #menu.on li a {color: #724009; } #menu.on .a1 {background-image: url(../images/app/menu_1-1.png); } #menu.on .a2 {background-image: url(../images/app/menu_2-1.png); } #menu.on .a2 i {background-image: url(../images/app/menu_3—1.png); } #menu.on1 .a2 i.s1 {-webkit-animation: flash .5s alternate; animation: flash .5s alternate; } #menu.on2 .a2 i.s2 {-webkit-animation: flash .5s alternate; animation: flash .5s alternate; } .text-fr {position: absolute; width: 560px; top: 50%; left: 50%; margin: -260px 0 0 143px; } .text-fr-10 {position: absolute; width: 560px; top: 50%; left: 50%; margin: -260px 0 0 143px; } .text-fl {position: absolute; width: 560px; top: 50%; left: 50%; margin: -260px 0 0 -671px; } .text .text-1 {width: 100%; color: #fff; } .text .text-1 h3 {font-size: 37px; line-height: 48px; text-align: left; } .text .text-1 h5 {font-size: 20px; line-height: 32px; margin-bottom: 20px; text-align: left; } .text .text-1 p {font-size: 18px; line-height: 30px; margin-bottom: 20px; text-align: left; } .text .text-2 {color: #fff; } .text .text-2 h4 {font-size: 26px; line-height: 48px; text-align: left; } .text .text-2 ul {padding: 10px 0; margin-left: -18px; } .text .text-2 ul li {float: left; width: 112px; text-align: center; margin-bottom: 8px; } .text .text-2 ul li i {display: block; width: 100%; } .text .text-3 {color: #fff; } .text .text-3 h4 {font-size: 26px; line-height: 70px; text-align: left; } .text .text-3 p a {width: 75px; height: 75px; float: left; margin-right: 15px; } .text .text-3 p a img {width: 100%; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; border-radius: 20px; } .text .text-3 .more {box-sizing: border-box; font-size: 20px; color: #fff; width: 222px; height: 44px; line-height: 44px; border: 2px solid #fff; display: block; border-radius: 3px; text-align: center; margin-top: 54px; -webkit-transition: all .2s; transition: all .2s; position: relative; } .text .text-3 .more span {position: relative; z-index: 9; line-height: 44px; display: block; } .text .text-3 .more:after {content: ''; display: block; position: absolute; width: 0; background: #fff; height: 100%; -webkit-transition: all .2s; transition: all .2s; left: 0; top: 0; } .text.c724009 .text-3 .more:after {content: ''; display: block; position: absolute; width: 0; background: #724009; height: 100%; -webkit-transition: all .2s; transition: all .2s; left: 0; top: 0; } .text .text-3 .more:hover:after {width: 100%; } .text .text-3 .more:hover {color: #fff; background: #fff; } .page2 .text .text-3 .more:hover {color: #f2684c; } .page3 .text .text-3 .more:hover {color: #3ec6ae; } .page4 .text .text-3 .more:hover {color: #ffb329; } .page5 .text .text-3 .more:hover {color: #e3493d; } .page6 .text .text-3 .more:hover {color: #01b760; } .page7 .text .text-3 .more:hover {color: #fda73a; } .page8 .text .text-3 .more:hover {color: #4987d2; } .page9 .text .text-3 .more:hover {color: #fdd13d; } .page10 .text .text-3 .more:hover {color: #7d5ee8; } .text.c724009 .text-1 {color: #724009; } .text.c724009 .text-2 {color: #724009; } .text.c724009 .text-3 {color: #724009; } .text.c724009 .text-3>a {color: #724009; border: 2px solid #724009; } .text.c724009 .text-3>a:hover {background: #724009; } .active .text-fr .text-1 {-webkit-animation: fadeInRight .7s; animation: fadeInRight .7s; } .active .text-fr .text-2 {-webkit-animation: fadeInRight .9s; animation: fadeInRight .9s; } .active .text-fr .text-3 {-webkit-animation: fadeInRight 1.1s; animation: fadeInRight 1.1s; } .active .text-fl .text-1 {-webkit-animation: fadeInLeft .7s; animation: fadeInLeft .7s; } .active .text-fl .text-2 {-webkit-animation: fadeInLeft .9s; animation: fadeInLeft .9s; } .active .text-fl .text-3 {-webkit-animation: fadeInLeft 1.1s; animation: fadeInLeft 1.1s; } .page2 .app-yd {position: absolute; width: 576px; height: 647px; background: url(../images/app/page2.png) no-repeat center; top: 50%; left: 50%; margin: -189px 0 0 -654px; } .page2 .app-yd .yd-1 {position: absolute; width: 299px; height: 441px; top: 204px; left: 150px; } .page2 .app-yd .yd-2 {position: absolute; width: 287px; height: 159px; top: 462px; left: 62px; } .page2 .app-yd .yd-3 {position: absolute; width: 108px; height: 161px; top: 435px; right: 83px; } .page2 .app-yd .yd-4 {position: absolute; width: 105px; height: 117px; top: 502px; right: 18px; } .page2 .app-yd .yd-5 {position: absolute; width: 48px; height: 48px; top: 56px; left: 236px; } .page2 .app-yd .yd-6 {position: absolute; width: 47px; height: 47px; top: 295px; left: 90px; } .page2 .app-yd .yd-7 {position: absolute; width: 51px; height: 51px; top: 124px; right: 132px; } .page2 .app-yd .yd-8 {position: absolute; width: 64px; height: 64px; top: 265px; right: 76px; } .page2 .app-yd .yd-9 {position: absolute; width: 71px; height: 71px; top: 144px; left: 105px; } .page2 .app-yd .yd-10 {position: absolute; width: 576px; height: 428px; top: 72px; left: -15px; } .active .app-yd {-webkit-animation: zoomIn .9s; animation: zoomIn .9s; } .active .app-yd .yd-1 {-webkit-animation: fadeInUp 1s; animation: fadeInUp 1s; } .active .app-yd .yd-2 {-webkit-animation: fadeInRight 1.2s; animation: fadeInRight 1.2s; } .active .app-yd .yd-3 {-webkit-animation: fadeInUp 1.2s; animation: fadeInUp 1.2s; } .active .app-yd .yd-4 {-webkit-animation: zoomIn 1.3s; animation: zoomIn 1.3s; } .active .app-yd .yd-5 {-webkit-animation: rotateInDownLeft 1.5s; animation: rotateInDownLeft 1.5s; } .active .app-yd .yd-6 {-webkit-animation: rotateInDownLeft 1.7s; animation: rotateInDownLeft 1.7s; } .active .app-yd .yd-7 {-webkit-animation: rotateInDownRight 1.9s; animation: rotateInDownRight 1.9s; } .active .app-yd .yd-8 {-webkit-animation: rotateInt 2.1s; animation: rotateIn 2.1s; } .active .app-yd .yd-9 {-webkit-animation: rotateIn 2.3s; animation: rotateIn 2.3s; } .active .app-yd .yd-10 {-webkit-animation: zoomIn 2.5s; animation: zoomIn 2.5s; } .page3 .app-cy {position: absolute; width: 613px; height: 599px; background: url(../images/app/page3.png) no-repeat center; top: 50%; left: 50%; margin: -166px 0 0 60px; } .page3 .app-cy .cy-1 {position: absolute; width: 613px; height: 99px; bottom: -40px; left: 0px; } .page3 .app-cy .cy-2 {position: absolute; width: 360px; height: 463px; bottom: 4px; left: 126px; } .page3 .app-cy .cy-3 {position: absolute; width: 41px; height: 28px; top: 350px; left: 162px; } .page3 .app-cy .cy-4 {position: absolute; width: 42px; height: 35px; top: 321px; right: 104px; } .page3 .app-cy .cy-5 {position: absolute; width: 56px; height: 31px; top: 298px; left: 88px; } .page3 .app-cy .cy-6 {position: absolute; width: 49px; height: 25px; top: 256px; right: 128px; } .page3 .app-cy .cy-7 {position: absolute; width: 64px; height: 51px; top: 172px; left: 66px; } .page3 .app-cy .cy-8 {position: absolute; width: 54px; height: 68px; top: 110px; right: 66px; } .page3 .app-cy .cy-9 {position: absolute; width: 50px; height: 43px; top: 96px; right: 138px; } .page3 .app-cy .cy-10 {position: absolute; width: 58px; height: 104px; top: -14px; left: 164px; } .active .app-cy {-webkit-animation: zoomIn 1s; animation: zoomIn 1s; } .active .app-cy .cy-1 {-webkit-animation: fadeInUp 1.2s; animation: fadeInUp 1.2s; } .active .app-cy .cy-2 {-webkit-animation: fadeInUp 1.4s; animation: fadeInUp 1.4s; } .active .app-cy .cy-3 {-webkit-animation: fadeInDown 1.6s; animation: fadeInDown 1.6s; } .active .app-cy .cy-4 {-webkit-animation: fadeInDown 1.8s; animation: fadeInDown 1.8s; } .active .app-cy .cy-5 {-webkit-animation: fadeInDown 2s; animation: fadeInDown 2s; } .active .app-cy .cy-6 {-webkit-animation: fadeInDown 2.2s; animation: fadeInDown 2.2s; } .active .app-cy .cy-7 {-webkit-animation: fadeInDown 2.4s; animation: fadeInDown 2.4s; } .active .app-cy .cy-8 {-webkit-animation: fadeInDown 2.6s; animation: fadeInDown 2.6s; } .active .app-cy .cy-9 {-webkit-animation: fadeInDown 2.8s; animation: fadeInDown 2.8s; } .active .app-cy .cy-10 {-webkit-animation: fadeInDown 3s; animation: fadeInDown 3s; } .page4 .app-jr {position: absolute; width: 604px; height: 681px; background: url(../images/app/page4.png) no-repeat center; top: 50%; left: 50%; margin: -270px 0 0 -672px; } .page4 .app-jr .jr-1 {position: absolute; width: 371px; height: 495px; top: 200px; left: 78px; } .page4 .app-jr .jr-2 {position: absolute; width: 482px; height: 431px; top: 190px; left: 50px; } .page4 .app-jr .jr-3 {position: absolute; width: 435px; height: 303px; top: 82px; left: 106px; } .page4 .app-jr .jr-4 {position: absolute; width: 604px; height: 481px; top: 56px; left: 0px; } .active .app-jr {-webkit-animation: zoomIn 1s; animation: zoomIn 1s; } .active .app-jr .jr-1 {-webkit-animation: fadeIn 1s; animation: fadeIn 1s; } .active .app-jr .jr-2 {-webkit-animation: zoomIn 2s; animation: zoomIn 2s; } .active .app-jr .jr-3 {-webkit-animation: flipInY 2s; animation: flipInY 2s; } .active .app-jr .jr-4 {-webkit-animation: zoomIn 2.2s; animation: zoomIn 2.2s; } .page5 .app-yl {position: absolute; width: 576px; height: 624px; background: url(../images/app/page5.png) no-repeat center; top: 50%; left: 50%; margin: -166px 0 0 68px; } .page5 .app-yl .yl-1 {position: absolute; width: 531px; height: 363px; top: 318px; left: 18px; } .page5 .app-yl .yl-2 {position: absolute; width: 397px; height: 531px; top: 147px; left: 127px; } .page5 .app-yl .yl-3 {position: absolute; width: 70px; height: 76px; top: 56px; right: 186px; } .page5 .app-yl .yl-4 {position: absolute; width: 96px; height: 100px; top: 282px; left: 34px; } .page5 .app-yl .yl-5 {position: absolute; width: 100px; height: 104px; top: 154px; right: 5px; } .page5 .app-yl .yl-6 {position: absolute; width: 105px; height: 105px; top: 44px; left: 58px; } .active .app-yl {-webkit-animation: zoomIn 1s; animation: zoomIn 1s; } .active .app-yl .yl-1 {-webkit-animation: fadeInUp 1s; animation: fadeInUp 1s; } .active .app-yl .yl-2 {-webkit-animation: fadeInUp 1.4s; animation: fadeInUp 1.4s; } .active .app-yl .yl-3 {-webkit-animation: fadeInDown 1.6s; animation: fadeInDown 1.6s; } .active .app-yl .yl-4 {-webkit-animation: fadeInDown 1.8s; animation: fadeInDown 1.8s; } .active .app-yl .yl-5 {-webkit-animation: fadeInDown 2s; animation: fadeInDown 2s; } .active .app-yl .yl-6 {-webkit-animation: fadeInDown 2.2s; animation: fadeInDown 2.2s; } .page6 .app-ly {position: absolute; width: 648px; height: 626px; background: url(../images/app/page6.png) no-repeat center; top: 50%; left: 50%; margin: -179px 0 0 -730px; } .page6 .app-ly .ly-1 {position: absolute; width: 498px; height: 557px; top: 66px; left: 153px; } .page6 .app-ly .ly-2 {position: absolute; width: 125px; height: 106px; top: 168px; left: 100px; } .page6 .app-ly .ly-3 {position: absolute; width: 195px; height: 154px; top: 34px; left: 244px; } .page6 .app-ly .ly-4 {position: absolute; width: 158px; height: 80px; top: 200px; right: 68px; } .page6 .app-ly .ly-5 {position: absolute; width: 87px; height: 60px; top: 338px; left: -28px; } .active .app-ly {-webkit-animation: zoomIn 1s; animation: zoomIn 1s; } .active .app-ly .ly-1 {-webkit-animation: zoomIn 1.2s; animation: zoomIn 1.2s; } .active .app-ly .ly-2 {-webkit-animation: rotateIn 1.6s; animation: rotateIn 1.6s; } .active .app-ly .ly-3 {-webkit-animation: rotateIn 1.6s; animation: rotateIn 1.8s; } .active .app-ly .ly-4 {-webkit-animation: rotateIn 2.2s; animation: rotateIn 2.2s; } .active .app-ly .ly-5 {-webkit-animation: rotateIn 2.2s; animation: rotateIn 2.2s; } .page7 .app-jz {position: absolute; width: 575px; height: 575px; background: url(../images/app/page7.png) no-repeat center; top: 50%; left: 50%; margin: -134px 0 0 50px; } .page7 .app-jz .jz-1 {position: absolute; width: 620px; height: 299px; top: 300px; left: -25px; } .page7 .app-jz .jz-2 {position: absolute; width: 437px; height: 313px; top: 252px; left: 67px; } .page7 .app-jz .jz-3 {position: absolute; width: 143px; height: 139px; top: 472px; right: -24px; } .page7 .app-jz .jz-4 {position: absolute; width: 42px; height: 42px; top: 195px; left: 182px; } .page7 .app-jz .jz-5 {position: absolute; width: 56px; height: 56px; top: 228px; right: 78px; } .page7 .app-jz .jz-6 {position: absolute; width: 63px; height: 66px; top: 54px; left: 120px; } .page7 .app-jz .jz-7 {position: absolute; width: 85px; height: 85px; top: 136px; left: -6px; } .page7 .app-jz .jz-8 {position: absolute; width: 99px; height: 99px; top: 99px; right: 2px; } .page7 .app-jz .jz-9 {position: absolute; width: 124px; height: 128px; top: 48px; right: 150px; } .active .app-jz {-webkit-animation: zoomIn 1s; animation: zoomIn 1s; } .active .app-jz .jz-1 {-webkit-animation: flipInX 1.2s; animation: flipInX 1.2s; } .active .app-jz .jz-2 {-webkit-animation: zoomIn 1.4s; animation: zoomIn 1.4s; } .active .app-jz .jz-3 {-webkit-animation: rotateInDownRight 1.4s; animation: rotateInDownRight 1.4s; } .active .app-jz .jz-4 {-webkit-animation: fadeInUp 1.6s; animation: fadeInUp 1.6s; } .active .app-jz .jz-5 {-webkit-animation: fadeInUp 1.8s; animation: fadeInUp 1.8s; } .active .app-jz .jz-6 {-webkit-animation: fadeInUp 2s; animation: fadeInUp 2s; } .active .app-jz .jz-7 {-webkit-animation: fadeInUp 2.2s; animation: fadeInUp 2.2s; } .active .app-jz .jz-8 {-webkit-animation: fadeInUp 2.4s; animation: fadeInUp 2.4s; } .active .app-jz .jz-9 {-webkit-animation: fadeInUp 2.6s; animation: fadeInUp 2.6s; } .page8 .app-dc {position: absolute; width: 613px; height: 591px; background: url(../images/app/page8.png) no-repeat center; top: 50%; left: 50%; margin: -161px 0 0 -688px; } .page8 .app-dc .dc-1 {position: absolute; width: 613px; bottom: -20px; left: 0px; } .page8 .app-dc .dc-2 {position: absolute; width: 404px; height: 400px; bottom: 28px; left: 113px; } .page8 .app-dc .dc-3 {position: absolute; width: 60px; height: 26px; top: 294px; right: 38px; } .page8 .app-dc .dc-4 {position: absolute; width: 121px; height: 44px; top: 246px; left: 42px; } .page8 .app-dc .dc-5 {position: absolute; width: 81px; height: 37px; top: 90px; left: 196px; } .active .app-dc {-webkit-animation: zoomIn 1s; animation: zoomIn 1s; } .active .app-dc .dc-1 {-webkit-animation: fadeInUp 1.2s; animation: fadeInUp 1.2s; } .active .app-dc .dc-2 {-webkit-animation: fadeInUp 1.6s; animation: fadeInUp 1.6s; } .active .app-dc .dc-3 {-webkit-animation: zoomIn 4s; animation: zoomIn 4s; } .active .app-dc .dc-4 {-webkit-animation: zoomIn 3s; animation: zoomIn 3s; } .active .app-dc .dc-5 {-webkit-animation: zoomIn 5s; animation: zoomIn 5s; } .page9 .app-sj {position: absolute; width: 667px; height: 584px; background: url(../images/app/page9.png) no-repeat center; top: 50%; left: 50%; margin: -136px 0 0 15px; } .page9 .app-sj .sj-1 {position: absolute; width: 388px; height: 452px; top: 110px; left: 168px; } .page9 .app-sj .sj-2 {position: absolute; width: 76px; height: 86px; top: -4px; left: 224px; } .page9 .app-sj .sj-3 {position: absolute; width: 105px; height: 93px; top: 238px; left: 80px; } .page9 .app-sj .sj-4 {position: absolute; width: 112px; height: 96px; top: 218px; right: 54px; } .page9 .app-sj .sj-5 {position: absolute; width: 152px; height: 134px; top: 40px; left: 28px; } .page9 .app-sj .sj-6 {position: absolute; width: 235px; height: 233px; top: -138px; right: -24px; } .active .app-sj {-webkit-animation: zoomIn 1s; animation: zoomIn 1s; } .active .app-sj .sj-1 {-webkit-animation: fadeInUp 1.2s; animation: fadeInUp 1.2s; } .active .app-sj .sj-2 {-webkit-animation: fadeInDown 2s; animation: fadeInDown 2s; } .active .app-sj .sj-3 {-webkit-animation: fadeInLeft 1.8s; animation: fadeInLeft 1.8s; } .active .app-sj .sj-4 {-webkit-animation: fadeInRight 1.8s; animation: fadeInRight 1.8s; } .active .app-sj .sj-5 {-webkit-animation: fadeInLeft 1.2s; animation: fadeInLeft 1.2s; } .active .app-sj .sj-6 {-webkit-animation: fadeInDown 2.2s; animation: fadeInDown 2.2s; } .page10 .app-hy {position: absolute; width: 667px; height: 584px; background: url(../images/app/page10.png) no-repeat center; top: 50%; left: 50%; margin: -158px 0 0 -712px; } .page10 .app-hy .hy-1 {position: absolute; width: 613px; height: 99px; bottom: -5px; left: 30px; } .page10 .app-hy .hy-2 {position: absolute; width: 395px; height: 353px; bottom: 42px; left: 132px; } .page10 .app-hy .hy-3 {position: absolute; width: 560px; height: 245px; top: 42px; left: 50px; } .active .app-hy {-webkit-animation: zoomIn 1s; animation: zoomIn 1s; } .active .app-hy .hy-1 {-webkit-animation: fadeInUp 1.2s; animation: fadeInUp 1.2s; } .active .app-hy .hy-2 {-webkit-animation: zoomIn 1.8s; animation: zoomIn 1.8s; } .active .app-hy .hy-3 {-webkit-animation: flipInX 2s; animation: flipInX 2s; } .page11 {background-image: url(../images/app/bg_2.jpg); background-repeat: no-repeat; background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/app/bg_2.jpg', sizingMethod='scale')\9; } .page11 .hnkf-app {width: 1200px; height: 680px; position: absolute; top: 50%; left: 50%; margin: -278px 0 0 -600px; } .page11 .hnkf-app h3 {position: absolute; top: 0; left: 0; font-size: 38px; color: #fff; text-align: left; } .page11 .hnkf-app h3 span {font-size: 18px; color: #fff; opacity: .5; display: block; line-height: 30px; text-transform: uppercase; } .page11 .hn-tab {width: 100%; position: absolute; top: 124px; left: 0; } .page11 .hn-tab .hn-hd li {float: left; width: 142px; height: 40px; text-align: center; margin-right: 10px; } .page11 .hn-tab .hn-hd li a {width: 100%; line-height: 40px; font-size: 16px; color: #fff; display: block; border-radius: 3px; } .page11 .hn-tab .hn-hd li.on .a1 {background: #f06d3e; } .page11 .hn-tab .hn-hd li.on .a2 {background: #3edab1; } .page11 .hn-tab .hn-hd li.on .a3 {background: #3c3788; } .page11 .hn-tab .hn-hd li.on .a4 {background: #e0338f; } .page11 .hn-tab .hn-bd {width: 1200px; height: 481px; position: relative; overflow: hidden; margin-top: 35px; } .page11 .hn-tab .hn-bd ul li {overflow: hidden; } .page11 .hn-tab .hn-bd ul li img {width: 100%; display: block; } .page11 .hn-tab .hn-bd ul li.jssl_1 {position: absolute; top: 0; left: 0; width: 240px; height: 241px; } .page11 .hn-tab .hn-bd ul li.jssl_2 {position: absolute; bottom: 0; left: 0; width: 240px; height: 240px; } .page11 .hn-tab .hn-bd ul li.jssl_3 {position: absolute; top: 0; left: 240px; width: 238px; height: 481px; } .page11 .hn-tab .hn-bd ul li.jssl_4 {position: absolute; top: 0; left: 478px; width: 241px; height: 241px; } .page11 .hn-tab .hn-bd ul li.jssl_5 {position: absolute; top: 0; right: 0; width: 481px; height: 241px; } .page11 .hn-tab .hn-bd ul li.jssl_6 {position: absolute; bottom: 0; right: 0; width: 238px; height: 240px; } .page11 .hn-tab .hn-bd ul li.jssl_7 {position: absolute; bottom: 0; right: 238px; width: 485px; height: 240px; } .page11 .hn-tab .hn-bd ul li.tdcy_1 {position: absolute; top: 0; left: 0; width: 240px; height: 241px; } .page11 .hn-tab .hn-bd ul li.tdcy_2 {position: absolute; bottom: 0; left: 0; width: 240px; height: 240px; } .page11 .hn-tab .hn-bd ul li.tdcy_3 {position: absolute; top: 0; right: 240px; width: 240px; height: 240px; } .page11 .hn-tab .hn-bd ul li.tdcy_4 {position: absolute; bottom: 0; right: 0; width: 240px; height: 481px; } .page11 .hn-tab .hn-bd ul li.tdcy_5 {position: absolute; bottom: 0; left: 240px; width: 240px; height: 241px; } .page11 .hn-tab .hn-bd ul li.tdcy_6 {position: absolute; bottom: 0; right: 240px; width: 480px; height: 241px; } .page11 .hn-tab .hn-bd ul li.tdcy_7 {position: absolute; top: 0; left: 240px; width: 480px; height: 240px; } .page11 .hn-tab .hn-bd ul li.wgsj_1 {position: absolute; top: 0; left: 0; width: 480px; height: 241px; } .page11 .hn-tab .hn-bd ul li.wgsj_2 {position: absolute; top: 0; left: 481px; width: 240px; height: 241px; } .page11 .hn-tab .hn-bd ul li.wgsj_3 {position: absolute; top: 0; right: 240px; width: 239px; height: 481px; } .page11 .hn-tab .hn-bd ul li.wgsj_4 {position: absolute; top: 0; right: 0; width: 240px; height: 241px; } .page11 .hn-tab .hn-bd ul li.wgsj_5 {position: absolute; bottom: 0; right: 0; width: 240px; height: 240px; } .page11 .hn-tab .hn-bd ul li.wgsj_6 {position: absolute; bottom: 0; left: 0; width: 239px; height: 240px; } .page11 .hn-tab .hn-bd ul li.wgsj_7 {position: absolute; bottom: 0; left: 240px; width: 481px; height: 240px; } .page11 .hn-tab .hn-bd ul li.zzfw_1 {position: absolute; top: 0; left: 0; width: 481px; height: 241px; } .page11 .hn-tab .hn-bd ul li.zzfw_2 {position: absolute; top: 0; left: 481px; width: 238px; height: 241px; } .page11 .hn-tab .hn-bd ul li.zzfw_3 {position: absolute; bottom: 0; left: 0; width: 241px; height: 240px; } .page11 .hn-tab .hn-bd ul li.zzfw_4 {position: absolute; bottom: 0; left: 241px; width: 478px; height: 240px; } .page11 .hn-tab .hn-bd ul li.zzfw_5 {position: absolute; bottom: 0; right: 240px; width: 241px; height: 240px; } .page11 .hn-tab .hn-bd ul li.zzfw_6 {position: absolute; bottom: 0; right: 0; width: 240px; height: 240px; } .page11 .hn-tab .hn-bd ul li.zzfw_7 {position: absolute; top: 0; right: 0; width: 481px; height: 241px; } .page11 .hn-tab .hn-bd ul li:hover img {-webkit-animation: pulse 1s; animation: pulse 1s; } .active .hnkf-app h3 {-webkit-animation: fadeInDown 1.2s; animation: fadeInDown 1.2s; } .active .hn-tab {-webkit-animation: zoomIn 1.2s; animation: zoomIn 1.2s; } .fp-tableCell {opacity: 0; } .page11 .hn-tab .hn-bd ul.on li.jssl_1 {-webkit-animation: fadeInLeft 1.5s; animation: fadeInLeft 1.5s; } .page11 .hn-tab .hn-bd ul.on li.jssl_2 {-webkit-animation: fadeInUp 1.2s; animation: fadeInUp 1.2s; } .page11 .hn-tab .hn-bd ul.on li.jssl_3 {-webkit-animation: fadeInDown 1.2s; animation: fadeInDown 1.2s; } .page11 .hn-tab .hn-bd ul.on li.jssl_4 {-webkit-animation: fadeInDown 1.5s; animation: fadeInDown 1.4s; } .page11 .hn-tab .hn-bd ul.on li.jssl_5 {-webkit-animation: fadeInRight 1.2s; animation: fadeInRight 1.2s; } .page11 .hn-tab .hn-bd ul.on li.jssl_6 {-webkit-animation: fadeInRight 1.5s; animation: fadeInRight 1.5s; } .page11 .hn-tab .hn-bd ul.on li.jssl_7 {-webkit-animation: fadeInUp 1.2s; animation: fadeInUp 1.2s; } .page11 .hn-tab .hn-bd ul.on li.tdcy_1 {-webkit-animation: fadeInLeft 1.5s; animation: fadeInLeft 1.5s; } .page11 .hn-tab .hn-bd ul.on li.tdcy_2 {-webkit-animation: fadeInUp 1.5s; animation: fadeInUp 1.5s; } .page11 .hn-tab .hn-bd ul.on li.tdcy_3 {-webkit-animation: fadeInRight 1.2s; animation: fadeInRight 1.2s; } .page11 .hn-tab .hn-bd ul.on li.tdcy_4 {-webkit-animation: fadeInRight 1.5s; animation: fadeInRight 1.4s; } .page11 .hn-tab .hn-bd ul.on li.tdcy_5 {-webkit-animation: fadeInLeft 1.2s; animation: fadeInLeft 1.2s; } .page11 .hn-tab .hn-bd ul.on li.tdcy_6 {-webkit-animation: fadeInUp 1.2s; animation: fadeInUp 1.2s; } .page11 .hn-tab .hn-bd ul.on li.tdcy_7 {-webkit-animation: fadeInDown 1.2s; animation: fadeInDown 1.2s; } .page11 .hn-tab .hn-bd ul.on li.wgsj_1 {-webkit-animation: fadeInLeft 1.5s; animation: fadeInLeft 1.5s; } .page11 .hn-tab .hn-bd ul.on li.wgsj_2 {-webkit-animation: fadeInDown 1.5s; animation: fadeInDown 1.5s; } .page11 .hn-tab .hn-bd ul.on li.wgsj_3 {-webkit-animation: fadeInUp 1.2s; animation: fadeInUp 1.2s; } .page11 .hn-tab .hn-bd ul.on li.wgsj_4 {-webkit-animation: fadeInRight 1.5s; animation: fadeInRight 1.4s; } .page11 .hn-tab .hn-bd ul.on li.wgsj_5 {-webkit-animation: fadeInUp 1.2s; animation: fadeInUp 1.2s; } .page11 .hn-tab .hn-bd ul.on li.wgsj_6 {-webkit-animation: fadeInLeft 1.2s; animation: fadeInLeft 1.2s; } .page11 .hn-tab .hn-bd ul.on li.wgsj_7 {-webkit-animation: fadeInDown 1.2s; animation: fadeInDown 1.2s; } .page11 .hn-tab .hn-bd ul.on li.zzfw_1 {-webkit-animation: fadeInLeft 1.5s; animation: fadeInLeft 1.5s; } .page11 .hn-tab .hn-bd ul.on li.zzfw_2 {-webkit-animation: fadeInDown 1.5s; animation: fadeInDown 1.5s; } .page11 .hn-tab .hn-bd ul.on li.zzfw_3 {-webkit-animation: fadeInLeft 1.2s; animation: fadeInLeft 1.2s; } .page11 .hn-tab .hn-bd ul.on li.zzfw_4 {-webkit-animation: fadeInUp 1.5s; animation: fadeInUp 1.4s; } .page11 .hn-tab .hn-bd ul.on li.zzfw_5 {-webkit-animation: fadeInRight 1.2s; animation: fadeInRight 1.2s; } .page11 .hn-tab .hn-bd ul.on li.zzfw_6 {-webkit-animation: fadeInUp 1.2s; animation: fadeInUp 1.2s; } .page11 .hn-tab .hn-bd ul.on li.zzfw_7 {-webkit-animation: fadeInRight 1.2s; animation: fadeInRight 1.2s; } .page12 {background-image: url(../images/app/bg12.jpg); background-repeat: no-repeat; background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/app/bg_3.jpg', sizingMethod='scale')\9; } .page12 .hnly-app {width: 1200px; height: 540px; position: absolute; top: 50%; left: 50%; margin: -204px 0 0 -600px; } .page12 .hnly-app h3 {font-size: 38px; color: #fff; text-align: left; padding: 0 10px; } .page12 .hnly-app h3 span {font-size: 18px; color: #fff; opacity: .5; display: block; line-height: 30px; text-transform: uppercase; } .page12 .hnly-app .hn-ly {width: 100%; margin-top: 60px; } .page12 .hnly-app .hn-ly .fl {width: 54%; } .page12 .hnly-app .hn-ly .fl .item {width: 100%; margin-bottom: 20px; } .page12 .hnly-app .hn-ly .fl .item input, .page12 .hnly-app .hn-ly .fl .item select, .page12 .hnly-app .hn-ly .fr .item textarea {background: url(../images/app/ly-bg.png) repeat; border: none; width: 100%; height: 50px; line-height: 50px; padding: 0px 12px; font-size: 16px; color: #98a0aa; box-sizing: border-box; } .page12 .hnly-app .hn-ly .fl .item .input_text {width: 50%; float: left; padding: 0 10px; box-sizing: border-box; } .page12 .hnly-app .hn-ly .fl .item .input_tel, .page12 .hnly-app .hn-ly .fl .item .code {width: 100%; padding: 0 10px; margin-bottom: 20px; box-sizing: border-box; } .page12 .hnly-app .hn-ly .fl .item .code input#verycode {width: 60%; float: left; } .page12 .hnly-app .hn-ly .fl .item .code input.yzm {width: 38%; float: right; cursor: pointer; } .page12 .hnly-app .hn-ly .fl .p3 {padding: 0 10px; font-size: 14px; color: #98a0aa; text-align: left; } .page12 .hnly-app .hn-ly .fr {width: 45%; } .page12 .hnly-app .hn-ly .fr .item {padding: 0 10px; margin-bottom: 20px; } .page12 .hnly-app .hn-ly .fr .item textarea {height: 260px; } .page12 .hnly-app .hn-ly .fr .item input.submit {float: right; width: 182px; height: 50px; border: none; background: #006acd; font-size: 16px; color: #fff; cursor: pointer; } .active .hnly-app {-webkit-animation: zoomIn 1s; animation: zoomIn 1s; } .active .hnly-app h3 {-webkit-animation: fadeInDown 1.2s; animation: fadeInDown 1.2s; } .caseTop {z-index: 1000; height: 51px; color: #666; text-align: center; background: url(../images/app/head-bg.png) repeat; position: fixed; top: 0; width: 100%; } .caseTop a {height: 51px; line-height: 51px; color: #666; font-size: 16px; margin-right: 50px; display: inline-block } .caseTop a.hover, .caseTop a:hover {color: #0896de; } .page2 {background: url(../images/app/bg2.jpg) no-repeat; background-size: cover; } .page3 {background: url(../images/app/bg3.jpg) no-repeat; background-size: cover; } .page4 {background: url(../images/app/bg4.jpg) no-repeat; background-size: cover; } .page5 {background: url(../images/app/bg5.jpg) no-repeat; background-size: cover; } .page6 {background: url(../images/app/bg6.jpg) no-repeat; background-size: cover; } .page7 {background: url(../images/app/bg7.jpg) no-repeat; background-size: cover; } .page8 {background: url(../images/app/bg8.jpg) no-repeat; background-size: cover; } .page9 {background: url(../images/app/bg9.jpg) no-repeat; background-size: cover; } .page10 {background: url(../images/app/bg10.jpg) no-repeat; background-size: cover; } .page11 {background: url(../images/app/bg11.jpg) no-repeat; background-size: cover; } .page10 .h {color: #fff; } .page10 .h h4 {font-size: 40px; } .page10 .h p {font-size: 18px; } .team-box {max-width: 1200px; margin: 100px auto 0; } .team-box ul li {float: left; width: 25%; text-align: center; cursor: pointer; } .team-box ul li .center {width: 230px; margin: 0 auto; } .team-box ul .num {font-size: 50px; color: #2278cf; width: 156px; height: 146px; line-height: 146px; text-align: center; background-color: #fff; position: relative; margin: 0 auto; font-weight: bold; border-radius: 10px; } .team-box ul .jia {width: 30px; height: 30px; line-height: 30px; position: absolute; left: 114px; top: 28px; display: block; font-size: 32px; font-weight: normal; } .team-box ul .tit {font-size: 20px; color: #fff; margin-top: 20px; } .team-box ul .zi {font-size: 30px; color: #fff; } .page11 .h {color: #333; text-align: center; } .page11 .h h4 {font-size: 40px; } .page11 .h p {font-size: 18px; } .liuc-box {max-width: 1200px; margin: 100px auto 0; } .active .h {-webkit-animation: fadeInDown 2.2s; animation: fadeInDown 2.2s; } .active .liuc-box, .active .team-box {-webkit-animation: fadeInUp 2s; animation: fadeInUp 2s; } @media(max-width:1920px) {.resp0 {z-index: 1; transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -webkit-transform: scale(0.9); } } @media(max-width:1660px) {.resp0 {z-index: 1; transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -webkit-transform: scale(0.8); } .text .text-3 .more {margin-top: 44px; } .page11 .hn-tab .hn-hd li a {font-size: 16px; } .page12 .hnly-app .hn-ly .fl .p3 {font-size: 16px; } } @media(max-width:1440px) {.center {margin-top: -3%; } .resp0 {z-index: 1; transform: scale(0.69); -moz-transform: scale(0.69); -ms-transform: scale(0.69); -webkit-transform: scale(0.69); } #menu {transform: scale(0.85); -moz-transform: scale(0.85); -ms-transform: scale(0.85); -webkit-transform: scale(0.85); } .text .text-3 .more {margin-top: 34px; } .page11 .hn-tab .hn-hd li a {font-size: 18px; } .page12 .hnly-app .hn-ly .fl label input {font-size: 18px; } .page12 .hnly-app .hn-ly .fl .p3 {font-size: 18px; } .page12 .hnly-app .hn-ly .fr textarea {font-size: 18px; } .page12 .hnly-app .hn-ly .fr input {font-size: 18px; } } @media(max-width:1366px) {.center {margin-top: -2%; } .resp0 {z-index: 1; transform: scale(0.58); -moz-transform: scale(0.58); -ms-transform: scale(0.58); -webkit-transform: scale(0.58); } .text .text-1 p {font-size: 24px; line-height: 36px; } .text .text-2 ul li {font-size: 1.6em; } .text .text-3 .more {margin-top: 24px; } .page11 .hn-tab .hn-hd li a {font-size: 20px; } .page12 .hnly-app .hn-ly .fl label input {font-size: 20px; } .page12 .hnly-app .hn-ly .fr textarea {font-size: 20px; } .page12 .hnly-app .hn-ly .fr input {font-size: 20px; } .page12 .hnly-app .hn-ly .fl .p3 {font-size: 20px; } .wrap1 {margin-top: -3.5%; } #menu {margin-top: -180px; } .caseTop {height: 38px; } .caseTop a {height: 38px; line-height: 38px; } } @media(max-width:1280px) {.resp0 {z-index: 1; transform: scale(0.55); -moz-transform: scale(0.55); -ms-transform: scale(0.55); -webkit-transform: scale(0.55); } .text .text-2 ul li {width: 122px !important; } #menu {transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); -webkit-transform: scale(0.75); } .text .text-3 .more {margin-top: 14px; } } @media(max-width:1024px) {.resp0 {z-index: 1; transform: scale(0.45); -moz-transform: scale(0.45); -ms-transform: scale(0.45); -webkit-transform: scale(0.45); } .text .text-2 ul li {width: 133px !important; } } @media(max-width:1366px) and (min-width:768px) {.text-fl,.text-fr {margin-top: 0px; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } .liuc-box {margin: 60px auto 0; text-align: center; } .liuc-box .Img img {height: 300px } } @media (min-width:768px) {#menu li:nth-last-of-type(1), #menu li:nth-last-of-type(2), #menu li:nth-last-of-type(3) {display: none; } .liuc-box .Img img {height: auto } } @media (max-width:768px) {.resp0 {width: 100%; transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); } .app-yd, .app-cy, .app-jr, .app-yl, .app-ly, .app-jz, .app-dc, .app-sj, #menu, #menu .a1, #menu .a2 {display: none; } #menu {position: fixed; right: 5px; top: 50%; width: 15px; list-style-type: none; z-index: 50; margin-top: -200px; } #menu ul {border: 0px; } #menu li:after {width: 14px; height: 14px; border-radius: 50%; background: #fff; content: ''; display: block; position: static; transition: all .4s; -webkit-transition: all .4s; } #menu li.active:after {width: 14px; height: 14px; border-radius: 50%; background: #f00; content: ''; display: block; position: static; transition: all .4s; -webkit-transition: all .4s; } .tableCell .center {margin: 0px; padding: 0 20px; box-sizing: border-box; } .text-fr, .text-fl {position: static; margin: 0px; width: auto; padding: 60px 0px 30px; } .text .text-1 h3 {font-size: 24px; } .text .text-1 h5 {font-size: 16px; line-height: 21px; margin-bottom: 10px; } .text .text-1 p {font-size: 14px; line-height: 21px; margin-bottom: 10px; } .text .text-2 h4 {font-size: 18px; line-height: 40px; } .text .text-2 ul li {width: 25% !important; font-size: 12px; } .text .text-3 h4 {font-size: 18px; line-height: 40px; } .text .text-3 p a {width: 20%; height: auto; margin-right: 0px; } .text .text-3 p a img {width: 86%; margin: 0 auto; } .text .text-3 .more {margin-top: 25px; width: 158px; height: 32px; line-height: 30px; border: 1px solid #fff; } .text .text-3 .more span {font-size: 14px; line-height: 30px; } .page10 .h h4, .page11 .h h4 {font-size: 24px; } .page10 .h p, .page11 .h p {font-size: 16px; } .team-box {margin: 30px auto 0; } .team-box ul li {width: 50%; margin-top: 30px; } .team-box ul li .center {width: 100%; } .team-box ul .num {width: 100px; height: 100px; line-height: 100px; font-size: 42px; } .team-box ul .jia {right: 0px; left: auto; top: 5px; font-size: 26px; } .team-box ul .tit {font-size: 14px; margin-top: 5px; } .team-box ul .zi {font-size: 18px; } .page12 .hnly-app {width: 100%; position: static; margin: 0px; } .page12 .hnly-app h3 {margin: 30px 0px; font-size: 24px; } .page12 .hnly-app .hn-ly {margin-top: 0px; } .page12 .hnly-app .hn-ly .fl, .page12 .hnly-app .hn-ly .fr, .page12 .hnly-app .hn-ly .fl .item .input_text {width: 100%; } .page12 .hnly-app .hn-ly .fl .item .input_text, .page12 .hnly-app .hn-ly .fl .item .input_tel {margin-bottom: 10px; } .page12 .hnly-app .hn-ly .fl .item {margin: 0px; } .page12 .hnly-app .hn-ly .fl .item input, .page12 .hnly-app .hn-ly .fl .item select, .page12 .hnly-app .hn-ly .fr .item textarea {height: 38px; line-height: 38px; font-size: 14px; } .page12 .hnly-app .hn-ly .fl .p3 {display: none; } .page12 .hnly-app .hn-ly .fr .item textarea {height: 80px; margin-top: 20px; } .page12 .hnly-app .hn-ly .fr .item input.submit {width: 100%; height: 42px; } }