锘? { padding: 0; margin: 0; font-size: 12px; font-family: "Microsoft YaHei", "寰蒋闆呴粦", "Arial", "Helvetica Neue", "Helvetica", "Arial", "sans-serif"; color: #777; } a { color: #4e4e4e; text-decoration: none; -webkit-transition: transform 0.3s ease, text-decoration 0.3s ease, color 0.3s, background 0.3s ease, text-indent 0.3s ease; -moz-transition: transform 0.3s ease, text-decoration 0.3s ease, color 0.3s, background 0.3s ease, text-indent 0.3s ease; transition: transform 0.3s ease, text-decoration 0.3s ease, color 0.3s, background 0.3s ease, text-indent 0.3s ease; } a:hover { color: #414141; text-decoration: underline; } body { position: relative; background-color: #fff; } .clear { width: 100%; clear: both; height: 0; overflow: hidden; } .clearB:after { content: " "; display: block; width: 100%; clear: both; } ul li { list-style: none; } img { border: none; } .hide { display: none; } .animate { -moz-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); } .w { width: 1280px; margin: 0 auto; } .fixed-menu { position: fixed; right: 10px; bottom: 100px; z-index: 10000; } .fixed-menu a { display: block; width: 55px; height: 55px; background: #848484; margin-bottom: 2px; } .fixed-menu a:hover { background: #0086cd; } .header-box { position: fixed; top: 0; left: 0; right: 0; background: #000; background: rgba(53, 53, 53, 0.94); z-index: 100; -webkit-transition: top 0.3s ease,opacity 0.3s ease; -moz-transition: top 0.3s ease,opacity 0.3s ease; transition: top 0.3s ease,opacity 0.3s ease; } .header { width: 1280px; margin: 0 auto; } .header .logo { float: left; margin: 11px 0; } .header .menu { float: right; height: 60px; position: relative; } .header .menu .m-bg { width: 100px; height: 46px; position: absolute; background: #0086cd; top: 7px; left: 0; display: none; overflow: visible; -moz-transition: all .2s ease; -webkit-transition: all .2s ease; transition: all .2s ease; } .header .menu ul li { padding: 0 10px; float: left; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; transition: all .3s ease; position: relative; } .header .menu ul li .m-a { padding: 0 15px; color: #fff; font-size: 15px; display: block; line-height: 60px; text-decoration: none; } .header .menu ul li .m-down { position: absolute; top: 60px; left: 0; background: #000; background: rgba(74, 74, 74, 0.94); display: none; } .header .menu ul li .m-1 { width: 1304px; overflow: hidden; position: fixed; left: 50%; margin: 0 0 0 -652px; padding: 12px 0; } .header .menu ul li .m-1 dl.dl-1 { padding: 0 0 0 8px; width: 178px; float: left; } .header .menu ul li .m-1 dl.dl-1 dt { color: #fff; font-size: 15px; line-height: 44px; width: auto; margin: 0 0 6px 0; border-bottom: 1px solid #757575; } .header .menu ul li .m-1 dl.dl-1 dd a { line-height: 30px; color: #c6c6c6; font-size: 13px; text-decoration: none; padding: 7px 8px; } .header .menu ul li .m-1 dl.dl-1 dd a:hover { background: #0086cd; color: #fff; } .header .menu ul li .m-1 dl.dl-1:nth-of-type(8) { clear: both; } .header .menu ul li .m-1 dl.margin-no { margin: 12px 0 0 0; } .header .menu ul li .m-1 .dl-2-box { border-top: 1px solid #757575; margin-top: 22px; padding: 0 0 30px 0; } .header .menu ul li .m-2 { width: 118px; background: rgba(74, 74, 74, 0.94); padding-bottom: 5px; left: 3px; } .header .menu ul li .m-2 a { display: block; line-height: 30px; text-align: center; font-size: 13px; color: #c6c6c6; text-decoration: none; margin: 5px 0 0 0; } .header .menu ul li .m-2 a:hover { background: #0086cd; color: #fff; } .header .menu ul li.drd .m-a, .header .menu ul li.m-t .m-a { padding-right: 25px; background: url(../images/arrows-1.png) 83px center no-repeat; } .header .menu ul li.drd:hover .m-a, .header .menu ul li.m-t-active .m-a { background: url(../images/arrows-2.png) 83px center no-repeat; } .header .menu ul li.drd:hover .m-down, .header .menu ul li.m-t-active .m-down { display: block; -moz-animation: menu-down 0.1s ease-out forwards; -webkit-animation: menu-down 0.1s ease-out forwards; animation: menu-down 0.1s ease-out forwards; } .m-l { position: fixed; top: 19px; left: 0; right: 0; height: 55px; background: #d1d1d1; z-index: 99; overflow: hidden; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; opacity: 0; } .m-l ul { margin: 0 0 0 320px; } .m-l ul li { line-height: 55px; } .m-l ul li a { color: #353535; font-size: 14px; text-decoration: none; margin: 0 30px 0 0; } .m-l ul li a:hover, .m-l ul li a.active { color: #0086cd; } .m-l-show { top: 74px; opacity: 1; } @-webkit-keyframes menu-down { 0% { -webkit-transform: translateY(100px) translateX(0); } 100% { -webkit-transform: translateY(0px) translateX(0); } } @-moz-keyframes menu-down { 0% { moz-transform: translateY(100px) translateX(0); } 100% { -moz-transform: translateY(0px) translateX(0); } } @keyframes menu-down { 0% { transform: translateY(20px) translateX(0); } 100% { transform: translateY(0px) translateX(0); } } .path { padding: 135px 0 123px 0; text-align: center; position: relative; z-index: 5; background: #e1e1e1; } .path li { width: 190px; float: left; } .path .path-1 .path-img { background-image: url(../images/list-1.png); } .path .path-2 { margin: 0 160px; } .path .path-2 .path-img { background-image: url(../images/list-2.png); } .path .path-3 { margin: 0 200px 0 0; } .path .path-3 .path-img { background-image: url(../images/list-3.png); } .path .path-4 .path-img { background-image: url(../images/list-4.png); } .path .path-img { width: 90px; height: 90px; margin: 0 auto; position: relative; background-color: #008bd5; background-position: center center; background-repeat: no-repeat; } .path .path-img b { position: absolute; bottom: 0; left: 33px; width: 23px; height: 2px; background: #a3daf6; } .path-index { margin: 580px 0 0 0; } .tit-3 { font-size: 18px; color: #000; line-height: 27px; margin: 24px 0 0 0; } .subtit-3 { font-size: 14px; color: #676767; line-height: 32px; } .cont-3 { margin: 22px 0 0 0; font-size: 14px; color: #383838; line-height: 26px; } @media screen and (max-width: 1490px) { .anim-list { width: 820px; margin: 0 auto; } .path-1 { margin: 0 20px 0 0; } .path-1 { margin: 0 20px 0 0; } .path .path-2 { margin: 0 20px 0 0; } .path .path-3 { margin: 0 20px 0 0; } } @media screen and (max-width: 780px) { body #newBridge { display: none; } .fixed-menu { display: none; } .anim-list { width: 375px; } .path .path-2 { margin: 0; } .path li { width: 170px; } } @media screen and (max-width: 360px) { .path li { width: 100%; } .cont-3 { margin: 22px 0 22px 0; } .anim-list { margin: 0 20px; width: auto; } } .anim-1, .anim-2, .anim-3, .anim-4, .anim-5, .anim-6, .anim-7, .anim-8, .anim-9, .anim-10 { -webkit-transform: translateY(100px) translateX(0); -moz-transform: translateY(100px) translateX(0); transform: translateY(100px) translateX(0); opacity: 0; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .anim-1 { -webkit-transition: transform .8s,opacity .8s; -moz-transition: transform .8s,opacity .8s; -o-transition: transform .8s,opacity .8s; transition: transform .8s,opacity .8s; } .anim-2 { -webkit-transition: transform 1s,opacity 1s; -moz-transition: transform 1s,opacity 1s; -o-transition: transform 1s,opacity 1s; transition: transform 1s,opacity 1s; } .anim-3 { -webkit-transition: transform 1.2s,opacity 1.2s; -moz-transition: transform 1.2s,opacity 1.2s; -o-transition: transform 1.2s,opacity 1.2s; transition: transform 1.2s,opacity 1.2s; } .anim-4 { -webkit-transition: transform 1.4s,opacity 1.4s; -moz-transition: transform 1.4s,opacity 1.4s; -o-transition: transform 1.4s,opacity 1.4s; transition: transform 1.4s,opacity 1.4s; } .anim-5 { -webkit-transition: transform 1.6s,opacity 1.6s; -moz-transition: transform 1.6s,opacity 1.6s; -o-transition: transform 1.6s,opacity 1.6s; transition: transform 1.6s,opacity 1.6s; } .anim-6 { -webkit-transition: transform 1.8s,opacity 1.8s; -moz-transition: transform 1.8s,opacity 1.8s; -o-transition: transform 1.8s,opacity 1.8s; transition: transform 1.8s,opacity 1.8s; } .anim-7 { -webkit-transition: transform 2s,opacity 2s; -moz-transition: transform 2s,opacity 2s; -o-transition: transform 2s,opacity 2s; transition: transform 2s,opacity 2s; } .anim-8 { -webkit-transition: transform 2.2s,opacity 2.2s; -moz-transition: transform 2.2s,opacity 2.2s; -o-transition: transform 2.2s,opacity 2.2s; transition: transform 2.2s,opacity 2.2s; } .anim-9 { -webkit-transition: transform 2.4s,opacity 2.4s; -moz-transition: transform 2.4s,opacity 2.4s; -o-transition: transform 2.4s,opacity 2.4s; transition: transform 2.4s,opacity 2.4s; } .anim-10 { -webkit-transition: transform 2.6s,opacity 2.6s; -moz-transition: transform 2.6s,opacity 2.6s; -o-transition: transform 2.6s,opacity 2.6s; transition: transform 2.6s,opacity 2.6s; } .anim-show { -webkit-transform: translateY(0px) translateX(0); -moz-transform: translateY(0px) translateX(0); transform: translateY(0px) translateX(0); opacity: 1; } .anim-list .anim-1 { -webkit-transition: transform .5s,opacity .5s; -moz-transition: transform .5s,opacity .5s; -o-transition: transform .5s,opacity .5s; transition: transform .5s,opacity .5s; } .anim-list .anim-2 { -webkit-transition: transform .6s,opacity .6s; -moz-transition: transform .6s,opacity .6s; -o-transition: transform .6s,opacity .6s; transition: transform .7s,opacity .7s; } .anim-list .anim-3 { -webkit-transition: transform .7s,opacity .7s; -moz-transition: transform .7s,opacity .7s; -o-transition: transform .7s,opacity .7s; transition: transform .9s,opacity .9s; } .anim-list .anim-4 { -webkit-transition: transform 1.4s,opacity 1.4s; -moz-transition: transform 1.4s,opacity 1.4s; -o-transition: transform 1.4s,opacity 1.4s; transition: transform 1.1s,opacity 1.1s; } .list-anim-show .anim-1, .list-anim-show .anim-2, .list-anim-show .anim-3, .list-anim-show .anim-4, .list-anim-show .anim-5, .list-anim-show .anim-6 { -webkit-transform: translateY(0px) translateX(0); -moz-transform: translateY(0px) translateX(0); transform: translateY(0px) translateX(0); opacity: 1; } .footer { position: relative; z-index: 5; } .footer .footer-top { height: 335px; background: #505050; } .footer .footer-top .footer-fl { float: left; } .footer .footer-top .footer-fl .footer-tit { padding: 40px 0 0 0; color: #fff; font-size: 20px; line-height: 30px; } .footer .footer-top .footer-fl .footer-en { font-size: 20px; line-height: 27px; } .footer .footer-top .footer-fl .footer-tel { margin: 40px 0 0 0; font-size: 20px; } .footer .footer-top .footer-fl .share { margin: 66px 0 0 0; } .footer .footer-top .footer-fl .share a { display: block; float: left; } .footer .footer-top .footer-fl .share .f_bds_tsina, .footer .footer-top .footer-fl .share .bds_tsina { width: 28px; height: 22px; background: url(../images/ico-4.png) no-repeat; } .footer .footer-top .footer-fl .share .f_bds_weixin, .footer .footer-top .footer-fl .share .bds_weixin { margin: 0 20px; width: 27px; height: 23px; background: url(../images/ico-5.png) no-repeat; } .footer .footer-top .footer-fl .share .f_bds_sqq, .footer .footer-top .footer-fl .share .bds_sqq { width: 23px; height: 24px; background: url(../images/ico-6.png) no-repeat; } .footer .footer-top .footer-fr { float: right; width: 480px; margin: 60px 0 0 0; } .footer .footer-top .footer-fr dl { float: left; } .footer .footer-top .footer-fr dl dt { width: 85px; font-size: 16px; line-height: 60px; color: #fff; margin: 0 0 15px 0; border-bottom: 1px solid #747474; } .footer .footer-top .footer-fr dl dd { line-height: 30px; } .footer .footer-top .footer-fr dl dd a { font-size: 13px; color: #fff; } .footer .footer-top .footer-fr .footer-cen { margin: 0 112px; } .footer .copyright { background: #404040; } .footer .copyright .w { color: #6e6e6e; font-size: 12px; line-height: 50px; } #dui-share { width: 240px; padding: 10px; position: fixed; top: 50%; left: 50%; margin: -147px 0 0 -130px; z-index: 99999; background: #fff; } .dui-s-t { font-size: 12px; font-weight: bold; text-align: left; line-height: 16px; height: 16px; position: relative; color: #000; } #phone-url img { width: 185px; margin: 13px auto; display: block; } #dui-share span { display: block; text-align: center; } #exit-dui { width: 16px; height: 16px; position: absolute; right: 0; top: 0; color: #999; text-decoration: none; font-size: 16px; } #dui-share p { font-size: 12px; text-align: left; line-height: 22px; color: #666; text-align: center; } .menu-2 { margin: 7px 30px 0 0; width: 44px; height: 44px; float: right; display: none; position: relative; } .menu-2 i { position: absolute; display: block; top: 4px; left: 0; width: 100%; height: 2px; background: #fff; -moz-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); } .menu-2 s { position: absolute; display: block; top: 21px; left: 0; width: 100%; height: 2px; background: #fff; -moz-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); } .menu-2 b { position: absolute; display: block; top: 38px; left: 0; width: 100%; height: 2px; background: #fff; -moz-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); } .menu-2-down { display: none; padding: 10px 0; margin: 0 30px; max-height: 300px; overflow: auto; } .menu-2-down .menu-2-tit { line-height: 27px; } .menu-2-down .menu-2-tit a { text-decoration: none; font-size: 16px; color: #fff; } .menu-2-down .menu-2-m { position: relative; line-height: 24px; margin: 0 0 0 10px; } .menu-2-down .menu-2-m b { position: absolute; display: block; top: 11px; left: 2px; width: 10px; height: 2px; background: #fff; } .menu-2-down .menu-2-m a { text-decoration: none; margin: 0 0 0 15px; color: #fff; } .menu-2-show i { transform-origin: 5px -1px; transform: rotate(44deg); width: 60px; } .menu-2-show s { opacity: 0; } .menu-2-show b { transform-origin: 4px 2px; transform: rotate(-44deg); width: 60px; } @media screen and (max-width: 1490px) { .footer .w { margin: 0 20px; width: auto; } } @media screen and (max-width: 1280px) { .header { width: 100%; } .header .logo { margin: 11px 0 11px 30px; } .header .menu ul li .m-1 { left: 0; right: 0; margin: 0; width: 100%; } .m-down-min { width: 1086px; margin: 0 auto; padding: 0 8px 0 0 ; } .header .menu ul li .m-1 dl.dl-1:nth-of-type(7) { clear: both; } .header .menu ul li .m-1 dl.dl-1:nth-of-type(8) { float: left; clear: none; } } @media screen and (max-width: 1120px) { .m-down-min { width: 905px; margin: 0 auto; padding: 0 8px 0 0 ; } } @media screen and (max-width: 982px) { .header .menu { display: none; } .header .menu-2 { display: block; } } @media screen and (max-width: 700px) { .footer .copyright .w { font-size: 10px; } .footer .footer-top .footer-fl { float: none; } .footer .footer-top .footer-fr { float: none; clear: both; margin: 60px 0 60px 0; } .footer .footer-top { height: auto; } .footer .footer-top .footer-fr dl { clear: both; float: none; line-height: 50px; } .footer .footer-top .footer-fr dl dt { margin: 0; line-height: 50px; display: inline-block; } .footer .footer-top .footer-fr dl dd { display: inline-block; } .footer .footer-top .footer-fr .footer-cen { margin: 0; } } .tit-box { position: absolute; top: 45px; left: 0; width: 130px; height: 130px; overflow: hidden; text-align: center; background: #008bd5; z-index: 10; } .tit-box p { margin: 43px 0 0 0; font-size: 20px; color: #fff; } .tit-box span { display: block; font-size: 20px; color: #fff; font-family: "Arial"; } @media screen and (max-width: 409px) { .footer .footer-top { height: auto; } .footer .footer-top .footer-fr { float: none; width: auto; } } @media screen and (max-width: 480px) { .footer .footer-top .footer-fr { width: 100%; } } .main-box { margin: 60px 0 0 0; } .join-box .w { position: relative; } .join-box .w .tit-box { top: -71px; } .ab-banner img { width: 100%; display: block; } .t-box .w { position: relative; } .t-box .tit-box { top: -65px; } .t-box .t-cont { padding-top: 130px; line-height: 30px; } .t-box .t-cont p { font-size: 14px; color: #000; margin: 0 0 10px 0; } .t-box-1 .t-cont { padding-top: 0; } .join-box { background: #f4f4f4; } .join-box ul { padding: 110px 0 152px 0; margin: 0 30px; } .join-box ul li { position: relative; width: 270px; text-align: center; display: inline-block; float: left; } .join-box ul li .t-img { margin: 0 20px; } .join-box ul li .t-img img { display: block; width: 100%; } .join-box ul li .t-tit { font-size: 20px; color: #000; line-height: 78px; } .join-box ul li .t-cont { font-size: 14px; color: #818181; line-height: 20px; } .join-box ul li .t-border { position: absolute; left: 0; top: 50%; width: 1px; height: 210px; background: #ebebeb; margin: -105px 0 0 0; } .join-box ul .t-li-1 { margin: 0 95px 0 0; } .join-box ul .t-li-2 { padding: 0 0 0 110px; } .join-box ul .t-li-3 { margin: 0 0 0 83px; padding: 0 0 0 122px; } .recr-box { background: #e9e9e9; } .recr-box .recr-min { width: 100%; overflow: hidden; padding-top: 110px; } .recr-box .recr-min ul { width: 1300px; } .recr-box .recr-min ul li { margin: 0 15px 0 0; float: left; } .recr-box .recr-min ul li a { display: block; position: relative; width: 244px; } .recr-box .recr-min ul li a .recr-ico { position: absolute; top: 0; left: 0; width: 244px; height: 319px; background: url(../images/search-ico.png) center center no-repeat; opacity: 0; z-index: 4; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; } .recr-box .recr-min ul li a .mark { position: absolute; top: 0; left: 0; width: 244px; height: 319px; background: #319dd7; opacity: 0; z-index: 3; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; } .recr-box .recr-min ul li a img { width: 244px; height: 319px; } .recr-box .recr-min ul li a .recr-tit { line-height: 60px; font-size: 15px; color: #000; padding-bottom: 30px; text-align: center; } .recr-box .recr-min ul li a:hover .recr-ico { opacity: .7; } .recr-box .recr-min ul li a:hover .mark { opacity: .7; } @media screen and (max-width: 1280px) { .w { width: 100%; } .join-box ul { width: 730px; margin: 0 auto; } .join-box ul .t-li-2 { padding: 0 0 0 95px; } .join-box ul .t-li-3 .t-border { display: none; padding: 0 0 0 226px; margin: 0; } .join-box ul .t-li-3 { clear: both; } .recr-box .recr-min { width: 1021px; margin: 0 auto; } .recr-box .recr-min ul { width: 1036px; } } @media screen and (max-width: 1021px) { .recr-box .recr-min { width: 777px; margin: 0 auto; } .recr-box .recr-min ul { width: 792px; } } @media screen and (max-width: 777px) { .recr-box .recr-min { width: 518px; margin: 0 auto; } .recr-box .recr-min ul { width: 533px; } } @media screen and (max-width: 518px) { .recr-box .recr-min { width: 244px; margin: 0 auto; } .recr-box .recr-min ul { width: 259px; } } @media screen and (max-width: 730px) { .join-box ul { width: 270px; margin: 0 auto; } .join-box ul .t-li-1, .join-box ul .t-li-2, .join-box ul .t-li-3 { margin: 0 0 20px 0; padding: 0; } } @media screen and (max-width: 270px) { .join-box ul { width: 100%; margin: 0 auto; } .join-box ul li { width: 100%; } } .tit-5 { font-size: 20px; color: #000; line-height: 74px; border-bottom: 1px solid #dbdbdb; } .join-de-fl { width: 180px; float: left; } .join-de-fl dl { margin: 23px 0 23px 0; } .join-de-fl dl dt { border-bottom: 1px solid #dbdbdb; font-size: 20px; color: #000; line-height: 40px; position: relative; text-indent: 7px; } .join-de-fl dl dt b { position: absolute; display: block; top: 10px; left: 0; width: 3px; height: 20px; background: #0086cd; } .join-de-fl dl dd { border-bottom: 1px solid #dbdbdb; line-height: 35px; } .join-de-fl dl dd a { display: block; font-size: 14px; color: #000; text-indent: 8px; position: relative; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; text-decoration: none; } .join-de-fl dl dd a b { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; position: absolute; display: block; top: 10px; left: 0; width: 3px; height: 16px; opacity: 0; background: #0086cd; } .join-de-fl dl dd a:hover, .join-de-fl dl dd a.active { text-indent: 14px; color: #0086cd; } .join-de-fl dl dd a:hover b, .join-de-fl dl dd a.active b { opacity: 1; left: 8px; } .join-de-fr { margin: 25px 0 0 65px; float: left; width: 950px; } .join-de-fr h3 { color: #000; font-size: 14px; line-height: 30px; } .join-de-fr p { line-height: 30px; font-size: 14px; color: #000; } @media screen and (max-width: 1280px) { .join-de { margin: 0 20px; } .join-de-fr { float: left; width: 600px; } } @media screen and (max-width: 865px) { .join-de-fl { float: none; width: 100%; } .join-de-fl dl dt { display: inline-block; } .join-de-fl dl dd { display: inline-block; } .join-de { margin: 0 20px; } .join-de-fr { margin: 0 0 20px 0; width: auto; float: none; } } .tit-6 { text-align: center; padding: 100px 0 30px 0; border-bottom: 1px solid #e6e6e6; } .tit-6 p { color: #000; font-size: 20px; line-height: 55px; } .tit-6 span { font-size: 24px; color: #0086cd; line-height: 55px; display: block; font-family: "Arial"; font-weight: bold; } .contact .cot-tit { font-size: 20px; color: #000; line-height: 77px; text-align: center; } .contact .cot-co { width: 930px; margin: 0 auto 40px auto; } .contact .cot-co p { float: left; width: 465px; font-size: 14px; line-height: 30px; } .contact .cot-co p b { font-size: 14px; } .contact { width: 100%; overflow: hidden; } .contact .cont-box { width: 1380px; display: none; } .contact .cont-box ul { padding: 0 0 40px 0; } .contact .cont-box ul li { margin: 0 103px 10px 0; width: 355px; float: left; border: 1px solid #e6e6e6; } .contact .cont-box ul li .cont-tit { border-bottom: 1px solid #e6e6e6; line-height: 45px; font-size: 16px; color: #000; text-indent: 15px; background: #f4f4f4; } .contact .cont-box ul li .c-1-box { padding: 20px 10px; } .contact .cont-box ul li .c-1-box .c-1 { margin: 0 0 5px 0; font-size: 14px; color: #000; line-height: 20px; } .contact .cont-box ul li .c-1-box .c-1 span { font-size: 14px; color: #000; } @media screen and (max-width: 1280px) { .c-us .w { width: 817px; margin: 0 auto; } .c-us .w .cont-box { width: 920px; } } @media screen and (max-width: 840px) { .c-us .w { width: 357px; margin: 0 auto; } .c-us .w .cont-box { width: 355px; } .contact .cot-co { width: 100%; } .contact .cot-co p { width: 100%; float: none; } .contact .cont-box ul li { margin: 0 0 10px 0; float: none; } } @media screen and (max-width: 357px) { .c-us .w { margin: 0 20px; width: auto; } .c-us .w .cont-box { width: 100%; } .contact .cont-box ul li { width: auto; } .contact .cont-box ul li .c-1-box { height: auto; } } .cog .path { padding: 1px 0 123px 0; background: #f4f4f4; } .cog .path .w { margin-top: -42px; } @media screen and (max-width: 1280px) { .t-box .t-cont { margin: 0 20px; } } .p-box { padding: 125px 0 100px 0; border-bottom: 1px solid #e6e6e6; } .p-box .w { overflow: hidden; } .p-box .w ul { width: 1580px; } .p-box .w ul li { float: left; margin: 0 60px 0 0; } .p-box .w ul li .p-img { width: 210px; height: 260px; border: 1px solid #e0e0e0; overflow: hidden; position: relative; } .p-box .w ul li .p-img a { position: absolute; top: 10px; left: 20px; right: 20px; display: block; z-index: 2; } .p-box .w ul li .p-img a img { width: 100%; } .p-box .w ul li .p-img .mark-ico { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/search-ico.png) center center no-repeat; opacity: 0; z-index: 4; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; cursor: pointer; } .p-box .w ul li .p-img .mark { position: absolute; top: 0; left: 0; width: 244px; height: 319px; background: #319dd7; opacity: 0; z-index: 3; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; } .p-box .w ul li .p-img:hover .mark { opacity: .7; } .p-box .w ul li .p-img:hover .mark-ico { opacity: 1; } .p-box .w ul li .p-tit { font-size: 14px; color: #000; line-height: 65px; text-align: center; } .mark-p-box { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000000; display: none; } .mark-p-box .mark { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; background: #000; opacity: .7; } .mark-p-box .mark-photo { position: absolute; top: 50%; left: 50%; z-index: 22; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } .body-photo-show { overflow: hidden; } .body-photo-show .mark-p-box { display: block; } @media screen and (max-width: 1300px) { .p-box .w { width: 1036px; } .p-box .w ul { width: 1096px; } } @media screen and (max-width: 1036px) { .p-box .w { width: 756px; } .p-box .w ul { width: 816px; } } @media screen and (max-width: 756px) { .p-box .w { width: 484px; } .p-box .w ul { width: 544px; } } @media screen and (max-width: 756px) { .p-box .w { width: 212px; } .p-box .w ul { width: 212px; margin: 0; } } .ser-1 { margin-top: 135px; text-align: center; } .ser-1 a { display: inline-block; width: 95px; height: 37px; font-size: 15px; color: #000; line-height: 37px; text-decoration: none; } .ser-1 a:hover, .ser-1 a.active { background: #0086cd; color: #fff; } .ser-t { padding-top: 25px; width: 1120px; margin: 0 auto; } .ser-t .ser-a-box { float: left; width: 25%; } .ser-t .ser-a-box a { display: block; padding: 0 20px; border: 1px solid #fff; text-decoration: none; text-align: center; } .ser-t .ser-a-box a img { margin: 35px 0 0 0; width: 100%; } .ser-t .ser-a-box a p { font-size: 14px; color: #000; line-height: 48px; text-align: center; } .ser-t .ser-a-box a.active { border: 1px solid #e6e6e6; } @media screen and (max-width: 1120px) { .ser-t { width: 100%; } } @media screen and (max-width: 550px) { .ser-t { width: 100%; } .ser-t .ser-a-box { width: 50%; } } @media screen and (max-width: 270px) { .ser-t { width: 100%; } .ser-t .ser-a-box { width: 100%; } } .down-list { width: 1280px; margin: 10px auto 110px auto; } .down-list ul { border: 1px solid #e6e6e6; border-bottom: none; } .down-list ul li a { border-bottom: 1px solid #e6e6e6; display: block; position: relative; line-height: 44px; font-size: 16px; color: #000; background: #f4f4f4; padding: 0 38px 0 10px; text-decoration: none; } .down-list ul li a i { display: block; position: absolute; top: 25px; right: 25px; width: 12px; height: 2px; background: #848484; } .down-list ul li a b { display: block; position: absolute; top: 25px; right: 25px; width: 12px; height: 2px; background: #848484; -moz-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); } .down-list ul li .down-cont { height: 0; overflow: hidden; -moz-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); } .down-list ul li .down-cont-m { padding: 15px 10px; color: #000; font-size: 14px; border-bottom: 1px solid #e6e6e6; } .down-list ul li.active a b { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg); } @media screen and (max-width: 1280px) { .down-list { width: auto; margin: 10px 20px 90px 20px; } } .ser-t-1 { font-size: 20px; color: #000; margin-top: 64px; line-height: 53px; text-align: center; } .ser-t-2 { line-height: 57px; font-size: 24px; color: #0086cd; text-align: center; border-bottom: 1px solid #e6e6e6; font-weight: bold; } .ser-t-3 { line-height: 77px; color: #000; font-size: 20px; text-align: center; } .ser-t-txt { width: 1035px; margin: 0 auto; } .ser-t-txt img { width: 100%; display: block; } .ser-txt { display: none; line-height: 25px; color: #000; margin: 0 20px 20px 20px; text-align: center; } @media screen and (max-width: 1035px) { .ser-t-txt { width: 100%; } } @media screen and (max-width: 700px) { .ser-t-txt { display: none; } .ser-txt { display: block; } } .d-list { margin: 30px 0; } .d-list ul li { -moz-transition: background 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transition: background 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: background 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); } .d-list ul li .d-w { line-height: 70px; width: 1280px; margin: 0 auto; } .d-list ul li .d-w .d-l-1, .d-list ul li .d-w .d-l-2, .d-list ul li .d-w .d-l-3, .d-list ul li .d-w .d-l-4 { -moz-transition: text-indent 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transition: text-indent 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: text-indent 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); float: left; color: #000; font-size: 13px; } .d-list ul li .d-w .d-l-1 { width: 640px; } .d-list ul li .d-w .d-l-2 { text-align: center; width: 160px; } .d-list ul li .d-w .d-l-3 { text-align: center; width: 210px; } .d-list ul li .d-w .d-l-4 { width: 270px; } .d-list ul li .d-w .d-l-4 b { display: block; float: right; margin: 25px 40px 0 0; width: 19px; height: 17px; -moz-transition: margin 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transition: margin 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: margin 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); background: url(../images/down-1.png) no-repeat; } .d-list ul li:hover { background: #f5f5f5; } .d-list ul li:hover .d-w .d-l-1, .d-list ul li:hover .d-w .d-l-2, .d-list ul li:hover .d-w .d-l-3, .d-list ul li:hover .d-w .d-l-4 { color: #0086cd; text-indent: 20px; } .d-list ul li:hover .d-w .d-l-4 b { margin: 25px 20px 0 0; background: url(../images/down-2.png) no-repeat; } @media screen and (max-width: 1280px) { .d-list ul li .d-w { width: 1000px; } .d-list ul li .d-w .d-l-1 { width: 400px; } .d-list ul li .d-w .d-l-2 { text-align: center; width: 200px; } .d-list ul li .d-w .d-l-3 { text-align: center; width: 200px; } .d-list ul li .d-w .d-l-4 { width: 200px; } } @media screen and (max-width: 1000px) { .d-list ul li .d-w { width: 700px; } .d-list ul li .d-w .d-l-1 { width: 400px; } .d-list ul li .d-w .d-l-2 { text-align: center; width: 100px; } .d-list ul li .d-w .d-l-3 { text-align: center; width: 100px; } .d-list ul li .d-w .d-l-4 { width: 100px; } } @media screen and (max-width: 700px) { .d-list ul li .d-w { width: auto; margin: 0 20px; } .d-list ul li .d-w .d-l-1, .d-list ul li .d-w .d-l-2, .d-list ul li .d-w .d-l-3, .d-list ul li .d-w .d-l-4 { display: inline-block; float: none; } .d-list ul li .d-w .d-l-1 { width: 160px; } .d-list ul li .d-w .d-l-2 { text-align: center; width: 80px; } .d-list ul li .d-w .d-l-3 { text-align: center; width: 80px; } .d-list ul li .d-w .d-l-4 { width: 80px; } } .pgm-box { margin: 20px 0 0 0; } .pgm-box ul li a { padding: 24px 0; -moz-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); display: block; text-decoration: none; } .pgm-box ul li a .pgm-w { -moz-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); width: 1280px; margin: 0 auto; } .pgm-box ul li a .pgm-w .pgm-fl { float: left; width: 310px; height: 172px; } .pgm-box ul li a .pgm-w .pgm-fl img { width: 100%; height: 100%; } .pgm-box ul li a .pgm-w .pgm-fr { margin: 0 20px 0 340px; } .pgm-box ul li a .pgm-w .pgm-fr .pgm-t-1 { line-height: 30px; height: 30px; padding: 31px 0 0 0; overflow: hidden; } .pgm-box ul li a .pgm-w .pgm-fr .pgm-t-1 .fl-1 { float: left; font-size: 14px; color: #000; position: relative; -moz-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); } .pgm-box ul li a .pgm-w .pgm-fr .pgm-t-1 .fl-1 b { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #000; } .pgm-box ul li a .pgm-w .pgm-fr .pgm-t-1 .fl-2 { color: #000; font-size: 14px; float: left; margin: 0 0 0 8px; } .pgm-box ul li a .pgm-w .pgm-fr .pgm-c { line-height: 50px; color: #000; font-size: 16px; font-weight: bold; overflow: hidden; } .pgm-box ul li a .pgm-w .pgm-fr .pgm-d { line-height: 25px; color: #000; font-size: 14px; overflow: hidden; } .pgm-box ul li a:hover { background: #f0f0f0; } .pgm-box ul li a:hover .pgm-w { -webkit-transform: translate3d(35px, 0, 0); -moz-transform: translate3d(35px, 0, 0); transform: translate3d(35px, 0, 0); } .pgm-box ul li a:hover .pgm-w .pgm-fr .pgm-t-1 .fl-1 { padding: 0 0 0 76px; } .page { text-align: center; margin: 25px 0; } .page a { display: inline-block; width: 28px; height: 28px; line-height: 28px; text-decoration: none; text-align: center; color: #000; font-size: 14px; margin: 0 2px; -moz-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); } .page a.active, .page a:hover { color: #fff; background: #0086cd; } @media screen and (max-width: 1280px) { .pgm-box ul li a .pgm-w { width: 100%; } } @media screen and (max-width: 700px) { .pgm-box ul li a .pgm-w .pgm-fl { float: none; margin: 0 auto; } .pgm-box ul li a .pgm-w .pgm-fr { margin: 0 20px; } } .s-box .s-w { width: 790px; margin: 0 auto; } .s-box .s-w .s-1 { color: #0086cd; font-size: 20px; padding: 20px 0; border-bottom: 1px solid #e6e6e6; text-align: center; } .s-box .s-w .s-2 { padding-bottom: 10px; text-align: center; font-size: 14px; line-height: 40px; color: #ababab; } .s-box .s-w .s-cont { padding: 0 0 30px 0; } .s-box .s-w .s-cont strong{ font-size: inherit; color: #000; } .s-box .s-w .s-cont span{ font-size: inherit; color: #000; } .s-box .s-w .s-cont p { margin: 5px 0; } .s-box .s-w .s-cont img { max-width: 100%; } .up-down { margin: 0 0 50px 0; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; padding: 12px 0; } .up-down .ud-fl p, .up-down .ud-fr p { padding-top: 10px; font-size: 18px; color: #000; } .up-down .ud-fl span, .up-down .ud-fr span { font-size: 14px; color: #000; display: block; line-height: 30px; } .up-down .ud-fl a, .up-down .ud-fr a { text-decoration: none; } .up-down .ud-fl a p, .up-down .ud-fr a p { color: #0086cd; } .up-down .ud-fl a span, .up-down .ud-fr a span { color: #0086cd; } .up-down .ud-fl { float: left; } .up-down .ud-fr { float: right; } @media screen and (max-width: 790px) { .s-box .s-w { width: auto; margin: 0 20px; } } div.share { height: 26px; margin: 0 0 30px 0; } div.share .share-l { float: left; display: block; width: 32px; height: 26px; line-height: 26px; background: url(../images/share-ico.png) left center no-repeat; } div.share a { width: 26px; height: 26px; display: inline-block; opacity: 1; filter: alpha(opacity=100); margin: 0; padding: 0; margin-left: 10px; border-radius: 3px; } div.share a.bds_weixin:hover { opacity: 1; filter: alpha(opacity=100); background-color: #56b91e; } div.share a.bds_sqq:hover { opacity: 1; filter: alpha(opacity=100); background-color: #5dd1fd; } div.share a.bds_qzone:hover { opacity: 1; filter: alpha(opacity=100); background-color: #ffc000; } div.share a.bds_tqq:hover { opacity: 1; filter: alpha(opacity=100); background-color: #0c98c2; } div.share a.bds_tsina:hover { opacity: 1; filter: alpha(opacity=100); background-color: #e91719; } div.share .bds_weixin { background: #a1a1a1 url(../images/s-1.png) 3px 5px no-repeat; } div.share .bds_sqq { background: #a1a1a1 url(../images/s-2.png) 4px 3px no-repeat; } div.share .bds_qzone { background: #a1a1a1 url(../images/s-3.png) 2px 3px no-repeat; } div.share .bds_tsina { background: #a1a1a1 url(../images/s-5.png) 3px 5px no-repeat; } .case-banner { position: relative; } .case-banner .case-ba-txt { position: absolute; top: 50%; left: 50%; width: 600px; padding: 35px; -moz-transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); text-align: center; font-size: 14px; color: #fff; background: rgba(0, 0, 0, 0.24); } .case-cont { width: 1328px; margin: 0 auto; } .case-cont ul { padding: 60px 20px 40px 0; } .case-cont ul li { margin: 0 0 20px 20px; float: left; transition: box-shadow 0.4s ease-in-out; -webkit-transition: box-shadow 0.4s ease-in-out; -moz-transition: box-shadow 0.4s ease-in-out; -o-transition: box-shadow 0.4s ease-in-out; } .case-cont ul li .case-img { width: 307px; height: 170px; overflow: hidden; } .case-cont ul li .case-img img { transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; display: block; width: 100%; height: 100%; } .case-cont ul li .case-txt { border: 1px solid #f0f0f0; border-top: none; color: #000; font-size: 14px; line-height: 40px; padding: 0 10px; } .case-cont ul li a { text-decoration: none; } .case-cont ul li a:hover .case-img img { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); } .case-cont ul li:hover { box-shadow: 0px 0px 7px #948989; } @media screen and (max-width: 1345px) { .case-cont { width: 1001px; } } @media screen and (max-width: 1040px) { .case-cont { width: 674px; } .case-banner .case-ba-txt { position: static; width: auto; top: auto; left: auto; padding: 35px 138px; -moz-transform: translateY(0) translateX(0); -webkit-transform: translateY(0) translateX(0); transform: translateY(0) translateX(0); } .case-banner img { display: none; } } @media screen and (max-width: 700px) { .case-cont { width: 367px; } } @media screen and (max-width: 610px) { .case-banner .case-ba-txt { padding: 35px 20px; } .case-t-box .tit-box { top: 0; } } @media screen and (max-width: 400px) { .case-cont { width: 100%; } .case-cont ul li .case-img { width: auto; height: auto; } } .pt-nav { position: fixed; top: 60px; left: 0; right: 0; z-index: 14; width: 100%; height: 55px; line-height: 55px; background: #fff; background: rgba(255, 255, 255, 0.94); text-align: center; -webkit-transition: top 0.3s ease,opacity 0.3s ease; -moz-transition: top 0.3s ease,opacity 0.3s ease; transition: top 0.3s ease,opacity 0.3s ease; } .pt-nav .pt-tit { float: left; font-size: 16px; color: #0086cd; } .pt-nav .pt-ul ul { width: 343px; margin: 0 auto; } .pt-nav .pt-ul ul li { width: 85px; display: block; float: left; text-align: center; } .pt-nav .pt-ul ul li a { font-size: 14px; text-decoration: none; color: #353535; } .pt-nav .pt-ul ul li a.active, .pt-nav .pt-ul ul li a:hover { color: #0086cd; } .follow-top { position: fixed; top: 0; left: 0; right: 0; height: 680px; z-index: 2; } .follow-top-box { position: absolute; top: 0; left: 0; right: 0; height: 680px; } .follow-list { position: relative; z-index: 5; } .ps-1-box { width: 100%; height: 680px; clear: both; background: url(../images/h-page-border.jpg) left top repeat-x; } .ps-1-box .ps-1 { width: 621px; margin: 0 auto; padding: 106px 0 0 0; } .ps-1-box .ps-1 .ps-1-tit { width: 100%; height: 43px; margin: 0 auto; background: url(../images/ps-1-one.png) center 0 no-repeat; } .ps-1-box .ps-1 .ps-1-ico-list div { float: left; height: 221px; position: relative; } .ps-1-box .ps-1 .ps-1-ico-list div p { position: absolute; top: 145px; left: 0; right: 0; font-size: 16px; text-align: center; color: #353535; } .ps-1-box .ps-1 .ps-1-ico-list .ps-1-ico-1 { width: 225px; background: url(../images/h-page-1.png) center center no-repeat; } .ps-1-box .ps-1 .ps-1-ico-list .ps-1-ico-2 { width: 170px; background: url(../images/h-page-2.png) center center no-repeat; } .ps-1-box .ps-1 .ps-1-ico-list .ps-1-ico-3 { width: 225px; background: url(../images/h-page-3.png) center center no-repeat; } .ps-1-box .ps-1 .ps-1-img img { display: block; width: 100%; } .ps-2-box { background: #e0e0e0; height: 530px; position: relative; z-index: 5; } .ps-2-box .ps-2 { width: 1280px; margin: 0 auto; text-align: center; } .ps-2-box .ps-2 .ps-2-tit { color: #353535; font-size: 40px; line-height: 140px; } .ps-2-box .ps-2 .ps-2-txt-1 { font-size: 16px; line-height: 27px; color: #353535; } .ps-2-box .ps-2 .ps-2-txt-2 { font-size: 16px; color: #353535; margin: 20px 0 0 0; } .ps-2-list { margin: 65px 0 0 0; height: 210px; position: relative; } .ps-2-list .ps-2-list-img { position: absolute; top: 0; left: 0; z-index: 6; -webkit-transform: translateY(0px) translateX(0); -moz-transform: translateY(0px) translateX(0); transform: translateY(0px) translateX(0); -moz-transition: all 2s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transition: all 2s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: all 2s cubic-bezier(0.4, 0.01, 0.165, 0.99); } .ps-2-list .ps-2-list-img img { display: block; } .ps-2-list .ps-2-list-img p { line-height: 80px; color: #353535; font-size: 16px; } .ps-2-list .ps-2-list-2 { z-index: 5; } .ps-2-list .ps-2-list-3 { z-index: 4; } .ps-2-list .ps-2-list-4 { z-index: 3; } .ps-2-list .ps-2-list-2.anim-show { left: 311px; } .ps-2-list .ps-2-list-3.anim-show { left: 695px; } .ps-2-list .ps-2-list-4.anim-show { left: 1008px; } .ps-3-box { width: 100%; height: 675px; overflow: hidden; position: relative; z-index: 5; } .ps-3-box .ps-4 { text-align: center; position: absolute; top: 0; left: 0; right: 0; line-height: 130px; font-size: 40px; color: #fff; z-index: 6; } .ps-3-box .ps-5 { text-align: center; position: absolute; top: 125px; left: 0; right: 0; font-size: 16px; line-height: 27px; color: #fff; z-index: 6; } .ps-3-box .ps-3-1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(../images/01.jpg) no-repeat; background-size: cover; z-index: 1; } .ps-3-box .ps-3-2 { position: absolute; top: 0; left: 0; width: 50%; bottom: 0; overflow: hidden; z-index: 2; } .ps-3-box .ps-3-2 .ps-3-top { width: 100%; height: 100%; background: url(../images/02.jpg) no-repeat; background-size: cover; } .ps-3-box .ps-3-2 .ps-4-border { position: absolute; top: 0; right: 0; bottom: 0; width: 2px; background: rgba(0, 0, 0, 0.3); } .ps-3-box .ps-3-drag-box { position: absolute; top: 50%; left: 50%; width: 184px; height: 62px; margin: 0 0 0 -92px; z-index: 6; } .ps-3-box .ps-3-drag-box .ps-3-fl { display: block; width: 50%; height: 100%; float: left; background: rgba(0, 0, 0, 0.6) url(../images/h-fl.png) center center no-repeat; } .ps-3-box .ps-3-drag-box .ps-3-drag { display: block; position: absolute; top: 0; left: 50%; width: 20px; height: 100%; margin: 0 0 0 -10px; background: url(../images/h-drag-border.png) center center no-repeat; } .ps-3-box .ps-3-drag-box .ps-3-fr { display: block; width: 50%; height: 100%; float: left; background: rgba(0, 0, 0, 0.6) url(../images/h-fr.png) center center no-repeat; } .ps-4-box { background: #d1d1d1; height: 472px; position: relative; z-index: 5; } .ps-4-box .ps-4-1 { font-size: 40px; color: #353535; text-align: center; line-height: 155px; } .ps-4-box .ps-4-2 { font-size: 16px; line-height: 27px; color: #353535; text-align: center; } .ps-4-box .p-4 { width: 1280px; text-align: center; margin: 0 auto; } .ps-4-box .p-4 .ps-2-list .ps-2-list-2.anim-show { left: 352px; } .ps-4-box .p-4 .ps-2-list .ps-2-list-3.anim-show { left: 657px; } .ps-4-box .p-4 .ps-2-list .ps-2-list-4.anim-show { left: 1006px; } .ps-5-box { background: url(../images/ps-5-bg.png) center center no-repeat; height: 374px; text-align: center; } .ps-5-box .ps-5-1 { line-height: 127px; font-size: 40px; color: #fff; } .ps-5-box .ps-5-2 { font-size: 16px; color: #fff; line-height: 27px; } .ps-5-box .ps-5-3 { width: 460px; margin: 0 auto; } .ps-5-box .ps-5-3 ul li { position: relative; width: 146px; height: 163px; display: block; float: left; } .ps-5-box .ps-5-3 ul li p { position: absolute; bottom: 0; left: 0; right: 0; font-size: 30px; color: #fff; } .ps-5-box .ps-5-3 ul li.ps-5-3-1 { background: url(../images/ps-5-3-1.png) center 58px no-repeat; } .ps-5-box .ps-5-3 ul li.ps-5-3-2 { background: url(../images/ps-5-3-2.png) center 58px no-repeat; } .ps-5-box .ps-5-3 ul li.ps-5-3-3 { background: url(../images/ps-5-3-3.png) center 58px no-repeat; } .ps-6-box { height: 730px; background: #e0e0e0; text-align: center; } .ps-6-box .ps-6-1 { font-size: 40px; color: #06132a; line-height: 175px; } .ps-6-box .ps-6-2 { font-size: 16px; color: #06132a; line-height: 27px; } .ps-6-box .ps-6-3 { margin: 94px auto 0 auto; position: relative; width: 1505px; } .ps-6-box .ps-6-3 .ps-6-3-fl { float: left; } .ps-6-box .ps-6-3 .ps-6-3-fl .ps-6-fl-img { position: relative; width: 584px; height: 300px; } .ps-6-box .ps-6-3 .ps-6-3-fl .ps-6-fl-img img { position: absolute; top: 0; left: 96px; width: 488px; height: 300px; -moz-transition: all 0.6s ease-in-out 1s; -webkit-transition: all 0.6s ease-in-out 1s; transition: all 0.6s ease-in-out 1s; } .ps-6-box .ps-6-3 .ps-6-3-fl .ps-6-fl-img.anim-show img:nth-of-type(1) { left: 96px; z-index: 4; } .ps-6-box .ps-6-3 .ps-6-3-fl .ps-6-fl-img.anim-show img:nth-of-type(2) { top: 10px; left: 57px; height: 280px; opacity: .7; z-index: 3; } .ps-6-box .ps-6-3 .ps-6-3-fl .ps-6-fl-img.anim-show img:nth-of-type(3) { top: 20px; left: 30px; height: 260px; opacity: .5; z-index: 2; } .ps-6-box .ps-6-3 .ps-6-3-fl .ps-6-fl-img.anim-show img:nth-of-type(4) { top: 30px; left: 0px; height: 240px; opacity: .3; z-index: 1; } .ps-6-box .ps-6-3 .ps-6-3-fl .ps-6-fl-txt { float: right; width: 488px; line-height: 100px; text-align: center; color: #06132a; font-size: 16px; } .ps-6-box .ps-6-3 .ps-6-3-fl .ps-6-fl-txt strong { color: #06132a; font-size: 16px; } .ps-6-box .ps-6-3 .ps-6-3-cen { position: absolute; top: 0; left: 666px; width: 68px; height: 300px; background: url(../images/vs.png) center center no-repeat; } .ps-6-box .ps-6-3 .ps-6-3-fr { float: right; } .ps-6-box .ps-6-3 .ps-6-3-fr .ps-6-fr-img { position: relative; width: 683px; height: 300px; } .ps-6-box .ps-6-3 .ps-6-3-fr .ps-6-fr-img img { position: absolute; top: 0; right: 194px; width: 488px; height: 300px; -moz-transition: all 0.6s ease-in-out 1s; -webkit-transition: all 0.6s ease-in-out 1s; transition: all 0.6s ease-in-out 1s; } .ps-6-box .ps-6-3 .ps-6-3-fr .ps-6-fr-img.anim-show img:nth-of-type(1) { right: 194px; z-index: 8; } .ps-6-box .ps-6-3 .ps-6-3-fr .ps-6-fr-img.anim-show img:nth-of-type(2) { top: 10px; right: 160px; height: 280px; opacity: .7; z-index: 7; } .ps-6-box .ps-6-3 .ps-6-3-fr .ps-6-fr-img.anim-show img:nth-of-type(3) { top: 20px; right: 130px; height: 260px; opacity: .5; z-index: 6; } .ps-6-box .ps-6-3 .ps-6-3-fr .ps-6-fr-img.anim-show img:nth-of-type(4) { top: 30px; right: 100px; height: 240px; opacity: .3; z-index: 5; } .ps-6-box .ps-6-3 .ps-6-3-fr .ps-6-fr-img.anim-show img:nth-of-type(5) { top: 40px; right: 80px; height: 220px; opacity: .3; z-index: 5; } .ps-6-box .ps-6-3 .ps-6-3-fr .ps-6-fr-img.anim-show img:nth-of-type(6) { top: 50px; right: 60px; height: 200px; opacity: .3; z-index: 5; } .ps-6-box .ps-6-3 .ps-6-3-fr .ps-6-fr-img.anim-show img:nth-of-type(7) { top: 60px; right: 30px; height: 180px; opacity: .3; z-index: 5; } .ps-6-box .ps-6-3 .ps-6-3-fr .ps-6-fr-img.anim-show img:nth-of-type(8) { top: 70px; right: 0px; height: 160px; opacity: .3; z-index: 5; } .ps-6-box .ps-6-3 .ps-6-3-fr .ps-6-fr-txt { float: left; width: 488px; line-height: 100px; text-align: center; color: #06132a; font-size: 16px; } .ps-6-box .ps-6-3 .ps-6-3-fr .ps-6-fr-txt strong { color: #06132a; font-size: 16px; } .ps-7-box { height: 370px; background: #d9d9d9; } .ps-7-box .ps-7 { width: 1143px; margin: 0 auto; } .ps-7-box .ps-7 .ps-7-fl { padding: 51px 0 0 0; float: left; position: relative; } .ps-7-box .ps-7 .ps-7-fl .ps-7-fl-box { position: absolute; top: 74px; left: 36px; width: 692px; overflow: hidden; } .ps-7-box .ps-7 .ps-7-fl .ps-7-fl-box ul { -moz-animation: ps-7-roll 7.5s linear infinite; -webkit-animation: ps-7-roll 7.5s linear infinite; animation: ps-7-roll 7.5s linear infinite; height: 40px; width: 1384px; } .ps-7-box .ps-7 .ps-7-fl .ps-7-fl-box ul li { width: 692px; float: left; color: #000; font-size: 17px; line-height: 40px; text-indent: 10px; } .ps-7-box .ps-7 .ps-7-fl img { display: block; } .ps-7-box .ps-7 .ps-7-fr { height: 370px; float: left; width: 366px; margin: 0 0 0 20px; position: relative; } .ps-7-box .ps-7 .ps-7-fr .ps-7-1 { padding: 110px 0 0 0; line-height: 66px; color: #000; font-size: 40px; } .ps-7-box .ps-7 .ps-7-fr .ps-7-2 { color: #000; font-size: 16px; line-height: 25px; } .ps-7-box .ps-7 .ps-7-fr .ps-7-3 { display: block; position: absolute; left: 30px; bottom: 0; } @-webkit-keyframes ps-7-roll { 0% { -webkit-transform: translateY(0) translateX(0); } 100% { -webkit-transform: translateY(0) translateX(-50%); } } @-moz-keyframes ps-7-roll { 0% { -moz-transform: translateY(0) translateX(0); } 100% { -moz-transform: translateY(0) translateX(-50%); } } @keyframes ps-7-roll { 0% { transform: translateY(0) translateX(0); } 100% { transform: translateY(0) translateX(-50%); } } .ps-8-box { width: 100%; height: 858px; overflow: hidden; background: url(../images/ps-8-1.png) center center no-repeat; } .ps-8-box .ps-8 { position: relative; width: 781px; height: 100%; margin: 0 auto; text-align: center; } .ps-8-box .ps-8 .ps-8-1 { padding: 140px 0 10px 0; line-height: 80px; font-size: 40px; color: #fff; } .ps-8-box .ps-8 .ps-8-2 { font-size: 16px; color: #fff; line-height: 27px; margin: 0 70px; } .ps-8-box .ps-8 .ps-8-3 { position: absolute; left: 0; bottom: 0; width: 781px; height: 452px; background: url(../images/ps-8-2.png) no-repeat; } .ps-9-box { width: 100%; height: 670px; overflow: hidden; background: url(../images/ps-9-1.png) center center no-repeat; } .ps-9-box .ps-9 { width: 560px; margin: 0 auto; text-align: center; position: relative; } .ps-9-box .ps-9 .ps-9-1-line { position: absolute; top: 0; left: 77px; z-index: 4; } .ps-9-box .ps-9 .ps-9-1 { position: absolute; top: 140px; left: 44px; z-index: 2; } .ps-9-box .ps-9 .ps-9-2-line { position: absolute; top: 0; left: 476px; z-index: 4; } .ps-9-box .ps-9 .ps-9-2 { position: absolute; top: 140px; left: 445px; z-index: 2; } .ps-9-box .ps-9 .ps-9-1, .ps-9-box .ps-9 .ps-9-2 { -moz-transition: all 1s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0.3s; -webkit-transition: all 1s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0.3s; transition: all 1s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0.3s; } .ps-9-box .ps-9 .ps-9-1.anim-show, .ps-9-box .ps-9 .ps-9-2.anim-show { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } .ps-9-box .ps-9 .ps-9-3 { padding: 300px 0 0 0; color: #fff; font-size: 40px; line-height: 90px; } .ps-9-box .ps-9 .ps-9-4 { font-size: 16px; line-height: 27px; color: #fff; } .ps-10-box { background: #e0e0e0; height: 646px; } .ps-10-box .ps-10 { text-align: center; } .ps-10-box .ps-10 .ps-10-1 { font-size: 40px; color: #06132a; line-height: 155px; } .ps-10-box .ps-10 .ps-10-2 { font-size: 16px; line-height: 27px; color: #06132a; } .ps-10-box .ps-10 .ps-10-3-box { position: relative; width: 933px; height: 300px; margin: 66px auto 0 auto; } .ps-10-box .ps-10 .ps-10-3 { position: relative; width: 933px; height: 300px; } .ps-10-box .ps-10 .ps-10-3 img { display: block; position: absolute; top: 0; left: 225px; width: 487px; height: 300px; z-index: 2; -webkit-transition: all 1s ease-in-out 1s; -moz-transition: all 1s ease-in-out 1s; -o-transition: all 1s ease-in-out 1s; transition: all 1s ease-in-out 1s; } .ps-10-box .ps-10 .ps-10-3 img:nth-of-type(1) { box-shadow: 0 0 0 #000; z-index: 5; } .ps-10-box .ps-10 .ps-10-3 img:nth-of-type(2) { z-index: 3; } .ps-10-box .ps-10 .ps-10-3 img:nth-of-type(3) { z-index: 4; } .ps-10-box .ps-10 .ps-10-3 img:nth-of-type(4) { z-index: 2; } .ps-10-box .ps-10 .ps-10-3 img:nth-of-type(5) { z-index: 1; } .ps-10-box .ps-10 .ps-10-3.anim-show img:nth-of-type(2) { top: 74px; left: 0; width: 274px; height: 152px; z-index: 3; } .ps-10-box .ps-10 .ps-10-3.anim-show img:nth-of-type(3) { top: 35px; left: 88px; width: 408px; height: 231px; z-index: 4; } .ps-10-box .ps-10 .ps-10-3.anim-show img:nth-of-type(4) { top: 35px; width: 274px; left: 657px; height: 231px; z-index: 2; } .ps-10-box .ps-10 .ps-10-3.anim-show img:nth-of-type(5) { top: 74px; left: 563px; width: 408px; height: 152px; z-index: 1; } .ps-10-4 { font-size: 16px; color: #06132a; line-height: 90px; } .ps-11-box { width: 100%; height: 800px; background: #e6e6e6; text-align: center; } .ps-11-box .ps-11-1 { height: 534px; background: #e6e6e6 url(../images/ps-11-1.png) center center no-repeat; } .ps-11-box .ps-11-2 { color: #06132a; font-size: 40px; line-height: 155px; } .ps-11-box .ps-11-3 { font-size: 16px; line-height: 27px; color: #06132a; } .ps-6-min { display: none; margin: 94px 0 0 0; } .ps-6-min img { width: 100%; display: block; } .ps-10-5 { margin: 20px 0 0 0; display: none; } .ps-10-5 img { display: block; width: 100%; } @media screen and (max-width: 1505px) { .ps-6-box .ps-6-3 { width: 100%; } .ps-6-box .ps-6-3 .ps-6-3-cen { display: none; } } @media screen and (max-width: 1300px) { .ps-6-3 { display: none; } .ps-6-min { display: block; } .ps-2-box { height: auto; } .ps-2-list { height: auto; } .ps-2-box .ps-2 { width: 623px; margin: 0 auto; } .ps-2-box .ps-2 .ps-2-list .ps-2-list-img { position: static; float: left; margin: 0 0 0 10px; transform: translateY(0px) translateX(0); -moz-transition: all 0s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transition: all 0s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: all 0s cubic-bezier(0.4, 0.01, 0.165, 0.99); } .ps-2-box .ps-2 .ps-2-list .ps-2-list-img:nth-of-type(1) { margin: 0; } .ps-2-list .ps-2-list-img { position: static; float: left; margin: 0 0 0 10px; } .ps-2-list .ps-2-list-img:nth-of-type(1) { margin: 0; } .ps-4-box .p-4 { width: 608px; margin: 0 auto; } .ps-4-box { overflow: hidden; height: auto; } } @media screen and (max-width: 1200px) { .ps-7-box .ps-7 .ps-7-fl { float: none; margin: 0 auto; width: 753px; } .ps-7-box .ps-7 .ps-7-fr { float: none; width: 100%; text-align: center; height: 270px; margin: 0; } .ps-7-box { height: auto; } .ps-7-box .ps-7 .ps-7-fr .ps-7-1 { padding: 50px 0 0 0; } .ps-7-box .ps-7 { width: 100%; } .ps-7-box .ps-7 .ps-7-fr .ps-7-3 { left: 50%; margin: 0 0 0 -122px; } } @media screen and (max-width: 933px) { .ps-10-box .ps-10 .ps-10-2 { margin: 0 20px; } .ps-10-box { height: auto; } .ps-10-5 { display: block; } .ps-10-box .ps-10 .ps-10-3-box { display: none; } .ps-10-box .ps-10 .ps-10-3 { display: none; } } @media screen and (max-width: 781px) { .ps-8-box .ps-8 { width: auto; margin: 0 20px; } .ps-8-box .ps-8 .ps-8-2 { margin: 0; } .ps-8-box .ps-8 .ps-8-3 { left: 50%; margin: 0 0 0 -364px; } } @media screen and (max-width: 753px) { .ps-7-box .ps-7 .ps-7-fl { width: 100%; } .ps-7-box .ps-7 .ps-7-fl img { width: 100%; } .ps-7-box .ps-7 .ps-7-fl .ps-7-fl-box { left: 36px; right: 30px; width: auto; } .ps-7-box .ps-7 .ps-7-fr { margin: 0 20px; width: auto; } } @media screen and (max-width: 680px) { .ps-4-box .p-4 { width: 100%; } } @media screen and (max-width: 660px) { .ps-2-box .ps-2 .ps-2-list .ps-2-list-img, .ps-2-box .ps-2 .ps-2-list .ps-2-list-img:nth-of-type(1) { width: 100%; float: none; margin: 0; } .ps-2-box .ps-2 .ps-2-list .ps-2-list-img img, .ps-2-box .ps-2 .ps-2-list .ps-2-list-img:nth-of-type(1) img { width: 100%; } .ps-2-box .ps-2 { width: auto; margin: 0 20px; } .ps-2-list .ps-2-list-img { float: none; width: 100%; margin: 0; } .ps-2-list .ps-2-list-img img { width: 100%; } .ps-2-list { margin: 0 20px; } .ps-4-box .ps-4-2 { margin: 0 20px; } .ps-6-box .ps-6-2 { margin: 0 20px; } .ps-6-box { height: auto; padding-bottom: 50px; } } @media screen and (max-width: 621px) { .pt-nav .pt-ul ul li { width: auto; margin: 0 0 0 2px; } .ps-1-box { height: auto; background-size: cover; } .ps-1-box .ps-1 { width: auto; margin: 0 20px; } .ps-1-box .ps-1 .ps-1-ico-list div { margin: 0 auto; float: none; height: 100px; } .ps-1-box .ps-1 .ps-1-ico-list div p { top: 80px; } .ps-1-img { margin: 20px 0 0 0; } .ps-1-box .ps-1 { padding: 160px 0; } .ps-9-box .ps-9 { width: 100%; } } @media screen and (max-width: 460px) { .ps-5-box .ps-5-3 { width: 384px; margin: 0 auto; } .ps-5-box { background-size: cover; } .ps-5-box .ps-5-3 ul li { width: 128px; } } @media screen and (max-width: 400px) { .ps-1-box .ps-1 .ps-1-tit { background-size: 100% 100%; } } .dmis-1-box { width: 100%; height: 680px; overflow: hidden; background: #bebebe url(../images/dmis-1-1.jpg) center center no-repeat; background-size: cover; text-align: center; position: relative; } .dmis-1-box .dmis-1 { width: 400px; height: 268px; margin: 0 auto; } .dmis-1-box .dmis-1 .dmis-1-1 { padding: 40px 0 0 0; line-height: 75px; font-size: 40px; color: #000; } .dmis-1-box .dmis-1 .dmis-1-2 { font-size: 22px; line-height: 66px; color: #000; } .dmis-1-box .dmis-1 .dmis-1-2 span { font-size: 22px; color: #0086cd; } .dmis-1-box .dmis-1 .dmis-1-3 { margin: 20px 0 0 0; font-size: 14px; color: #000; line-height: 30px; } .dmis-1-box .dmis-1 .dmis-1-3 .dmis-1-3-fl { float: left; } .dmis-1-box .dmis-1 .dmis-1-3 .dmis-1-3-fr { float: right; } .dmis-1-box .dmis-1 .dmis-1-3 .dmis-1-3-fl, .dmis-1-box .dmis-1 .dmis-1-3 .dmis-1-3-fr { font-size: 16px; position: relative; text-align: left; text-indent: 10px; color: #000; } .dmis-1-box .dmis-1 .dmis-1-3 .dmis-1-3-fl b, .dmis-1-box .dmis-1 .dmis-1-3 .dmis-1-3-fr b { display: block; position: absolute; top: 13px; left: 0; width: 5px; height: 5px; border-radius: 50%; overflow: hidden; background: #000; } .dmis-1-box .dmis-1-4 { width: 390px; margin: 0 auto; -moz-transition: opacity 2s .5s; -webkit-transition: opacity 2s .5s; -o-transition: opacity 2s .5s; transition: opacity 2s .5s; position: relative; z-index: 2; } .dmis-1-box .dmis-1-5 { position: absolute; bottom: 0; left: 0; right: 0; height: 392px; z-index: 1; -moz-transition: opacity 2s .5s; -webkit-transition: opacity 2s .5s; -o-transition: opacity 2s .5s; transition: opacity 2s .5s; background: url(../images/banzi.png) center center no-repeat; } .dmis-2-box { width: 100%; padding: 0 0 460px 0; position: relative; text-align: center; overflow: hidden; background: #dbd8d5 url(../images/dmis-2-1.jpg) center center no-repeat; } .dmis-2-box .dmis-2 { width: 800px; height: 366px; margin: 0 auto; } .dmis-2-box .dmis-2 .dmis-2-1 { font-size: 40px; color: #000; line-height: 90px; padding: 20px 0 0 0; } .dmis-2-box .dmis-2 .dmis-2-2 { font-size: 16px; margin: 0 30px; line-height: 27px; color: #000; } .dmis-2-box .dmis-2 .dmis-2-3 { margin: 60px 0 0 0; } .dmis-2-box .dmis-2 .dmis-2-3 ul li { float: left; width: 20%; padding: 0 0 20px 0; } .dmis-2-box .dmis-2 .dmis-2-3 ul li .dmis-2-img { width: 100%; height: 70px; background-position: center center; background-repeat: no-repeat; } .dmis-2-box .dmis-2 .dmis-2-3 ul li p { font-size: 14px; color: #3a3a3a; margin: 20px 0 0 0; } .dmis-2-box .dmis-2 .dmis-2-3 ul li:nth-of-type(1) .dmis-2-img { background-image: url(../images/dmis-2-3.png); } .dmis-2-box .dmis-2 .dmis-2-3 ul li:nth-of-type(2) .dmis-2-img { background-image: url(../images/dmis-2-4.png); } .dmis-2-box .dmis-2 .dmis-2-3 ul li:nth-of-type(3) .dmis-2-img { background-image: url(../images/dmis-2-5.png); } .dmis-2-box .dmis-2 .dmis-2-3 ul li:nth-of-type(4) .dmis-2-img { background-image: url(../images/dmis-2-6.png); } .dmis-2-box .dmis-2 .dmis-2-3 ul li:nth-of-type(5) .dmis-2-img { background-image: url(../images/dmis-2-7.png); } .dmis-2-box .dmis-2-4 { position: absolute; bottom: 0; left: 50%; width: 1490px; height: 450px; margin: 0 0 0 -745px; } .dmis-2-box .dmis-2-4 img { width: 100%; } @media screen and (max-width: 800px) { .dmis-2-box .dmis-2 { width: 100%; } .dmis-2-box .dmis-2 .dmis-2-2 { margin: 0 20px; } .dmis-2-box .dmis-2 .dmis-2-3 ul li { width: 20%; } } @media screen and (max-width: 490px) { .dmis-2-box .dmis-2 .dmis-2-3 ul li { width: 50%; } .dmis-1-box .dmis-1 .dmis-1-1 { font-size: 30px; } .dmis-1-box .dmis-1 .dmis-1-3 { margin: 20px 20px 0 20px; } } @media screen and (max-width: 400px) { .dmis-1-box .dmis-1 { width: 100%; } } .dmis-3-box { overflow: hidden; text-align: center; background: url(../images/dmis-3-1.jpg) center center no-repeat; background-size: cover; padding-bottom: 658px; position: relative; } .dmis-3-box .dmis-3 .dmis-3-1 { padding: 95px 0 0 0; font-size: 40px; color: #fff; line-height: 75px; } .dmis-3-box .dmis-3 .dmis-3-2 { line-height: 34px; font-size: 16px; color: #fff; } .dmis-3-box .dmis-3-4, .dmis-3-box .dmis-3-5 { width: 435px; height: 435px; position: absolute; bottom: 186px; left: 50%; z-index: 4; } .dmis-3-box .dmis-3-4 div, .dmis-3-box .dmis-3-5 div { position: absolute; border: 1px solid #fff; top: 50%; left: 50%; border-radius: 50%; width: 146px; height: 146px; margin: -73px 0 0 -73px; opacity: 0; } .dmis-3-box .dmis-3-4 { margin: 0 0 0 -435px; } .dmis-3-box .dmis-3-4.anim-show div:nth-of-type(1), .dmis-3-box .dmis-3-5.anim-show div:nth-of-type(1) { -webkit-animation: ani-circle-a 7.5s 1s ease-out forwards infinite; animation: ani-circle-a 7.5s 1s ease-out forwards infinite; } .dmis-3-box .dmis-3-4.anim-show div:nth-of-type(2), .dmis-3-box .dmis-3-5.anim-show div:nth-of-type(2) { -webkit-animation: ani-circle-a 7.5s ease-out forwards 2.5s infinite; animation: ani-circle-a 7.5s ease-out 2.5s forwards infinite; } .dmis-3-box .dmis-3-4.anim-show div:nth-of-type(3), .dmis-3-box .dmis-3-5.anim-show div:nth-of-type(3) { -webkit-animation: ani-circle-a 7.5s ease-out forwards 4s infinite; animation: ani-circle-a 7.5s ease-out 4s forwards infinite; } .dmis-3-box .dmis-3-4.anim-show div:nth-of-type(4), .dmis-3-box .dmis-3-5.anim-show div:nth-of-type(4) { -webkit-animation: ani-circle-a 7.5s ease-out forwards 5.5s infinite; animation: ani-circle-a 7.5s ease-out 5.5s forwards infinite; } .dmis-3-box .dmis-3-4.anim-show div:nth-of-type(5), .dmis-3-box .dmis-3-5.anim-show div:nth-of-type(5) { -webkit-animation: ani-circle-a 7.5s ease-out forwards 7s infinite; animation: ani-circle-a 7.5s ease-out 7s forwards infinite; } .dmis-3-box .dmis-3-6 { position: absolute; bottom: 0; left: 50%; width: 823px; height: 430px; margin: 0 0 0 -380px; background: url(../images/dmis-3-2.png) no-repeat; z-index: 6; } @media screen and (max-width: 600px) { .dmis-3-box .dmis-3 .dmis-3-1 { font-size: 30px; } .dmis-3-box .dmis-3 .dmis-3-2 { line-height: 20px; } } @-webkit-keyframes ani-circle-a { 0% { -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 0; filter: alpha(opacity=0); } 10% { opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(3.5); transform: scale(3.5); opacity: 0; filter: alpha(opacity=0); } } @keyframes ani-circle-a { 0% { -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 0; filter: alpha(opacity=0); } 10% { opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(3.5); transform: scale(3.5); opacity: 0; filter: alpha(opacity=0); } } .dmis-4-box { height: 516px; background: url(../images/dmis-4-1.jpg) repeat-x; } .dmis-4-box .dmis-4 { width: 100%; max-width: 1000px; margin: 0 auto; text-align: center; } .dmis-4-box .dmis-4 .dmis-4-1 { padding: 90px 0 0 0; font-size: 40px; color: #000; line-height: 90px; } .dmis-4-box .dmis-4 .dmis-4-2 { font-size: 16px; color: #000; line-height: 27px; } .dmis-4-box .dmis-4 .dmis-4-3 { margin: 25px 0 0 0; } .dmis-4-box .dmis-4 .dmis-4-3 li { display: block; float: left; width: 33.33%; } .dmis-4-box .dmis-4 .dmis-4-3 li .dmis-4-img { background-position: center center; background-repeat: no-repeat; width: 100%; height: 77px; } .dmis-4-box .dmis-4 .dmis-4-3 li p { font-size: 14px; color: #000; line-height: 40px; } .dmis-4-box .dmis-4 .dmis-4-3 li:nth-of-type(1) .dmis-4-img { background-image: url(../images/dmis-4-1.png); } .dmis-4-box .dmis-4 .dmis-4-3 li:nth-of-type(2) .dmis-4-img { background-image: url(../images/dmis-4-2.png); } .dmis-4-box .dmis-4 .dmis-4-3 li:nth-of-type(3) .dmis-4-img { background-image: url(../images/dmis-4-3.png); } @media screen and (max-width: 475px) { .dmis-4-box .dmis-4 { width: auto; margin: 0 20px; } .dmis-4-box .dmis-4 .dmis-4-1 { font-size: 30px; padding: 70px 0 0 0; } } .dmis-5-box { position: relative; height: 542px; overflow: hidden; } .dmis-5-box .dmis-5-down { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } .dmis-5-box .dmis-5-down .dmis-5-fl { float: left; width: 50%; height: 100%; background: #000; } .dmis-5-box .dmis-5-down .dmis-5-fr { float: left; width: 50%; height: 100%; background: #696969; } .dmis-5-box .dmis-5-top { position: absolute; top: 0; left: 50%; width: 1280px; height: 100%; margin: 0 0 0 -640px; z-index: 5; } .dmis-5-box .dmis-5-top .dmis-5-fl { float: left; width: 50%; height: 100%; background: url(../images/dmis-5-1.png) right top no-repeat; } .dmis-5-box .dmis-5-top .dmis-5-fr { float: left; width: 50%; height: 100%; background: #696969; position: relative; } .dmis-5-box .dmis-5-top .dmis-5-fr .dmis-5-fr-min { position: absolute; top: 50%; left: 20px; right: 20px; -moz-transform: translateY(-50%) translateX(0); -webkit-transform: translateY(-50%) translateX(0); transform: translateY(-50%) translateX(0); } .dmis-5-box .dmis-5-top .dmis-5-fr .dmis-5-fr-min .dims-5-1 { line-height: 70px; font-size: 35px; color: #fff; text-align: center; } .dmis-5-box .dmis-5-top .dmis-5-fr .dmis-5-fr-min .dims-5-2 { margin: 35px 0 0 0; font-size: 18px; color: #fff; } .dmis-5-box .dmis-5-top .dmis-5-fr .dmis-5-fr-min .dims-5-2 span { display: block; float: left; font-size: 18px; color: #fff; position: relative; text-indent: 20px; margin: 0 20px 0 0; } .dmis-5-box .dmis-5-top .dmis-5-fr .dmis-5-fr-min .dims-5-2 span b { position: absolute; top: 4px; left: 0; display: block; width: 14px; height: 14px; border-radius: 50%; background: #fff; } .dmis-5-box .dmis-5-top .dmis-5-fr .dmis-5-fr-min .dims-5-3 { font-size: 16px; color: #fff; line-height: 25px; margin: 35px 0 0 0; } @media screen and (max-width: 1280px) { .dmis-5-box .dmis-5-top { left: 0; right: 0; margin: 0; width: auto; } } @media screen and (max-width: 600px) { .dmis-5-box .dmis-5-top .dmis-5-fl { display: none; } .dmis-5-box .dmis-5-top .dmis-5-fr { width: 100%; } .dmis-5-box .dmis-5-top .dmis-5-fr .dmis-5-fr-min .dims-5-1 { font-size: 30px; line-height: 35px; } } .dmis-6-box { background: url(../images/dmis-6-1.jpg) center top no-repeat; background-size: cover; height: 597px; text-align: center; position: relative; z-index: 6; } .dmis-6-box .dmis-6-1 { font-size: 40px; color: #000; line-height: 50px; padding: 120px 0 0 0; margin: 0 0 20px 0; } .dmis-6-box .dmis-6-2 { font-size: 16px; color: #000; line-height: 25px; width: 100%; max-width: 600px; margin: 0 auto; } .dmis-6-box .dmis-6-3 { position: absolute; top: -100px; left: 50%; margin: 0 0 0 -600px; background: url(../images/DMIS_05.png) no-repeat; width: 249px; height: 263px; } @media screen and (max-width: 600px) { .dmis-6-box .dmis-6-1 { font-size: 30px; } .dmis-6-box .dmis-6-2 { font-size: 12px; width: auto; margin: 0 20px; } } .dmis-7-box { height: 756px; background: url(../images/dmis-7-1.png) center center no-repeat; background-size: cover; position: relative; overflow: hidden; } .dmis-7-box .dmis-7 { text-align: center; } .dmis-7-box .dmis-7 .dmis-7-1 { font-size: 40px; line-height: 95px; padding: 75px 0 0 0; color: #fff; } .dmis-7-box .dmis-7 .dmis-7-2 { color: #fff; font-size: 16px; width: 100%; max-width: 865px; line-height: 25px; margin: 0 auto; } .dmis-7-box .dmis-7-5 { width: 1203px; height: 336px; position: absolute; left: 50%; -webkit-transform: translateY(0) translateX(-50%); -moz-transform: translateY(0) translateX(-50%); transform: translateY(0) translateX(-50%); z-index: 1; overflow: hidden; margin: 0 auto 0 auto; } .dmis-7-box .dmis-7-5 .dmis-7-5-1, .dmis-7-box .dmis-7-5 .dmis-7-5-2, .dmis-7-box .dmis-7-5 .dmis-7-5-3, .dmis-7-box .dmis-7-5 .dmis-7-5-4, .dmis-7-box .dmis-7-5 .dmis-7-5-5 { position: absolute; display: block; opacity: 0; -webkit-transform: translateY(100px) translateX(0); -moz-transform: translateY(100px) translateX(0); transform: translateY(100px) translateX(0); top: 122px; left: 111px; -webkit-transition: all 1s 1s; -moz-transition: all 1s 1s; transition: all 1s 1s; } .dmis-7-box .dmis-7-6 { position: absolute; bottom: 0; left: 50%; -webkit-transform: translateY(0) translateX(-50%); -moz-transform: translateY(0) translateX(-50%); transform: translateY(0) translateX(-50%); display: block; width: 100%; max-width: 622px; } .dmis-7-box .dmis-7-5.anim-show .dmis-7-5-1, .dmis-7-box .dmis-7-5.anim-show .dmis-7-5-2, .dmis-7-box .dmis-7-5.anim-show .dmis-7-5-3, .dmis-7-box .dmis-7-5.anim-show .dmis-7-5-4, .dmis-7-box .dmis-7-5.anim-show .dmis-7-5-5 { opacity: 1; } .dmis-7-box .dmis-7-5.anim-show .dmis-7-5-1 { top: 122px; left: 111px; } .dmis-7-box .dmis-7-5.anim-show .dmis-7-5-2 { top: 47px; left: 324px; } .dmis-7-box .dmis-7-5.anim-show .dmis-7-5-3 { top: 11px; left: 543px; } .dmis-7-box .dmis-7-5.anim-show .dmis-7-5-4 { top: 47px; left: 764px; } .dmis-7-box .dmis-7-5.anim-show .dmis-7-5-5 { top: 122px; left: 964px; } @media screen and (max-width: 600px) { .dmis-7-box .dmis-7 .dmis-7-1 { font-size: 28px; } .dmis-7-box .dmis-7 .dmis-7-2 { font-size: 12px; width: auto; margin: 0 20px; } } .dmis-8-box { height: 365px; background: url(../images/dmis-8-1.jpg) center center no-repeat; background-size: cover; } .dmis-8-box .dmis-8 { text-align: center; } .dmis-8-box .dmis-8 .dmis-8-1 { font-size: 40px; color: #000; line-height: 100px; padding: 90px 0 0 0; } .dmis-8-box .dmis-8 .dmis-8-2 { font-size: 16px; color: #000; line-height: 25px; width: 100%; max-width: 865px; margin: 0 auto; } @media screen and (max-width: 600px) { .dmis-8-box .dmis-8 .dmis-8-1 { font-size: 30px; } } @media screen and (max-width: 600px) { .dmis-8-box .dmis-8 .dmis-8-2 { width: auto; margin: 0 20px; } } .dmis-9-box { height: 610px; background: url(../images/dmis-9-1.jpg) center center no-repeat; background-size: cover; } .dmis-9-box .dmis-9 { text-align: center; } .dmis-9-box .dmis-9 .dmis-9-1 { font-size: 40px; color: #fff; line-height: 100px; padding: 210px 0 0 0; } .dmis-9-box .dmis-9 .dmis-9-2 { font-size: 16px; color: #fff; line-height: 25px; width: 100%; width: 865px; margin: 0 auto; } @media screen and (max-width: 600px) { .dmis-9-box .dmis-9 .dmis-9-1 { font-size: 30px; } } @media screen and (max-width: 400px) { .dmis-9-box .dmis-9 .dmis-9-2 { width: auto; margin: 0 20px; } } .dmis-10-box .dmis-10 { width: 1280px; margin: 0 auto; position: relative; } .dmis-10-box .dmis-10 .dmis-10-fl { float: left; width: 48%; height: 100%; position: relative; } .dmis-10-box .dmis-10 .dmis-10-border { position: absolute; top: 0; left: 50%; bottom: 0; width: 1px; background: #ebebeb; } .dmis-10-box .dmis-10 .dmis-10-fr { float: right; width: 48%; } .dmis-10-box .dmis-10 .dmis-10-1 { font-size: 40px; color: #000; line-height: 90px; padding: 40px 0 0 0; } .dmis-10-box .dmis-10 .dmis-10-2 { font-size: 16px; color: #000; line-height: 25px; height: 75px; } .dmis-10-box .dmis-10 .dmis-10-3 { margin-bottom: 20px; } .dmis-10-box .dmis-10 .dmis-10-3 img { display: block; } @media screen and (max-width: 1280px) { .dmis-10-box .dmis-10 { width: auto; margin: 0 20px; } .dmis-10-box .dmis-10 .dmis-10-3 img { width: 100%; } } @media screen and (max-width: 750px) { .dmis-10-box .dmis-10 { width: auto; margin: 0 20px; } .dmis-10-box .dmis-10 .dmis-10-fl { float: none; width: auto; } .dmis-10-box .dmis-10 .dmis-10-fr { float: none; width: auto; } .dmis-10-box .dmis-10 .dmis-10-border { display: none; } .dmis-10-box .dmis-10 .dmis-10-2 { height: auto; padding-bottom: 20px; } } body.nav-hide .header-box { top: -60px; } body.nav-hide .pt-nav { top: 0; } .pro-box { width: 100%; max-width: 1920px; margin: 115px auto 0 auto; } .j-1-box { background: url(../images/j-1-2.jpg) center center no-repeat; overflow: hidden; } .j-1-box .j-1 { width: 100%; max-width: 1013px; margin: 0 auto; text-align: center; } .j-1-box .j-1 .j-1-1 { padding: 60px 0 0 0; display: block; width: 100%; max-width: 325px; margin: 0 auto; } .j-1-box .j-1 .j-1-2 { font-size: 22px; color: #000; line-height: 40px; } .j-1-box .j-1 .j-1-3 { display: block; width: 100%; max-width: 1013px; margin: 0 auto; } .j-1-box .j-1 .j-1-4 { font-size: 16px; color: #000; line-height: 75px; } .j-2-box { overflow: hidden; background: #d1d1d1; text-align: center; } .j-2-box .j-2 .j-2-1 { padding: 30px 0 0 0; color: #000; font-size: 40px; line-height: 75px; } .j-2-box .j-2 .j-2-2 { color: #000; font-size: 22px; line-height: 60px; } .j-2-box .j-2 .j-2-3 { width: 100%; max-width: 1576px; margin: 0 auto; } .j-2-box .j-2 .j-2-4 { max-width: 800px; margin: 0 auto; font-size: 16px; color: #000; line-height: 27px; padding: 20px 0 60px 0; } .j-3-box { background: url(../images/j-3-1.jpg) center bottom no-repeat; text-align: center; position: relative; } .j-3-box .j-3-1 { padding: 55px 0 0 0; font-size: 40px; color: #000; line-height: 75px; } .j-3-box .j-3-2 { color: #000; font-size: 16px; line-height: 27px; padding: 10px 0; width: 100%; max-width: 515px; margin: 0 auto; } .j-3-box .ul-4 { margin: 20px auto 0 auto; width: 100%; max-width: 690px; } .j-3-box .ul-4 li { width: 25%; } .j-3-box .ul-4 li:nth-of-type(1) .li-img { background-image: url(../images/3-1-3-1.png); } .j-3-box .ul-4 li:nth-of-type(2) .li-img { background-image: url(../images/3-1-3-2.png); } .j-3-box .ul-4 li:nth-of-type(3) .li-img { background-image: url(../images/3-1-3-3.png); } .j-3-box .ul-4 li:nth-of-type(4) .li-img { background-image: url(../images/3-1-3-4.png); } .j-3-box .j-3-4 { width: 100%; max-width: 1266px; margin: 0 auto; padding-bottom: 90px; } .j-3-box .j-3-5 { position: absolute; bottom: 43px; left: 50%; -webkit-transform: translateY(0px) translateX(-35%); -moz-transform: translateY(0px) translateX(-35%); transform: translateY(0px) translateX(-35%); } .ul-4 li { float: left; width: 20%; padding: 0 0 20px 0; text-align: center; } .ul-4 li .li-img { width: 100%; height: 70px; background-position: center center; background-repeat: no-repeat; } .ul-4 li p { line-height: 50px; font-size: 16px; color: #000; } .w-box { padding: 0 20px; } .j-4-box { background: #f2f2f2; overflow: hidden; } .j-4-box .j-4 { text-align: center; } .j-4-box .j-4 .j-4-1 { font-size: 40px; color: #000; line-height: 115px; } .j-4-box .j-4 .j-4-2 { width: 100%; max-width: 1100px; margin: 0 auto; font-size: 16px; color: #000; line-height: 27px; } .j-4-box .j-4 .j-4-3 { width: 100%; max-width: 1220px; margin: 35px auto 0 auto; padding: 0 0 25px 0; position: relative; } .j-4-box .j-4 .j-4-3 .j-4-vs { position: absolute; top: 0; right: -80px; height: 100%; width: 80px; background: url(../images/vs.png) center center no-repeat; } .j-4-box .j-4 .j-4-3 .j-4-3-fl, .j-4-box .j-4 .j-4-3 .j-4-3-fr { width: 50%; float: left; } .j-4-box .j-4 .j-4-3 .j-4-3-fl .j-4-3-box, .j-4-box .j-4 .j-4-3 .j-4-3-fr .j-4-3-box { padding: 0 40px 0 0; position: relative; } .j-4-box .j-4 .j-4-3 .j-4-3-fl .j-4-img, .j-4-box .j-4 .j-4-3 .j-4-3-fr .j-4-img { position: relative; } .j-4-box .j-4 .j-4-3 .j-4-3-fl img, .j-4-box .j-4 .j-4-3 .j-4-3-fr img { width: 100%; } .j-4-box .j-4 .j-4-3 .j-4-3-fl p, .j-4-box .j-4 .j-4-3 .j-4-3-fr p { font-size: 20px; color: #000; line-height: 50px; } .j-4-box .j-4 .j-4-3 .j-4-3-fl strong, .j-4-box .j-4 .j-4-3 .j-4-3-fr strong { display: block; font-weight: normal; font-size: 14px; color: #000; } .j-4-box .j-4 .j-4-3 .j-4-3-fr .j-4-3-box { padding: 0 0 0 40px; } .j-4-box .j-4 .j-4-3 .j-4-3-fr p { color: #0086cd; } .j-4-box .j-4 .j-4-3 .j-4-3-fr strong { color: #0086cd; } @media screen and (max-width: 700px) { .j-4-box .j-4 .j-4-3 .j-4-3-fl .j-4-3-box, .j-4-box .j-4 .j-4-3 .j-4-3-fr .j-4-3-box { padding: 0; } .j-4-box .j-4 .j-4-3 .j-4-3-fl, .j-4-box .j-4 .j-4-3 .j-4-3-fr { float: none; width: 100%; } .j-4-box .j-4 .j-4-3 .j-4-3-fr { margin: 15px 0 0 0; } .j-4-box .j-4 .j-4-3 .j-4-vs { display: none; } } @media screen and (max-width: 500px) { .j-2-box .j-2 .j-2-1, .j-3-box .j-3-1, .j-4-box .j-4 .j-4-1 { font-size: 30px; } } .j-5-box { background: #585858; overflow: hidden; text-align: center; padding: 35px 0 20px 0; } .j-5-box .j-5-1 { line-height: 80px; font-size: 40px; color: #fff; } .j-5-box .j-5-2 { font-size: 16px; color: #fff; line-height: 27px; width: 100%; max-width: 600px; margin: 0 auto; } .j-5-box .ul-4 { margin: 20px auto 0 auto; width: 100%; max-width: 690px; } .j-5-box .ul-4 p { color: #fff; } .j-5-box .ul-4 li { width: 33.33%; } .j-5-box .ul-4 li:nth-of-type(1) .li-img { background-image: url(../images/ios.png); } .j-5-box .ul-4 li:nth-of-type(2) .li-img { background-image: url(../images/andriod.png); } .j-5-box .ul-4 li:nth-of-type(3) .li-img { background-image: url(../images/win.png); } .j-6-box { overflow: hidden; height: 633px; background: url(../images/bg3.png) center center no-repeat; text-align: center; } .j-6-box .j-6-1 { color: #fff; font-size: 40px; line-height: 70px; padding: 20px 0 0 0; } .j-6-box .j-6-2 { color: #fff; font-size: 23px; line-height: 50px; } .j-6-box .j-6-3 { padding: 8px 0 0 0; color: #fff; font-size: 16px; line-height: 27px; width: 100%; max-width: 800px; margin: 0 auto; } .j-7-box { background: #585858; overflow: hidden; text-align: center; } .j-7-box .j-7-1 { color: #fff; font-size: 40px; line-height: 70px; padding: 33px 0 0 0; } .j-7-box .j-7-2 { color: #fff; font-size: 23px; line-height: 50px; } .j-7-box .j-7-3 { padding: 8px 0 0 0; color: #fff; font-size: 16px; line-height: 27px; width: 100%; max-width: 930px; margin: 0 auto; } .j-7-box .j-7-4 { margin: 60px 0 0 0; position: relative; } .j-7-box .j-7-4 .j-7-5 { width: 100%; max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; opacity: 0; -moz-transition: all 2s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0.5s; -webkit-transition: all 2s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0.5s; transition: all 2s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0.5s; } .j-7-box .j-7-4 .j-7-6 { position: absolute; top: 100%; left: 50%; z-index: 2; width: 100%; height: 100%; max-width: 1280px; -webkit-transform: translateY(0px) translateX(-50%); -moz-transform: translateY(0px) translateX(-50%); transform: translateY(0px) translateX(-50%); -moz-transition: all 1s cubic-bezier(0.4, 0.01, 0.165, 0.99) 1s; -webkit-transition: all 1s cubic-bezier(0.4, 0.01, 0.165, 0.99) 1s; transition: all 1s cubic-bezier(0.4, 0.01, 0.165, 0.99) 1s; } .j-7-box .j-7-4.anim-show .j-7-5 { opacity: 1; } .j-7-box .j-7-4.anim-show .j-7-6 { top: 0; } .j-8-box { position: relative; overflow: hidden; text-align: center; } .j-8-box .j-8-bg { display: block; width: 100%; max-width: 1980px; margin: 0 auto; } .j-8-box .j-8-1 { position: absolute; top: 0; left: 0; right: 0; font-size: 40px; color: #fff; padding: 50px 0 0 0; line-height: 90px; } .j-8-box .j-8-2 { position: absolute; top: 150px; left: 0; right: 0; line-height: 27px; } .j-8-box .j-8-2 div { color: #fff; font-size: 16px; width: 100%; max-width: 850px; margin: 0 auto; } .j-8-box .j-8-3 { position: absolute; bottom: 20px; left: 0; width: 50%; line-height: 30px; text-align: center; font-size: 16px; color: #fff; } .j-8-box .j-8-4 { position: absolute; bottom: 20px; left: 50%; width: 50%; line-height: 30px; text-align: center; font-size: 16px; color: #fff; } @media screen and (max-width: 600px) { .j-8-box .j-8-3, .j-8-box .j-8-4 { display: none; } } @media screen and (max-width: 935px) { .j-8-box { height: 300px; background: url(../images/bg4.png) center center no-repeat; background-size: cover; } .j-8-box .j-8-bg { display: none; } } .k-1-box { overflow: hidden; text-align: center; background: url(../images/k-1-bg.png) repeat-x; } .k-1-box .k-1-1 { padding: 75px 0 0 0; display: block; width: 100%; max-width: 265px; margin: 0 auto; } .k-1-box .k-1-2 { color: #000; font-size: 22px; line-height: 50px; } .k-1-box .k-1-2 span { font-size: 22px; color: #0086cd; } .k-1-box .dmis-1-3 { width: 100%; max-width: 443px; margin: 60px auto 0 auto; font-size: 14px; color: #000; line-height: 30px; } .k-1-box .dmis-1-3 .dmis-1-3-fl { float: left; width: 190px; } .k-1-box .dmis-1-3 .dmis-1-3-fr { float: left; } .k-1-box .dmis-1-3 .dmis-1-3-fl, .k-1-box .dmis-1-3 .dmis-1-3-fr, .k-1-box .dmis-1-3 .dmis-1-3-4 { font-size: 16px; position: relative; text-align: left; text-indent: 10px; color: #000; } .k-1-box .dmis-1-3 .dmis-1-3-fl b, .k-1-box .dmis-1-3 .dmis-1-3-fr b, .k-1-box .dmis-1-3 .dmis-1-3-4 b { display: block; position: absolute; top: 13px; left: 0; width: 5px; height: 5px; border-radius: 50%; overflow: hidden; background: #000; } .k-1-box .dmis-1-3 .dmis-1-3-4 { float: right; } .k-1-box .k-1-4 { display: block; width: 100%; max-width: 936px; margin: 85px auto 0 auto; } @media screen and (max-width: 560px) { .k-1-box .dmis-1-3 .dmis-1-3-fl, .k-1-box .dmis-1-3 .dmis-1-3-fr, .k-1-box .dmis-1-3 .dmis-1-3-4 { float: none; clear: none; } .k-1-box .dmis-1-3 { margin: 48px auto 0 auto; width: 180px; } } .k-2-box { background: url(../images/bg.png) center center no-repeat; height: 653px; } .k-2-box .k-2-1 { width: 100%; max-width: 1280px; margin: 55px auto 0 auto; } .k-2-box .k-2-1 li { float: left; width: 50%; } .k-2-box .k-2-1 li img { width: 100%; max-width: 530px; margin: 0 auto; display: block; } .k-2-box .k-2-1 li p { font-size: 18px; color: #fff; line-height: 40px; } .k-3-box { overflow: hidden; height: 366px; background: url(../images/bg2.png) center top no-repeat; background-size: cover; } @media screen and (max-width: 1200px) { .k-3-box { height: auto; } } .k-4-box { text-align: center; background: url(../images/kb3.png) center top no-repeat; background-size: cover; } .k-4-box .k-4-1 { padding: 65px 0 0 0; color: #000; font-size: 40px; line-height: 75px; } .k-4-box .k-4-2 { color: #000; font-size: 16px; line-height: 25px; margin: 0 auto; } .k-4-box .k-4-3 { width: 800px; margin: 67px auto 0 auto; padding: 0 0 80px 0; position: relative; } .k-4-box .k-4-3 .k-4-4 { display: block; float: left; opacity: 0; transition: all 1s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0.5s; } .k-4-box .k-4-3 .k-4-5 { position: absolute; top: 114px; left: 323px; opacity: 0; } .k-4-box .k-4-3 .k-4-6 { position: absolute; top: 144px; left: 323px; opacity: 0; transition: all 1s cubic-bezier(0.4, 0.01, 0.165, 0.99) 2.5s; } .k-4-box .k-4-3 .k-4-7 { position: absolute; top: 134px; left: 625px; width: 0; overflow: hidden; transition: all 1s cubic-bezier(0.4, 0.01, 0.165, 0.99) 1.5s; } .k-4-box .k-4-3 .k-4-8 { position: absolute; width: 0; overflow: hidden; top: 163px; left: 625px; transition: all 1s cubic-bezier(0.4, 0.01, 0.165, 0.99) 2.5s; } .k-4-box .k-4-9 { display: none; } .k-4-box .k-4-9 img { display: block; width: 100%; } .k-4-box .k-4-3.anim-show .k-4-4 { opacity: 1; } .k-4-box .k-4-3.anim-show .k-4-5 { -webkit-animation: anim-4-show 6s ease-out infinite; animation: anim-4-show 6s ease-out infinite; } .k-4-box .k-4-3.anim-show .k-4-6 { -webkit-animation: anim-5-show 6s ease-out infinite; animation: anim-5-show 6s ease-out infinite; } .k-4-box .k-4-3.anim-show .k-4-7 { -webkit-animation: anim-6-show 6s ease-out infinite; animation: anim-6-show 6s ease-out infinite; } .k-4-box .k-4-3.anim-show .k-4-8 { -webkit-animation: anim-7-show 6s ease-out infinite; animation: anim-7-show 6s ease-out infinite; } @-webkit-keyframes anim-4-show { 0% { opacity: 0; } 20% { opacity: 0; } 30% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes anim-5-show { 0% { opacity: 0; } 50% { opacity: 0; } 60% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes anim-6-show { 0% { width: 0; } 30% { width: 0; } 40% { width: 168px; } 95% { width: 168px; } 100% { width: 0; } } @-webkit-keyframes anim-7-show { 0% { width: 0; } 60% { width: 0; } 70% { width: 168px; } 95% { width: 168px; } 100% { width: 0; } } @keyframes anim-4-show { 0% { opacity: 0; } 20% { opacity: 0; } 30% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } } @keyframes anim-5-show { 0% { opacity: 0; } 50% { opacity: 0; } 60% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } } @keyframes anim-6-show { 0% { width: 0; } 30% { width: 0; } 40% { width: 168px; } 95% { width: 168px; } 100% { width: 0; } } @keyframes anim-7-show { 0% { width: 0; } 60% { width: 0; } 70% { width: 168px; } 95% { width: 168px; } 100% { width: 0; } } @media screen and (max-width: 830px) { .k-4-box .k-4-3 { display: none; } .k-4-box .k-4-9 { display: block; } } .k-5-box { height: 799px; background: url(../images/k-5-1.jpg) center top no-repeat; text-align: center; } .k-5-box .k-5-1 { color: #000; font-size: 40px; line-height: 80px; padding: 60px 0 0 0; } .k-5-box .k-5-2 { color: #000; font-size: 16px; padding: 10px 0; margin: 0 auto; line-height: 25px; } .k-6-box { height: 614px; background: url(../images/k-6-bg.jpg) no-repeat; position: relative; } .k-6-box .k-6 { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%) translateX(0); text-align: center; } .k-6-box .k-6 .k-6-1 { color: #fff; font-size: 40px; line-height: 75px; } .k-6-box .k-6 .k-6-2 { font-size: 16px; color: #fff; line-height: 25px; width: 100%; max-width: 700px; margin: 0 auto; padding: 0 0 10px 0; } .k-7-box { background: #e0e0e0; position: relative; text-align: center; } .k-7-box .k-7-1 { color: #000; font-size: 40px; line-height: 80px; padding-top: 30px; } .k-7-box .k-7-2 { font-size: 16px; color: #000; line-height: 25px; width: 100%; max-width: 754px; margin: 0 auto; text-align: center; } .k-7-box .k-7-3 { width: 100%; max-width: 1425px; margin: 0 auto; display: block; } .k-7-box .k-7-4 { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; } .k-7-box .k-7-4 img { width: 100%; max-width: 1425px; margin: 0 auto; display: block; } .k-8-box { background: url(../images/bg84.png) no-repeat; background-size: cover; text-align: center; } .k-8-box .k-8-1 { color: #000; font-size: 40px; line-height: 80px; padding-top: 80px; } .k-8-box .k-8-2 { width: 100%; max-width: 850px; margin: 0 auto; text-align: center; color: #000; line-height: 25px; font-size: 16px; } .k-8-box .k-8-3 { width: 100%; max-width: 1176px; margin: 80px auto 0 auto; display: block; } .u-2-2 { margin: 0 auto; line-height: 25px; font-size: 16px; color: #000; max-width: 1000px; } .k-4-box .dmis-2-3 { margin: 60px auto 0 auto; padding: 0 0 60px 0; width: 100%; max-width: 770px; } .k-4-box .dmis-2-3 ul li { float: left; width: 20%; padding: 0 0 20px 0; } .k-4-box .dmis-2-3 ul li .dmis-2-img { width: 100%; height: 82px; background-position: center center; background-repeat: no-repeat; } .k-4-box .dmis-2-3 ul li p { font-size: 16px; color: #3a3a3a; margin: 20px 0 0 0; } .k-4-box .dmis-2-3 ul li:nth-of-type(1) .dmis-2-img { background-image: url(../images/t-2-1.png); } .k-4-box .dmis-2-3 ul li:nth-of-type(2) .dmis-2-img { background-image: url(../images/t-2-2.png); } .k-4-box .dmis-2-3 ul li:nth-of-type(3) .dmis-2-img { background-image: url(../images/t-2-3.png); } .k-4-box .dmis-2-3 ul li:nth-of-type(4) .dmis-2-img { background-image: url(../images/t-2-4.png); } .k-4-box .dmis-2-3 ul li:nth-of-type(5) .dmis-2-img { background-image: url(../images/t-2-5.png); } @media screen and (max-width: 490px) { .k-4-box .dmis-2-3 ul li { width: 50%; } .k-4-box .dmis-1-1 { font-size: 30px; } .k-4-box .dmis-1-3 { margin: 20px 20px 0 20px; } } .u-3-box { background: url(../images/t-3-1.png) center center no-repeat; height: 634px; } .u-3-box { position: relative; text-align: center; } .u-3 { text-align: center; position: absolute; top: 50%; left: 0; right: 0; -webkit-transform: translateY(-50%) translateX(0); -moz-transform: translateY(-50%) translateX(0); transform: translateY(-50%) translateX(0); } .u-3-1 { line-height: 60px; font-size: 40px; color: #fff; padding: 15px 0; } .u-3-2 { line-height: 27px; font-size: 16px; color: #fff; width: 100%; max-width: 800px; margin: 0 auto; } @media screen and (max-width: 935px) { .u-4-box { height: 300px; background: url(../images/u-2.png) center center no-repeat; background-size: cover; } .u-4-box .j-8-bg { display: none; } } .u-6-box { background: url(../images/u-3.png) center center no-repeat; } .u-6-1 { display: block; width: 100%; max-width: 278px; margin: 110px auto 0 auto; } .u-7-box { text-align: center; background: #e7e7e7; } .u-7-1 { width: 100%; max-width: 655px; margin: 0 auto; padding: 65px 0 0 0; color: #000; font-size: 40px; line-height: 75px; } .u-7-2 { width: 100%; max-width: 800px; margin: 0 auto; color: #000; font-size: 16px; line-height: 27px; } .u-7-3 { display: block; width: 100%; max-width: 1254px; margin: 50px auto 0 auto; padding: 0 0 50px 0; text-align: left; } .u-7-3 img { display: inline-block; padding: 10px 0; } .u-grey { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } .t-4-box { overflow: hidden; height: 928px; background: url(../images/t-4-1.png) center center no-repeat; text-align: center; } .tp-1 { padding: 130px 0 0 0; color: #fff; font-size: 40px; line-height: 70px; width: 100%; max-width: 570px; margin: 0 auto; } .tp-2 { line-height: 25px; color: #fff; font-size: 16px; width: 100%; max-width: 700px; margin: 0 auto; padding: 10px 0 0 0; } .t-6-box { overflow: hidden; height: 991px; background: url(../images/t-6-1.png) center center no-repeat; text-align: center; } .t-6-box .t-6-1 { padding: 90px 0 0 0; line-height: 55px; font-size: 40px; color: #fff; } .t-6-box .t-6-2 { line-height: 40px; font-size: 23px; color: #fff; } .t-6-box .t-6-3 { padding: 155px 0 0 0; line-height: 15px; font-size: 30px; color: #fff; } .t-6-box .t-6-4 { font-size: 30px; color: #fff; line-height: 55px; } .t-6-box .t-6-5 { padding: 155px 0 0 0; line-height: 15px; font-size: 30px; color: #fff; } .t-6-box .t-6-6 { font-size: 30px; color: #fff; line-height: 55px; } .cre-1-box { background: url(../images/j-1-2.jpg) center center no-repeat; background-size: cover; height: 680px; text-align: center; } .cre-1-box .cre-1-1 { color: #000; font-size: 40px; line-height: 60px; padding: 45px 0 0 0; } .cre-1-box .cre-1-2 { color: #000; font-size: 22px; line-height: 45px; } .cre-1-box .cre-1-3 { margin: 0 auto; padding: 35px 0 0 0; width: 43px; height: 77px; background: url(../images/cre-1.png) center center no-repeat; } .cre-1-box .cre-1-4 { font-size: 16px; color: #000; } .cre-1-box .cre-1-5 { padding: 70px 0 0 0; display: block; margin: 0 auto; width: 100%; max-width: 640px; } @media screen and (max-width: 640px) { .cre-1-box .cre-1-1 { font-size: 30px; } .cre-1-box .cre-1-2 { font-size: 15px; } } .cre-2-box { position: relative; text-align: center; } .cre-2-box .cre-2-1, .cre-2-box .cre-2-2, .cre-2-box .cre-2-8, .cre-2-box .cre-2-9 { display: block; float: left; width: 25%; background-size: cover; height: 600px; } .cre-2-box .cre-2-1 { background-image: url(../images/cre-20.png); } .cre-2-box .cre-2-2 { background-image: url(../images/cre-21.png); } .cre-2-box .cre-2-8 { background-image: url(../images/cre-22.png); } .cre-2-box .cre-2-9 { background-image: url(../images/cre-23.png); } .cre-2-box .cre-2-border-1 { width: 1px; height: 100%; position: absolute; top: 0; left: 25%; bottom: 0; background: #fff; } .cre-2-box .cre-2-border-2 { width: 1px; height: 100%; position: absolute; top: 0; left: 50%; bottom: 0; background: #fff; } .cre-2-box .cre-2-border-3 { width: 1px; height: 100%; position: absolute; top: 0; left: 75%; bottom: 0; background: #fff; } .cre-2-box .cre-2-3 { position: absolute; bottom: 0; left: 0; right: 0; line-height: 90px; font-size: 20px; color: #fff; z-index: 2; } .cre-2-box .cre-2-3 li { float: left; width: 25%; text-align: center; color: #fff; font-size: 16px; } .cre-2-box .cre-2-7 { position: absolute; top: 0; left: 0; right: 0; z-index: 5; } .cre-2-box .cre-2-4 { font-size: 40px; color: #fff; line-height: 80px; padding: 30px 0 0 0; } .cre-2-box .cre-2-5 { left: 0; right: 0; font-size: 22px; color: #fff; line-height: 50px; } .cre-2-box .cre-2-6 { font-size: 16px; color: #fff; line-height: 27px; width: 100%; max-width: 700px; margin: 0 auto; padding: 10px 0 0 0; } .cre-3-box { background: url(../images/cre-3.png) no-repeat; background-size: cover; text-align: center; padding: 40px 0; overflow: hidden; } .cre-3-box .cre-3-1 { line-height: 70px; font-size: 40px; color: #000; } .cre-3-box .cre-3-2 { font-size: 16px; color: #000; } .cre-3-box .cre-li-1 .cre-img { width: 208px; height: 228px; background: url(../images/cre-14.png) right center no-repeat; } .cre-3-box .cre-li-2 { padding: 0 0 0 48px; } .cre-3-box .cre-li-2 .cre-img { width: 224px; height: 228px; background: url(../images/cre-12.png) right center no-repeat; } .cre-3-box .cre-li-3 { padding: 0 0 0 58px; } .cre-3-box .cre-li-3 .cre-img { width: 130px; height: 228px; background: url(../images/cre-16.png) right center no-repeat; } .cre-3-box .cre-li-4 .cre-img { width: 272px; height: 228px; background: url(../images/cre-13.png) right center no-repeat; } .cre-3-box .cre-li-5 .cre-img { width: 208px; height: 228px; background: url(../images/cre-15.png) right center no-repeat; } .cre-3-box .cre-ul { padding: 80px 0 0 0; width: 100%; max-width: 1149px; margin: 0 auto; } @media screen and (max-width: 1149px) { .cre-3-box .cre-ul { max-width: 942px; } } @media screen and (max-width: 942px) { .cre-3-box .cre-ul { max-width: 670px; } } @media screen and (max-width: 670px) { .cre-3-box .cre-ul { max-width: 100%; } .cre-ul li { float: none; width: 100%; } .cre-ul li .cre-img { margin: 0 auto; } .cre-3-box .cre-li-2, .cre-3-box .cre-li-3 { padding: 0; } } .cre-ul li { float: left; } .cre-ul li p { font-size: 20px; color: #000; line-height: 70px; text-align: center; } .cre-4-box { background: url(../images/bg84.png) no-repeat; background-size: cover; position: relative; padding: 0 0 200px 0; overflow: hidden; } .cre-4-box .j-3-2 { max-width: 620px; } .cre-4-box .ul-4 li .li-img { height: 97px; } .cre-4-box .ul-4 li:nth-of-type(1) .li-img { background-image: url(../images/cre-4.png); } .cre-4-box .ul-4 li:nth-of-type(2) .li-img { background-image: url(../images/cre-5.png); } .cre-4-box .ul-4 li:nth-of-type(3) .li-img { background-image: url(../images/cre-6.png); } .cre-4-box .ul-4 li:nth-of-type(4) .li-img { background-image: url(../images/cre-7.png); } .cre-4-box .cre-4-1 { position: absolute; left: 50%; bottom: 10px; z-index: 3; width: 682px; margin: 0 0 0 -341px; -webkit-transform: translateY(0px) translateX(0); -moz-transform: translateY(0px) translateX(0); transform: translateY(0px) translateX(0); } .cre-4-box .cre-4-2 { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; } @media screen and (max-width: 682px) { .cre-4-box .cre-4-1 { left: 0; width: 100%; margin: 0; } } @media screen and (max-width: 460px) { .cre-4-box .ul-4 li { width: 50%; } } .cre-5-box { background: url(../images/cre-9.png) no-repeat; background-size: cover; } .cre-5-box .dmis-4 .dmis-4-1, .cre-5-box .dmis-4 .dmis-4-2, .cre-5-box .dmis-4 .dmis-4-3 li p { color: #fff; } .cre-5-box .dmis-4 { margin: 0 auto; width: 100%; max-width: 440px; } .cre-5-box .dmis-4 .dmis-4-3 li:nth-of-type(1) .dmis-4-img { background-image: url(../images/cre-5-1.png); } .cre-5-box .dmis-4 .dmis-4-3 li:nth-of-type(2) .dmis-4-img { background-image: url(../images/cre-5-2.png); } .cre-5-box .dmis-4 .dmis-4-3 li:nth-of-type(3) .dmis-4-img { background-image: url(../images/cre-5-3.png); } @media screen and (max-width: 460px) { .cre-5-box .dmis-4 .dmis-4-3 li { width: 50%; } } @media screen and (max-width: 935px) { .cre-6-box { height: 300px; background: url(../images/cre-6-1.jpg) center center no-repeat; background-size: cover; } } .kvm-1-box { padding: 45px 20px; } .kvm-1-box .j-1 .j-1-3 { display: block; width: 100%; max-width: 822px; margin: 0 auto; } .kvm-1-box .j-1 .j-1-4 { line-height: normal; padding: 20px 0; } .kvm-1-1 { font-size: 40px; color: #000; padding: 0 0 20px 0; } @media screen and (max-width: 640px) { .kvm-1-1 { font-size: 30px; } .kvm-1-box .j-1 .j-1-2 { font-size: 15px; } } .kvm-2-box { background: #e0e0e0; padding: 0 0 75px 0; } .kvm-2-box .k-4-1 { padding: 65px 0 20px 0; line-height: 100px; } .kvm-2-box .kvm-2-1 { margin: 60px auto 0 auto; width: 100%; max-width: 1280px; } .kvm-2-box .kvm-2-1 li { float: left; } .kvm-2-box .kvm-2-1 li img { width: 100%; vertical-align: top; } .kvm-2-box .kvm-2-1 li p { color: #06132a; font-size: 24px; line-height: 122px; } .kvm-2-box .kvm-2-1 .anim-1 { width: 100%; max-width: 687px; margin: 0 auto; } .kvm-2-box .kvm-2-1 .anim-2 img { margin: 40px 30px 0 30px; width: 73px; } .kvm-2-box .kvm-2-1 .anim-3 { width: 100%; max-width: 460px; margin: 0 auto; } @media screen and (max-width: 1300px) { .kvm-2-box .kvm-2-1 li { float: none; clear: none; } .kvm-2-box .kvm-2-1 .anim-2 img { margin: 0 0 45px 0; } } .kvm-3-box { background: url(../images/kvm-8.jpg) center center no-repeat; height: 476px; } .kvm-3-box .kvm-3 { position: relative; width: 100%; max-width: 1127px; margin: 0 auto; } .kvm-3-box .kvm-3 .kvm-3-1 { vertical-align: bottom; margin: 43px 0 0 160px; } .kvm-3-box .kvm-3 .kvm-3-2 { position: absolute; top: 150px; left: 484px; font-size: 40px; color: #fff; } .kvm-3-box .kvm-3 .kvm-3-3 { position: absolute; top: 226px; left: 484px; font-size: 13px; color: #fff; line-height: 25px; width: 346px; } @media screen and (max-width: 830px) { .kvm-3-1 { display: none; } .kvm-3-box .kvm-3 .kvm-3-2, .kvm-3-box .kvm-3 .kvm-3-3 { left: 0; right: 0; text-align: center; width: 100%; max-width: 100%; } } .kvm-4-box { height: 675px; position: relative; } .kvm-4-box .opacity-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } .kvm-4-box .j-3 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; } .opacity-bg .banner { width: 100%; height: 100%; } .opacity-bg .banner ul { height: 100%; position: relative; } .opacity-bg .banner ul li { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .opacity-bg .banner ul li a { display: block; width: 100%; height: 100%; } .kvm-5-box { background: #fff; } .kvm-5-box .j-3 .j-3-2 { max-width: 100%; } .kvm-5-box .kvm-5-1 { width: 100%; max-width: 1247px; margin: 10% auto; display: block; } .kvm-6-box { background: url(../images/kvm-12.jpg) center center no-repeat; background-size: auto 100%; } .kvm-6-box .kvm-6-1 { width: 100%; max-width: 529px; margin: 0 auto 50px auto; display: block; } .kvm-6-box .kvm-6-3 { width: 100%; max-width: 529px; margin: 50px auto 0 auto; } .kvm-6-box .kvm-6-3 img { display: block; width: 50%; float: left; opacity: 0; } .kvm-6-box .kvm-6-3.anim-show img:nth-of-type(1) { -webkit-animation: bright 4s ease-out infinite 1s; animation: bright 4s ease-out infinite 1s; } .kvm-6-box .kvm-6-3.anim-show img:nth-of-type(2) { -webkit-animation: bright 4s ease-out infinite 2s; animation: bright 4s ease-out infinite 2s; } @-webkit-keyframes bright { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes bright { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } .kvm-7-box { background: url(../images/kvm-14.png) center center no-repeat; height: 464px; } .kvm-7-box .u-3-2 { max-width: 100%; } .kvm-8-box { height: 684px; } .kvm-8-box .opacity-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } .kvm-8-box .j-3 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 4; } .kvm-8-box .j-3-1 { padding: 10px 0 0 0; color: #fff; } .kvm-8-box .j-3-2 { color: #fff; max-width: 100%; } .e-1-box { padding: 0 0 136px 0; background: url(../images/e-3.jpg) repeat-x; } .e-1-box .j-1 .j-1-1 { width: 100%; max-width: 311px; padding: 137px 0 0 0; } .e-1-box .j-1 .j-1-2 { line-height: normal; padding: 20px 0; } .e-1-box .j-1 .j-1-3 { width: 100%; max-width: 927px; padding: 90px 0 0 0; } .e-1-box .j-1 .j-1-4 { line-height: normal; } .e-2-box { background: #e0e0e0; } .e-2-box .j-3-2 { width: 100%; max-width: 1195px; } .e-2-box .ul-4 { max-width: 1200px; margin: 100px auto 0 auto; padding: 0 0 55px 0; } .e-2-box .ul-4 li { width: 33.33%; } .e-2-box .ul-4 li .li-img { height: 98px; } .e-2-box .ul-4 li:nth-of-type(1) .li-img { background-image: url(../images/e-4.png); } .e-2-box .ul-4 li:nth-of-type(2) .li-img { background-image: url(../images/e-5.png); } .e-2-box .ul-4 li:nth-of-type(3) .li-img { background-image: url(../images/e-6.png); } .e-3-box { background: url(../images/e-7.png) center center no-repeat; background-size: cover; } .e-3-box .j-3-1, .e-3-box .j-3-2 { color: #fff; } .e-3-box .j-3-2 { max-width: 1264px; } .e-3-box .ul-4 { margin: 70px auto 0 auto; max-width: 1440px; padding: 0 0 100px 0; } .e-3-box .ul-4 li { width: 92px; padding: 0 40px; display: inline-block; float: none; } .e-3-box .ul-4 li .li-img { width: 90px; height: 90px; border: 1px solid #fff; border-radius: 50%; } .e-3-box .ul-4 li:nth-of-type(1) .li-img { background-image: url(../images/e-8.png); } .e-3-box .ul-4 li:nth-of-type(2) .li-img { background-image: url(../images/e-9.png); } .e-3-box .ul-4 li:nth-of-type(3) .li-img { background-image: url(../images/e-10.png); } .e-3-box .ul-4 li:nth-of-type(4) .li-img { background-image: url(../images/e-11.png); } .e-3-box .ul-4 li:nth-of-type(5) .li-img { background-image: url(../images/e-12.png); } .e-3-box .ul-4 li:nth-of-type(6) .li-img { background-image: url(../images/e-13.png); } .e-3-box .ul-4 li:nth-of-type(7) .li-img { background-image: url(../images/e-14.png); } .e-3-box .ul-4 li:nth-of-type(8) .li-img { background-image: url(../images/e-15.png); } .e-3-box .ul-4 li p { color: #fff; } .e-4-box .kvm-2-1 { max-width: 1183px; } .e-4-box .kvm-2-1 .anim-1 { max-width: 610px; } .e-4-box .kvm-2-1 .anim-2 img { width: 38px; } .e-4-box .kvm-2-1 .anim-3 { max-width: 475px; } .e-5-box .j-4 .e-5-1 { width: 100%; max-width: 774px; margin: 0 auto; } .e-5-box .j-4 .e-5-2 { width: 100%; max-width: 774px; margin: 0 auto; padding: 0 0 10px 0; } .e-5-box .j-4 .e-5-2 li { display: inline-block; color: #000; font-size: 16px; line-height: 60px; } .e-5-box .j-4 .e-5-2 li:nth-of-type(1) { width: 25.83%; padding: 0 13.43% 0 0; } .e-5-box .j-4 .e-5-2 li:nth-of-type(2) { width: 23.9%; padding: 0 15.94% 0 0; } .e-5-box .j-4 .e-5-2 li:nth-of-type(3) { width: 18.9%; } .e-6-box { background: #e0e0e0; } .e-6-box .j-4 .j-4-2 { max-width: 100%; } .e-6-box .e-5-1 { padding: 100px 0 100px 0; width: 100%; max-width: 1192px; margin: 0 auto; } .e-7-box { background: url(../images/e-20.jpg) center center no-repeat; height: 565px; } .e-7-box .e-7-1 { width: 100%; max-width: 820px; margin: 90px auto 0 auto; } .e-7-box .e-7-1 li { width: 50%; display: inline-block; } .e-7-box .e-7-1 li .e-7-1-min { width: 162px; margin: 0 auto; } .e-7-box .e-7-1 li .e-7-1-min .e-7-img { width: 160px; height: 160px; border: 1px solid #fff; border-radius: 50%; background-position: center center; background-repeat: no-repeat; background-color: rgba(0, 0, 0, 0.4); } .e-7-box .e-7-1 li .e-7-1-min p { color: #fff; font-size: 20px; text-align: center; line-height: 83px; } .e-7-box .e-7-1 li:nth-of-type(1) .e-7-img { background-image: url(../images/e-21.png); } .e-7-box .e-7-1 li:nth-of-type(2) .e-7-img { background-image: url(../images/e-22.png); } .ct-1-box { padding: 45px 20px; } .ct-1-box .j-1 .j-1-3 { max-width: 292px; } .ct-2-box { background: #040404 url(../images/ct-2.png) left top no-repeat; } .ct-2-box .k-6 .k-6-1 { line-height: 120px; } .ct-2-box .k-6 .k-6-2 { max-width: 1036px; } .ct-3-box { background: #fff; } .ct-3-box .k-6 .ct-3 { width: 850px; margin: 0 auto; } .ct-3-box .k-6 .ct-3 .ct-3-fl { float: left; display: block; } .ct-3-box .k-6 .ct-3 .ct-3-fr { float: right; width: 455px; } .ct-3-box .k-6 .ct-3 .ct-3-fr .ct-3-1 { padding: 70px 0 20px 0; font-size: 40px; color: #000; line-height: 80px; } .ct-3-box .k-6 .ct-3 .ct-3-fr .ct-3-1 span { font-size: 60px; color: #0086cd; font-style: italic; vertical-align: bottom; } .ct-3-box .k-6 .ct-3 .ct-3-fr .ct-3-2 { font-size: 16px; color: #000; line-height: 27px; text-align: left; } @media screen and (max-width: 850px) { .ct-3-box { height: auto; } .ct-3-box .k-6 { padding: 20px 0; position: static; transform: translateY(0) translateX(0); } .ct-3-box .k-6 .ct-3 { width: 100%; } .ct-3-box .k-6 .ct-3 .ct-3-fl { float: none; width: 264px; margin: 0 auto; } .ct-3-box .k-6 .ct-3 .ct-3-fr { float: none; width: auto; margin: 0 20px; } } .ct-4-box { background: url(../images/ct-4.png) center center no-repeat; height: 393px; } .ct-4-box .k-6 .k-6-2 { max-width: 1185px; } .dvi-1-box { padding: 60px 20px; } .dvi-1-box .j-1 .j-1-3 { max-width: 319px; } .dvi-1-box .j-1 .j-1-2 { font-size: 16px; line-height: 27px; } .dvi-1-box .j-1 .j-1-4 { font-size: 16px; line-height: 27px; padding: 0 0 80px 0; } .dvi-2-box { padding: 80px 20px 0 20px; background: #6b6b6b; } .dvi-2-box .kvm-1-1 { color: #fff; } .dvi-2-box .j-1 .j-1-3 { max-width: 319px; color: #fff; } .dvi-2-box .j-1 .j-1-2 { font-size: 16px; line-height: 27px; color: #fff; padding: 0 0 80px 0; width: 100%; max-width: 500px; margin: 0 auto; } .dvi-2-box .j-1 .j-1-3 { max-width: 832px; } .dvi-3-box { padding: 80px 20px 0 20px; height: 608px; background: #a3a3a3 url(../images/dvi-3.png) center center no-repeat; } .dvi-3-box .kvm-1-1 { color: #fff; } .dvi-3-box .j-1 .j-1-3 { max-width: 319px; color: #fff; } .dvi-3-box .j-1 .j-1-2 { font-size: 16px; line-height: 27px; color: #fff; padding: 0 0 80px 0; width: 100%; max-width: 500px; margin: 0 auto; } .dvi-3-box .j-1 .j-1-3 { max-width: 832px; } .dvi-4-box { padding: 60px 20px 0 20px; } .dvi-4-box .j-1 .j-1-3 { max-width: 885px; } .dvi-4-box .j-1 .j-1-2 { font-size: 16px; line-height: 27px; padding: 0 0 75px 0; } .dvi-4-box .j-1 .j-1-4 { line-height: 25px; padding: 0 0 20px 0; } .dvi-5-box { background: url(../images/dvi-6.png) center center no-repeat; height: 428px; } .dvi-5-box .k-6 .k-6-2 { max-width: 700px; } .hd-1-box .j-1 .kvm-1-1 { padding: 100px 0 25px 0; } .hd-1-box .j-1 .j-1-2 { padding: 0 0 125px 0; } .hd-1-box .j-1 .j-1-3 { max-width: 608px; padding: 0 0 100px 0; } .hd-2-box { background: #ffffff url(../images/hd-2.png) center top no-repeat; position: relative; } .hd-2-box .k-6 { position: absolute; left: 45%; text-align: left; max-width: 603px; } .hd-2-box .k-6 .k-6-1 { color: #000; line-height: 120px; } .hd-2-box .k-6 .k-6-2 { color: #000; max-width: 1036px; } @media screen and (max-width: 680px) { .hd-2-box { background: #fff; } .hd-2-box .k-6 { text-align: center; left: 20px; right: 20px; } } .hd-3-box { background: url(../images/hd-3.png) center center no-repeat; height: 428px; } .hd-3-box .k-6 .k-6-2 { padding: 20px 0 0 0; max-width: 980px; } .hd-4-box { background: url(../images/hd-4.png) center center no-repeat; height: 570px; } .hd-4-box .hd-4-1 { display: block; width: 100%; max-width: 987px; margin: 0 auto; } .hd-4-box .k-6 .k-6-1 { padding: 70px 0 0 0; color: #000; } .hd-4-box .k-6 .k-6-2 { padding: 20px 0 0 0; max-width: 980px; color: #000; } .hd-5-box { padding: 100px 20px 100px 20px; background: #e0e0e0; } .hd-5-box .j-1 .j-1-3 { max-width: 835px; } .hd-5-box .j-1 .j-1-2 { font-size: 16px; line-height: 27px; padding: 0 0 75px 0; } .hd-5-box .j-1 .j-1-4 { line-height: 25px; padding: 0 0 20px 0; } .sl-1-box { padding: 60px 20px; } .sl-1-box .j-1 .j-1-3 { max-width: 445px; } .sl-1-box .j-1 .j-1-2 { font-size: 14px; line-height: 25px; } .sl-1-box .j-1 .j-1-4 { line-height: 25px; padding: 0 0 80px 0; } .sl-3-box { padding: 55px 0; } .sl-3-box .j-4 .j-4-1 { line-height: 60px; } .sl-3-box .j-4 .j-4-2 { padding: 20px 0 0 0; } .sl-3-box .sl-3-2 { color: #000; font-size: 30px; line-height: 50px; } .sl-3-box .sl-3-1 { padding: 50px 0 0 0; display: block; width: 100%; max-width: 781px; margin: 0 auto; } .sl-4-box { height: 953px; background: url(../images/sl-3.png) center center no-repeat; } .se-1-box { background-size: cover; padding: 105px 20px 60px 20px; } .se-1-box .j-1 .j-1-3 { padding: 70px 0 0 0; max-width: 658px; } .se-1-box .j-1 .j-1-2 { font-size: 22px; line-height: 35px; } .se-1-box .j-1 .j-1-4 { line-height: 25px; padding: 0 0 80px 0; } .se-2-box { overflow: hidden; background: #e0e0e0; } .se-2-box .dmis-2-3 { max-width: 1570px; margin: 90px auto 0 auto; } .se-2-box .dmis-2-3 ul li { width: 16.66%; height: 120px; } .se-2-box .dmis-2-3 ul li:nth-of-type(1) .dmis-2-img { background-image: url(../images/se-2.png); } .se-2-box .dmis-2-3 ul li:nth-of-type(2) .dmis-2-img { background-image: url(../images/se-3.png); } .se-2-box .dmis-2-3 ul li:nth-of-type(3) .dmis-2-img { background-image: url(../images/se-4.png); } .se-2-box .dmis-2-3 ul li:nth-of-type(4) .dmis-2-img { background-image: url(../images/se-5.png); } .se-2-box .dmis-2-3 ul li:nth-of-type(5) .dmis-2-img { background-image: url(../images/se-6.png); } .se-2-box .dmis-2-3 ul li:nth-of-type(6) .dmis-2-img { background-image: url(../images/se-7.png); } .se-2-box .se-2-1 { padding: 65px 0 10px 0; color: #000; font-size: 40px; line-height: 75px; } .se-2-box .se-2-2 { width: 100%; max-width: 1000px; margin: 0 auto; line-height: 27px; color: #000; font-size: 16px; } .se-2-box .se-2-3 { display: block; padding: 50px 0 0 0; margin: 0 auto; width: 100%; max-width: 1280px; } .se-2-box .se-2-4 { display: block; padding: 50px 0 0 0; margin: 0 auto; width: 100%; max-width: 1920px; } .se-2-box .se-2-5 { display: block; padding: 50px 0 0 0; margin: 0 auto; width: 100%; max-width: 1042px; } .se-3-1 { text-align: center; width: 100%; max-width: 1275px; margin: 80px auto 0 auto; } .se-3-1 li { float: left; position: relative; cursor: pointer; width: 25%; line-height: 100px; } .se-3-1 li a { position: relative; width: 100%; max-width: 180px; display: block; margin: 0 auto; color: #000; text-decoration: none; font-size: 36px; } .se-3-1 li b { position: absolute; display: block; width: 100%; height: 3px; left: 0; bottom: 0; opacity: 0; background: #0086cd; } .se-3-1 li a:hover, .se-3-1 li a.active { color: #0086cd; } .se-3-1 li a:hover b, .se-3-1 li a.active b { opacity: 1; } .se-3-1 li:nth-of-type(4) a { max-width: 300px; } .se-3-2 { margin: 90px 0 0 0; } .se-3-2 li { display: none; } .se-3-2 li img { display: block; width: 100%; } @media screen and (max-width: 960px) { .se-3-1 li a { font-size: 20px; max-width: 150px; } } @media screen and (max-width: 600px) { .se-3-1 li { width: 100%; } .se-3-1 li a { font-size: 20px; max-width: 100%; } } @media screen and (max-width: 670px) { .se-2-box .dmis-2-3 ul li { width: 33.33%; } } #container { height: 100%; margin: 0px; font: 12px Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '寰蒋闆呴粦', Arial; } .info-title { color: white; font-size: 14px; background-color: rgba(0, 155, 255, 0.8); line-height: 26px; padding: 0px 0 0 6px; font-weight: lighter; letter-spacing: 1px; } .info-content { padding: 4px; color: #666666; line-height: 23px; } .info-content img { float: left; margin: 3px; } .map-box { width: 100%; max-width: 1280px; height: 700px; margin: 0 auto; background-color: #F3F1EC; } .map-click { float: left; width: 30%; height: 100%; overflow-y: auto; } #container { float: left; width: 70%; height: 100%; } .map-click li.active { background-color: #0086cd; } .map-click li.active .map-tit { color: #fff; } .map-click li.active .map-cont { color: #fff; } .map-click li { padding: 6px 0; } .map-tit { font-size: 16px; line-height: 26px; color: #5c5c5c; margin: 0 20px; } .map-cont { font-style: normal; line-height: 20px; margin: 0 20px; font-size: 12px; color: #797979; } .map-click::-webkit-scrollbar-track-piece { width: 8px; background-color: #fff; } .map-click::-webkit-scrollbar { width: 8px; background-color: #ddd; } .map-click::-webkit-scrollbar-thumb { width: 8px; background-color: #ddd; } .map-click::-webkit-scrollbar-thumb:hover { width: 8px; background-color: #ccc; } @media screen and (max-width: 640px) { .contact .cont-box { display: block; } .map-box { display: none; } } .xxcs table { margin: 20px auto; } .xxcs table td { padding-left: 10px; } .xxcs img { max-width: 95%; } td, th { padding: 0; } .h2-1-box { padding: 100px 20px; } .h2-1-box .j-1 .j-1-3 { display: block; width: 100%; max-width: 565px; margin: 20px auto 0 auto; } .h2-1-box .j-1 .j-1-4 { line-height: normal; padding: 20px 0; } .h2-2-box { background: #000000 url(../images/h2-2.png) center center no-repeat; height: 464px; overflow: hidden; } .h2-2-box .u-3 { top: auto; bottom: 10%; -moz-transform: translateY(0) translateX(0); -webkit-transform: translateY(0) translateX(0); transform: translateY(0) translateX(0); } .h2-3-box { background: #010101 url(../images/h2-3.png) center center no-repeat; height: 300px; } .h2-3-box .h2-3 { width: 100%; max-width: 1197px; margin: 0 auto; position: relative; height: 100%; } .h2-3-box .h2-3 .h2-3-m { width: 435px; margin: 0 0 0 589px; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%) translateX(0); -moz-transform: translateY(-50%) translateX(0); transform: translateY(-50%) translateX(0); } @media screen and (max-width: 1197px) { .h2-3-box .h2-3 .h2-3-m { width: 100%; max-width: 100%; margin: 0 auto; text-align: center; } } .h2-4-box { background: #e0e0e0; height: 570px; } .h2-4-box .k-6 .hd-4-1 { width: 100%; max-width: 671px; } .h2-4-box .k-6 .k-6-1 { color: #000; margin: 0 0 20px 0; } .h2-4-box .k-6 .k-6-2 { color: #000; max-width: 100%; } .h2-5-box { background: #000000 url(../images/h2-5.png) center center no-repeat; height: 625px; } .h2-5-box .u-3 { top: auto; top: 10%; -moz-transform: translateY(0) translateX(0); -webkit-transform: translateY(0) translateX(0); transform: translateY(0) translateX(0); } .h2-5-box .u-3-2 { max-width: 100%; } .b-1-box { padding: 0 0 135px 0; background: url(../images/b-100.png) repeat-x; } .b-1-box .j-1 .j-1-1 { width: 100%; max-width: 306px; padding: 95px 0 0 0; } .b-1-box .j-1 .j-1-2 { line-height: normal; padding: 20px 0; } .b-1-box .j-1 .j-1-3 { width: 100%; max-width: 829px; padding: 65px 0 0 0; } .b-1-box .j-1 .j-1-4 { line-height: normal; } .b-3-box { background: url(../images/b-200.png) center center no-repeat; } .b-3-box .j-3-2 { width: 100%; max-width: 1195px; } .b-3-box .ul-4 { max-width: 1200px; margin: 100px auto 0 auto; padding: 0 0 55px 0; } .b-3-box .ul-4 li { width: 33.33%; } .b-3-box .ul-4 li .li-img { height: 98px; } .b-3-box .ul-4 li p { color: #0086cd; } .b-3-box .ul-4 li:nth-of-type(1) .li-img { background-image: url(../images/b-5.png); } .b-3-box .ul-4 li:nth-of-type(2) .li-img { background-image: url(../images/b-6.png); } .b-3-box .ul-4 li:nth-of-type(3) .li-img { background-image: url(../images/b-7.png); } .b-4-box { background: url(../images/b-8.png) center center no-repeat; height: 563px; } .b-4-box .j-6-3 { max-width: 100%; } .b-4-box .e-7-1 { width: 100%; max-width: 820px; margin: 90px auto 0 auto; } .b-4-box .e-7-1 li { width: 50%; display: inline-block; } .b-4-box .e-7-1 li .e-7-1-min { width: 162px; margin: 0 auto; } .b-4-box .e-7-1 li .e-7-1-min .e-7-img { width: 160px; height: 160px; border: 1px solid #fff; border-radius: 50%; background-position: center center; background-repeat: no-repeat; background-color: rgba(0, 0, 0, 0.4); } .b-4-box .e-7-1 li .e-7-1-min p { color: #fff; font-size: 20px; text-align: center; line-height: 83px; } .b-4-box .e-7-1 li:nth-of-type(1) .e-7-img { background-image: url(../images/e-22.png); } .b-4-box .e-7-1 li:nth-of-type(2) .e-7-img { background-image: url(../images/b-9.png); } .b-5-box { background: #e0e0e0; } .b-5-box .j-4 .j-4-2 { max-width: 100%; } .b-5-box .e-5-1 { padding: 100px 0 100px 0; width: 100%; max-width: 1202px; margin: 0 auto; } .b-6-box { background: url(../images/b-12.jpg) center center no-repeat; height: 413px; position: relative; } .b-6-box .j-4 { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%) translateX(0); text-align: center; } .b-6-box .j-4 .j-4-1 { color: #fff; line-height: normal; padding: 0 0 20px 0; } .b-6-box .j-4 .j-4-2 { color: #fff; } .b-6-box .j-4 .e-5-1 { width: 100%; max-width: 774px; margin: 0 auto; } .b-7-box { background: #fff; } .b-7-box .k-8-2 { padding: 40px 0 0 0; } .b-7-box .k-8-3 { max-width: 1181px; margin: 80px auto 100px auto; } .seb-1-box { background: url(../images/seb-1.png) center center repeat-x; padding: 90px 20px; } .seb-1-box .j-1 .j-1-3 { max-width: 601px; } .seb-1-box .j-1 .j-1-2 { font-size: 24px; line-height: 27px; color: #353535; padding-bottom: 40px; } .seb-3-box { background: #d7d7d7; padding: 55px 0; } .seb-3-box .j-4 .j-4-1 { line-height: 60px; } .seb-3-box .j-4 .j-4-2 { padding: 20px 0 0 0; } .seb-3-box .sl-3-2 { color: #000; font-size: 30px; line-height: 50px; } .seb-3-box .sl-3-1 { padding: 50px 0 0 0; display: block; width: 100%; max-width: 800px; margin: 0 auto; } .seb-3-box .seb-3-1 { display: block; width: 100%; max-width: 601px; margin: 0 auto; } .seb-3-box .seb-3-1 li { width: 60%; text-align: center; font-size: 16px; float: left; color: #000; padding: 20px 0 0 0; } .seb-3-box .seb-3-1 li:nth-of-type(1) { width: 40%; } .seb-4-box { background: #fff; padding: 55px 0; } .seb-4-box .j-4 .j-4-1 { line-height: 60px; } .seb-4-box .j-4 .j-4-2 { padding: 20px 0 0 0; } .seb-4-box .sl-3-2 { color: #000; font-size: 30px; line-height: 50px; } .seb-4-box .sl-3-1 { padding: 50px 0 0 0; display: block; width: 100%; max-width: 755px; margin: 0 auto; } .seb-5-box { background: #dcdcdc; padding: 55px 0; } .seb-5-box .j-4 .j-4-1 { line-height: 60px; } .seb-5-box .j-4 .j-4-2 { padding: 20px 0 0 0; } .seb-5-box .sl-3-2 { color: #000; font-size: 30px; line-height: 50px; } .seb-5-box .sl-3-1 { padding: 50px 0 0 0; display: block; width: 100%; max-width: 755px; margin: 0 auto; } .seb-5-box .seb-3-1 { display: block; width: 100%; max-width: 601px; margin: 0 auto; } .seb-5-box .seb-3-1 li { width: 60%; text-align: center; font-size: 16px; float: left; color: #000; padding: 20px 0 0 0; } .seb-5-box .seb-3-1 li:nth-of-type(1) { width: 40%; float: left; } .seb-5-box .seb-3-1 li:nth-of-type(2) { width: 20%; float: right; } .seb-6-box { overflow: hidden; background: #fff; } .seb-6-box .k-6 .ct-3 { width: 100%; max-width: 1033px; margin: 0 auto; } .seb-6-box .k-6 .ct-3 .ct-3-fl { float: right; display: block; } .seb-6-box .k-6 .ct-3 .ct-3-fr { float: left; width: 430px; } .seb-6-box .k-6 .ct-3 .ct-3-fr .ct-3-1 { padding: 70px 0 20px 0; font-size: 40px; color: #000; line-height: 80px; text-align: left; } .seb-6-box .k-6 .ct-3 .ct-3-fr .ct-3-1 span { font-size: 60px; color: #0086cd; font-style: italic; vertical-align: bottom; } .seb-6-box .k-6 .ct-3 .ct-3-fr .ct-3-2 { font-size: 16px; color: #000; line-height: 27px; text-align: left; } @media screen and (max-width: 1033px) { .seb-6-box .k-6 .ct-3 .ct-3-fr { float: none; margin: 0 auto; } .seb-6-box .k-6 .ct-3 .ct-3-fr .ct-3-1 { text-align: center; } .seb-6-box .k-6 .ct-3 .ct-3-fr .ct-3-2 { padding: 0 0 30px 0; } .seb-6-box .k-6 .ct-3 .ct-3-fl { width: 555px; margin: 0 auto; float: none; padding: 0 0 30px 0; } .seb-6-box { height: auto; } .seb-6-box .k-6 { position: static; transform: translateY(0) translateX(0); } } .b-6-box { background: #3f424b; height: auto; position: relative; } .b-6-box .j-4 { padding: 80px 0 0 0; position: static; top: 50%; left: 0; right: 0; transform: translateY(0) translateX(0); text-align: center; } .b-6-box .j-4 .j-4-1 { color: #fff; line-height: normal; padding: 0 0 30px 0; } .b-6-box .j-4 .j-4-2 { color: #fff; padding: 0 0 50px 0; } .b-6-box .j-4 .e-5-1 { width: 100%; max-width: 870px; margin: 0 auto; display: block; } .seh-1-box { background: url(../images/seb-1.png) center center repeat-x; padding: 90px 20px; } .seh-1-box .j-1 .j-1-3 { max-width: 551px; } .seh-1-box .j-1 .j-1-2 { font-size: 24px; line-height: 27px; color: #353535; padding-bottom: 40px; } .seh-1-box .dmis-1-3 { font-size: 14px; color: #000; max-width: 536px; margin: 0 auto 150px auto; line-height: 30px; } .seh-1-box .dmis-1-3 .dmis-1-3-fl { float: left; } .seh-1-box .dmis-1-3 .dmis-1-3-fr { float: right; } .seh-1-box .dmis-1-3 .dmis-1-3-fl, .seh-1-box .dmis-1-3 .dmis-1-3-fr { font-size: 24px; position: relative; text-align: left; text-indent: 15px; color: #353535; } .seh-1-box .dmis-1-3 .dmis-1-3-fl b, .seh-1-box .dmis-1-3 .dmis-1-3-fr b { display: block; position: absolute; top: 13px; left: 0; width: 7px; height: 7px; border-radius: 50%; overflow: hidden; background: #000; } @media screen and (max-width: 640px) { .seh-1-box .dmis-1-3 { font-size: 12px; } .seh-1-box .dmis-1-3 .dmis-1-3-fl, .seh-1-box .dmis-1-3 .dmis-1-3-fr { font-size: 14px; } } .seh-5-box { background: url(../images/seh-4.png) center center no-repeat; height: 470px; } .seh-5-box .k-6 .k-6-2 { max-width: 700px; } .seh-5-box .k-6 .k-6-1, .seh-5-box .k-6 .k-6-2 { color: #000; } .seh-6-box { background: #fff; padding: 55px 0; } .seh-6-box .j-4 .j-4-1 { line-height: 60px; } .seh-6-box .j-4 .j-4-2 { max-width: 800px; padding: 20px 0 20px 0; } .seh-6-box .sl-3-2 { color: #000; font-size: 30px; line-height: 50px; } .seh-6-box .sl-3-1 { padding: 50px 0 0 0; display: block; width: 100%; max-width: 755px; margin: 0 auto; } .seh-6-box .seh-6-1 { width: 100%; max-width: 850px; margin: 0 auto; } .seh-6-box .seh-6-1 li:nth-of-type(1) { float: left; } .seh-6-box .seh-6-1 li:nth-of-type(1) img { width: 100%; max-width: 367px; display: block; } .seh-6-box .seh-6-1 li:nth-of-type(2) { float: right; } .seh-6-box .seh-6-1 li:nth-of-type(2) img { width: 100%; display: block; max-width: 364px; } @media screen and (max-width: 850px) { .seh-6-box .seh-6-1 li:nth-of-type(1), .seh-6-box .seh-6-1 li:nth-of-type(2) { float: none; } } .case-list { margin: 52px 0 0 0; } .case-list ul { width: 1350px; } .case-list ul li { display: none; } .case-list ul li .case-m-box { width: 409px; height: 322px; margin: 0 25px 0 0; padding: 54px 0 0 0; border-bottom: 1px solid #d8d8d8; float: left; } .case-list ul li .case-m-box .case-m-img { width: 409px; height: 242px; overflow: hidden; } .case-list ul li .case-m-box .case-m-img a { display: block; position: relative; } .case-list ul li .case-m-box .case-m-img a .case-mark { position: absolute; top: 100%; left: 0; right: 0; bottom: 0; opacity: 0; z-index: 3; background: #0086cd; -moz-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); } .case-list ul li .case-m-box .case-m-img a .case-txt { position: absolute; top: 100%; left: 0; right: 0; bottom: 0; z-index: 4; color: #fff; opacity: 0; font-size: 13px; padding: 10px; -moz-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); line-height: 28px; } .case-list ul li .case-m-box .case-m-img a img { width: 410px; height: 240px; } .case-list ul li .case-m-box .case-m-img a:hover .case-mark { top: 0; opacity: .9; } .case-list ul li .case-m-box .case-m-img a:hover .case-txt { top: 0; opacity: 1; } .case-list ul li .case-m-box .case-m-tit { font-size: 15px; color: #000; line-height: 35px; height: 35px; overflow: hidden; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .case-list ul li .case-m-box .case-m-cont { font-size: 13px; color: #8f8f8f; line-height: 20px; height: 20px; overflow: hidden; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .case-list .add-2 { width: 138px; height: 35px; line-height: 35px; margin: 45px auto 70px auto; } .case-list .add-2 a { border: 1px solid #b0b0b0; display: block; color: #000; text-indent: 30px; text-decoration: none; font-size: 14px; background: url(../images/arrows-4.png) 97px center no-repeat; } .case-list .add-2:hover a { border: 1px solid #0086cd; background: #0086cd; text-indent: 35px; color: #fff; background: #0086cd url(../images/arrows-4-hover.png) 102px center no-repeat; } .case-1-box .case-list { margin: 0 0 40px 0; } @media screen and (max-width: 1490px) { .case .w .case-list ul { width: 868px; } .case .w .case-list { width: 843px; margin: 0 auto; } } @media screen and (max-width: 900px) { .case .w .case-list { width: 409px; } .case .w .case-list ul { width: 409px; } .case .w .case-list ul li .case-m-box { margin: 0; } } .main-box { overflow: hidden; } .page-box-max { text-align: center; } .page-box { padding: 20px 0 60px 0; text-align: center; display: inline-block; margin: 0 auto; } .page-box span { display: inline-block; margin-left: 10px; font-size: 16px; width: 11px; text-align: center; height: 26px; float: left; } .page-box .white-hover { display: none; } .page-box a.page-left:hover .white-hover { display: block; } .page-box a.page-right:hover .white-hover { display: block; } .page-box a { display: inline-block; margin-left: 6px; padding: 0 10px; height: 26px; font-size: 14px; border: 1px solid #d6d6d6; border-radius: 3px; font-family: "Microsoft YaHei", "氓戮庐猫陆炉茅鈥衡€γ┞烩€?, "Arial", "Helvetica Neue", "Helvetica", "Arial", "sans-serif"; line-height: 26px; background: #fff; text-decoration: none; color: #919191; position: relative; float: left; } .page-box a img { width: 24px; position: absolute; top: 2px; left: 1px; } .page-box a.page-next { width: 80px; } .page-box a.page-end { width: 59px; } .page-box a:hover { background: #0090ff; border: 1px solid #0090ff; color: #fff; } .page-box a.active { background: #0086cd; border: 1px solid #0086cd; color: #fff; } .page-box .page-next { font-family: "Microsoft YaHei", "寰蒋闆呴粦", "Arial", "Helvetica Neue", "Helvetica", "Arial", "sans-serif"; } #Pager_input { margin-left: 6px; padding: 0 10px; height: 26px; font-size: 14px; border: 1px solid #d6d6d6; border-radius: 3px; outline: none; float: left; } #Pager_btn { float: left; margin-left: 6px; padding: 0 10px; height: 28px; line-height: 28px; font-size: 14px; border: 1px solid #d6d6d6; border-radius: 3px; background: #fff; outline: none; } /*-------------------------------------------------------------------- [ 鍒嗛〉鏍峰紡 ] */ .pages { text-align: center; margin: 0 auto 40px auto; } .pages strong.focus, .pages a:hover { background-color: #0086cd; border-color: #0086cd; color: white; text-decoration: none; } /*.pages a:hover {color: #1c6ca2;background-color: #df4240;border-color: #df4240;}*/ .pages strong, .pages a { display: inline-block; height: 26px; line-height: 26px; border: solid 1px #d6d6d6; font-size: 12px; padding: 0 9px; background-color: #fff; margin: 0 3px; color: #919191; border-radius: 3px; font-family: Tahoma; } .pages strong { color: #919191; } .pages strong.noborder { border: 0; margin: 0; height: 20px; line-height: 20px; vertical-align: top; } .xxcs table { padding: 0px; border-spacing: 0px; height: 100%; width: 100%; border-collapse: collapse; color: #6b6b6b; word-break: keep-all; } .pro-dfdfdf { background: #e0e0e0; margin: 115px 0 0 0; padding: 21px 0; } .xxcs { max-width: 1280px; margin: 0 auto; background: #fff; } .xxcs tr th { margin: 0px; padding: 0px; text-align: center; background: #eeeeee; height: 50px; line-height: 50px; font-size: 14px; font-weight: normal; } .xxcs tr td { margin: 0px; padding: 0px; text-align: center; border-right: 1px solid #f3f3f3; border-bottom: 1px solid #f3f3f3; height: 50px; line-height: 50px; } .esp-1-1 { font-size: 40px; color: #000; padding: 95px 0 20px 0; } .esp-1-2 { max-width: 583px; margin: 0 auto; } .esp-1-2 .esp-1-div { position: relative; font-size: 16px; color: #000; line-height: 30px; padding: 0 0 0 22px; text-align: left; margin: 0 21px 0 0 ; float: left; } .esp-1-2 .esp-1-div b { display: block; position: absolute; top: 13px; left: 0; width: 5px; height: 5px; border-radius: 50%; overflow: hidden; background: #000; } .esp-1-2 .esp-1-div:nth-of-type(4) { margin: 0; } .esp-2 { height: 645px; background: url(../images/esp-2.jpg) center center no-repeat; } .esp-2 .j-4 { position: relative; height: 645px; } .esp-2 .j-4 .esp-2-1 { position: absolute; top: 180px; left: 50%; max-width: 213px; margin: 0 auto; margin: 0 0 0 -58px; } .esp-2 .j-4 .esp-2-2 { position: absolute; top: 283px; left: 50%; width: 50%; max-width: 600px; font-size: 16px; line-height: 27px; padding: 0 0 0 50px; color: #fff; text-align: left; } .esp-2 .j-4 .esp-2-3 { position: absolute; bottom: 0; left: 50%; max-width: 245px; margin: 0 0 0 -122px; } @media screen and (max-width: 1400px) { .esp-2 .j-4 .esp-2-2 { position: static; padding: 283px 0 0 0; left: 0; width: 100%; max-width: 800px; margin: 0 auto ; text-align: center; } } .esp-3 { padding: 0 0 100px 0; } .esp-3 .k-7-3 { max-width: 1280px; margin: 40px auto 0 auto; } .esp-3 .k-7-4 { left: 50%; transform: translateX(-50%); max-width: 550px; } .esp-4 .w-box .j-7-3 { font-size: 16px; max-width: 800px; } .esp-4 .w-box .ps-7-fl { padding: 51px 0 0 0; position: relative; margin: 0 auto; width: 100%; max-width: 817px; } .esp-4 .w-box .ps-7-fl .ps-7-fl-box { position: absolute; top: 55px; left: 5px; right: 5px; overflow: hidden; } .esp-4 .w-box .ps-7-fl .ps-7-fl-box ul { -moz-animation: ps-7-roll 7.5s linear infinite; -webkit-animation: ps-7-roll 7.5s linear infinite; animation: ps-7-roll 7.5s linear infinite; height: 40px; width: 1384px; } .esp-4 .w-box .ps-7-fl .ps-7-fl-box ul li { width: 692px; float: left; color: #fff; font-size: 16px; line-height: 40px; text-indent: 10px; } .esp-4 .w-box .ps-7-fl img { display: block; max-width: 100%; } .esp-5 { background: url(../images/esp-5.jpg) center top no-repeat; height: 639px; } .esp-5 .w-box .k-5-1 { padding: 346px 0 0 0; color: #fff; } .esp-5 .w-box .k-5-2 { color: #fff; font-size: 16px; } .esp-6 { background: url(../images/esp-8.jpg) center top no-repeat; height: 688px; } .esp-100 { background: url(../images/bzx.jpg) center top no-repeat; height: 688px; } .esp-7 { background: url(../images/esp-6.jpg) center top no-repeat; height: 604px; } .esp-7 .w-box .k-5-1 { padding: 346px 0 0 0; color: #fff; } .esp-7 .w-box .k-5-2 { color: #fff; font-size: 16px; } .esp-8 { background: url(../images/esp-7.jpg) center top no-repeat; height: 624px; } .esp-8 .kvm-5-1 { max-width: 1356px; margin: 40px auto 0 auto; } .ssp-1 .esp-1-2 { max-width: 418px; } .ssp-1 .esp-1-2 .esp-1-div:nth-of-type(3) { margin: 0; } .ssp-1 .k-1-4 { max-width: 741px; } .ssp-2 { background: url(../images/ssp-2.png) center top no-repeat; height: 650px; } .ssp-2 .w-box .j-7-3 { font-size: 16px; max-width: 800px; } .ssp-2 .w-box .ps-7-fl { padding: 51px 0 0 0; position: relative; margin: 0 auto; width: 100%; max-width: 817px; } .ssp-2 .w-box .ps-7-fl .ps-7-fl-box { position: absolute; top: 55px; left: 5px; right: 5px; overflow: hidden; } .ssp-2 .w-box .ps-7-fl .ps-7-fl-box ul { -moz-animation: ps-7-roll 7.5s linear infinite; -webkit-animation: ps-7-roll 7.5s linear infinite; animation: ps-7-roll 7.5s linear infinite; height: 40px; width: 1384px; } .ssp-2 .w-box .ps-7-fl .ps-7-fl-box ul li { width: 692px; float: left; color: #000; font-size: 17px; line-height: 40px; text-indent: 10px; } .ssp-2 .w-box .ps-7-fl img { display: block; max-width: 100%; } .ssp-3 { padding: 0 0 100px 0; background: url(../images/ssp-7.jpg) center top no-repeat; height: 922px; } .ssp-3 .k-7 .k-7-1 { color: #fff; } .ssp-3 .k-7 .k-7-2 { color: #fff; } .ssp-3 .k-7-3 { max-width: 1280px; margin: 40px auto 0 auto; } .ssp-3 .k-7-4 { left: 50%; transform: translateX(-50%); max-width: 550px; } .w-1 { width: 20%; } .w-2 { width: 11%; } .w-3 { width: 30%; } .w-4 { width: 12%; } .w-5 { width: 18.6%; } .w-6 { width: 49.5%; } .dvcp-1 { background: #e6e6e6; } .dvcp-1 .j-1 { max-width: 930px; } .dvcp-1 .j-1 .kvm-1-1 { /*padding: 100px 0 20px 0;*/ } .dvcp-1 .j-1 .j-1-2 { color: #0086cd; font-size: 24px; } .dvcp-1 .j-1 .dvcp-1-1 { font-size: 18px; color: #000; line-height: 40px; margin: 20px 0 0 0; } .dvcp-1 .j-1 .j-1-3 { margin: 30px auto; max-width: 527px; } .dvcp-2 { background: url(../images/dvcp-2.png) no-repeat; background-size: cover; } .dvcp-2 .j-3 .j-3-1 { color: #fff; } .dvcp-2 .j-3 .j-3-2 { color: #fff; padding: 20px 0; max-width: 520px; } .dvcp-2 .j-3 .e-2-box .ul-4 { margin: 70px auto 0 auto; } .dvcp-2 .j-3 .ul-4 li { width: 25%; } .dvcp-2 .j-3 .ul-4 li p { color: #fff; } .dvcp-2 .j-3 .ul-4 li .li-img { height: 120px; } .dvcp-2 .j-3 .ul-4 li:nth-of-type(1) .li-img { background-image: url(../images/dvcp-2-1.png); } .dvcp-2 .j-3 .ul-4 li:nth-of-type(2) .li-img { background-image: url(../images/dvcp-2-2.png); } .dvcp-2 .j-3 .ul-4 li:nth-of-type(3) .li-img { background-image: url(../images/dvcp-2-3.png); } .dvcp-2 .j-3 .ul-4 li:nth-of-type(4) .li-img { background-image: url(../images/dvcp-2-4.png); } .dvcp-2 .j-3 .ul-4 li p { font-size: 24px; } .dvcp-2 .j-3 .ul-4 li p.ul-4-p { font-size: 18px; } @media screen and (max-width: 600px) { .dvcp-2 .j-3 .ul-4 li { width: 50%; } .dvcp-2 .j-3 .ul-4 li p { font-size: 20px; } .dvcp-2 .j-3 .ul-4 li p.ul-4-p { font-size: 16px; } .dvcp-2 .j-3 .ul-4 li:nth-of-type(3) { clear: both; } } .dvcp-3 { background: url(../images/dvcp-3-bg.png) center center no-repeat; background-size: cover; } .dvcp-3 .k-7 .k-7-2 { padding: 20px 0 30px 0; } .dvcp-3 .k-7-3 { max-width: 937px; } .dvcp-4 .k-7 .k-7-2 { padding: 20px 0 30px 0; } .dvcp-4 .k-7-3 { max-width: 937px; } .dvcp-5 { background: url(../images/ssp-7.jpg) center top no-repeat; background-size: cover; } .dvcp-5 .j-7-1 { padding: 50px 0 0 0; } .dvcp-5 .j-7-3 { padding: 20px 0 0 0; } .dvcp-5 .k-2-1 li p { margin: 10px 0; } .dvcp-6 { background: url(../images/dvcp-6-1.png) center center no-repeat; background-size: cover; } .dvcp-6 .k-7 .k-7-1 { color: #fff; } .dvcp-6 .k-7 .k-7-2 { color: #fff; padding: 20px 0 30px 0; } .dvcp-6 .k-7-3 { max-width: 1062px; } .dvcp-7 .dvcp-7-ul { margin: 20px 0 0 0; padding: 0 0 70px 0; } .dvcp-7 .dvcp-7-ul li { float: left; width: 23.75%; margin: 0 0 0 1%; } .dvcp-7 .dvcp-7-ul li img { width: 100%; } .dvcp-7 .dvcp-7-ul li p { font-size: 20px; color: #000; line-height: 40px; } .dvcp-7 .dvcp-7-ul li:nth-of-type(4) { margin: 0 1% 0 1%; } @media screen and (max-width: 900px) { .dvcp-7 .dvcp-7-ul li { width: 48%; } } .led-1-box .k-1-8 { color: #000; font-size: 40px; line-height: 60px; padding: 70px 0 0 0; font-family: "榛戜綋"; } .led-1-box .esp-1-2 { padding: 40px 0 0 0; } .led-1-box .esp-1-2 .esp-1-div { width: 105px; font-size: 18px; } .led-2-box { background-image: url(../images/led-2-bg-1.png); } .led-2-box .k-7-1 { padding: 70px 0 0 0; line-height: 100px; } .led-2-box .k-7-3 { max-width: 1920px; margin: 50px auto 0 auto; } .led-3-box { background: #e3e3e3 url(../images/led-3-bg-1.png) left bottom repeat-x; } .led-3-box .k-7-1 { padding: 70px 0 0 0; line-height: 100px; } .led-3-box .k-7-2 { max-width: 100%; } .led-3-box .k-7-3 { max-width: 1131px; margin: 50px auto 0 auto; } .led-4-box { background-image: url(../images/led-2-bg-1.png); } .led-4-box .k-7-1 { padding: 70px 0 0 0; line-height: 100px; } .led-4-box .k-7-3 { max-width: 1487px; margin: 50px auto 0 auto; } .led-4-box .k-7-3 { margin: 80px auto 0 auto; } .led-5-box { background: #7f7f7f; } .led-5-box .j-4 .e-5-1 { max-width: 1226px; } .led-6-box { background: url(../images/led-6-bg.jpg) center top no-repeat; } .led-7-box .j-3-2 { padding: 20px 0; max-width: 800px; } .led-7-box .kvm-6-1 { margin: 30px auto 0 auto; max-width: 1454px; } .led-8-box { background: #f6f6f6; padding-bottom: 100px; } .led-8-box .j-3-1 { padding: 100px 0 0 0; } .led-8-box .j-3-2 { padding: 20px 0; max-width: 800px; } .led-8-box .kvm-6-1 { margin: 40px auto 0 auto; max-width: 1627px; } .led-9-box { background: url(../images/led-9-bg.jpg) center center no-repeat; } .led-9-box .j-4 .esp-2-2 { max-width: 630px; } .led-9-box .j-4 .esp-2-1 { margin: 0 0 0 -46px; } .s-cont table { border-collapse: collapse; display: table; } .s-cont td, .s-cont th { text-align: center; border: 2px solid #676767; } .us-1 .esp-1-1 { font-size: 40px; color: #000; } .us-1 .us-1-tit { font-size: 20px; color: #0086cd; } .us-1 .us-1-des { font-size: 17px; color: #353535; padding-top: 20px; text-align: center; } .us-2 { background: url(../images/us-2.png) center center no-repeat; height: 654px; } .us-2 .k-6-1 { font-size: 40px; } .us-2 .k-6-2 { font-size: 16px; } .us-3 { overflow: hidden; background: url(../images/us-3.png) center center no-repeat; height: 654px; } .us-3 .k-6 { background: rgba(0, 0, 0, 0.5); transform: translateY(-50%) translateX(-50%); width: 100%; left: 50%; max-width: 760px; padding: 30px 20px 40px 20px; } .us-3 .k-6 .k-6-1 { font-size: 40px; } .us-3 .k-6 .k-6-2 { font-size: 16px; } .us-4 { height: 692px; background: url(../images/us-4.png) center center no-repeat; } .us-4 .j-6-1 { font-size: 40px; color: #06132a; padding: 26px 0 19px 0; } .us-4 .j-6-2 { width: 100%; max-width: 860px; font-size: 16px; color: #06132a; margin: 0 auto; text-align: center; line-height: 25px; } .us-5 { height: 690px; background: url(../images/us-5.png) center center no-repeat; } .us-5 .us-5-1 { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); width: 100%; max-width: 775px; } .us-5 .us-5-1 .us-5-1-1 { font-size: 40px; color: #fff; line-height: 90px; } .us-5 .us-5-1 .us-5-1-2 { line-height: 27px; color: #fff; font-size: 16px; } .us-5 .j-8-3 { bottom: 36px; background: url(../images/us-5-1-1.png) center top no-repeat; padding-top: 69px; } .us-5 .j-8-4 { bottom: 36px; background: url(../images/us-5-1-2.png) center top no-repeat; padding-top: 69px; } .us-6 { background: url(../images/us-6.png) center top no-repeat; height: 580px; position: relative; } .us-6 .j-7-1 { color: #06132a; } .us-6 .w-box .j-7-3 { color: #06132a; font-size: 16px; max-width: 840px; } .us-7 { background: url(../images/us-7.png) center top no-repeat; height: 532px; } .us-7 .j-7-1 { color: #06132a; } .us-7 .w-box .j-7-3 { color: #06132a; font-size: 16px; } .us-8 { background: url(../images/us-8.png) center top no-repeat; height: 659px; position: relative; overflow: hidden; } .us-8 .j-7-1 { color: #06132a; padding: 26px 0 22px 0; } .us-8 .w-box .j-7-3 { color: #06132a; font-size: 16px; } .us-8-m { position: absolute; bottom: -11px; left: 50%; width: 804px; height: 475px; margin-left: -402px; background: url(../images/us-8-1.png) no-repeat; } .us-8-m .us-8-m-1 { position: absolute; top: 23px; left: 23px; width: 751px; height: 367px; border: 6px solid #000; } .us-8-m .us-8-m-1 div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: all 0.3s ease; } .us-8-m .us-8-m-1 div.active { opacity: 1; } .us-8-m .us-8-m-1 div:nth-of-type(1) { background: url(../images/us-8-2.png) no-repeat; } .us-8-m .us-8-m-1 div:nth-of-type(2) { background: url(../images/us-8-3.png) no-repeat; } .us-8-m .us-8-m-t { position: absolute; top: 165px; left: 202px; width: 399px; height: 232px; } .us-8-m .us-8-m-t .bg { opacity: 0; position: absolute; top: 0; left: 0; cursor: pointer; } .us-8-m .us-8-m-t .bg.active { opacity: 1; } .us-8-m .us-8-m-t .bg:nth-of-type(1) { width: 100%; height: 100%; background: url(../images/us-8-1-1.png) no-repeat; } .us-8-m .us-8-m-t .bg:nth-of-type(2) { width: 100%; height: 100%; background: url(../images/us-8-1-2.png) no-repeat; } .us-8-m .us-8-m-t .bg:nth-of-type(3) { width: 100%; height: 100%; background: url(../images/us-8-1-3.png) no-repeat; } .us-8-m .us-8-m-t .bg:nth-of-type(4) { width: 100%; height: 100%; background: url(../images/us-8-1-4.png) no-repeat; } .us-8-m .us-8-m-t .bg:nth-of-type(5) { width: 100%; height: 100%; background: url(../images/us-8-1-5.png) no-repeat; } .us-8-m .us-8-m-d { position: absolute; bottom: 145px; left: 201px; z-index: 10; } .us-8-m .us-8-m-d div { width: 400px; height: 23px; margin: 5px 0 0 0; } .us-9 { background: url(../images/us-9.png) center top no-repeat; height: 615px; } .us-9 .j-7-1 { color: #06132a; padding: 26px 0 22px 0; } .us-9 .w-box .j-7-3 { color: #06132a; font-size: 16px; } .us-10 { background: url(../images/us-10.png) center top no-repeat; height: 675px; } .us-10 .j-7-1 { color: #06132a; padding: 26px 0 22px 0; } .us-10 .w-box .j-7-3 { color: #06132a; font-size: 16px; max-width: 840px; } .us-6-d { position: absolute; top: 354px; left: 50%; width: 1300px; height: 83px; margin-left: -650px; z-index: 5; } .us-6-d div { position: absolute; width: 146px; height: 83px; background: #000; } .us-6-d div:nth-of-type(1) { left: 27px; } .us-6-d div:nth-of-type(2) { left: 196px; } .us-6-d div:nth-of-type(3) { left: 365px; } .us-6-d div:nth-of-type(4) { left: 773px; } .us-6-d div:nth-of-type(5) { left: 942px; } .us-6-d div:nth-of-type(6) { left: 1111px; } @keyframes leftAniamteTo { 0% { opacity: 1; } 10% { opacity: 0; } 80% { opacity: 0; } 90% { opacity: 1; } 100% { opacity: 1; } } @keyframes leftAniamteFrom { 0% { opacity: 0; } 15% { opacity: 0; } 25% { opacity: 1; } 80% { opacity: 1; } 90% { opacity: 0; } 100% { opacity: 0; } } @keyframes rightAniamteTo { 0% { opacity: 1; } 10% { opacity: 0; } 80% { opacity: 0; } 90% { opacity: 1; } 100% { opacity: 1; } } @keyframes rightAniamteFrom { 0% { opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 90% { opacity: 0; } 100% { opacity: 0; } } .us-6-b { position: absolute; top: 354px; left: 50%; width: 1300px; height: 83px; margin-left: -650px; z-index: 10; } .us-6-b div { position: absolute; width: 146px; height: 83px; } .us-6-b div:nth-of-type(1) { left: 27px; animation: leftAniamteTo 5s infinite 1s; background: url(../images/u-6-1-1.png) no-repeat; } .us-6-b div:nth-of-type(2) { left: 196px; animation: leftAniamteTo 5s infinite 2s; background: url(../images/u-6-1-2.png) no-repeat; } .us-6-b div:nth-of-type(3) { left: 365px; animation: leftAniamteTo 5s infinite 3s; background: url(../images/u-6-1-3.png) no-repeat; } .us-6-b div:nth-of-type(4) { left: 773px; background: url(../images/u-6-1-4.png) no-repeat; animation: rightAniamteTo 5s infinite; } .us-6-b div:nth-of-type(5) { left: 942px; background: url(../images/u-6-1-5.png) no-repeat; animation: rightAniamteTo 5s infinite; } .us-6-b div:nth-of-type(6) { left: 1111px; background: url(../images/u-6-1-6.png) no-repeat; animation: rightAniamteTo 5s infinite; } .us-6-2 { position: absolute; top: 354px; left: 50%; width: 1300px; height: 83px; margin-left: -650px; z-index: 10; } .us-6-2 div { position: absolute; width: 146px; height: 83px; opacity: 0; } .us-6-2 div:nth-of-type(1) { left: 27px; animation: leftAniamteFrom 5s infinite 1s; background: url(../images/us-6-2-1.png) no-repeat; } .us-6-2 div:nth-of-type(2) { animation: leftAniamteFrom 5s infinite 2s; left: 196px; background: url(../images/us-6-2-2.png) no-repeat; } .us-6-2 div:nth-of-type(3) { animation: leftAniamteFrom 5s infinite 3s; left: 365px; background: url(../images/us-6-2-3.png) no-repeat; } .us-6-2 div:nth-of-type(4) { left: 773px; animation: rightAniamteFrom 5s infinite; background: url(../images/us-6-2-4.png) no-repeat; } .us-6-2 div:nth-of-type(5) { left: 942px; animation: rightAniamteFrom 5s infinite; background: url(../images/us-6-2-5.png) no-repeat; } .us-6-2 div:nth-of-type(6) { left: 1111px; animation: rightAniamteFrom 5s infinite; background: url(../images/us-6-2-6.png) no-repeat; } .n-e-1 { background: url(../images/n-e-13.jpg) repeat-x; height: 717px; } .n-e-1 .esp-1-1 { padding: 36px 0 20px 0; } .e-2-box .ul-10 { max-width: 1200px; margin: 100px auto 0 auto; padding: 0 0 55px 0; } .e-2-box .ul-10 li { float: left; width: 20%; padding: 0 0 20px 0; text-align: center; } .e-2-box .ul-10 li .li-img { width: 100%; background-position: center center; background-repeat: no-repeat; height: 98px; } .e-2-box .ul-10 li:nth-of-type(1) .li-img { background-image: url(../images/e-5.png); } .e-2-box .ul-10 li:nth-of-type(2) .li-img { background-image: url(../images/e-4.png); } .e-2-box .ul-10 li:nth-of-type(3) .li-img { background-image: url(../images/n-e-2.jpg); } .e-2-box .ul-10 li:nth-of-type(4) .li-img { background-image: url(../images/n-e-4.jpg); } .e-2-box .ul-10 li:nth-of-type(5) .li-img { background-image: url(../images/n-e-3.jpg); } .e-2-box .ul-10 li p { line-height: 50px; font-size: 16px; color: #000; } .n-e-2-box { background: url(../images/n-e-1.jpg) center bottom no-repeat; } .n-e-3-box { height: 646px; background: url(../images/n-e-5.jpg) center center no-repeat; } .n-e-4-box { height: 650px; background: url(../images/n-e-15.jpg) center center no-repeat; } .n-e-4-box .j-4 .j-4-1 { margin: 28px 0 0 0; } .n-e-5-box { height: 656px; background: url(../images/n-e-7.jpg) center center no-repeat; } .n-e-5-box .j-4 .j-4-1 { margin: 28px 0 0 0; } .n-e-6-box { height: 656px; background: url(../images/n-e-16.jpg) center center no-repeat; } .n-e-6-box { height: 654px; background: url(../images/n-e-9.jpg) center center no-repeat; } .n-e-6-box .j-4 .j-4-1 { margin: 23px 0 0 0; } .n-e-7-box { height: 654px; background: url(../images/n-e-10.jpg) center center no-repeat; } .n-e-7-box .j-4 .j-4-1 { margin: 84px 0 0 0; } .n-e-8-box { height: 643px; background: url(../images/n-e-11.jpg) center center no-repeat; } .n-e-8-box .k-6 { max-width: 900px; background: rgba(0, 0, 0, 0.7); } .n-e-9-box { height: 650px; background: url(../images/n-e-12.jpg) center center no-repeat; } .n-e-9-box .j-4 .j-4-1 { margin: 100px 0 0 0; } .n-e-9-box .j-4 .j-4-2 { margin: 0 0 100px 0; } .ul-20 { width: 1300px; margin: 0 auto; } .ul-20 li { text-align: center; float: left; width: 16%; } .ul-20 li .ul-20-tit { font-size: 13px; color: #000; } .ul-20 li .ul-20-des { font-size: 13px; color: #000; margin: 0 10px; } .ul-20 li .ul-20-img { display: block; background-position: center center; background-repeat: no-repeat; height: 100px; } .ul-20 li:nth-of-type(1) .ul-20-img { background-image: url(../images/n-e-17.png); } .ul-20 li:nth-of-type(2) .ul-20-img { background-image: url(../images/n-e-18.png); } .ul-20 li:nth-of-type(3) .ul-20-img { background-image: url(../images/n-e-19.png); } .ul-20 li:nth-of-type(4) .ul-20-img { background-image: url(../images/n-e-20.png); } .ul-20 li:nth-of-type(5) .ul-20-img { background-image: url(../images/n-e-21.png); } .ul-20 li:nth-of-type(6) .ul-20-img { background-image: url(../images/n-e-22.png); } @media screen and (max-width: 1300px) { .ul-20 { width: 1000px; } .ul-20 li { width: 33.33%; } } .n-e-21-box { background-image: url(../images/n-e-16.jpg); height: 656px; } .n-e-4-6 { margin: 100px auto 100px auto; width: 100%; position: relative; width: 1127px; height: 275px; background: url(../images/n-e-6.png); } .n-e-4-7 { position: absolute; top: 0; left: 8px; width: 70px; height: 30px; line-height: 30px; text-align: center; color: #fff; background: #00000085; z-index: 10; } .n-e-4-8 { position: absolute; top: 0; left: 705px; width: 70px; height: 30px; line-height: 30px; text-align: center; color: #fff; background: #00000085; z-index: 10; } .n-e-4-9 { position: absolute; top: 7px; left: 9px; } .n-e-4-9 img { position: absolute; top: 0; left: 0; } @keyframes leftAniamteTo { 0% { opacity: 1; } 30% { opacity: 1; } 40% { opacity: 0; } 80% { opacity: 0; } 90% { opacity: 0; } 100% { opacity: 1; } } @keyframes leftAniamteFrom { 0% { opacity: 0; } 50% { opacity: 0; } 60% { opacity: 1; } 80% { opacity: 1; } 90% { opacity: 0; } 100% { opacity: 0; } } @keyframes rightAniamteTo { 0% { opacity: 1; } 20% { opacity: 1; } 30% { opacity: 0; } 80% { opacity: 0; } 90% { opacity: 1; } 100% { opacity: 1; } } @keyframes rightAniamteFrom { 0% { opacity: 0; } 20% { opacity: 0; } 30% { opacity: 1; } 80% { opacity: 1; } 90% { opacity: 0; } 100% { opacity: 0; } } .n-e-4-9 img:nth-of-type(1) { opacity: 1; animation: leftAniamteTo 5s infinite 1s; } .n-e-4-9 img:nth-of-type(2) { opacity: 0; animation: leftAniamteFrom 5s infinite 1s; } .n-e-4-10 { position: absolute; top: 0; left: 0; } .n-e-4-10 img { position: absolute; top: 7px; left: 708px; } .n-e-4-10 img:nth-of-type(1) { opacity: 1; animation: rightAniamteTo 5s infinite 1s; } .n-e-4-10 img:nth-of-type(2) { opacity: 0; animation: rightAniamteFrom 5s infinite 1s; } .ab-1-box .j-1 .j-1-2 { color: #0086cd; } .ab-1-box .j-1 .j-1-3 { max-width: 613px; } .ab-2-box { background: #fff; } .ab-2-box .sl-3-1 { max-width: 908px; } .ab-3-box { background: url(../images/AVC-NET-B3BG.png); } .ab-3-box .sl-3-1 { max-width: 1301px; } .ab-4-box { height: 646px; background: url(../images/AVC-NET-B4BG.png) center center no-repeat; } .ab-5-box { background: #fff; } .ab-5-box .sl-3-1 { max-width: 1137px; } .ab-6-box { padding: 100px 0 55px 0; background: url(../images/AVC-NET-BBG-3.jpg) center center no-repeat; } .ab-6-box .sl-3-1 { max-width: 1013px; } .ab-7-box { background: url(../images/AVC-NET-7.png) center center no-repeat; } .ab-7-box .sl-3-1 { max-width: 1151px; } .ab-8-box { background: #fff; } .ab-8-box .sl-3-1 { max-width: 490px; } .ab-9-box { background: #fff; } .ab-9-box .sl-3-1 { max-width: 1048px; } .un-box .un-1-box { background: url(../images/un-1.jpg) center top no-repeat; height: 740px; overflow: hidden; } .un-box .un-1-box .un-1-min { width: 100%; max-width: 1245px; height: 740px; margin: 0 auto; position: relative; } .un-box .un-1-box .un-1-min .un-img { position: absolute; bottom: 0; left: 0; width: 56%; } .un-box .un-1-box .un-1-min .un-img img { width: 100%; } .un-box .un-1-box .un-1-min .un-1-2 { float: right; width: 420px; } .un-box .un-1-box .un-1-min .un-1-2 .un-1-2-1 { margin-top: 197px; margin-bottom: 25px; } .un-box .un-1-box .un-1-min .un-1-2 .un-1-2-2 { line-height: 93px; border-top: 1px solid #4ea0e4; border-bottom: 1px solid #4ea0e4; font-size: 60px; color: #fff; } .un-box .un-1-box .un-1-min .un-1-2 .un-1-2-3 { margin-top: 10px; line-height: 45px; font-size: 30px; color: #fff; } .un-box .un-2-box { background: #f5f5f5 url(../images/un-2.png) center 106px no-repeat; height: 800px; } .un-box .un-2-box .un-2-min { width: 100%; max-width: 1205px; margin: 0 auto; } .un-box .un-2-box .un-2-min .un-2-title { text-align: center; font-size: 40px; color: #000; line-height: 60px; padding-top: 83px; } .un-box .un-2-box .un-2-min .un-2-des { line-height: 60px; font-size: 24px; color: #000; text-align: center; } .un-box .un-2-box .un-2-min .un-2-3 { margin-top: 10px; } .un-box .un-2-box .un-2-min .un-2-3 .un-2-3-l { float: left; position: relative; } .un-box .un-2-box .un-2-min .un-2-3 .un-2-3-l .un-2-content { top: 330px; } .un-box .un-2-box .un-2-min .un-2-3 .un-2-3-r { float: right; position: relative; padding: 82px 0 0 0; } .un-box .un-2-box .un-2-min .un-2-3 .un-2-3-r .un-img-box { position: relative; } .un-box .un-2-box .un-2-min .un-2-3 .un-2-3-r .un-2-content { top: 0; } .un-box .un-2-box .un-2-min .un-2-3 .un-img-box { width: 587px; height: 377px; } .un-box .un-2-box .un-2-min .un-2-3 .un-img-box img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; transition: opacity .8s; } .un-box .un-2-box .un-2-min .un-2-3 .un-img-box:hover .un-img-1 { opacity: 0; } .un-box .un-2-box .un-2-min .un-2-3 .un-img-box:hover .un-img-2 { opacity: 1; } .un-box .un-2-box .un-2-min .un-2-3 .un-img-box .un-img-2 { opacity: 0; } .un-box .un-2-box .un-2-min .un-2-3 .un-2-content { position: absolute; left: 50%; transform: translateX(-50%); width: 100%; max-width: 317px; padding: 27px 70px 27px 130px; background: #fff; box-shadow: 0px 5px 12px #ccc; } .un-box .un-2-box .un-2-min .un-2-3 .un-2-content p { position: absolute; top: 50%; left: 54px; transform: translateY(-50%); border-bottom: 4px solid #65afeb; font-size: 40px; color: #aaaaaa; } .un-box .un-2-box .un-2-min .un-2-3 .un-2-content .un-2-4 { font-size: 24px; color: #555555; line-height: 30px; } .un-box .un-2-box .un-2-min .un-2-3 .un-2-content .un-2-5 { margin-top: 5px; font-size: 14px; color: #555555; line-height: 20px; } .un-box .un-3-box { background: #f5f5f5 url(../images/un-3.jpg) center top no-repeat; height: 900px; } .un-box .un-3-box .un-3-min { width: 100%; max-width: 880px; margin: 0 auto; } .un-box .un-3-box .un-3-min .un-3-tit { font-size: 40px; color: #fff; line-height: 50px; text-align: center; padding-top: 122px; } .un-box .un-3-box .un-3-min .un-3-des { margin-top: 15px; line-height: 40px; font-size: 24px; color: #fff; text-align: center; } .un-box .un-4-box { background: #f5f5f5 url(../images/un-4.jpg) center top no-repeat; height: 869px; overflow: hidden; } .un-box .un-4-box .un-4-min { height: 869px; position: relative; width: 100%; max-width: 1570px; margin: 0 auto; } .un-box .un-4-box .un-4-min .un-4-tit { font-size: 40px; color: #000000; line-height: 50px; text-align: center; padding-top: 104px; } .un-box .un-4-box .un-4-min .un-4-des { margin-top: 10px; line-height: 40px; font-size: 24px; color: #000000; text-align: center; width: 100%; } .un-box .un-4-box .un-4-min .un-4-3 { position: absolute; bottom: 0; left: 0; right: 0; } .un-box .un-4-box .un-4-min .un-4-3 img { vertical-align: top; } .un-box .un-4-box .un-4-min .un-4-3 .un-4-3-l { position: absolute; bottom: 0; left: 0; z-index: 2; } .un-box .un-4-box .un-4-min .un-4-3 .un-4-3-r { position: absolute; bottom: 0; right: 0; z-index: 1; } .un-box .un-5-box { background: #f5f5f5 url(../images/un-5.jpg) center top no-repeat; } .un-box .un-5-box .un-5-min { height: 749px; width: 100%; max-width: 1260px; margin: 0 auto; } .un-box .un-5-box .un-5-min .un-5-l { padding-top: 153px; width: 410px; } .un-box .un-5-box .un-5-min .un-5-l .un-5-tit { line-height: 90px; color: #2e0d0d; font-size: 40px; } .un-box .un-5-box .un-5-min .un-5-l .un-5-des { font-size: 24px; line-height: 40px; color: #2e0d0d; } .un-box .un-5-box .un-5-min .un-5-l .un-5-list { margin-top: 20px; } .un-box .un-5-box .un-5-min .un-5-l .un-5-list .un-5-one { float: left; text-align: center; } .un-box .un-5-box .un-5-min .un-5-l .un-5-list .un-5-one:nth-of-type(2) { margin: 0 72px; } .un-box .un-5-box .un-5-min .un-5-l .un-5-list .un-5-one p { line-height: 25px; font-size: 16px; color: #000000; } .un-box .un-6-box { background: #f5f5f5 url(../images/un-6.jpg) center top no-repeat; height: 900px; } .un-box .un-6-box .un-6-min { width: 100%; max-width: 880px; margin: 0 auto; } .un-box .un-6-box .un-6-min .un-6-tit { font-size: 40px; color: #fff; line-height: 50px; text-align: center; padding-top: 110px; } .un-box .un-6-box .un-6-min .un-6-des { margin-top: 20px; line-height: 40px; font-size: 24px; color: #fff; text-align: center; } .un-box .un-7-box { background: #f5f5f5 url(../images/un-7.jpg) center top no-repeat; height: 869px; } .un-box .un-7-box .un-7-min { width: 100%; max-width: 869px; margin: 0 auto; } .un-box .un-7-box .un-7-min .un-7-tit { font-size: 40px; color: #000; line-height: 50px; text-align: center; padding-top: 100px; } .un-box .un-7-box .un-7-min .un-7-des { margin-top: 20px; line-height: 40px; font-size: 24px; color: #000; text-align: center; } .un-box .un-8-box { height: auto; overflow: hidden; } .un-box .un-8-box .un-8-img { width: 100%; max-width: 1413px; margin: 10px auto 0 auto; } @media screen and (max-width: 1235px) { .un-box .un-2-box { height: auto; } .un-box .un-2-box .un-2-min .un-2-3 .un-2-3-l { float: none; width: 587px; margin: 0 auto; } .un-box .un-2-box .un-2-min .un-2-3 .un-2-3-r { float: none; width: 587px; margin: 120px auto 0 auto; padding-bottom: 120px; } } .un-m { display: none; } .un-m img { width: 100%; vertical-align: top; } @media screen and (max-width: 853px) { .un-box .un-1-box { padding: 0; } .un-box .un-1-box { background: url(../images/un-m-2-1.jpg) center top no-repeat; } /* .un-box .un-2-box .un-2-min .un-2-3 .un-img-box .un-img-1 { display: none; } .un-box .un-1-box,.un-box .un-3-box,.un-box .un-4-box,.un-box .un-5-box,.un-box .un-6-box,.un-box .un-7-box,.un-box .un-8-box{ display: none; } */ .un-box .un-m { display: block; } .un-box .un-1-box .un-1-min .un-1-2 { width: auto; max-width: 436px; margin: 0 50px; float: none; } .un-box .un-2-box .un-2-min .un-2-3 .un-2-3-l .un-2-content { max-width: 375px; } .un-box .un-1-box .un-1-min .un-1-2 .un-1-2-1 { margin-top: 108px; } .un-box .un-1-box .un-1-min .un-1-2 .un-1-2-2 { line-height: 45px; } .un-box .un-1-box .un-1-min .un-1-2 { overflow: hidden; } .un-box .un-1-box .un-1-min .un-img { left: 50%; transform: translateX(-50%); } .un-box .un-3-box { background: url(../images/un-m-2-3.jpg) center top no-repeat; position: relative; padding: 0; } .un-box .un-1-box .un-1-min .un-1-2 .un-1-2-1 { margin-top: 15%; margin-bottom: 2%; } .un-box .un-1-box .un-1-min { position: absolute; top: 0; } .un-box .un-1-box .un-1-min .un-img { display: none; } .un-box .un-1-box { height: auto; } .un-box .un-3-box { height: auto; background: none; } .un-box .un-3-box .un-3-min { position: absolute; top: 0; } .un-box .un-3-box .un-3-min .un-3-tit { padding: 0; margin: 16% 15% 0 15%; font-size: 16px; } .un-box .un-1-box .un-1-min .un-1-2 .un-1-2-2 { font-size: 30px; font-weight: bold; } .un-box .un-1-box .un-1-min .un-1-2 .un-1-2-3 { font-size: 14px; line-height: 20px; } .un-box .un-2-box .un-2-min .un-2-title { font-size: 18px; font-weight: bold; line-height: 45px; } .un-box .un-2-box .un-2-min .un-2-des { margin: 15px 0 0 0; font-size: 14px; line-height: 20px; } .un-box .un-3-box .un-3-min .un-3-tit { font-size: 18px; font-weight: bold; line-height: 35px; } .un-box .un-3-box .un-3-min .un-3-des { margin: 15px 2% 0 2%; font-size: 14px; line-height: 20px; } .un-box .un-4-box .un-4-min .un-4-des { margin: 15px 0 0 0; font-size: 16px; line-height: 20px; } .un-box .un-5-box .un-5-min .un-5-l .un-5-tit { font-size: 18px; font-weight: bold; line-height: 45px; } .un-box .un-5-box .un-5-min .un-5-l { padding-top: 122px; } .un-box .un-5-box .un-5-min .un-5-l .un-5-des { margin: 15px 0 0 0; font-size: 14px; line-height: 20px; } .un-box .un-6-box .un-6-min .un-6-tit { font-size: 18px; font-weight: bold; line-height: 30px; } .un-box .un-6-box .un-6-min .un-6-des { margin: 15px 0 0 0; font-size: 14px; line-height: 25px; } .un-box .un-7-box .un-7-min .un-7-tit { font-size: 18px; font-weight: bold; line-height: 30px; } .un-box .un-7-box .un-7-min .un-7-des { margin: 15px 0 0 0; font-size: 14px; line-height: 20px; } .un-box .un-2-box .un-2-min .un-2-3 .un-img-box { width: 100%; height: auto; } .un-box .un-2-box .un-2-min .un-2-3 .un-2-3-l { width: 100%; padding: 0 0 15px 0; } .un-box .un-2-box .un-2-min .un-2-3 .un-2-3-r { width: 100%; margin: 0 auto; padding: 0 0 15px 0; } .un-box .un-2-box .un-2-min .un-2-3 .un-2-3-l .un-2-content { position: static; transform: translateX(0); left: 0; top: 0; } .un-box .un-2-box .un-2-min .un-2-3 .un-2-3-r .un-2-content { position: static; transform: translateX(0); left: 0; top: 0; max-width: 375px;; } .un-box .un-2-box .un-2-min .un-2-3 .un-2-content p { /* position: static; */ left: 20px; } .un-box .un-2-box .un-2-min .un-2-3 .un-2-content .un-2-5 { margin: 0 15px 0 90px; font-size: 12px; } .un-box .un-2-box .un-2-min .un-2-3 .un-2-content .un-2-4 { margin: 0 15px 0 90px; font-size: 18px; font-weight: bold; } .un-box .un-2-box .un-2-min .un-2-3 .un-2-content { width: auto; padding: 27px 0px 27px 0; } .un-box .un-2-box .un-2-min .un-2-3 .un-img-box img { position: static; width: 100%; } .un-box .un-2-box .un-2-min .un-2-3 .un-img-box .un-img-2 { opacity: 1; } .un-box .un-5-box .un-5-min { text-align: center; } .un-box .un-5-box .un-5-min .un-5-l { width: auto; } .un-box .un-5-box .un-5-min .un-5-l .un-5-list { width: 363px; margin: 20px auto; } .un-box .un-4-box { padding: 0; height: auto; background: none; position: relative; } .un-box .un-4-box .un-4-min { position: absolute; top: 0; } .un-box .un-4-box .un-4-min .un-4-tit { padding-top: 0; margin-top: 10%; font-size: 18px; font-weight: bold; } .un-box .un-4-box .un-4-min .un-4-des { margin: 2%; width: auto; font-size: 14px; } .un-box .un-5-box { padding: 0; position: relative; } .un-box .un-5-box .un-5-min { position: absolute; top: 0; } .un-box .un-5-box .un-5-min .un-5-l { padding: 0; margin-top: 5%; } .un-box .un-5-box .un-5-min .un-5-l .un-5-tit { line-height: 25px; } .un-box .un-5-box .un-5-min .un-5-l .un-5-des { font-size: 14px; } .un-box .un-6-box { height: auto; padding: 0; } .un-box .un-6-box .un-6-min{ position: absolute; } .un-box .un-6-box .un-6-min .un-6-tit { padding: 0; margin: 10% 15% 0 15%; } .un-box .un-6-box .un-6-min .un-6-des { font-size: 14px; margin: 0 2%; } .un-box .un-7-box { height: auto; padding: 0; position: relative; } .un-box .un-7-box .un-7-min { position: absolute; top: 0; } .un-box .un-7-box .un-7-min .un-7-tit { padding: 0; margin: 13% 0 0 0; } .un-box .un-8-box { padding: 0; background: none; position: relative; } .un-box .un-8-box .un-2-min { position: absolute; top: 0; } .un-box .un-8-box .un-2-min .un-2-title { padding: 0; margin: 11% 10% 0 10% ; font-size: 18px; font-weight: bold; } .un-box .un-8-box .un-8-img { display: none; } .un-box .un-4-box .un-4-min .un-4-3{ display: none; } .un-box .un-2-box .un-2-min .un-2-3 .un-img-box .un-img-1 { display: none; } .un-box .un-1-box .un-1-min .un-1-2 .un-1-2-1 img { width: 40%; } .un-box .un-5-box .un-5-min .un-5-l .un-5-list .un-5-one p { font-size: 12px; line-height: 20px; } .un-box .un-5-box .un-5-min .un-5-l .un-5-list .un-5-one img { width: 50%; } } @media screen and (max-width: 635px) { /* .un-box .un-1-box .un-1-min .un-1-2 .un-1-2-2 { font-size: 30px; } .un-box .un-2-box .un-2-min .un-2-title { font-size: 25px; } .un-box .un-3-box .un-3-min .un-3-tit { font-size: 15px; } .un-box .un-6-box .un-6-min .un-6-tit { font-size: 18px; } .un-box .un-2-box .un-2-min .un-2-title { font-size: 20px; } */ .un-box .un-5-box .un-5-min .un-5-l .un-5-des { font-size: 12px; } } .green-box .green-10 .kvm-5-1 { margin: 50px auto; } .green-box .green-3-box .kvm-5-1 { margin: 50px auto; } .green-box .j-1-box { padding: 0; height: 720px; background: #ededed url('../images/blue-1-1.jpg') center 0 no-repeat; } .green-box .j-1-box .j-1 { padding: 108px 0 0 0; } .green-box .j-1-box .j-1 .kvm-1-1 { font-size: 34px; padding-bottom: 5px; } .green-box .j-1-box .j-1 .j-1-2 { letter-spacing: 9px; font-size: 18px; color: #353535; } .green-box .green-3-box .j-3 { max-width: 905px; } .green-box .green-3-box .j-3-2 { font-size: 16px; max-width: 905px; } .green-box .green-2-box { position: relative; height: 653px; overflow: hidden; } .green-box .green-2-box .list-box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .green-box .green-2-box .list-box .one-box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 0; transition: .3s all; } .green-box .green-2-box .list-box .one-box.active { opacity: 1; } .green-box .green-2-box .list-box .one-box:nth-of-type(1) { background: url(../images/blue-2-1.png) center top no-repeat; } .green-box .green-2-box .list-box .one-box:nth-of-type(2) { background: url(../images/blue-2-2.jpg) center top no-repeat; } .green-box .green-2-box .list-box .one-box:nth-of-type(3) { background: url(../images/blue-2-3.jpg) center top no-repeat; } .green-box .green-2-box .list-box .one-box:nth-of-type(4) { background: url(../images/blue-2-4.jpg) center top no-repeat; } .green-box .green-2-box .list-box .one-box:nth-of-type(5) { background: url(../images/blue-2-5.jpg) center top no-repeat; } .green-box .green-2-box .list-box .one-box .text-box { padding: 200px 0 0 0; margin: 0 auto 0 auto; text-align: center; max-width: 900px; } .green-box .green-2-box .list-box .one-box .text-box .g-t-box { color: #fff; font-size: 40px; } .green-box .green-2-box .list-box .one-box .text-box .g-d-box { margin: 50px 0 0 0; font-size: 16px; line-height: 25px; color: #fff; } .green-box .green-2-box .btn-box { position: absolute; left: 50%; transform: translate(-50%, 0); bottom: 50px; z-index: 2; text-align: center; width: 550px; } .green-box .green-2-box .btn-box a { color: #fff; background: rgba(0, 0, 0, 0.2); display: inline-block; vertical-align: middle; width: 110px; height: 50px; line-height: 50px; text-decoration: none; text-align: center; transition: .3s all; } .green-box .green-2-box .btn-box a:hover, .green-box .green-2-box .btn-box a.active { background: #0081c6; } .green-box .j-3 { max-width: 611px; margin: 0 auto; } .green-box .j-3 .kvm-5-1 { margin: 50px auto; } .green-box .green-4 { height: 991px; background: url(../images/blue-4-1.jpg) center bottom no-repeat; } .green-box .green-4 .j-3 { max-width: 1214px; } .green-box .green-4 .kvm-5-1 { margin: 77px auto; } .green-box .kvm-7-box { background: url(../images/blue-5.png) center center no-repeat; height: 654px; } .green-box .kvm-7-box .u-3 { max-width: 691px; margin: 0 auto; } .green-box .green-5 { overflow: hidden; background: url(../images/blue-6-1.jpg) repeat-x; } .green-box .green-5 .j-3 { padding-top: 100px; max-width: 1293px; } .green-box .green-5 .kvm-5-1 { margin: 77px auto; } .green-box .green-6 { max-height: 885px; overflow: hidden; background: url(../images/blue-8-b.jpg) center bottom no-repeat; } .green-box .green-6 .j-3 { max-width: 1234px; } .green-box .green-6 .kvm-5-1 { margin: 77px auto; } .green-box .green-7 { min-height: 882px; overflow: hidden; background: url(../images/blue-9.jpg) center bottom no-repeat; } .green-box .green-7 .t-box { font-size: 40px; color: #fff; text-align: center; padding: 100px 0 50px 0; line-height: 55px; } .green-box .green-7 .list-box { max-width: 1287px; margin: 0 auto; display: flex; flex-wrap: wrap; } .green-box .green-7 .list-box .one-box { position: relative; width: 239px; height: 236px; margin: 0 23px 20px 0; overflow: hidden; } .green-box .green-7 .list-box .one-box:nth-of-type(5n) { margin: 0 0 20px 0; } .green-box .green-7 .list-box .one-box:hover .top-box { opacity: 0; } .green-box .green-7 .list-box .one-box:hover .down-box { opacity: 1; } .green-box .green-7 .list-box .one-box .top-box { position: absolute; left: 0; right: 0; bottom: 0; transition: .3s all; height: 100%; background: rgba(255, 255, 255, 0.2); text-align: center; } .green-box .green-7 .list-box .one-box .top-box .img-box { line-height: 154px; } .green-box .green-7 .list-box .one-box .top-box .img-box img { vertical-align: middle; } .green-box .green-7 .list-box .one-box .top-box .t-t { line-height: 32px; font-size: 20px; color: #fff; } .green-box .green-7 .list-box .one-box .down-box { opacity: 0; transition: .3s all; position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: #0086cd; padding: 0 22px; } .green-box .green-7 .list-box .one-box .down-box .d-t { padding: 27px 0 10px 0; line-height: 30px; color: #fff; text-align: center; font-size: 20px; font-weight: bold; } .green-box .green-7 .list-box .one-box .down-box .d-s { color: #fff; line-height: 30px; font-size: 15px; word-break: break-all; white-space: pre-wrap; } @media screen and (max-width: 635px) { .green-box .green-2-box .list-box .one-box .text-box { padding: 10px 0 0 0; } } @media screen and (max-width: 1314px) { .green-box .green-7 .list-box { max-width: 1025px; } .green-box .green-7 .list-box .one-box { width: 186px; height: 282px; } .green-box .green-7 .list-box .one-box .down-box .d-t { font-size: 16px; } .green-box .green-7 .list-box .one-box .down-box .d-s { font-size: 14px; } } @media screen and (max-width: 1040px) { .green-box .green-7 { background: #ccc; } .green-box .green-7 .list-box { justify-content: center; } .green-box .green-7 .list-box .one-box:nth-of-type(5n) { margin: 0 23px 20px 0; } } @media screen and (max-width: 635px) { .green-box .green-2-box .btn-box { width: auto; } } .green-box .kvm-7-box .u-3 { position: relative; } .smart-1-box { background: url(../images/smart-1-bg-2.png) repeat-x; } .smart-1-box .k-1-8 { padding: 40px 0 0 0; } .smart-1-box .esp-1-2 .esp-1-div { width: 104px; font-size: 14px; } .smart-1-box .esp-1-2 { max-width: 870px; } .smart-1-box .k-1-4 { max-width: 1181px; } .smart-2-box { overflow: hidden; max-height: 718px; background: url(../images/smart-3-bg.png) center center no-repeat; } .smart-2-box .k-7-1 { padding-top: 57px; } .smart-2-box .k-7-3 { max-width: 1159px; } .smart-3-box { background: url(../images/smart-3-3-bg.png) center center no-repeat; height: 1013px; } .smart-3-box .j-7-1 { color: #000; } .smart-3-box .j-7-3 { color: #000; } .smart-3-box .j-7-4-round { width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; overflow: hidden; background: #0086cd; font-size: 30px; color: #fff; margin: 90px auto 0 auto; } .smart-3-box .k-2-1 li img { max-width: 584px; } .smart-3-box .k-2-1 li p { color: #000; margin: 20px 0 0 0; } .smart-3-box .smart-3-img { width: 100%; max-width: 1280px; margin: 55px auto 0 auto; } .smart-3-box .k-7-1 { position: absolute; bottom: 0; left: 0; right: 0; } .smart-3-box .k-7-1 li { float: left; width: 50%; } .smart-3-box .k-7-1 li p { font-size: 18px; line-height: 40px; color: #000; margin: 20px 0 0 0; } .smart-4-box { background: url(../images/smart-4-bg-1.png) center bottom no-repeat; height: 716px; } .smart-4-box .j-3-2 { max-width: 700px; } .smart-4-box .kvm-5-1 { max-width: ; } .smart-5-box { background: #e4e7ee; min-height: 990px; overflow: hidden; } .smart-5-box .j-3-2 { max-width: 660px; font-size: 16px; } .smart-5-box .kvm-5-1 { max-width: 1270px; width: 100%; } .smart-6-box { min-height: 857px; overflow: hidden; background: url(../images/smart-6-bg-2.png) center bottom no-repeat; } .smart-6-box.white-color .j-3-1 { color: #fff; } .smart-6-box.white-color .j-3-2 { color: #fff; } .smart-6-box .j-3-2 { max-width: 660px; font-size: 16px; } .smart-6-box .kvm-5-1 { margin-top: 50px; max-width: 1290px; width: 100%; } .smart-7-box { background: #f0f0f0; min-height: 916px; overflow: hidden; } .smart-7-box .j-3-2 { max-width: 900px; font-size: 16px; } .smart-7-box .kvm-5-1 { max-width: 1271px; width: 100%; } .smart-8-box { min-height: 857px; overflow: hidden; position: relative; background: url(../images/smart-8-bg-2.png) center bottom no-repeat; } .smart-8-box.white-color .j-3-1 { color: #fff; } .smart-8-box.white-color .j-3-2 { color: #fff; } .smart-8-box .j-3-2 { max-width: 660px; font-size: 16px; } .smart-8-box .kvm-5-1 { margin-top: 130px; max-width: 100%; } .smart-8-box .list-3 { display: flex; justify-content: space-between; max-width: 1418px; margin: 150px auto 0 auto; } .smart-8-box .list-3 .one p { color: #fff; background: #0086cd; width: 130px; height: 55px; line-height: 55px; text-align: center; margin: 20px 0 0 0; } .smart-9-box { background: url(../images/smart-15-1.jpg) center top no-repeat; min-height: 733px; } .smart-9-box .j-3-2 { max-width: 700px; font-size: 16px; } .smart-9-box .list-3 { display: flex; justify-content: space-around; max-width: 1420px; margin: 55px auto 0 auto; } .smart-9-box .list-3 .one { width: 412px; } .smart-9-box .list-3 .one h3 { color: #353535; font-size: 30px; } .smart-9-box .list-3 .one p { margin: 10px 0 0 0; color: #353535; font-size: 13px; line-height: 25px; } .smart-10-box { min-height: 762px; overflow: hidden; background: url(../images/smart-10-bg.jpg) center bottom no-repeat; } .smart-10-box .t-box { font-size: 40px; color: #fff; text-align: center; padding: 100px 0 50px 0; line-height: 55px; } .smart-10-box .list-box { max-width: 1315px; margin: 0 auto; display: flex; flex-wrap: wrap; } .smart-10-box .list-box .one-box { position: relative; width: 200px; height: 200px; margin: 0 23px 20px 0; overflow: hidden; } .smart-10-box .list-box .one-box:nth-of-type(6n) { margin: 0 0 20px 0; } .smart-10-box .list-box .one-box:hover .top-box { opacity: 0; } .smart-10-box .list-box .one-box:hover .down-box { opacity: 1; } .smart-10-box .list-box .one-box .top-box { position: absolute; left: 0; right: 0; bottom: 0; transition: .3s all; height: 100%; background: rgba(255, 255, 255, 0.2); text-align: center; } .smart-10-box .list-box .one-box .top-box .img-box { line-height: 154px; } .smart-10-box .list-box .one-box .top-box .img-box img { vertical-align: middle; } .smart-10-box .list-box .one-box .top-box .t-t { line-height: 32px; font-size: 20px; color: #fff; } .smart-10-box .list-box .one-box .down-box { opacity: 0; transition: .3s all; position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: #0086cd; padding: 0 22px; } .smart-10-box .list-box .one-box .down-box .d-t { padding: 16px 0 10px 0; line-height: 22px; color: #fff; text-align: center; font-size: 19px; font-weight: bold; } .smart-10-box .list-box .one-box .down-box .d-s { color: #fff; line-height: 25px; font-size: 14px; word-break: break-all; white-space: pre-wrap; } @media screen and (max-width: 1330px) { .smart-10-box .list-box { max-width: 1025px; } .smart-10-box .list-box .one-box { width: 151px; height: 282px; } .smart-10-box .list-box .one-box .down-box .d-t { font-size: 12px; } .smart-10-box .list-box .one-box .down-box .d-s { font-size: 12px; } } @media screen and (max-width: 1040px) { .smart-10-box { background: #ccc; } .smart-10-box .list-box { justify-content: center; } .smart-10-box .list-box .one-box:nth-of-type(6n) { margin: 0 23px 20px 0; } } .smart-9-box .one:nth-of-type(2) { margin: 0 0 0 18px; } @media screen and (max-width: 487px) { .smart-8-box { background: #ccc; } .smart-8-box .list-3 { display: flex; justify-content: flex-start; max-width: 1418px; align-content: flex-start; flex-wrap: wrap; margin: 30px auto 0 auto; } .smart-8-box .list-3 .one { width: 100%; text-align: center; } .smart-8-box .list-3 .one p { margin: 20px auto 20px auto; } .smart-5-box { min-height: auto; } .smart-7-box { min-height: auto; } .smart-9-box { background: #fff; } } @media screen and (max-width: 900px) { .smart-3-box .k-7-1 { position: static; } } .swiper-icon span { margin: 0 10px 0 0; width: 11px; height: 11px; } .smart-9-box .kvm-5-1 { max-width: 1420px; width: 100%; margin: 0 auto; } .avcnet-box .avcnet-1-box { background: url(../images/avcnet-1-bg.jpg) center top no-repeat; height: 726px; } .avcnet-box .avcnet-1-box .esp-1-1 { font-size: 40px; padding: 70px 0 0 0; } .avcnet-box .avcnet-1-box .us-1-des { font-size: 22px; margin: 0; } .avcnet-box .avcnet-1-box .us-1-tit { font-size: 15px; margin-top: 20px; } .avcnet-box .avcnet-1-box .k-1-4 { max-width: 1265px; margin-top: 10px auto 0 auto; } .avcnet-box .avcnet-2-box { background: url(../images/avcnet-2-bg.jpg) center top no-repeat; height: 904px; position: relative; } .avcnet-box .avcnet-2-box .slide-avcent-box { position: relative; height: 100%; overflow: hidden; } .avcnet-box .avcnet-2-box .slide-avcent-box .slide-btn { position: absolute; top: 50%; transform: translate(0, -50%); background-repeat: no-repeat; width: 87px; height: 125px; cursor: pointer; z-index: 12; } .avcnet-box .avcnet-2-box .slide-avcent-box .slide-btn.last-btn { left: 50px; background-image: url(../images/arrow-fl.png); } .avcnet-box .avcnet-2-box .slide-avcent-box .slide-btn.next-btn { right: 50px; background-image: url(../images/arrow-fr.png); } .avcnet-box .avcnet-2-box .slide-avcent-box .slide-content-box { text-align: center; height: 100%; } .avcnet-box .avcnet-2-box .slide-avcent-box .slide-content-box .img-box { height: 100%; vertical-align: middle; position: relative; overflow:hidden; } .avcnet-box .avcnet-2-box .slide-avcent-box .slide-content-box .img-box img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .avcnet-box .avcnet-2-box .m-box { width: 100%; max-width: 1277px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2; } .avcnet-box .avcnet-2-box .m-box .title-box { font-size: 40px; text-align: center; line-height: 115px; color: #fff; padding: 56px 0 0 0; } .avcnet-box .avcnet-2-box .m-box .list-box { display: flex; background: rgba(0, 0, 0, 0.5); line-height: 50px; margin-top: 450px; } .avcnet-box .avcnet-2-box .m-box .list-box .one-box { flex: 1; text-align: center; font-size: 15px; color: #fff; cursor: pointer; } .avcnet-box .avcnet-2-box .m-box .list-box .one-box:hover, .avcnet-box .avcnet-2-box .m-box .list-box .one-box.active { background: #0086cd; } .avcnet-box .avcnet-2-box .m-box .list-des-box .one-box { margin: 50px 0 0 0; color: #fff; line-height: 20px; text-align: center; font-size: 13px; } .avcnet-box .avcent-3-box { background: url(../images/avcent-3-2.png) center top no-repeat; min-height: 926px; } .avcnet-box .avcent-3-box .kvm-5-1 { margin-top: 50px; max-width: 1070px; } .avcnet-box .avcent-4-box { background: url(../images/avcent-4-1.png) center bottom no-repeat; min-height: auto; } .avcnet-box .avcent-4-box .j-3-2 { max-width: 500px; font-size: 16px; } .avcnet-box .avcent-4-box .kvm-5-1 { max-width: 1213px; } .avcnet-box .avcent-5-box { background: url(../images/avcent-5-1.png) center top no-repeat; min-height: auto; } .avcnet-box .avcent-5-box .j-3-1 { padding-top: 110px; } .avcnet-box .avcent-5-box .j-3-2 { font-size: 16px; } .avcnet-box .avcent-5-box .kvm-5-1 { margin-top: 50px; max-width: 1295px; } .avcnet-box .avcent-6-box { background: url(../images/avcent-6-1.png) center bottom no-repeat; min-height: 887px; } .avcnet-box .avcent-6-box .j-3-1 { padding: 126px 0 0 0; } .avcnet-box .avcent-6-box .j-3-2 { max-width: 900px; font-size: 16px; } .avcnet-box .avcent-6-box .kvm-5-1 { max-width: 1213px; } .avcnet-box .avcent-7-box { background: url(../images/avcent-7-1.png) center top no-repeat; min-height: 872px; } .avcnet-box .avcent-7-box .j-3-1 { padding-top: 79px; } .avcnet-box .avcent-7-box .j-3-2 { font-size: 16px; max-width: 584px; } .avcnet-box .avcent-7-box .kvm-5-1 { margin-top: 50px; max-width: 1153px; } .avcnet-box .avcent-8-box { background: url(../images/avcent-7-1.png) center top no-repeat; min-height: auto; } .avcnet-box .avcent-8-box .j-3-1 { padding-top: 79px; } .avcnet-box .avcent-8-box .j-3-2 { font-size: 16px; max-width: 600px; } .avcnet-box .avcent-8-box .kvm-5-1 { margin-top: 50px; max-width: 1153px; vertical-align:top; } .decs-box .decs-1-box { background: url(../images/decs-1-1-1.jpg) center top no-repeat; height: 736px; position: relative; } .decs-box .decs-1-box .t-box { position: absolute; left: 0; right: 0; bottom: 139px; font-size: 30px; text-align: center; color: #fff; font-weight: bold; letter-spacing: 4px; } .decs-box .decs-2-box { background: url(../images/decs-2.jpg) center top no-repeat; height: 817px; position: relative; } .decs-box .decs-2-box .m-box { max-width: 1200px; margin: 0 auto; } .decs-box .decs-2-box .m-box .m { padding: 0 0 0 55px; } .decs-box .decs-2-box .m-box .m .t-1-box { font-size: 32px; color: #fff; font-weight: bold; padding: 250px 0 0 0; line-height: 55px; } .decs-box .decs-2-box .m-box .m .t-2-box { font-size: 20px; color: #d1dbf1; line-height: 35px; } .decs-box .decs-2-box .m-box .m .t-2-box span { font-size: 20px; font-weight: bold; color: #d1dbf1; } .decs-box .decs-2-box .m-box .m .t-3-box { margin: 35px 0 0 0; } .decs-box .decs-2-box .m-box .m .t-3-box .one-box { display: inline-block; width: 76px; float: left; } .decs-box .decs-2-box .m-box .m .t-3-box:after { content:""; display: block; clear: both; } .decs-box .decs-2-box .m-box .m .t-3-box .one-box p { text-align: center; color: #fff; margin: 0 40px 0 0; } .decs-box .decs-2-box .m-box .m .t-3-box .one-box p:nth-of-type(1) { display: flex; line-height: 65px; align-items: center; height: 65px; } .decs-box .decs-2-box .m-box .m .t-3-box .one-box p:nth-of-type(1) img { vertical-align: middle; } .decs-box .decs-3-box { background: url(../images/decs-3-1.jpg) center top no-repeat; height: 874px; position: relative; } .decs-box .decs-3-box .m-box { max-width: 1440px; height: 100%; position: relative; margin: 0 auto; } .decs-box .decs-3-box .m-box .t-1-box { max-width: 850px; margin: 0 auto; font-size: 32px; color: #000000; font-weight: bold; text-align: center; padding: 78px 0 0 0; } .decs-box .decs-3-box .m-box .t-2-box { max-width: 863px; font-size: 20px; color: #555555; text-align: center; margin: 0 auto; padding: 15px 0 0 0; line-height: 30px; } .decs-box .decs-3-box .m-box .t-3-box { position: absolute; bottom: -3px; left: 0; width: 100%; } .decs-box .decs-3-box .m-box .t-3-box img { width: 100%; max-width: 1440px; margin: 0 auto; } .decs-box .decs-4-box { background: url(../images/decs-4-1.jpg) center top no-repeat; height: 863px; position: relative; } .decs-box .decs-4-box .m-box { max-width: 1440px; height: 100%; position: relative; margin: 0 auto; } .decs-box .decs-4-box .m-box .t-1-box { max-width: 850px; margin: 0 auto; font-size: 32px; color: #000000; font-weight: bold; text-align: center; padding: 78px 0 0 0; } .decs-box .decs-4-box .m-box .t-2-box { max-width: 850px; font-size: 20px; color: #555555; text-align: center; margin: 0 auto; padding: 15px 0 0 0; line-height: 30px; } .decs-box .decs-4-box .m-box .d-3-box { text-align: center; margin: 80px 0 0 0; } .decs-box .decs-4-box .m-box .d-3-box img { width: 100%; max-width: 1205px; margin: 0 auto; } .decs-box .decs-4-box .m-box .d-4-box { position: absolute; bottom: 35px; left: 0; right: 0; line-height: 30px; font-size: 14px; color: #555555; text-align: center; } .decs-box .decs-5-box { background: url(../images/decs-5-1.jpg) center top no-repeat; height: 745px; position: relative; } .decs-box .decs-5-box .m-box { max-width: 1440px; height: 100%; position: relative; margin: 0 auto; } .decs-box .decs-5-box .m-box .t-1-box { max-width: 850px; margin: 0 auto; font-size: 32px; color: #fff; font-weight: bold; text-align: center; padding: 78px 0 0 0; } .decs-box .decs-5-box .m-box .t-2-box { max-width: 890px; font-size: 20px; color: #c1c6d1; text-align: center; margin: 0 auto; padding: 15px 0 0 0; line-height: 30px; } .decs-box .decs-5-box .m-box .t-3-box { position: absolute; bottom: -3px; left: 0; width: 100%; text-align: center; } .decs-box .decs-5-box .m-box .t-3-box img { width: 100%; max-width: 1206px; margin: 0 auto; } .decs-box .decs-6-box { background: url(../images/decs-6-1.jpg) center top no-repeat; height: 721px; position: relative; } .decs-box .decs-6-box .m-box { max-width: 1200px; margin: 0 auto; } .decs-box .decs-6-box .m-box .m { padding: 0 0 0 30px; } .decs-box .decs-6-box .m-box .m .t-1-box { font-size: 32px; color: #000000; font-weight: bold; padding: 72px 0 0 0; line-height: 55px; } .decs-box .decs-6-box .m-box .m .t-2-box { margin: 10px 0 0 0; font-size: 20px; color: #555555; line-height: 35px; } .decs-box .decs-6-box .m-box .m .t-2-box span { font-size: 20px; font-weight: bold; color: #d1dbf1; } .decs-box .decs-6-box .m-box .m .t-3-box { display: flex; margin: 35px 0 0 0; } .decs-box .decs-6-box .m-box .m .t-3-box .one-box p { text-align: center; color: #fff; margin: 0 40px 0 0; } .decs-box .decs-6-box .m-box .m .t-3-box .one-box p:nth-of-type(1) { display: flex; line-height: 65px; align-items: center; height: 65px; } .decs-box .decs-6-box .m-box .m .t-3-box .one-box p:nth-of-type(1) img { vertical-align: middle; } .decs-box .decs-7-box { background: url(../images/decs-7-1.jpg) center top no-repeat; height: 959px; position: relative; } .decs-box .decs-7-box .m-box { max-width: 1440px; height: 100%; position: relative; margin: 0 auto; } .decs-box .decs-7-box .m-box .t-1-box { max-width: 850px; margin: 0 auto; font-size: 32px; color: #fff; font-weight: bold; text-align: center; padding: 72px 0 0 0; } .decs-box .decs-7-box .m-box .t-2-box { max-width: 870px; font-size: 20px; color: #c1c6d1; text-align: center; margin: 0 auto; padding: 15px 0 0 0; line-height: 30px; } .decs-box .decs-7-box .m-box .t-3-box { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; } .decs-box .decs-7-box .m-box .t-3-box img { width: 100%; max-width: 1200px; margin: 0 auto; vertical-align:middle; } .decs-box .decs-8-box { background: url(../images/decs-8-1.jpg) center top no-repeat; height: 955px; position: relative; } .decs-box .decs-8-box .m-box { max-width: 1440px; height: 100%; position: relative; margin: 0 auto; } .decs-box .decs-8-box .m-box .t-1-box { max-width: 850px; margin: 0 auto; font-size: 32px; color: #000; font-weight:bold; text-align: center; padding: 67px 0 0 0; } .decs-box .decs-8-box .m-box .t-2-box { max-width: 850px; font-size: 20px; color: #c1c6d1; text-align: center; margin: 0 auto; padding: 15px 0 0 0; line-height: 30px; } .decs-box .decs-8-box .m-box .t-3-box { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; } .decs-box .decs-8-box .m-box .t-3-box img { width: 100%; max-width: 1200px; margin: 0 auto; } .decs-box .decs-9-box { background: url(../images/decs-9-1.jpg) center top no-repeat; height: 796px; position: relative; } .decs-box .decs-9-box .m-box { max-width: 1200px; margin: 0 auto; } .decs-box .decs-9-box .m-box .m { padding: 0 0 0 55px; } .decs-box .decs-9-box .m-box .m .t-1-box { font-size: 32px; color: #fff; font-weight: bold; padding: 285px 0 0 0; line-height: 55px; } .decs-box .decs-9-box .m-box .m .t-2-box { font-size: 20px; color: #d1dbf1; line-height: 35px; width: 402px; margin: 15px 0 0 0; } .decs-box .decs-9-box .m-box .m .t-2-box span { font-size: 20px; font-weight: bold; color: #d1dbf1; } .decs-box .decs-10-box { background: url(../images/decs-10-1.jpg) center top no-repeat; height: 865px; position: relative; } .decs-box .decs-10-box .m-box { max-width: 1440px; height: 100%; position: relative; margin: 0 auto; } .decs-box .decs-10-box .m-box .t-1-box { max-width: 850px; margin: 0 auto; font-size: 32px; color: #000000; text-align: center; font-weight: bold; padding: 78px 0 0 0; } .decs-box .decs-10-box .m-box .t-2-box { max-width: 850px; font-size: 20px; color: #555555; text-align: center; margin: 0 auto; padding: 15px 0 0 0; line-height: 30px; } .decs-box .decs-10-box .m-box .t-3-box { position: absolute; bottom: 130px; left: 0; width: 100%; } .decs-box .decs-10-box .m-box .t-3-box img { width: 100%; max-width: 1322px; margin: 0 auto; } .decs-box .decs-11-box { background: url(../images/decs-11-1.jpg) center top no-repeat; height: 804px; position: relative; } .decs-box .decs-11-box .m-box { max-width: 1200px; margin: 0 auto; } .decs-box .decs-11-box .m-box .m { padding: 0 0 0 34px; } .decs-box .decs-11-box .m-box .m .t-1-box { font-size: 32px; color: #000; font-weight: bold; padding: 242px 0 0 0; line-height: 55px; } .decs-box .decs-11-box .m-box .m .t-2-box { font-size: 20px; color: #555555; line-height: 35px; } .decs-box .decs-11-box .m-box .m .t-2-box span { font-size: 20px; font-weight: bold; color: #d1dbf1; } .yth-box .k-7-box { background: url(../images/yth-1-2.png) center center no-repeat; overflow: hidden; } .yth-box .k-7-box .k-7-2 { font-size: 22px; } .yth-box .k-7-box .k-7-2 span { color: #0086cd; font-size: 22px; } .yth-box .k-7-box .k-7-3 { max-width: 803px; } .yth-box .dvcp-1 { background: url(../images/yth-2-1.png) center center no-repeat; height: 882px; padding: 0; } .yth-box .dvcp-1 .kvm-1-1 { padding: 100px 0 20px 0; } .yth-box .dvcp-1 .j-1-2 { color: #000000; font-size: 16px; max-width: 660px; text-align: center; margin: 0 auto; line-height: 25px; } .yth-box .yth-3 { background: none; padding: 0; } .yth-box .yth-3 .j-1-2 { color: #000000; font-size: 13px; max-width: 540px; text-align: center; margin: 0 auto; } .yth-box .yth-3 .k-7-1 { color: #232323; } .yth-box .yth-3 .k-7-2 { color: #232323; font-size: 16px; max-width: 100%; } .yth-box .yth-3 .k-7-3 { margin-top: 100px; max-width: 911px; } .yth-box .yth-4 { background: url(../images/yth-4-1.png) center center no-repeat; height: 776px; padding: 0; } .yth-box .yth-4 .j-1-2 { color: #000000; font-size: 13px; max-width: 540px; text-align: center; margin: 0 auto; } .yth-box .yth-4 .k-7-1 { color: #232323; } .yth-box .yth-4 .k-7-2 { color: #232323; font-size: 16px; max-width: 100%; } .yth-box .yth-4 .k-7-3 { margin-top: 100px; } .yth-box .yth-5-box { background: url(../images/yth-5-1.png) center center no-repeat; height: 655px; } .yth-box .yth-5-box .yth-5 { width: 100%; max-width: 1411px; margin: 0 auto; position: relative; height: 100%; } .yth-box .yth-5-box .yth-5 .yth-5-fl { position: absolute; bottom: -3px; left: 0; right: 640px; } .yth-box .yth-5-box .yth-5 .yth-5-fl img { width: 100%; } .yth-box .yth-5-box .yth-5 .yth-5-fr { position: absolute; right: 0; bottom: 140px; width: 640px; text-align: center; } .yth-box .yth-5-box .yth-5 .yth-5-fr .yth-5-title { color: #fff; font-size: 40px; } .yth-box .yth-5-box .yth-5 .yth-5-fr .yth-5-des { margin: 40px 0 0 0; font-size: 16px; color: #ffffff; line-height: 23px; } .yth-box .yth-6 { background: none; padding: 0; } .yth-box .yth-6 .j-1-2 { color: #000000; font-size: 13px; max-width: 540px; text-align: center; margin: 0 auto; } .yth-box .yth-6 .k-7-1 { color: #232323; } .yth-box .yth-6 .k-7-2 { color: #232323; font-size: 16px; max-width: 100%; } .yth-box .yth-6 .k-7-3 { max-width: 921px; margin: 80px auto 0 auto; } .yth-box .yth-7 { background: url(../images/yth-7-1.png) center center no-repeat; height: 1008px; padding: 0; } .yth-box .yth-7 .j-1-2 { color: #000000; font-size: 13px; max-width: 540px; text-align: center; margin: 0 auto; } .yth-box .yth-7 .k-7-1 { color: #232323; } .yth-box .yth-7 .k-7-2 { color: #232323; font-size: 16px; max-width: 100%; } .yth-box .yth-7 .k-7-3 { max-width: 748px; margin: 50px auto 0 auto; } .yth-box .yth-8 { background: url(../images/yth-8-1.png) center center no-repeat; height: 884px; overflow: hidden; } .yth-box .yth-8 .k-7-1 { margin-top: 500px; } .yth-box .yth-8 .k-7-2 { font-size: 16px; max-width: 100%; } .yth-box .yth-8 .k-7-2 span { color: #0086cd; font-size: 13px; } .yth-box .yth-8 .k-7-3 { max-width: 803px; } .yth-box .yth-9 { background: url(../images/yth-9-1.png) center center no-repeat; height: 882px; overflow: hidden; } .yth-box .yth-9 .k-7-1 { margin-top: 0; } .yth-box .yth-9 .k-7-2 { font-size: 16px; max-width: 100%; } .yth-box .yth-9 .k-7-2 span { color: #0086cd; font-size: 13px; } .yth-box .yth-9 .k-7-3 { max-width: 436px; margin-top: 200px; }