#newBridge { display:none!important; } .rel { position: relative; } .abs { position: absolute; } .fixed { position: fixed; } .bg { background-image: linear-gradient(90deg, #016cec 0%, #0237a5 100%), linear-gradient(#0033a0, #0033a0); background-blend-mode: normal, normal; } .font2 { font-family: "medium"; } .flex { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ } .flex-wrap { flex-flow: wrap; } .flex-between { -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inline-block { display: inline-block; } .block { display: block; } .hide { display: none; } .bold { font-weight: 700; } .txt-center { text-align: center; } .txt-left { text-align: left; } .txt-right { text-align: right; } .before { opacity: 0; visibility: hidden; } .after { opacity: 1; visibility: visible; } .font { font-family: Arial; } .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .upper { text-transform: uppercase; } .middle { vertical-align: middle; } .background { background-size: contain; background-repeat: no-repeat; background-position: center center; } @font-face { font-family: "icon"; src: url('iconfont.eot?t=1561461869476'); /* IE9 */ src: url('iconfont.eot?t=1561461869476#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAArkAAsAAAAAFLQAAAqUAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCGUAqWRJIhATYCJANoCzYABCAFhG0HgjkbkBEjETaMsgpE9hcJvCnWlcAUV5HAPJKSVpTBthejkNVyd+aFgzVBQHlVdXdGSWZm6dweJLzEJ6AX5F4/D8z846b9JFCsLVCsUGpq0/xkXupK52Fz2DwyNUHO4US0d+8KIABhE8bQVyxu1u0hTNU7pjz7y29dSjquQCANN37+fl/aBZLXZhpkRu3dF3l+nOk7mUUjOBhVW2mLq0G8IL5gvgbDmTlefIOYEzFpb4cAYOJHWUTT5m274ocH1QWajB01YhB+RwK8EF+B0OzGOdVQYiMehHKVvANs0P68KKCy8AMkfAW9U8fhzYbSUJN3VS10KfqqpSzOjwHvpwEUgLKAAZAx3HwRAjO0spoh5rU2+AQoSQb5uEKttK0jtFb76lidrDN0ri7SPfVxfUPf0v9yeuW8zb2fd9V1oYkV1zt2D6c3g6flggjKs7gVY1e2rfrfeBBDBLGE8SIeEwUh1AQRwoeHGwJQJLgjR6AlgQAYQHhBYxsAou5LRSJopFDEgBahiAAtQxELWiHhP7CBRAEigMQDEoCYgEQg0YBUICFAOSBxgCpAgoCaQPyAekA8gMZADEAPIF5ATyA+wHEgEnADiAW4BZ26wj+EIhJyeiFCgzdAEgFvEYoEyL3PCLCqRACrzz7plKpAJVD1wNgA9bgDE6DEEKxtkRmoR7ZEWNzwaMRKSooLBMolx5lmWjBomdEZIipKWYYRb9spcfGMky+TbMcHApGmmSLsyKjIIZglLcnaHrQ0qd+3jr0GaStO20jKFss+C6BvQ8YRLxGw1m7uOs7YIGMlKGsM9zyQuYXT9jixgLPNpZQRtFlN4ORqUaxJ08pZVM1Mp+Wo6Yj5EHWY2Cfwtlr9djthQvAkqxWnbBCnVYxFQ6r235dYwjmNzQYtD8Oh+6qcmnjp6KLF5gthYawSJzm1HXE4yEA+kY+WrW8VOI4VK/fdE2ckcnMpawtdhC55s5DGJQYPbOXOxl2xKs9t8dn5BrdalaKmitnO5iAd9rQma0rDkac2jetDb4/8Lvl37Ti+74jpaPjBw9ShEJJmWY5jGFrZaOE0GoddSdMUo3LYlAwjmXbBqlTSm0BRVg3Hcm3w9C7nadR+CXPQB3HYCaTXrG7pjW2YzcqmZoamG82gPkIHqRTW050Q7/y2rVLgCetSZ8zuzVnPrK0rzYEM1VFNaqPuUrt90J2tIpN4WN7YYCvX0wHKphbWnKtqbqK7O1fT2sz0QKnaSCnxZMIASTXJU0Uyc8sVXbbRCZDkFIK5bx3Dww9GumMyTJ5HRDyrqAdHXUyOeIttHBh+qqANc+7bV5TWUg2bAzCYNz8ZkkiigBc2M3NVByMhs3nToX0H1MQWH7X1E8L+Pun4FNreNTRILDXDaFGZZbtttTg5O1CzZfx1opmaucGIH5D5/yO661n3Yjgkbjoa+gM1+18t0NhubgNmYs20EnU3j9uLPaYwjIVDptdznImdLpFbAEKJZWYEMQ0SrFmJN0QnGx2/c9BpEP1Jka4huWD+V/pPe7xlFDgC7JA6spD9PVIQfMMP9OCXF1TWeU3KV/eUtaEBZd8WvAuK/5sMJnSpPpGW/F307/Vh+GEg8dX7AngVSqHT6XKWqupTiZWKRfrRIhEEv4QpWyNaIr+I+NJFFig/e6QxYuSHXrRjNztbjGG6vmdrVyJb0RensaVlpXOKE/1nRo4UixKHsj7ZH66XA0NK4IQdjW2IrnJkWmKguKhFp67ZntvR5/aTTPcHk1xQSMaoS6KWL52xCDNe27kanY9cWejdvBg7waH9AWsC3l04HPXx60RewtIorRHduQxtYhxeZESH0V3L0cakbEMe71WxvsRTOaQfPAZeJetTzG8E7CuGk4p8T92cE4iLvDuD46bp6sKXrA1PqfGoD1DMe2Ho4Q8JfpiWVBdaR0JFek4vSk9Hq8i/gW7u5fdhzASkEqlmevsEel2r0n8+iRx7Uxg4rI8OSlvexQu5XXg2ZFtR/4HgK0VEZZNrXvzYx1V+c4dN9FSAov3ztcy6D1QfrKsWuxPloucSudZYzD9TuOeNuzRZunv9HvuAT0xBwozUqEh9vuctbTAIWTNnXY0nADsIYbNfCJRD+fHNsqsAytVyFSG9ChYQwqsyQqaSqaH8qhz6h5TKS4VSCHbm36RjgfnwWN0+QZDgp1+kQIa4gYwCHiFvMS3WL0iq2IG9eY3teME3r158sNdvDi1PnH/TZGrx2vneKuzKZXQVOIWSBPSyVXr1MnCWHhy1dIjH1x7I+yViFogEK3RBuk1CgZtgkzZJu1nlzITNWg8Tijf511wJJlcIoItWOKEUfzZ3RLlV6TMcJL7+2W/bD/fERWJcCq+Wyuba1a7iIpBaMDMqfSOO3fh37BLvBm9sjDz++ti/lzF8Y/qeesNmfbJ+876hhugvC7zLaoE5o6s707xVDOjqMmduvXR3V4YZ1IJSTcGCM2Ds0Jo1owapZsXqNazWcg3QjK4xaq1QA41xDW07qpGql4PD0wQV2Ula8qxEWupyulylpobX9FCQKjMQ9aC/f3N7R/IBdrP+6J+8cMsCo8KyZgnjZly5bp15lE8vWWtRGL/79hDmcmFy1MMu5yHeYZ7T+U4POV1gW5H0Y7XhxOgIshg5zWAD0sKOQ34zu9LuZ/pKXTuD0Hbakkp6lYQwm3Ps8TiZQq3DS9aPYXWbqS50AGUopA4x4OEDiObvZhinrv21Lvw+hj5HMxMzj0Y00jbawvfmoPamzRvYaN6NvSvaqPITr8VGNgTuxrwVg/rueif2Dojb56x1HBzlSJ40OX3yQrELJ0/ecbZk3WZpi9vOCoX1522H3aayrC3OnXPBtqfTmLkzlt+qrItlF7NWOrf512GB614FUAcUAPek2nqhqAUqTfxyBr82wLJ/9anMBZAn5S1txUDZMC3FTo7cAu43ZVGBMH/XkvRG8jLJ6Cpn5e0qM61XFaOknntdXVSNyC4H5Cz3rzs/pUqTflGlxbG7RpGeJ/Zj9Sfp1TKXy4EPN7uBmlMSgwPCdb/5Jc9ARS9rZo8jPfPN9INelgA8uKDRJsTmv/In08Qk42eQ0qTbxFnQ/3/5QqnBSSzFXyoBmGwG4OElO4p3dTPFxhYf5Uwqi0gE+BKFkBBbwzGGeJCQQrwIyScm0bQ420LBZBSIEQBQmmUCQZBxhKB4cpNgyLhry3N8S/ioKSJuyIQiYtb9e77kmpftq1cCyVCK4imcwkaLybzSm36B6StJdlkL+AMKrkhkcequ+oQGKI8jws3kzFpowlp8CHeDqkLREl5BcWyZ20uSaN4TYoX1YMUrAiQGSkLhqcR0FNTQa7OV5/d/AUavIlFIn78x/wASuHQhe+LsM4btp9HE6rMurYMbI8eEaULqTFBN+CAMVKwcCS1/pyugsJhNUdq6SMhYOq4Rl2+ql4bB5OuX/phJUSEVVdMN07Id1/PLe1VUVlXX9K6t62MyEmsYdd1cNqaCvt2qPjDW0R2UlTxV812BK74aiRma1+ZO5IzlnVMETPhXfZrLkdmsw0krcRZAkrILh9a8bVBMVYUB1pmYsgwrSrw384gJ2SzCzGyTvynjJ+azysA8a6GIgqbrF9FW9O06p95p0/LBAAAAAA==') format('woff2'), url('iconfont.woff?t=1561461869476') format('woff'), url('iconfont.ttf?t=1561461869476') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('iconfont.svg?t=1561461869476#iconfont') format('svg'); /* iOS 4.1- */ } .hidden-xs { display: block; } .hidden-pc { display: none; } .box-container { width: 1536px; margin: 0 auto; } .w1200 { width: 1200px; margin: 0 auto; } .w1370 { width: 1370px; margin: 0 auto; } .box-container-fluid { width: 100%; margin: 0 auto; } .medium-box-container { width: 80%; margin: 0 auto; } body { font-size: 16px; overflow-x: hidden; } .rl { writing-mode: tb-rl; writing-mode: vertical-lr; } @font-face { font-family: "mb"; src: url('../fonts/MontserratBold.ttf'); font-weight: normal; font-style: normal; } @font-face { font-family: "light"; src: url('../fonts/ALIBABA-PUHUITI-LIGHT_0.OTF'); font-weight: normal; font-style: normal; } @font-face { font-family: "medium"; src: url('../fonts/ALIBABA-PUHUITI-MEDIUM.OTF'); font-weight: normal; font-style: normal; } /*@font-face { font-family: "dc"; src: url('../fonts/DINCOND-BOLD.OTF'); font-weight: normal; font-style: normal; } @font-face { font-family: "gm"; src: url('../fonts/GILROY-MEDIUM-2.OTF'); font-weight: normal; font-style: normal; } @font-face { font-family: "gr"; src: url('../fonts/GILROY-REGULAR-3.OTF'); font-weight: normal; font-style: normal; } @font-face { font-family: "db"; src: url('../fonts/DIN-BOLD.OTF'); font-weight: normal; font-style: normal; }*/ .pic { font-size: 0; overflow: hidden; display: block; width: 100%; } .pic img { width: 100%; transition: transform 0.8s ease; -webkit-transition: transform 0.8s ease; -moz-transition: transform 0.8s ease; -ms-transition: transform 0.8s ease; -o-transition: transform 0.8s ease; } .pic img.pc { display: block; } .pic img.phone { display: none; } .phone-nav, .gotop { display: none; } .links { font-size: 0; max-width: 45%; } .links a { position: relative; color: #9a9a9a; padding-right: 28px; margin-right: 26px; display: inline-block; vertical-align: top; line-height: 24px; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .links a:hover { color: #0f358b; } .links a:after { content: ""; display: inline-block; position: absolute; right: 0; top: 6px; z-index: 1; width: 2px; height: 13px; background: #9a9a9a; } .links a:last-child { margin-right: 0; padding-right: 0; } .links a:last-child:after { display: none; } .content { text-align: justify; line-height: 30px; color: #3f4150; font-size: 16px; } .content > div { font-size: 16px; } .content img, .content input[type="image"] { max-width: 100%; height: auto!important; display: block; margin: 0 auto; } .swiper-box { position: relative; } .index .header-wrapper { background-color: transparent; } .index .header-wrapper.on, .index .header-wrapper.active { background-color: #fff; } .index .header-wrapper.on .logo-box a img.init, .index .header-wrapper.active .logo-box a img.init, .index .header-wrapper.actived .logo-box a img.init { display: block; } .index .header-wrapper.on .logo-box a img.on, .index .header-wrapper.active .logo-box a img.on, .index .header-wrapper.actived .logo-box a img.on { display: none; } .index .header-wrapper.on .search, .index .header-wrapper.active .search, .index .header-wrapper.actived .search { background-image: url(../img/search.png); } .index .header-wrapper.on .search.on, .index .header-wrapper.active .search.on, .index .header-wrapper.actived .search.on { background-image: url(../img/search3.png); } .index .header-wrapper.on .language .caption, .index .header-wrapper.active .language .caption, .index .header-wrapper.actived .language .caption { color: #999; } .index .header-wrapper.on .language:hover .caption, .index .header-wrapper.active .language:hover .caption, .index .header-wrapper.actived .language:hover .caption { color: #0f358b; } .index .header-wrapper.on .language:hover i, .index .header-wrapper.active .language:hover i, .index .header-wrapper.actived .language:hover i { background-image: url(../img/earth3.png); } .index .header-wrapper.on .language i, .index .header-wrapper.active .language i, .index .header-wrapper.actived .language i { background-image: url(../img/earth.png); } .index .header-wrapper.on .pc-nav-box ul li.on > a, .index .header-wrapper.active .pc-nav-box ul li.on > a, .index .header-wrapper.actived .pc-nav-box ul li.on > a, .index .header-wrapper.on .pc-nav-box ul li:hover > a, .index .header-wrapper.active .pc-nav-box ul li:hover > a, .index .header-wrapper.actived .pc-nav-box ul li:hover > a { color: #0f358b; } .index .header-wrapper.on .pc-nav-box ul li.on > a:before, .index .header-wrapper.active .pc-nav-box ul li.on > a:before, .index .header-wrapper.actived .pc-nav-box ul li.on > a:before, .index .header-wrapper.on .pc-nav-box ul li:hover > a:before, .index .header-wrapper.active .pc-nav-box ul li:hover > a:before, .index .header-wrapper.actived .pc-nav-box ul li:hover > a:before { background-color: #0f358b; } .index .header-wrapper.on .pc-nav-box ul li > a, .index .header-wrapper.active .pc-nav-box ul li > a, .index .header-wrapper.actived .pc-nav-box ul li > a { color: #333; } .index .header-wrapper .logo-box a img.init { display: none; } .index .header-wrapper .logo-box a img.on { display: block; } .index .header-wrapper .search { background-image: url(../img/search2.png); } .index .header-wrapper .language .caption { color: #fff; } .index .header-wrapper .language i { background-image: url(../img/earth2.png); } .index .header-wrapper .pc-nav-box ul li.on > a { color: #fff; } .index .header-wrapper .pc-nav-box ul li.on > a:before { background-color: transparent; } .index .header-wrapper .pc-nav-box ul li > a { color: #fff; } .index .header-wrapper + .p_h { display: none; } .shadow .header-wrapper { box-shadow: 0px 0px 19px 1px rgba(33, 33, 33, 0.1); } .header-wrapper { position: fixed; left: 0; top: 0; z-index: 30; background-color: #fff; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; } .header-wrapper.on, .header-wrapper.active { box-shadow: 0px 0px 19px 1px rgba(33, 33, 33, 0.1); } .header-wrapper .box { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ height: 90px; align-items: center; padding: 0 50px; } .header-wrapper .logo-box { width: 166px; } .header-wrapper .logo-box a { display: block; } .header-wrapper .logo-box a img { display: none; } .header-wrapper .logo-box a img.init { display: block; } .header-wrapper .other-box { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; } .header-wrapper .search { cursor: pointer; width: 16px; height: 16px; background-image: url(../img/search.png); background-size: contain; background-repeat: no-repeat; background-position: center center; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; } .header-wrapper .search.on { background-image: url(../img/search3.png); } .header-wrapper .language { position: relative; width: 62px; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; margin: 0 32px 0 50px; } .header-wrapper .language:hover .caption { color: #0f358b; font-weight: 700; } .header-wrapper .language:hover .caption i { background-image: url(../img/earth3.png); } .header-wrapper .language:hover .list { height: 80px; } .header-wrapper .language:hover .list a { opacity: 1; visibility: visible; height: 40px; } .header-wrapper .caption { width: 100%; cursor: pointer; text-align: center; line-height: 90px; color: #999; } .header-wrapper .caption i { display: inline-block; vertical-align: middle; position: relative; top: -2px; width: 20px; height: 20px; margin-right: 12px; background-size: contain; background-repeat: no-repeat; background-position: center center; background-image: url(../img/earth.png); transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; } .header-wrapper .caption img { display: inline-block; vertical-align: middle; position: relative; margin-right: 12px; top: -1px; } .header-wrapper .list { position: absolute; left: 50%; top: 100%; z-index: 10; background-color: #fff; text-align: center; width: 112px; height: 0; margin-left: -56px; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .header-wrapper .list a { display: block; color: #999; line-height: 40px; height: 0; padding: 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid #f7f8f9; opacity: 0; visibility: hidden; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .header-wrapper .list a:last-child { border-bottom: none; } .header-wrapper .list a:hover { color: #0f358b; font-weight: 700; } .header-wrapper .btn { display: block; width: 112px; height: 40px; line-height: 40px; background-color: #0033a0; text-align: center; color: #fff; border-radius: 20px; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; } .pc-nav-box { flex: 1; margin: 0 70px; } .pc-nav-box a { display: block; } .pc-nav-box ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ } .pc-nav-box li { position: relative; margin-right: 40px; vertical-align: top; } .pc-nav-box li:last-child { margin-right: 0; } .pc-nav-box li:nth-child(3) .hidebox .pic { position: relative; } .pc-nav-box li:nth-child(3) .hidebox .pic:before { content: ""; width: 100%; height: 100%; background-color: #0f358b; position: absolute; left: 0; top: 0; z-index: 1; opacity: 0.5; } .pc-nav-box li:hover > a, .pc-nav-box li.on > a { color: #0f358b; font-weight: 700; } .pc-nav-box li:hover > a:before, .pc-nav-box li.on > a:before { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } .pc-nav-box li:hover .nav { opacity: 1; visibility: visible; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } .pc-nav-box li:hover .hidebox { display: block; z-index: 10; animation: fadeIn 0.5s ease; } .pc-nav-box li > a { position: relative; font-size: 14px; line-height: 90px; } .pc-nav-box li > a:before { content: ""; width: 100%; position: absolute; left: 0; top: 0; transition: transform 0.3s ease; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; -o-transition: transform 0.3s ease; z-index: 1; background-color: #0f358b; height: 2px; transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); } .pc-nav-box .nav { position: absolute; width: 200px; top: 100%; left: 50%; z-index: 100; font-size: 0; text-align: center; background-color: #fff; margin-left: -100px; opacity: 0; visibility: hidden; box-shadow: 0 22px 30px rgba(0, 0, 0, 0.02); transform: translateY(-20px); -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transition: transform 0.3s, opacity 0.3s ease; -webkit-transition: transform 0.3s, opacity 0.3s ease; -moz-transition: transform 0.3s, opacity 0.3s ease; -ms-transition: transform 0.3s, opacity 0.3s ease; -o-transition: transform 0.3s, opacity 0.3s ease; } .pc-nav-box .nav a { position: relative; display: block; font-size: 13px; color: #666; padding-top: 10px; padding-bottom: 10px; line-height: 30px; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; } .pc-nav-box .nav a:last-child { margin-bottom: 0; } .pc-nav-box .nav a:hover, .pc-nav-box .nav a.on { background-color: rgba(15, 53, 139, 0.1); } .pc-nav-box .hidebox { position: fixed; left: 0; top: 90px; z-index: -1; width: 100%; background-color: #fff; box-shadow: 0 29px 30px rgba(0, 0, 0, 0.02); border-top: 1px solid #f7f8f9; display: none; } .pc-nav-box .hidebox .box-container { padding: 50px 0; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .pc-nav-box .hidebox .item { flex: 1; margin-right: 34px; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); } .pc-nav-box .hidebox .item:last-child { margin-right: 0; } .pc-nav-box .hidebox .item:hover .pic img { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); } .pc-nav-box .hidebox .item:hover .title { color: #0f358b; } .pc-nav-box .hidebox .title { color: #333; font-size: 18px; line-height: 24px; margin-bottom: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .p_h { height: 90px; } .search-form { width: 100%; position: fixed; left: 0; top: 90px; background: #fff; z-index: 30; padding: 70px 0; display: none; border-top: 1px solid #f7f8f9; /* input placeholder */ } .search-form .w1200 { position: relative; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; border-bottom: 1px solid #d9d9d9; } .search-form .keywords { flex: 1; overflow: hidden; line-height: 56px; margin-left: 20px; font-size: 15px; color: #999; } .search-form ::-webkit-input-placeholder { /* WebKit browsers */ color: #999; font-size: 15px; } .search-form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; font-size: 15px; } .search-form ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999; font-size: 15px; } .search-form :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999; font-size: 15px; } .search-form .close { position: absolute; right: 0; top: 50%; z-index: 10; color: #999; margin-top: -15px; width: 20px; height: 20px; background: url(../img/close.png) no-repeat; background-size: contain; transition: transform 0.3s ease; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; -o-transition: transform 0.3s ease; } .search-form .close:hover { color: #0f358b; transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); } .footer-wrapper { padding-bottom: 50px; background-color: #f7f7fa; position: relative; z-index: 21; } .footer-wrapper .box-container { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .footer-wrapper .box-2 { padding-top: 72px; } .footer-wrapper .left { width: 68.71%; } .footer-wrapper .box-3 { margin-top: 58px; } .footer-wrapper .copyright, .footer-wrapper .copyright a { font-size: 12px; color: #9a9a9a; } .footer-wrapper .copyright { line-height: 24px; text-transform: uppercase; max-width: 50%; } .footer-wrapper .copyright a { transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .footer-wrapper .copyright a:hover { color: #0f358b; } .footer-wrapper .footer-nav-box li > a, .footer-wrapper .caption { font-size: 18px; color: #666; font-family: "medium"; line-height: 36px; } .footer-wrapper .right { text-align: right; max-width: 290px; } .footer-wrapper .tel a { display: inline-block; font-size: 40px; line-height: 40px; background-image: linear-gradient(-90deg, #016cec 0%, #0237a5 100%), linear-gradient(#0033a0, #0033a0); font-family: "mb"; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .footer-wrapper .qrcode { width: 120px; box-shadow: 0px 0px 29px 0px rgba(0, 0, 0, 0.14); margin-left: auto; margin-top: 42px; margin-bottom: 42px; } .footer-wrapper .qrcode img { display: block; } .footer-wrapper .share { font-size: 0; } .footer-wrapper .share ul { font-size: 0; } .footer-wrapper .share ul li { position: relative; display: inline-block; vertical-align: top; margin-right: 28px; } .footer-wrapper .share ul li:last-child { margin-right: 0; } .footer-wrapper .share ul li.on .hidebox { opacity: 1; visibility: visible; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } .footer-wrapper .share ul li a { display: block; position: relative; width: 43px; height: 43px; z-index: 1; border-radius: 50%; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05); background-color: #fff; background-size: contain; background-repeat: no-repeat; background-position: center center; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .footer-wrapper .share ul li a:last-child { margin-right: 0; } .footer-wrapper .share ul li a.on { box-shadow: 4px 9px 18px 0px rgba(0, 153, 255, 0.2); } .footer-wrapper .share .hidebox { position: absolute; left: 50%; bottom: calc(100% + 20px); z-index: 1; margin-left: -72px; width: 144px; background-color: #fff; box-shadow: 0px 0px 46px 0px rgba(6, 0, 1, 0.16); opacity: 0; visibility: hidden; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transform: translateY(10px); -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); } .footer-wrapper .share .hidebox:before { content: ""; border: 7px solid transparent; border-top-color: #fff; position: absolute; left: 50%; margin-left: -7px; top: 100%; z-index: 1; } .footer-wrapper .share .hidebox img { display: block; width: 100%; border-radius: 10px; } .footer-wrapper .share p { text-align: left; font-size: 12px; line-height: 20px; color: #999; padding: 5px 10px 0px; } .footer-wrapper .box-1 { background: url(../img/footerbg.jpg); background-position: center center; background-color: #0134a1; background-repeat: no-repeat; background-size: 100%; background-attachment: fixed; padding: 88px 0; } .footer-wrapper .box-1 .box-container { display: block; text-align: center; } .footer-wrapper .index-title { color: #fff; } .footer-wrapper .btn { display: block; width: 180px; line-height: 58px; background-color: #fff; border-radius: 29px; margin: 0 auto; color: #0f358b; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; } .footer-wrapper .btn:hover { color: #fff; background-color: #0f358b; } .footer-wrapper .btn:hover i { background-image: url(../img/msg2.png); } .footer-wrapper .btn i { display: inline-block; width: 25px; height: 25px; background-size: contain; background-repeat: no-repeat; background-position: center center; margin-left: 35px; vertical-align: middle; position: relative; top: -2px; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; background-image: url(../img/msg.png); } .footer-nav-box { margin-bottom: 27px; } .footer-nav-box a { display: block; transition: colo 0.3s ease; -webkit-transition: colo 0.3s ease; -moz-transition: colo 0.3s ease; -ms-transition: colo 0.3s ease; -o-transition: colo 0.3s ease; } .footer-nav-box ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .footer-nav-box li { padding-right: 14px; } .footer-nav-box li:first-child { width: 100px; } .footer-nav-box li > a { margin-bottom: 22px; } .footer-nav-box li > a.on { color: #0f358b; } .footer-nav-box .nav a { color: #9a9a9a; line-height: 18px; margin-bottom: 15px; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .footer-nav-box .nav a:last-child { margin-bottom: 0; } .footer-nav-box .nav a:hover { color: #0f358b; } .footer-nav-box .nav a:hover span { background-size: 100% 1px; background-position: 0 100%; } .footer-nav-box .nav span { background: url(../img/line.jpg) no-repeat; background-size: 0 1px; background-position: 100% 100%; transition: background-size 0.5s ease; } .friend-link { width: 210px; } .friend-link .box { position: relative; width: 100%; text-align: left; } .friend-link .name { transition:All 0.5s ease; -webkit-transition:All 0.5s ease; -moz-transition:All 0.5s ease; -o-transition:All 0.5s ease; cursor: pointer; color: #999; height: 44px; line-height: 44px; background-color: #ffffff; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05); border-radius: 22px; padding: 0 40px 0 26px; background-image: url(../img/up.png); background-color: #fff; background-repeat: no-repeat; background-position: right 26px center; } .friend-link .list { font-size: 0; width: 100%; position: absolute; right: 0; bottom: 100%; z-index: 10; max-height: 290px; overflow-y: auto; display: none; background: #fff; border-bottom: none; } .friend-link .list::-webkit-scrollbar { width: 4px; background-color: #eee; } .friend-link .list::-webkit-scrollbar-thumb { background-color: #0f358b; } .friend-link .list a { display: block; font-size: 14px; color: #999; background: #fff; line-height: 57px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid #f7f8f9; padding: 0 26px; } .friend-link .list a:hover { color: #0f358b; } .friend-link .list a:last-child { border-bottom: none; } .index-banner-wrapper .index-banner-swiper .swiper-slide-active .box-container { opacity: 1; visibility: visible; } .index-banner-wrapper .index-banner-swiper .swiper-slide-active .box-container img, .index-banner-wrapper .index-banner-swiper .swiper-slide-active .box-container h2, .index-banner-wrapper .index-banner-swiper .swiper-slide-active .box-container .desc, .index-banner-wrapper .index-banner-swiper .swiper-slide-active .box-container .index-more, .index-banner-wrapper .index-banner-swiper .swiper-slide-active .box-container .line { opacity: 1; visibility: visible; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } .index-banner-wrapper .index-banner-swiper .box-container { opacity: 0; visibility: hidden; transition: all 1s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); } .index-banner-wrapper .swiper-slide a { display: block; } .index-banner-wrapper .swiper-slide a > img { width: 100%; height: 100vh; object-fit: cover; } .index-banner-wrapper .swiper-slide a > img.phone { display: none; } .index-banner-wrapper .swiper-slide a > img.pc { display: block; } .index-banner-wrapper .info { position: absolute; left: 0; top: 0; z-index: 10; padding-top: 15%; width: 100%; } .index-banner-wrapper .info img { display: block; width: auto; } .index-banner-wrapper .info img, .index-banner-wrapper h2, .index-banner-wrapper .desc, .index-banner-wrapper .index-more, .index-banner-wrapper .line { opacity: 0; visibility: hidden; transform: translateY(120px); -webkit-transform: translateY(120px); -moz-transform: translateY(120px); -ms-transform: translateY(120px); -o-transform: translateY(120px); transition: all 1s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); } .index-banner-wrapper .info2 h2 { color: #0f358b; } .index-banner-wrapper .info2 .desc { color: #0f358b; } .index-banner-wrapper .info2 .line { background-color: #0f358b; } .index-banner-wrapper h2 { font-size: 60px; color: #fff; font-family: "medium"; line-height: 70px; margin: 26px auto 28px; transition-delay: 0.2s; } .index-banner-wrapper .desc { font-size: 30px; color: #fff; font-family: "light"; line-height: 42px; margin-bottom: 70px; transition-delay: 0.4s; } .index-banner-wrapper .line { width: 24px; height: 4px; background-color: #fff; transition-delay: 0.6s; } .index-banner-wrapper .index-more { transition-delay: 0.6s; } .index-banner-wrapper .swiper-pagination-bullet { width: 8px; height: 8px; background: rgba(255, 255, 255, 0.8); position: relative; } .index-banner-wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #fff; } .index-banner-wrapper .swiper-pagination-bullet svg { width: 38px; height: 38px; position: absolute; top: 50%; margin-top: -19px; left: 50%; margin-left: -19px; } .index-banner-wrapper .swiper-pagination-bullet svg:nth-child(2) { position: absolute; left: 0; top: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .index-banner-wrapper .swiper-pagination-bullet { fill: none; } .index-banner-wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active .circle-chart__background { stroke: rgba(255, 255, 255, 0.2); stroke-width: 1; } .index-banner-wrapper .circle-chart__circle { stroke-linecap: square; fill: none; } .index-banner-wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active .circle-chart__circle { stroke: #fff; stroke-width: 2; stroke-linecap: square; fill: none; transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform-origin: center; -webkit-transform-origin: center; -ms-transform-origin: center; -moz-transform-origin: center; } .index-banner-wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active .circle-chart__circle { animation: circle-chart-fill 3.8s linear reverse; -moz-animation: circle-chart-fill 3.8s linear reverse; -webkit-animation: circle-chart-fill 3.8s linear reverse; -ms-animation: circle-chart-fill 3.8s linear reverse; } .index-banner-wrapper .swiper-pagination-bullet.one.swiper-pagination-bullet-active .circle-chart__circle { animation: circle-chart-fill 2.4s linear reverse; -moz-animation: circle-chart-fill 2.4s linear reverse; -webkit-animation: circle-chart-fill 2.4s linear reverse; -ms-animation: circle-chart-fill 2.4s linear reverse; } .index-banner-wrapper .swiper-pagination { bottom: 70px; } .index-banner-wrapper .swiper-pagination .swiper-pagination-bullet { margin: 0 18px; opacity: 1; } .index-banner-wrapper .swiper-pagination .swiper-pagination-bullet:focus, .index-banner-wrapper .swiper-pagination .swiper-pagination-bullet:active, .index-banner-wrapper .swiper-pagination .swiper-pagination-bullet:link { outline: none; } .index-banner-wrapper video { width: 100%; height: 100%; object-fit: cover; object-position: bottom center; } .index-banner-wrapper .video > img { position: relative; opacity: 0; visibility: hidden; } .index-banner-wrapper .video video { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 10; } .index-title { font-size: 48px; font-family: "medium"; text-align: center; line-height: 56px; margin-bottom: 40px; } .index-more { display: block; width: 180px; line-height: 58px; text-align: center; color: #fff; font-size: 18px; border-radius: 29px; background-image: linear-gradient(90deg, #016cec 0%, #0237a5 100%), linear-gradient(#0033a0, #0033a0); background-blend-mode: normal, normal; } .index-more:hover { background: #0f358b; } .index-btn { display: block; width: 156px; height: 46px; line-height: 42px; border-radius: 23px; border: solid 2px #d9e1ea; text-align: center; font-weight: 700; color: #0f358b; text-transform: uppercase; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .index-btn:hover, .index-btn.on { background-color: #0f358b; color: #fff; border-color: #0f358b; } .index-wrapper .brief, .index-wrapper .name { font-size: 22px; line-height: 30px; } .index-wrapper .brief { margin-bottom: 10px; } .index-wrapper .friend-link .name { line-height: 44px; font-size: 14px; } .index-box-1 { position: relative; } .index-box-1 video { width: 100%; height: 100vh; display: block; object-fit: cover; } .index-box-1 .info { position: absolute; left: 0; top: 0; z-index: 1; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; width: 100%; height: 100%; } .index-box-1 .box-container { text-align: center; } .index-box-1 .index-title { font-size: 72px; line-height: 80px; color: #fff; margin-bottom: 50px; } .index-box-1 .brief { font-size: 36px; color: #fff; } .index-box-2 > .pic img { height: 100vh; object-fit: cover; object-position: center bottom; } .index-box-2 .index-title { position: absolute; left: 0; top: 15%; z-index: 10; width: 100%; } .index-box-2 .main { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; } .index-box-2 .box-container { position: relative; height: 100%; } .index-box-2 li { position: absolute; z-index: 1; top: 20%; } .index-box-2 li:hover .pic img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .index-box-2 li:nth-child(1) { left: 9%; } .index-box-2 li:nth-child(1) .line { height: 230px; } .index-box-2 li:nth-child(2) { left: 39%; } .index-box-2 li:nth-child(2) .line { height: 200px; } .index-box-2 li:nth-child(3) { right: 21%; } .index-box-2 li:nth-child(3) .line { height: 70px; } .index-box-2 li:nth-child(3) .other { left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); } .index-box-2 li .other { left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); } .index-box-2 li:nth-child(4) { right: calc((100% - 1536px) / 2); } .index-box-2 li:nth-child(4) a { width: 220px; } .index-box-2 li:nth-child(4) .pic-box { padding: 0; background: none; width: 220px; height: 220px; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; border: none; margin: 0 auto; } .index-box-2 li:nth-child(4) .pic-box:before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; box-shadow: none; border-radius: 50%; background: url(../img/index24bg.png) no-repeat center center; background-size: 100% 100%; animation: circleAni 3s linear infinite; } .index-box-2 li:nth-child(4) .pic-box .pic { width: 75.54%; margin: 0 auto; } .index-box-2 li:nth-child(4) .pic-box .pic img { height: auto; } .index-box-2 li:nth-child(4) .line { height: 62px; } .index-box-2 li:nth-child(4) .other { left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); display: none; } .index-box-2 li:nth-child(4) .name { text-align: center; } .index-box-2 li a { display: block; width: 270px; opacity: 0; visibility: hidden; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .index-box-2 li .pic-box { position: relative; padding: 10px; overflow: inherit; background: #fff; border: 1px solid rgba(0, 234, 255, 0.46); border-radius: 3px; } .index-box-2 .pic-box .pic img, .index-box-2 .pic-box .pic video { height: 150px; object-fit: cover; } .index-box-2 .pic-box .pic video { width: 100%; display: block; } .index-box-2 .name { color: #0f358b; margin-bottom: 10px; } .index-box-2 .other { width: 80px; position: absolute; z-index: 1; } .index-box-2 .line { position: relative; width: 14px; margin: 0 auto; } .index-box-2 .line:before, .index-box-2 .line:after { content: ""; position: absolute; z-index: 1; transition: all 1.4s ease; -webkit-transition: all 1.4s ease; -moz-transition: all 1.4s ease; -ms-transition: all 1.4s ease; -o-transition: all 1.4s ease; } .index-box-2 .line:before { left: 6px; bottom: 0; background-color: #fff; width: 2px; height: 0; background-color: #9ad9fb; transition-delay: 0.6s; } .index-box-2 .line:after { width: 14px; height: 14px; border: solid 2px #fff; border-radius: 50%; background-color: #072cb1; box-shadow: 0px 3px 8px 0px rgba(7, 46, 178, 0.1); transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); box-sizing: border-box; transition-delay: 1.2s; } .index-box-2 .icon { position: relative; width: 80px; height: 80px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.2); margin-top: 5px; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; } .index-box-2 .icon:before, .index-box-2 .icon:after { content: ""; position: absolute; z-index: -10; border-radius: 50%; transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); animation: iconScale 5s linear infinite; } .index-box-2 .icon:before { width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(255, 255, 255, 0.2); animation-delay: 0.2s; } .index-box-2 .icon:after { left: 12.5%; top: 12.5%; width: 75%; height: 75%; background-color: #009eff; animation-delay: 0.5s; } .index-box-2 .icon img { width: 50%; margin: 0 auto; display: block; } .index-box-3 .cat { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ justify-content: center; margin-bottom: 52px; } .index-box-3 .cat .swiper-slide { width: 154px; text-align: center; background-color: #fff; border-radius: 10px; padding: 20px 10px 24px; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; margin-right: 40px; } .index-box-3 .cat .swiper-slide:last-child { margin-right: 0; } .index-box-3 .cat .swiper-slide.on { background-color: #0f358b; box-shadow: 2px 8px 18px 0px rgba(0, 153, 255, 0.2); border-radius: 10px; } .index-box-3 .cat .swiper-slide.on .icon .init { top: -100%; transform: scale(0.2); -webkit-transform: scale(0.2); -moz-transform: scale(0.2); -ms-transform: scale(0.2); -o-transform: scale(0.2); } .index-box-3 .cat .swiper-slide.on .icon .on { bottom: 0; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } .index-box-3 .cat .swiper-slide.on p { color: #fff; } .index-box-3 .cat .swiper-slide a { display: block; } .index-box-3 .cat .icon { width: 70px; height: 50px; overflow: hidden; position: relative; margin: 0 auto; } .index-box-3 .cat .icon img { display: block; width: 100%; position: absolute; z-index: 1; left: 0; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .index-box-3 .cat .icon .init { top: 0; } .index-box-3 .cat .icon .on { bottom: -100%; transform: scale(0.2); -webkit-transform: scale(0.2); -moz-transform: scale(0.2); -ms-transform: scale(0.2); -o-transform: scale(0.2); } .index-box-3 .cat p { font-size: 16px; line-height: 20px; color: #999; margin-top: 7px; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .index-box-3 .info-box, .index-box-3 .pic-box { width: 50%; } .index-box-3 .main { position: relative; background-color: #f7f7fa; } .index-box-3 .item { display: none; } .index-box-3 .item.on .info-box, .index-box-3 .item.on .pic-box { opacity: 1; visibility: visible; } .index-box-3 .item.on .info-box { animation: fadeInUp50 0.8s ease; } .index-box-3 .info-box { position: relative; padding-left: calc((100% - 1536px) / 2); padding-right: 152px; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; } .index-box-3 .info { width: 100%; position: relative; z-index: 1; } .index-box-3 .key { position: absolute; right: 35px; top: 54px; z-index: 1; font-family: "dc"; font-size: 200px; opacity: 0.2; line-height: 170px; background-image: -webkit-linear-gradient(266deg, #0099ff, rgba(255, 255, 255, 0)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .index-box-3 .name { color: #0f358b; } .index-box-3 .desc { font-size: 40px; line-height: 48px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: 96px; margin: 30px auto 32px; padding-right: 60px; } .index-box-3 .content { font-size: 16px; color: #666; line-height: 24px; text-align: justify; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-bottom: 55px; max-height: 72px; } .index-box-3 .pic-box { position: relative; transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; } .index-box-3 .pic-box .pic:hover img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .index-box-3 .pic img { height: 57vh; object-fit: cover; } .index-box-3 .box { position: relative; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ z-index: 1; } .index-box-3 .box:before, .index-box-3 .box:after { font-size: 120px; position: absolute; line-height: 36px; z-index: 1; font-family: "黑体"; } .index-box-3 .box:before { left: 10px; top: 120px; content: "“"; color: #0f358b; opacity: 0.4; } .index-box-3 .box:after { content: "”"; color: #e5e5e5; left: calc(50% - 130px); bottom: 60px; } .index-box-3 canvas { position: absolute; left: 0%; bottom: 0; z-index: 0; width: 50%; height: 100%; } .index-box-3 .swiper-box { position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; padding: 40px 13.2%; background-color: rgba(0, 0, 0, 0.6); } .index-box-3 .swiper-slide { box-shadow: 4px 6px 38px 0px rgba(135, 135, 135, 0.13); border-radius: 10px; overflow: hidden; background-color: #fff; } .index-box-3 .swiper-slide:hover img { filter: grayscale(0); } .index-box-3 .swiper-slide img { display: block; width: 100%; border-radius: 10px; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; filter: grayscale(1); } .index-box-3 .swiper-btn { display: block; width: 35px; height: 35px; background-size: contain; background-repeat: no-repeat; background-position: center center; position: absolute; top: 50%; border-radius: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); z-index: 1; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; } .index-box-3 .prev { left: 5.9%; background-image: url(../img/prev7.png); } .index-box-3 .prev:hover { background-image: url(../img/prev8.png); } .index-box-3 .next { right: 5.9%; background-image: url(../img/next7.png); } .index-box-3 .next:hover { background-image: url(../img/next8.png); } .more { position: relative; display: block; width: 140px; line-height: 46px; border-radius: 23px; color: #0033a0; font-family: "mb"; text-transform: uppercase; text-align: center; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .more i { display: inline-block; width: 15px; height: 12px; background-image: url(../img/iright3.png); background-size: contain; background-repeat: no-repeat; background-position: center center; margin-left: 16px; position: relative; vertical-align: middle; top: -1px; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .more:before { content: ""; width: 100%; height: 100%; box-sizing: border-box; border: solid 2px #0033a0; position: absolute; left: 0; top: 0; z-index: 1; border-radius: 23px; transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; } .more:hover, .more.on { color: #fff; background-image: linear-gradient(90deg, #0f358b 0%, #0575d5 100%), linear-gradient(#0f358b, #0f358b); background-blend-mode: normal, normal; } .more:hover:before, .more.on:before { opacity: 0; visibility: hidden; } .more:hover i, .more.on i { background-image: url(../img/iright4.png); } .more:hover i { transform: translateX(6px); -webkit-transform: translateX(6px); -moz-transform: translateX(6px); -ms-transform: translateX(6px); -o-transform: translateX(6px); } .index-box-4 { background-image: url(../img/index4bg.png); background-position: center top; background-size: 54.8%; background-repeat: no-repeat; } .index-box-4 .top { text-align: center; margin-bottom: 104px; } .index-box-4 .top .index-title { margin-bottom: 0; } .index-box-4 .title { font-size: 36px; color: #999; line-height: 42px; margin-bottom: 18px; font-family: "light"; font-weight: 700; } .index-box-4 .brief { width: 1180px; margin: 0 auto 54px; font-size: 18px; text-align: center; line-height: 30px; } .index-box-4 .list ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .index-box-4 .list li { cursor: default; width: 22.78%; background-color: #fff; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); border-radius: 10px; margin-right: 2.96%; margin-top: 2.96%; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; text-align: center; padding: 38px 30px 40px; } .index-box-4 .list li:hover { background-color: #0033a0; } .index-box-4 .list li:hover .icon img.init { transform: scale(0.5); -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); opacity: 0; visibility: hidden; } .index-box-4 .list li:hover .icon img.on { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); opacity: 1; visibility: visible; } .index-box-4 .list li:hover .name, .index-box-4 .list li:hover .num, .index-box-4 .list li:hover .desc { color: #fff; } .index-box-4 .list li:hover .num img { display: none; } .index-box-4 .list li:hover .num img.on { display: block; } .index-box-4 .list li:hover .down i { background-image: url(../img/i-down2.png); } .index-box-4 .list li:hover .up i { background-image: url(../img/i-up2.png); } .index-box-4 .icon { width: 60px; height: 60px; position: relative; margin: 0 auto; } .index-box-4 .icon img { position: absolute; left: 0; top: 0; z-index: 10; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .index-box-4 .icon img.on { transform: scale(1.5); -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); opacity: 0; visibility: hidden; } .index-box-4 .name { font-weight: 700; margin: 28px auto 30px; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .index-box-4 .down i { background-image: url(../img/i-down.png); } .index-box-4 .up i { background-image: url(../img/i-up.png); } .index-box-4 .num { color: #0033a0; font-size: 48px; line-height: 62px; height: 62px; font-family: "mb"; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .index-box-4 .num img { display: block; width: 58px; height: 62px; object-fit: contain; margin: 0 auto; } .index-box-4 .num img.on { display: none; } .index-box-4 .num i { width: 22px; height: 53px; background-size: contain; background-repeat: no-repeat; background-position: center center; display: inline-block; margin-right: 10px; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; } .index-box-4 .desc { font-size: 16px; color: #999; line-height: 24px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; height: 72px; margin-top: 42px; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .index-box-5 { position: relative; overflow: hidden; } .index-box-5 .box-container { position: relative; z-index: 10; } .index-box-5 .top { text-align: center; } .index-box-5 .index-title b { display: inline-block; color: #0f358b; font-family: "mb"; margin-bottom: 20px; } .index-box-5 .desc { font-size: 16px; color: #666; line-height: 30px; width: 844px; margin: 0 auto; } .index-box-5 .index-btn { margin:45px auto 90px; } .index-box-5 .data { margin: 45px auto 90px; } .index-box-5 .data ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .index-box-5 .data li { width: 360px; text-align: center; } .index-box-5 .data .num { position: relative; display: inline-block; } .index-box-5 .data .num span, .index-box-5 .data .num em, .index-box-5 .data .num i { display: inline-block; } .index-box-5 .data .num em, .index-box-5 .data .num i { font-style: normal; } .index-box-5 .data .num span, .index-box-5 .data .num i { font-family: "mb"; color: #0f358b; } .index-box-5 .data .num span { font-size: 90px; line-height: 70px; margin-right: 24px; } .index-box-5 .data .num em { font-size: 24px; color: #666; line-height: 24px; } .index-box-5 .data .num i { position: absolute; right: 0; top: 0; z-index: 1; font-size: 36px; line-height: 26px; } .index-box-5 .data p { font-size: 16px; color: #666; line-height: 24px; margin-top: 16px; } .index-box-5 canvas { position: absolute; left: 0; bottom: -200px; z-index: 0; width: 100%; height: 600px; } .index-box-6 { padding-top: 90px; } .index-box-6 .swiper-slide { width: 30.72%; margin-right: 3.92%; } .index-box-6 .swiper-slide:nth-child(3n) { margin-right: 0; } .index-box-6 .swiper-slide:hover .pic img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .index-box-6 .swiper-slide:hover .title { color: #0f358b; } .index-box-6 .swiper-slide:hover .index-btn { background-color: #0f358b; color: #fff; border-color: #0f358b; } .index-box-6 .swiper-slide a { display: block; } .index-box-6 .pic img { height: 266px; object-fit: cover; } .index-box-6 .info { margin-top: 40px; } .index-box-6 .title { font-size: 26px; line-height: 36px; height: 72px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 22px auto 48px; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .index-box-6 p { font-size: 18px; color: #c9c9c9; font-family: "mb"; } .page-banner-wrapper { position: relative; overflow: hidden; } .page-banner-wrapper .banner, .page-banner-wrapper video { display: block; width: 100%; } .page-banner-wrapper video { height: 509px; object-fit: cover; } .page-banner-wrapper .info { width: 100%; position: absolute; left: 0; top: 0; z-index: 10; height: 100%; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; } .page-banner-wrapper h4 { color: #fff; font-size: 48px; font-family: "medium"; font-weight: 700; line-height: 56px; letter-spacing: 2px; } .page-banner-wrapper p { color: #fff; font-size: 30px; line-height: 36px; margin-top: 30px; letter-spacing: 2px; } .page-banner-wrapper .info-box .cat { font-size: 24px; font-family: "gm"; color: #0f358b; line-height: 30px; margin-bottom: 10px; } .page-banner-wrapper .info-box .page-title { line-height: 40px; font-family: "gm"; font-weight: 700; min-height: 120px; margin-bottom: 100px; } .page-banner-wrapper .info-box .btn { text-align: center; color: #fff; display: inline-block; min-width: 172px; line-height: 46px; background-color: #0033a0; border-radius: 23px; padding: 0 15px; } .page-banner-wrapper .info-box .btn:hover { background-image: linear-gradient(90deg, #016cec 0%, #0237a5 100%), linear-gradient(#0033a0, #0033a0); background-blend-mode: normal, normal; } .page-banner-wrapper .info-box .btn img { margin-right: 6px; vertical-align: middle; } .page-box { padding: 120px 0; } .page-box .index-title { margin-bottom: 55px; } .pt { padding-top: 120px; } .mt { margin-top: 120px; } .nav-btn { cursor: pointer; width: 24px; height: 74px; background-color: #0f358b; position: absolute; left: 0; top: 50%; margin-top: -37px; z-index: 20; background-image: url(../img/iright.png); background-repeat: no-repeat; background-position: center center; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition-delay: 0.3s; } .nav-btn.on { transform: translateX(-100px); -webkit-transform: translateX(-100px); -moz-transform: translateX(-100px); -ms-transform: translateX(-100px); -o-transform: translateX(-100px); opacity: 0; visibility: hidden; } .goods-nav-box { position: fixed; left: -210px; top: 90px; z-index: 20; width: 210px; height: 100%; box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.09); transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transform-origin: right center; transform: perspective(800px) rotateY(-90deg); } .goods-nav-box.on { transform: translateX(210px); -webkit-transform: translateX(210px); -moz-transform: translateX(210px); -ms-transform: translateX(210px); -o-transform: translateX(210px); } .goods-nav-box .box { position: relative; height: 100%; background-color: #fff; } .goods-nav-box .box:after { content: ""; width: 130px; height: 100%; background-color: rgba(0, 0, 0, 0.2); position: absolute; left: 100%; top: 0; z-index: -1; transition: transform 0.5s ease; -webkit-transition: transform 0.5s ease; -moz-transition: transform 0.5s ease; -ms-transition: transform 0.5s ease; -o-transition: transform 0.5s ease; opacity: 0; visibility: hidden; transform: translateX(-130px); -webkit-transform: translateX(-130px); -moz-transform: translateX(-130px); -ms-transform: translateX(-130px); -o-transform: translateX(-130px); } .goods-nav-box .top, .goods-nav-box li > a { font-family: "medium"; height: 100px; border-bottom: 1px solid #e9e9e9; } .goods-nav-box .top, .goods-nav-box li > a, .goods-nav-box .item { padding-left: 20px; padding-right: 20px; font-size: 18px; } .goods-nav-box .top { cursor: pointer; color: #0f358b; line-height: 90px; } .goods-nav-box .top img { position: relative; top: 2px; margin-right: 10px; } .goods-nav-box li { transition: box-shadow 0.3s ease; -webkit-transition: box-shadow 0.3s ease; -moz-transition: box-shadow 0.3s ease; -ms-transition: box-shadow 0.3s ease; -o-transition: box-shadow 0.3s ease; } .goods-nav-box li.on { box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.09); } .goods-nav-box li.on > a { border-color: transparent; } .goods-nav-box li.on > a, .goods-nav-box li:hover > a { color: #0f358b; } .goods-nav-box li.on > a:before, .goods-nav-box li:hover > a:before { width: 4px; } .goods-nav-box li a { display: block; color: #666; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .goods-nav-box li a:hover, .goods-nav-box li a.on { color: #0f358b; } .goods-nav-box li > a { position: relative; color: #000; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; } .goods-nav-box li > a:before { content: ""; width: 0; height: 24px; background-color: #0f358b; position: absolute; left: 0; top: 50%; margin-top: -12px; z-index: 10; transition: width 0.3s ease; -webkit-transition: width 0.3s ease; -moz-transition: width 0.3s ease; -ms-transition: width 0.3s ease; -o-transition: width 0.3s ease; } .goods-nav-box li > a span { line-height: 28px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .goods-nav-box .list { margin-top: -15px; padding-bottom: 32px; display: none; } .goods-nav-box .item { position: relative; } .goods-nav-box .item:hover > a, .goods-nav-box .item.on > a { color: #0f358b; } .goods-nav-box .item:hover > a:before, .goods-nav-box .item.on > a:before { opacity: 1; visibility: visible; transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); } .goods-nav-box .item .child.on { left: 310px; opacity: 1; visibility: visible; } .goods-nav-box .item a { line-height: 36px; } .goods-nav-box .item > a { position: relative; padding-left: 16px; font-family: "gm"; } .goods-nav-box .item > a:before { content: ""; width: 7px; height: 100%; background-image: url(../img/iright2.png); background-repeat: no-repeat; background-position: left center; position: absolute; left: 0; top: 0; z-index: 10; transform: translateX(7px); -webkit-transform: translateX(7px); -moz-transform: translateX(7px); -ms-transform: translateX(7px); -o-transform: translateX(7px); transition: transform 0.3s ease; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; -o-transition: transform 0.3s ease; opacity: 0; visibility: hidden; } .goods-nav-box .item .child { width: 130px; position: fixed; left: 0; bottom: 0; height: 100%; z-index: 10; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; background-color: rgba(0, 0, 0, 0.2); z-index: -1; opacity: 0; visibility: hidden; transition: all 0.8s ease; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -ms-transition: all 0.8s ease; -o-transition: all 0.8s ease; } .goods-nav-box .item .child .inner { width: 100%; } .goods-nav-box .item .child a { padding: 0 20px; font-family: "gr"; font-size: 16px; color: #fff; } .goods-nav-box .item .child a:hover, .goods-nav-box .item .child a.on { color: #0f358b; } .contact-wrapper { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ } .contact-wrapper .info { width: 50%; padding-left: 90px; padding-right: calc((100% - 1536px) / 2); } .contact-wrapper .caption { font-size: 36px; line-height: 36px; color: #000; font-weight: 700; margin-bottom: 22px; } .contact-wrapper .caption:first-child { margin-bottom: 0; } .contact-wrapper .contact ul { margin-bottom: 50px; } .contact-wrapper .contact ul li { position: relative; padding-top: 46px; padding-bottom: 46px; padding-left: 120px; border-bottom: 1px solid #efefef; } .contact-wrapper .contact ul li:hover .icon { animation: shake 0.3s ease; } .contact-wrapper .contact ul li:hover .title { color: #0f358b; } .contact-wrapper .contact p { font-size: 18px; color: #666; line-height: 24px; margin-top: 8px; } .contact-wrapper .contact .icon { position: absolute; left: 0; top: 30px; z-index: 10; width: 100px; display: block; } .contact-wrapper .title { font-size: 30px; color: #000; line-height: 36px; } .contact-wrapper .qrcode ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ } .contact-wrapper .qrcode li { width: 118px; margin-right: 30px; } .contact-wrapper .qrcode li:last-child { margin-right: 0; } .contact-wrapper .qrcode .pic { background-color: #fff; box-shadow: 0px 0px 30px 0px rgba(40, 40, 40, 0.1); border-radius: 5px; } .contact-wrapper .qrcode p { font-size: 16px; color: #666; line-height: 24px; text-align: center; margin-top: 5px; } .contact-wrapper .map { position: relative; overflow: hidden; height: 817px; width: calc(50% - 50px); margin-left: 50px; } .contact-wrapper .map .img { display: block; width: 100%; height: 100%; object-fit: cover; } .news-wrapper { background-color: #f6f6f6; } .news-wrapper .list li { margin-bottom: 20px; } .news-wrapper .list li:last-child { margin-bottom: 0; } .news-wrapper .list li:hover .pic img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .news-wrapper .list li:hover .name { color: #0f358b; } .news-wrapper .list li a { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; background-color: #fff; } .news-wrapper .info{ width:67%;} .news-wrapper .pic { width: 33%; } .news-wrapper .info { padding: 0 80px; } .news-wrapper .date { font-size: 16px; color: #cdd2dd; line-height: 20px; font-family: "db"; margin-bottom: 12px; } .news-wrapper .name { font-size: 24px; color: #000; font-weight: 700; line-height: 30px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: 30px; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .news-wrapper .desc { font-size: 14px; color: #666; line-height: 24px; height: 72px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 10px auto 20px; } .page-more { display: block; width: 212px; line-height: 40px; background-color: #0033a0; border-radius: 20px; color: #fff; text-align: center; } .page-more:hover { background-image: linear-gradient(90deg, #016cec 0%, #0237a5 100%), linear-gradient(#0033a0, #0033a0); background-blend-mode: normal, normal; } .page-title { font-size: 36px; color: #000; letter-spacing: 2px; line-height: 48px; margin-bottom: 22px; } .newsinfo-wrapper { padding: 0!important; } .newsinfo-wrapper > .w1370 { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ padding: 100px 0; } .newsinfo-wrapper .top { padding: 108px 0 110px; background-color: #ededed; } .newsinfo-wrapper .top .title { font-size: 36px; color: #1f1a17; line-height: 50px; font-weight: 700; } .newsinfo-wrapper .main { width: 73%; padding-right: 95px; border-right: 1px solid #e8e8e8; } .newsinfo-wrapper .other { line-height: 24px; margin-top: 7px; } .newsinfo-wrapper .other span { display: inline-block; font-size: 16px; color: #999; margin-right: 16px; } .newsinfo-wrapper .other span:last-child { margin-right: 0; } .newsinfo-wrapper .other .date { font-size: 18px; font-family: "db"; } .newsinfo-wrapper .content { line-height: 30px; } .newsinfo-wrapper .share-box { position: relative; margin: 68px auto 60px; } .newsinfo-wrapper .share-box p { color: #8c94a3; line-height: 20px; margin-bottom: 8px; } .newsinfo-wrapper .return { display: block; position: absolute; right: 0; bottom: 0; z-index: 10; width: 104px; line-height: 50px; color: #7c818b; border: solid 2px #ededed; text-align: center; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .newsinfo-wrapper .return:hover { color: #fff; background-color: #0f358b; border-color: #0f358b; } .newsinfo-wrapper .share { font-size: 0; } .newsinfo-wrapper .share a { display: inline-block; vertical-align: top; width: 54px; height: 54px; margin-right: 12px; background-size: contain; background-repeat: no-repeat; background-position: center center; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; } .newsinfo-wrapper .share a:last-child { margin-right: 0; } .newsinfo-wrapper .share .weibo { background-image: url(../img/ni-weibo.jpg); } .newsinfo-wrapper .share .weibo:hover { background-image: url(../img/ni-weibo2.jpg); } .newsinfo-wrapper .share .wechat { background-image: url(../img/ni-wechat.jpg); } .newsinfo-wrapper .share .wechat:hover { background-image: url(../img/ni-wechat2.jpg); } .newsinfo-wrapper .share .zone { background-image: url(../img/ni-zone.jpg); } .newsinfo-wrapper .share .zone:hover { background-image: url(../img/ni-zone2.jpg); } .newsinfo-wrapper .share .qq { background-image: url(../img/ni-qq.jpg); } .newsinfo-wrapper .share .qq:hover { background-image: url(../img/ni-qq2.jpg); } .newsinfo-wrapper .relative-box p { background-color: #ededed; margin-bottom: 10px; line-height: 64px; padding: 0 30px; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ } .newsinfo-wrapper .relative-box p:last-child { margin-bottom: 0; } .newsinfo-wrapper .relative-box p:hover a { color: #0f358b; text-decoration: underline; } .newsinfo-wrapper .relative-box p a { max-width: 90%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .newsinfo-wrapper .relative-box p, .newsinfo-wrapper .relative-box p a { font-size: 16px; color: #3f4150; } .newsinfo-wrapper .recommend { width: 27%; padding-left: 80px; } .newsinfo-wrapper .recommend .caption { font-size: 24px; color: #191c22; line-height: 30px; font-weight: 700; } .newsinfo-wrapper .recommend li { position: relative; padding-left: 15px; margin-top: 30px; } .newsinfo-wrapper .recommend li:hover a { color: #0f358b; text-decoration: underline; } .newsinfo-wrapper .recommend li:before { content: ""; width: 4px; height: 4px; border-radius: 50%; background-color: #b9c0ce; position: absolute; left: 0; top: 13px; z-index: 1; } .newsinfo-wrapper .recommend li a { color: #3f4150; font-size: 16px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 30px; max-height: 60px; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .platform-wrapper { padding-bottom: 0!important; } .platform-wrapper .box-1 .item { position: relative; padding: 120px 0; } .platform-wrapper .box-1 .item:first-child { padding-top: 0; } .platform-wrapper .box-1 .item:nth-child(odd) .box-container { flex-direction: row-reverse; } .platform-wrapper .box-1 .item:nth-child(odd) .pic-box { margin-right: 20px; } .platform-wrapper .box-1 .item:nth-child(even) { background-color: #f9f9f9; } .platform-wrapper .box-1 .item:nth-child(even) .pic-box { margin-left: 20px; } .platform-wrapper .box-1 .item:nth-child(even) .icon { left: auto; right: 0; } .platform-wrapper .box-1 .item .box-container { position: relative; z-index: 1; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .platform-wrapper .box-1 .pic-box { position: relative; width: 51.3%; } .platform-wrapper .box-1 .shadow { position: relative; padding-top: 28px; padding-bottom: 60px; background-image: url(../img/pc.png); background-position: center bottom; background-repeat: no-repeat; background-size: contain; } .platform-wrapper .box-1 .shadow:before { content: ""; width: 81.47%; height: 95%; background-color: #ffffff; box-shadow: 8px 8px 163px 0px rgba(0, 0, 0, 0.1); position: absolute; left: 9.265%; top: 0; z-index: -1; border-radius: 28px 28px 0 0; } .platform-wrapper .box-1 .pic, .platform-wrapper .box-1 .video { width: 75%; margin: 0 auto; } .platform-wrapper .box-1 .pic img, .platform-wrapper .box-1 video { height: 370px; object-fit: cover; } .platform-wrapper .box-1 .video { overflow: hidden; } .platform-wrapper .box-1 .icon { width: 22.08%; box-shadow: 8px 8px 163px 0px rgba(0, 0, 0, 0.1); border-radius: 26px; position: absolute; left: 0; bottom: 0; z-index: 10; } .platform-wrapper .box-1 .info-box { width: 38.15%; padding-top: 38px; } .platform-wrapper .box-1 .desc { line-height: 30px; min-height: 120px; margin-bottom: 62px; } .platform-wrapper .box-1 .desc li { padding-left: 18px; position: relative; cursor: default; } .platform-wrapper .box-1 .desc li:hover:before { background-color: #0f358b; } .platform-wrapper .box-1 .desc li:before { content: ""; background-color: #d0d0d6; width: 6px; height: 6px; position: absolute; left: 0; top: 12px; z-index: 10; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; } .platform-wrapper .box-1 .desc, .platform-wrapper .box-1 .desc li { font-size: 16px; color: #666; } .platform-wrapper .box-2 .index-title { margin-bottom: 20px; } .platform-wrapper .box-3 { position: relative; margin-top: 80px; background-color: #f8f8f8; padding-bottom: 100px; overflow: hidden; } .platform-wrapper .box-3 .pic { width: 100px; height: 100px; border-radius: 50%; margin: 0 auto; } .platform-wrapper .box-3 .pic img { height: 100%; object-fit: cover; } .platform-wrapper .box-3 .box-container { position: relative; z-index: 1; } .platform-wrapper .box-3 .index-title { margin-bottom: 35px; } .platform-wrapper .swiper-box { padding: 0 60px; } .platform-wrapper .swiper-container { padding: 20px; } .platform-wrapper .swiper-slide-duplicate-active { opacity: 0; visibility: hidden; } .platform-wrapper .swiper-slide { width: 40%; box-shadow: 0px 0px 30px 0px rgba(0, 51, 160, 0.08); border-radius: 5px; background-color: #fff; text-align: center; padding: 60px 60px 40px; line-height: 30px; height: auto; cursor: default; } .platform-wrapper .swiper-slide .title { font-size: 16px; color: #666; margin: 30px auto 10px; } .platform-wrapper .swiper-slide .desc { font-size: 18px; } .platform-wrapper .swiper-btn { width: 18px; height: 34px; background-size: contain; background-repeat: no-repeat; background-position: center center; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; } .platform-wrapper .prev { left: 0; background-image: url(../img/prev.png); } .platform-wrapper .prev:hover { background-image: url(../img/prev2.png); } .platform-wrapper .next { right: 0; background-image: url(../img/next.png); } .platform-wrapper .next:hover { background-image: url(../img/next2.png); } .platform-wrapper canvas { width: 100%; height: 800px; position: absolute; left: 0; bottom: -300px; z-index: 0; } .case-wrapper .box-1 .box-container { background-color: #fff; box-shadow: 0px 0px 30px 0px rgba(81, 81, 81, 0.1); } .case-wrapper .box-1 .haha{ display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; } .case-wrapper .box-1 .swiper-slide{ padding:0; text-align:left;} .case-wrapper .box-1 .pic img:hover { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .case-wrapper .box-1 .info, .case-wrapper .box-1 .pic { width: 50%; } .case-wrapper .box-1 .info { padding: 0 80px; } .case-wrapper .box-1 .title { font-size: 24px; color: #0033a0; line-height: 36px; } .case-wrapper .box-1 .brief { font-size: 30px; color: #000; line-height: 42px; max-height: 84px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 700; margin: 4px auto 30px; } .case-wrapper .box-1 .desc { font-size: 16px; color: #666; line-height: 24px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; height: 72px; margin-bottom: 55px; } .case-wrapper .box-1 .swiper-btn { top:50%; width: 18px; height: 34px; background-size: contain; background-repeat: no-repeat; background-position: center center; margin-top: -20px; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; } .case-wrapper .box-1 .prev { left: -53px; background-image: url(../img/prev.png); } .case-wrapper .box-1 .prev:hover { background-image: url(../img/prev2.png); } .case-wrapper .box-1 .next { right: -53px; background-image: url(../img/next.png); } .case-wrapper .box-1 .next:hover { background-image: url(../img/next2.png); } .case-wrapper .noSwiper .swiper-btn { display: none; } .case-wrapper .swiper-box { margin: 90px auto 60px; } .case-wrapper .swiper-box:before { content: ""; width: 100%; height: 1px; background-color: #efefef; position: absolute; left: 0; bottom: 3px; z-index: 0; } .case-wrapper .swiper-box .box-container { padding-left: 20px; padding-right: 20px; } .case-wrapper .box-container { position: relative; } .case-wrapper .swiper-slide { padding: 0 20px; text-align: center; } .case-wrapper .swiper-slide.on .icon img.init { transform: scale(0.5); -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); opacity: 0; visibility: hidden; } .case-wrapper .swiper-slide.on .icon img.on { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); opacity: 1; visibility: visible; } .case-wrapper .swiper-slide.on .name { color: #0f358b; } .case-wrapper .swiper-slide.on .name span:after { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } .case-wrapper .swiper-slide a { display: block; } .case-wrapper .swiper-slide .name { font-size: 16px; margin-top: 7px; } .case-wrapper .swiper-slide .name span { position: relative; display: inline-block; padding-bottom: 26px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 30px; } .case-wrapper .swiper-slide .name span:after { content: ""; width: 100%; height: 2px; background-color: #0f358b; position: absolute; left: 0; bottom: 0; z-index: 10; transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transition: transform 0.3s ease; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; -o-transition: transform 0.3s ease; } .case-wrapper .icon { width: 30px; height: 30px; position: relative; margin: 0 auto; } .case-wrapper .icon img { position: absolute; left: 0; top: 0; z-index: 10; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .case-wrapper .icon img.on { transform: scale(1.5); -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); opacity: 0; visibility: hidden; } .case-wrapper .swiper-btn { width: 18px; height: 34px; background-size: contain; background-repeat: no-repeat; background-position: center center; transform: none; top: 18px; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; } .case-wrapper .prev { left: 0; background-image: url(../img/prev.png); } .case-wrapper .prev:hover { background-image: url(../img/prev2.png); } .case-wrapper .next { right: 0; background-image: url(../img/next.png); } .case-wrapper .next:hover { background-image: url(../img/next2.png); } .case-wrapper .list ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .case-wrapper .list li { width: 32.16%; margin-top: 1.76%; margin-right: 1.76%; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .case-wrapper .list li:nth-child(3n) { margin-right: 0; } .case-wrapper .list li:nth-child(-n+3) { margin-top: 0; } .case-wrapper .list li:hover { box-shadow: 0 2px 30px rgba(0, 0, 0, 0.1); } .case-wrapper .list li:hover .pic img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .case-wrapper .list li:hover .name { color: #0f358b; } .case-wrapper .list li a { display: block; } .case-wrapper .list .pic img { height: 270px; object-fit: cover; } .case-wrapper .list .info { border: solid 1px #efefef; border-top: none; padding: 22px 30px 28px; } .case-wrapper .list .name { color: #000; line-height: 30px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; height: 30px; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; margin-bottom: 20px; } .case-wrapper .list .name, .case-wrapper .list .desc { font-size: 24px; } .case-wrapper .list .desc { color: #0033a0; font-weight: 700; font-family: Arial; line-height: 24px; } .case-wrapper .list p { font-size: 16px; color: #666; line-height: 24px; } .case-wrapper .param { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ } .case-wrapper .param span { min-width: 36%; padding-right: 15px; } .caseinfo-wrapper .page-title { font-weight: 700; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; } .caseinfo-wrapper .page-title:after { content: ""; flex: 1; height: 1px; background-color: #eaeaea; margin-left: 10px; } .caseinfo-wrapper .content { color: #666; font-size: 18px; } .caseinfo-wrapper .content b { font-family: "medium"; font-weight: 500; } .caseinfo-wrapper .base { position: relative; } .caseinfo-wrapper .base .desc { font-size: 16px; color: #666; line-height: 24px; text-align: justify; } .caseinfo-wrapper .return { display: inline-block; font-size: 16px; color: #666; position: absolute; right: 0; top: 0; z-index: 10; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .caseinfo-wrapper .return:hover { color: #0033a0; } .caseinfo-wrapper .return:hover i { background-image: url(../img/return2.png); } .caseinfo-wrapper .return i { display: inline-block; width: 14px; height: 12px; background-size: contain; background-repeat: no-repeat; background-position: center center; margin-right: 5px; vertical-align: middle; position: relative; top: -2px; background-image: url(../img/return.png); } .caseinfo-wrapper .brief { font-size: 24px; color: #0033a0; line-height: 30px; margin-bottom: 4px; } .caseinfo-wrapper .data { margin: 74px auto 90px; } .caseinfo-wrapper .data ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ } .caseinfo-wrapper .data li { padding-right: 50px; border-right: 1px solid #eaeaea; margin-right: 60px; } .caseinfo-wrapper .data li:last-child { padding-right: 0; margin-right: 0; border-right: none; } .caseinfo-wrapper .data .num { font-size: 60px; color: #000; line-height: 50px; font-family: "gm"; } .caseinfo-wrapper .data p { font-size: 16px; color: #666; line-height: 24px; margin-top: 32px; } .caseinfo-wrapper .item { margin-bottom: 66px; } .caseinfo-wrapper .item:last-child { margin-bottom: 0; } .caseinfo-wrapper .swiper-box { margin-top: 73px; } .caseinfo-wrapper .swiper-box .swiper-slide { width: 68%; } .caseinfo-wrapper .pic:hover img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .caseinfo-wrapper .swiper-btn { width: 13px; height: 24px; background-size: contain; background-repeat: no-repeat; background-position: center center; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; } .caseinfo-wrapper .prev { left: -73px; background-image: url(../img/prev3.png); } .caseinfo-wrapper .prev:hover { background-image: url(../img/prev4.png); } .caseinfo-wrapper .next { right: -73px; background-image: url(../img/next3.png); } .caseinfo-wrapper .next:hover { background-image: url(../img/next4.png); } .goods-wrapper { padding-bottom: 0!important; } .goods-wrapper .box-2 .pic:hover img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .goods-wrapper .box-2 .pic img { transition-duration: 2s; } .goods-wrapper .item { position: relative; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; } .goods-wrapper .item:first-child:after { content: ""; width: 50%; height: 1px; background-color: #f0f0f0; position: absolute; right: 0; top: 0; z-index: 0; } .goods-wrapper .item:nth-child(odd) .info { padding-right: calc((100% - 1536px) / 2); padding-left: 110px; } .goods-wrapper .item:nth-child(even) { flex-direction: row-reverse; } .goods-wrapper .item:nth-child(even) .info { padding-left: calc((100% - 1536px) / 2); padding-right: 110px; } .goods-wrapper .item .page-title { font-weight: 700; letter-spacing: 0; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .goods-wrapper .item .desc { line-height: 30px; min-height: 150px; margin-bottom: 42px; } .goods-wrapper .item .desc li { padding-left: 18px; position: relative; cursor: default; } .goods-wrapper .item .desc li:hover:before { background-color: #0f358b; } .goods-wrapper .item .desc li:before { content: ""; background-color: #d0d0d6; width: 6px; height: 6px; position: absolute; left: 0; top: 12px; z-index: 10; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; } .goods-wrapper .item .desc, .goods-wrapper .item .desc li { font-size: 16px; color: #666; } .goods-wrapper .pic, .goods-wrapper .info { width: 50%; } .goods-wrapper .info:hover .page-title { color: #0033a0; } .goodsinfo-wrapper { padding-top: 0!important; } .goodsinfo-wrapper .index-title { font-family: "微软雅黑"; font-weight: 700; } .goodsinfo-wrapper .w1200 > div { padding-top: 120px; } .goodsinfo-wrapper .box-1 .list ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .goodsinfo-wrapper .box-1 li { cursor: default; text-align: center; padding: 0 25px; } .goodsinfo-wrapper .box-1 li:hover .icon:before { animation: iconScale 1.3s ease-out 75ms infinite; } .goodsinfo-wrapper .box-1 .icon { display: block; width: 120px; margin: 0 auto; position: relative; transition: transform 0.3s ease; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; -o-transition: transform 0.3s ease; border-radius: 50%; } .goodsinfo-wrapper .box-1 .icon:before { content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #0033a0; border-radius: 50%; z-index: 0; opacity: 0; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .goodsinfo-wrapper .box-1 .icon img { position: relative; z-index: 2; display: block; width: 100%; } .goodsinfo-wrapper .box-1 .desc { font-size: 16px; line-height: 30px; font-family: "medium"; margin-top: 22px; } .goodsinfo-wrapper .box-2 { cursor: pointer; } .goodsinfo-wrapper .box-2 .video-box { position: relative; overflow: hidden; } .goodsinfo-wrapper .box-2 .video-box:before { content: ""; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); position: absolute; left: 0; top: 0; z-index: 1; } .goodsinfo-wrapper .box-2 .video-box.on .pic { opacity: 0; visibility: hidden; } .goodsinfo-wrapper .box-2 .video-box.on video { opacity: 1; visibility: visible; } .goodsinfo-wrapper .box-2 .video-box.on:hover .pic img { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } .goodsinfo-wrapper .box-2:hover .pic:after { opacity: 1; visibility: visible; } .goodsinfo-wrapper .box-2:hover .pic:after { -webkit-animation: sonarEffect 1.3s ease-out 75ms infinite; -moz-animation: sonarEffect 1.3s ease-out 75ms infinite; animation: sonarEffect 1.3s ease-out 75ms infinite; } .goodsinfo-wrapper .box-2:hover .pic:before { background-color: #0f358b; border-color: #0f358b; -webkit-transform: scale(0.93); -moz-transform: scale(0.93); -ms-transform: scale(0.93); transform: scale(0.93); } .goodsinfo-wrapper .box-2 .pic { position: relative; } .goodsinfo-wrapper .box-2 .pic:before, .goodsinfo-wrapper .box-2 .pic:after { content: ""; pointer-events: none; position: absolute; width: 86px; height: 86px; border-radius: 50%; left: 50%; top: 50%; margin-top: -43px; margin-left: -43px; } .goodsinfo-wrapper .box-2 .pic:before { border: 2px solid #fff; background-image: url(../img/play.png); background-repeat: no-repeat; background-position: center center; box-sizing: border-box; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; z-index: 10; } .goodsinfo-wrapper .box-2 .pic:after { z-index: 10; opacity: 0; visibility: hidden; background-color: #0033a0; z-index: 1; } .goodsinfo-wrapper .box-2 video { width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0; z-index: 2; opacity: 0; visibility: hidden; } .goodsinfo-wrapper .content table { width: 100%; } .goodsinfo-wrapper .content table tr:nth-child(odd) { background-color: #f8f8f8; } .goodsinfo-wrapper .content td { line-height: 30px; padding-top: 15px; padding-bottom: 15px; font-family: "medium"; font-size: 16px; color: #666; padding-left: 60px; } .goodsinfo-wrapper .content td:last-child { padding-right: 60px; } .goodsinfo-wrapper .content td:first-child { width: 302px; } .goodsinfo-wrapper .box-4 .list ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; justify-content: center; } .goodsinfo-wrapper .box-4 li { cursor: default; width: 25%; padding: 0 20px; margin-top: 70px; text-align: center; } .goodsinfo-wrapper .box-4 li:hover .icon:before { transform: scale(1) rotate(-30deg); opacity: 1; visibility: visible; } .goodsinfo-wrapper .box-4 .icon { position: relative; width: 220px; height: 220px; margin: 0 auto; border-radius: 50%; } .goodsinfo-wrapper .box-4 .icon:before { content: ""; width: 112%; height: 112%; box-sizing: border-box; border: 4px dashed #0033a0; position: absolute; left: -6%; top: -6%; z-index: 10; border-radius: 50%; opacity: 0; visibility: hidden; transform: scale(0.9); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .goodsinfo-wrapper .box-4 .icon:after { content: ""; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); position: absolute; left: 0; top: 0; z-index: 1; } .goodsinfo-wrapper .box-4 .icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .goodsinfo-wrapper .box-4 .name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 24px; line-height: 30px; } .goodsinfo-wrapper .name { font-size: 24px; } .goodsinfo-wrapper .box-5 ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .goodsinfo-wrapper .box-5 li { width: 48.75%; position: relative; margin-top: 30px; } .goodsinfo-wrapper .box-5 li:nth-child(-n+2) { margin-top: 0; } .goodsinfo-wrapper .box-5 li:hover .pic img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .goodsinfo-wrapper .box-5 .pic img { height: 320px; } .goodsinfo-wrapper .box-5 .name { position: absolute; left: 0; bottom: 0; z-index: 10; color: #fff; width: 100%; background-color: rgba(0, 51, 160, 0.85); padding: 0 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 60px; } .goodsinfo-wrapper .box-6 .swiper-slide:hover .pic img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .goodsinfo-wrapper .box-6 .pic { position: relative; } .goodsinfo-wrapper .box-6 .pic:after { content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.56); position: absolute; left: 0; top: 0; z-index: 1; } .goodsinfo-wrapper .box-6 .pic img { height: 200px; object-fit: cover; } .goodsinfo-wrapper .box-6 p { font-size: 18px; line-height: 24px; text-align: center; margin-top: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .goodsinfo-wrapper .box-6 .swiper-btn { width: 18px; height: 34px; background-size: contain; background-repeat: no-repeat; background-position: center center; margin-top: -20px; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; } .goodsinfo-wrapper .box-6 .prev { left: -53px; background-image: url(../img/prev.png); } .goodsinfo-wrapper .box-6 .prev:hover { background-image: url(../img/prev2.png); } .goodsinfo-wrapper .box-6 .next { right: -53px; background-image: url(../img/next.png); } .goodsinfo-wrapper .box-6 .next:hover { background-image: url(../img/next2.png); } .page-container { position: relative; } .page-container .page-banner-wrapper .box-container { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; align-items: center; } .page-container .info-box { width: 410px; } .page-container .pic-box { width: 64.2%; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; align-items: center; } .page-container .page-banner-wrapper .swiper-box { width: 440px; } .page-container .page-banner-wrapper .swiper-box .swiper-slide { display: none; } .page-container .page-banner-wrapper .swiper-box .swiper-slide.on { display: block; animation: fadeIn 0.5s ease; } .goods-banner-wrapper .info { padding-left: 400px; padding-right: calc((100% - 1536px) / 2); transition: padding-left 0.3s ease; -webkit-transition: padding-left 0.3s ease; -moz-transition: padding-left 0.3s ease; -ms-transition: padding-left 0.3s ease; -o-transition: padding-left 0.3s ease; } .goods-banner-wrapper .info.on { padding-left: calc((100% - 1536px) / 2); } .goods-banner-wrapper .box-container { width: 100%; } .thumb-box { position: relative; width: 108px; padding: 90px 0; height: 100%; } .thumb-box .swiper-container { height: 328px; } .thumb-box .swiper-slide { position: relative; cursor: pointer; background-color: #fff; overflow: hidden; } .thumb-box .swiper-slide:hover:before, .thumb-box .swiper-slide.on:before { opacity: 1; visibility: visible; } .thumb-box .swiper-slide:hover img, .thumb-box .swiper-slide.on img { transform: scale(0.8); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); } .thumb-box .swiper-slide:before { content: ""; width: 100%; height: 100%; border: 2px solid #0033a0; position: absolute; left: 0; top: 0; z-index: 0; box-sizing: border-box; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; opacity: 0; visibility: hidden; } .thumb-box .pic { height: 100%; } .thumb-box .pic img { height: 100%; object-fit: contain; transform: scale(0.7); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); } .thumb-box .swiper-btn { left: 50%; width: 60px; height: 60px; background-size: contain; background-repeat: no-repeat; background-position: center center; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; } .thumb-box .prev { top: 0; background-image: url(../img/prev5.png); } .thumb-box .prev:hover { background-image: url(../img/prev6.png); } .thumb-box .next { top: auto; bottom: 0; background-image: url(../img/next5.png); } .thumb-box .next:hover { background-image: url(../img/next6.png); } .g_detailsimgbox { width: 100%; height: 410px; position: absolute; left: 0; bottom: 0; z-index: 0; } @keyframes move_wave { 0% { transform: translateX(0) translateZ(0) scaleY(1); } 50% { transform: translateX(-25%) translateZ(0) scaleY(0.55); } 100% { transform: translateX(-50%) translateZ(0) scaleY(1); } } @-webkit-keyframes move_wave { 0% { transform: translateX(0) translateZ(0) scaleY(1); } 50% { transform: translateX(-25%) translateZ(0) scaleY(0.55); } 100% { transform: translateX(-50%) translateZ(0) scaleY(1); } } .waveWrapper { overflow: hidden; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; z-index: 0; } .waveWrapperInner { position: absolute; width: 100%; overflow: hidden; height: 120%; bottom: -1px; } .bgMiddle { z-index: 10; opacity: 0.75; } .bgBottom { z-index: 5; } .wave { position: absolute; left: 0; width: 200%; height: 100%; background-repeat: repeat no-repeat; background-position: 0 bottom; transform-origin: center bottom; } .waveAnimation .waveTop { animation: move-wave 3s; -webkit-animation: move-wave 3s; -webkit-animation-delay: 1s; animation-delay: 1s; } .waveMiddle { background-image: url(../img/bg.png); background-size: 50% 147px; } .waveAnimation .waveMiddle { animation: move_wave 15s linear infinite; } .waveBottom { background-image: url(../img/bg2.png); background-size: 50% 234px; } .waveAnimation .waveBottom { animation: move_wave 15s linear infinite; } .marquee-box { overflow: hidden; width: 100%; position: absolute; left: 0; bottom: 0; z-index: 0; } .marquee { width: 8000%; height: 231px; } .wave-list-box { float: left; } .wave-list-box ul { float: left; height: 231px; overflow: hidden; zoom: 1; } .wave-list-box ul li { height: 231px; width: 100%; float: left; line-height: 30px; list-style: none; } .swiper-btn { display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); z-index: 10; } .service-wrapper { padding-top: 0!important; padding-bottom: 0!important; } .service-wrapper .box-1 { text-align: center; } .service-wrapper .box-1 .index-title { line-height: 72px; font-family: "微软雅黑"; font-weight: 700; } .service-wrapper .box-1 ul { position: relative; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .service-wrapper .box-1 ul:before { content: ""; display: block; width: calc(100% - 200px); height: 1px; background: url(../img/line.png) repeat-x; position: absolute; left: 100px; top: 66px; z-index: 0; } .service-wrapper .box-1 ul li { position: relative; cursor: default; width: 20%; text-align: center; z-index: 1; } .service-wrapper .box-1 ul li:hover .icon { transform: rotateY(180deg); } .service-wrapper .box-1 ul li:last-child:after { display: none; } .service-wrapper .box-1 ul li:after { content: ""; width: 36px; height: 36px; background: url(../img/s-right.png) no-repeat center center; background-size: contain; position: absolute; right: -18px; top: 48px; z-index: 10; } .service-wrapper .box-1 ul p { font-size: 24px; color: #000; line-height: 30px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 38px; } .service-wrapper .box-1 .icon { display: block; width: 132px; margin: 0 auto; border-radius: 50%; box-shadow: 0px 0px 30px 0px rgba(0, 51, 160, 0.1); transition: transform 0.5s ease; -webkit-transition: transform 0.5s ease; -moz-transition: transform 0.5s ease; -ms-transition: transform 0.5s ease; -o-transition: transform 0.5s ease; } .service-wrapper .box-1 .info { width: 68.4%; margin: 0 auto; } .service-wrapper .box-1 .name { font-size: 24px; font-family: "medium"; color: #000; line-height: 30px; margin: 35px auto 14px; } .service-wrapper .box-1 .desc { font-size: 16px; color: #666; line-height: 24px; } .service-wrapper .box-1 .btn { display: inline-block; min-width: 210px; line-height: 50px; background-color: #0033a0; box-shadow: 0px 0px 30px 0px rgba(0, 51, 160, 0.1); border-radius: 25px; text-align: center; padding: 0 15px; color: #fff; font-size: 18px; margin-top: 66px; } .service-wrapper .box-1 .btn:hover { background-image: linear-gradient(90deg, #016cec 0%, #0237a5 100%), linear-gradient(#0033a0, #0033a0); background-blend-mode: normal, normal; } .service-wrapper .box-2 { position: relative; margin-top: 120px; } .service-wrapper .box-2 .box { position: absolute; left: 0; top: 0; z-index: 10; width: 100%; } .service-wrapper .box-2 div, .service-wrapper .box-2 p { color: #fff; } .service-wrapper .box-2 .main { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; padding-top:110px; } .service-wrapper .box-2 .info { width: 39.8%; padding-left: 260px; } .service-wrapper .box-2 .page-title { margin-bottom: 28px; } .service-wrapper .data li { line-height: 24px; margin-bottom: 60px; } .service-wrapper .data li:last-child { margin-bottom: 0; } .service-wrapper .data .num span { font-size: 60px; line-height: 50px; height: 50px; font-family: "db"; display: inline-block; } .service-wrapper .data .num, .service-wrapper .data .desc { font-size: 16px; } .service-wrapper .data p { font-size: 18px; margin: 11px auto 18px; } /*.service-wrapper .areas { width: 50%; height: 320px; position: relative; }*/ .service-wrapper .areas li { position: absolute; z-index: 10; } .service-wrapper .areas li:nth-child(2n) i { animation-delay: 0.2s; } .service-wrapper .areas li:nth-child(3n) i { animation-delay: 0.3s; } .service-wrapper .areas li:nth-child(4n) i { animation-delay: 0.4s; } .service-wrapper .areas li:first-child { left: 56%; top: 47%; } .service-wrapper .areas li:first-child p { margin-top: 4px; } .service-wrapper .areas li:nth-child(2), .service-wrapper .areas li:nth-child(3), .service-wrapper .areas li:nth-child(4), .service-wrapper .areas li:nth-child(11), .service-wrapper .areas li:nth-child(7) { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-direction: row-reverse; } .service-wrapper .areas li:nth-child(2) p, .service-wrapper .areas li:nth-child(3) p, .service-wrapper .areas li:nth-child(4) p, .service-wrapper .areas li:nth-child(11) p, .service-wrapper .areas li:nth-child(7) p { margin-right: 5px; } .service-wrapper .areas li:nth-child(2) { right: 36%; top: 54%; } .service-wrapper .areas li:nth-child(3) { left: 65%; top: 43%; } .service-wrapper .areas li:nth-child(4) { right: 26%; top: 43%; } .service-wrapper .areas li:nth-child(4) p { margin-right: 0; } .service-wrapper .areas li:nth-child(4) i { left: -7px; top: 8px; } .service-wrapper .areas li:nth-child(5) { right: 21.5%; top: 35%; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ } .service-wrapper .areas li:nth-child(5) p { margin-left: 8px; margin-right: 0; } .service-wrapper .areas li:nth-child(6) { right: 24%; top: 47.5%; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ } .service-wrapper .areas li:nth-child(6) p { margin-left: 8px; margin-right: 0; } .service-wrapper .areas li:nth-child(7) { right: 25%; top: 53%; } .service-wrapper .areas li:nth-child(8) { right: 22%; top: 52%; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ } .service-wrapper .areas li:nth-child(8) p { margin-left: 8px; margin-right: 0; } .service-wrapper .areas li:nth-child(9) { right: 24.5%; bottom: 39%; } .service-wrapper .areas li:nth-child(10) { left: 70%; bottom: 30.5%; } .service-wrapper .areas li:nth-child(11) { left: 66%; bottom: 41%; } .service-wrapper .areas li i { position: relative; display: block; width: 24px; height: 24px; border-radius: 50%; margin: 0 auto; } .service-wrapper .areas li i:before, .service-wrapper .areas li i:after { content: ""; position: absolute; left: 0; top: 0; border-radius: 50%; width: 100%; height: 100%; } .service-wrapper .areas li i:before { background-color: #0033a0; transform: scale(0.3333); -webkit-transform: scale(0.3333); -moz-transform: scale(0.3333); -ms-transform: scale(0.3333); -o-transform: scale(0.3333); z-index: 10; } .service-wrapper .areas li i:after { background-image: url(../img/dot.png); background-size: contain; background-repeat: no-repeat; background-position: center center; z-index: 1; animation: iconScale 1.5s linear infinite; } .service-wrapper .areas p { font-size: 16px; line-height: 24px; } .service-wrapper .box-3 { background: url(../img/servicebg.jpg) no-repeat right bottom; background-size: 57.81%; padding-bottom: 120px; /* input placeholder */ } .service-wrapper .box-3 .index-title { margin-bottom: 5px; } .service-wrapper .box-3 .box-container > div { width: 66%; margin: 0 auto; } .service-wrapper .box-3 .top { text-align: center; } .service-wrapper .box-3 .brief { font-size: 30px; line-height: 36px; } .service-wrapper .box-3 .desc { font-size: 24px; line-height: 30px; margin: 44px auto 25px; } .service-wrapper .box-3 .group { margin-bottom: 20px; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .service-wrapper .box-3 .group.max .text { width: 100%; } .service-wrapper .box-3 .msg, .service-wrapper .box-3 .text { font-size: 16px; color: #666; padding-left: 18px; padding-right: 18px; background-color: #fff; border-radius: 5px; border: solid 1px #e5e5e5; } .service-wrapper .box-3 ::-webkit-input-placeholder { /* WebKit browsers */ color: #666; font-size: 16px; } .service-wrapper .box-3 :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #666; font-size: 16px; } .service-wrapper .box-3 ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #666; font-size: 16px; } .service-wrapper .box-3 :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #666; font-size: 16px; } .service-wrapper .box-3 .text { width: 49%; line-height: 62px; } .service-wrapper .box-3 .msg { width: 100%; height: 104px; resize: none; font-family: "微软雅黑"; padding-top: 20px; padding-bottom: 20px; line-height: 24px; } .service-wrapper .box-3 .submit { display: block; margin: 30px auto 0; width: 242px; line-height: 64px; text-align: center; font-size: 24px; color: #fff; background-color: #0033a0; border-radius: 5px; } .service-wrapper .box-3 .submit:hover { background-image: linear-gradient(90deg, #016cec 0%, #0237a5 100%), linear-gradient(#0033a0, #0033a0); background-blend-mode: normal, normal; } .about-wrapper .box-1 .index-title { font-weight: 700; font-family: "微软雅黑"; margin-bottom: 0; } .about-wrapper .box-1 .brief { font-size: 18px; line-height: 30px; text-align: center; width: 1092px; margin: 18px auto 82px; } .about-wrapper .box-1 .list ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .about-wrapper .box-1 .list ul li { width: 14.285%; padding: 0 10px; text-align: center; } .about-wrapper .box-1 .list ul li:hover .icon { transform: rotateY(180deg); } .about-wrapper .box-1 .icon { width: 60px; display: block; margin: 0 auto; transition: transform 0.3s ease; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; -o-transition: transform 0.3s ease; } .about-wrapper .box-1 p { font-size: 18px; line-height: 24px; margin-top: 35px; } .about-wrapper .box-3 { background-color: #f3f6fb; padding: 120px 0; } .about-wrapper .box-3 .list ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ } .about-wrapper .box-3 .list li { position: relative; width: 33.24%; margin-right: 0.14%; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .about-wrapper .box-3 .list li:hover { width: 50%; } .about-wrapper .box-3 .list li:hover .pic:before { background-image: url(../img/shadow.png); } .about-wrapper .box-3 .list li:hover > .page-title { display: none; } .about-wrapper .box-3 .list li:hover .info { opacity: 1; visibility: visible; top: 50%; } .about-wrapper .box-3 li > .page-title, .about-wrapper .box-3 .info { padding: 0 120px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); z-index: 10; transition: top 0.3s ease; -webkit-transition: top 0.3s ease; -moz-transition: top 0.3s ease; -ms-transition: top 0.3s ease; -o-transition: top 0.3s ease; } .about-wrapper .box-3 .pic { position: relative; transform: skew(-4deg); transform-origin: left bottom; } .about-wrapper .box-3 .pic:before { content: ""; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); position: absolute; left: 0; top: 0; z-index: 1; background-position: left center; background-size: cover; background-repeat: no-repeat; } .about-wrapper .box-3 .pic img { height: 682px; object-fit: cover; } .about-wrapper .box-3 li > .page-title { width: 100%; } .about-wrapper .box-3 .info { opacity: 0; visibility: hidden; top: 70%; width: 650px; } .about-wrapper .box-3 .page-title { color: #fff; } .about-wrapper .box-3 .desc { font-size: 18px; line-height: 30px; text-align: justify; color: #fff; } .about-wrapper .box-4 .list { margin-top: 20px; } .about-wrapper .box-4 ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .about-wrapper .box-4 ul li { cursor: default; width: 31.9%; min-height: 80px; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; font-size: 18px; line-height: 30px; padding-left: 26px; color: #000; border-bottom: 1px solid #ebedef; margin-right: 2.15%; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; background: url(../img/prize.png) no-repeat left center; } .about-wrapper .box-4 ul li:nth-child(3n) { margin-right: 0; } .about-wrapper .box-4 ul li:hover { color: #0033a0; } .page-video-box { cursor: pointer; } .page-video-box .video-box { position: relative; overflow: hidden; } .page-video-box .video-box:before { content: ""; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); position: absolute; left: 0; top: 0; z-index: 1; } .page-video-box .video-box.on .pic { opacity: 0; visibility: hidden; } .page-video-box .video-box.on video { opacity: 1; visibility: visible; } .page-video-box .video-box.on:hover .pic img { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } .page-video-box:hover .icon:after { opacity: 1; visibility: visible; } .page-video-box:hover .icon:after { -webkit-animation: sonarEffect 1.3s ease-out 75ms infinite; -moz-animation: sonarEffect 1.3s ease-out 75ms infinite; animation: sonarEffect 1.3s ease-out 75ms infinite; } .page-video-box:hover .icon:before { -webkit-transform: scale(0.93); -moz-transform: scale(0.93); -ms-transform: scale(0.93); transform: scale(0.93); } .page-video-box .icon { position: relative; width: 60px; height: 60px; border-radius: 50%; margin: 0 auto; } .page-video-box .icon:before, .page-video-box .icon:after { content: ""; pointer-events: none; position: absolute; left: 0; top: 0; border-radius: 50%; width: 100%; height: 100%; } .page-video-box .icon:before { background-image: url(../img/play2.png); background-repeat: no-repeat; background-position: center center; box-sizing: border-box; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; z-index: 10; } .page-video-box .icon:after { z-index: 10; opacity: 0; visibility: hidden; z-index: 1; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1); } .page-video-box .info, .page-video-box video { width: 100%; position: absolute; left: 0; top: 0; height: 100%; z-index: 2; } .page-video-box .info { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; } .page-video-box .info .inner { width: 100%; } .page-video-box .info .index-title { color: #fff; margin-bottom: 0; margin-top: 20px; } .page-video-box video { object-fit: cover; z-index: 2; opacity: 0; visibility: hidden; } .padding { padding: 120px 0; } .join-wrapper { padding-bottom: 0!important; } .join-wrapper .page-title, .join-wrapper .index-title { font-family: "微软雅黑"; font-weight: 700; } .join-wrapper .box-2, .join-wrapper .box-4 { background-color: #f3f6fb; } .join-wrapper .box-1 .box-container, .join-wrapper .box-4 .box-container { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ } .join-wrapper .box-1 .info, .join-wrapper .box-4 .info, .join-wrapper .box-1 .pic, .join-wrapper .box-4 .pic { width: 50%; } .join-wrapper .box-1 .pic:hover img, .join-wrapper .box-4 .pic:hover img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .join-wrapper .box-1 .info { padding-left: 120px; } .join-wrapper .box-1 .index-title { text-align: left; margin-bottom: 36px; } .join-wrapper .box-2 .list ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .join-wrapper .box-2 .list li { margin-top: 3px; margin-right: 3px; width: calc((100% - 6px) / 3); } .join-wrapper .box-2 .list li:nth-child(3n) { margin-right: 0; } .join-wrapper .box-2 .list li:nth-child(-n+3) { margin-top: 0; } .join-wrapper .box-2 .list li:hover .pic img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .join-wrapper .box-2 .pic img { height: 310px; object-fit: cover; } .join-wrapper .box-3 .pic { background-position: center center; background-size: cover; background-attachment: fixed; } .join-wrapper .box-3 .pic img { opacity: 0; visibility: hidden; height: 863px; } .join-wrapper .box-3 .main { position: relative; } .join-wrapper .box-3 .bottom { position: absolute; left: 0; bottom: 0; z-index: 10; width: 100%; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ } .join-wrapper .box-3 .left { width: 42.84%; background-color: #0033a0; padding: 34px 126px 50px 50px; } .join-wrapper .box-3 .left div { color: #fff; padding-left: 32px; border-left: 1px solid #fff; } .join-wrapper .box-3 .left .page-title { margin-bottom: 0; padding-bottom: 5px; } .join-wrapper .box-3 .left .content { min-height: 146px; } .join-wrapper .box-3 .right { flex: 1; overflow: hidden; background-color: rgba(255, 255, 255, 0.9); padding: 36px 54px; } .join-wrapper .box-3 .right ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .join-wrapper .box-3 .right li { cursor: default; width: 15.58%; padding: 18px 15px 16px; text-align: center; margin-right: 1.304%; margin-top: 1.304%; background-color: #fff; } .join-wrapper .box-3 .right li:hover .icon { animation: shake 0.3s ease; } .join-wrapper .box-3 .right p { font-size: 16px; color: #000; margin-top: 6px; } .join-wrapper .box-3 .icon { width: 36px; display: block; margin: 0 auto; transition: transform 0.3s ease; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; -o-transition: transform 0.3s ease; } .join-wrapper .box-4 .box-container { background-color: #fff; align-items: center; } .join-wrapper .box-4 .info { padding: 0 100px; } .join-wrapper .box-4 .content { line-height: 30px; margin-bottom: 76px; } .join-wrapper .box-4 .content > ul > li { font-size: 20px; color: #666; margin-bottom: 30px; } .join-wrapper .box-4 .content > ul > li:last-child { margin-bottom: 0; } .join-wrapper .box-4 .content .title { font-size: 24px; color: #0033a0; font-weight: 700; } .join-wrapper .box-4 .btn { display: inline-block; min-width: 260px; line-height: 50px; background-color: #0f358b; box-shadow: 0px 0px 30px 0px rgba(0, 51, 160, 0.1); border-radius: 25px; text-align: center; color: #fff; font-size: 18px; padding: 0 15px; } .join-wrapper .box-4 .btn:hover { background-image: linear-gradient(90deg, #016cec 0%, #0237a5 100%), linear-gradient(#0033a0, #0033a0); background-blend-mode: normal, normal; } .solution-wrapper { padding-bottom: 0!important; } .solution-wrapper .tar { height: 300px; width: 100%; position: relative; } .solution-wrapper .main { background-color: #fff; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ box-shadow: 0px 0px 19px 1px rgba(33, 33, 33, 0.1); border-radius: 5px; } .solution-wrapper .box-1 ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .solution-wrapper .box-1 li { position: relative; width: 32.16%; margin-right: 1.76%; margin-top: 1.76%; overflow: hidden; } .solution-wrapper .box-1 li:nth-child(3n) { margin-right: 0; } .solution-wrapper .box-1 li:nth-child(-n+3) { margin-top: 0; } .solution-wrapper .box-1 li:hover .pic:before { background-image: url(../img/shadow4.png); } .solution-wrapper .box-1 li:hover .info { bottom: 0; } .solution-wrapper .box-1 li:hover .desc, .solution-wrapper .box-1 li:hover .icon { opacity: 1; visibility: visible; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } .solution-wrapper .box-1 li:hover .pic img { filter: grayscale(0); } .solution-wrapper .box-1 li a { display: block; } .solution-wrapper .box-1 .pic { position: relative; } .solution-wrapper .box-1 .pic:before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; background-image: url(../img/shadow5.png); background-repeat: no-repeat; background-position: center bottom; background-size: 100%; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; background-size: cover; } .solution-wrapper .box-1 .pic img { height: 337px; object-fit: cover; filter: grayscale(1); } .solution-wrapper .box-1 .info { position: absolute; left: 0; bottom: -68px; z-index: 10; width: 100%; padding: 0 30px; transition: bottom 0.3s ease; -webkit-transition: bottom 0.3s ease; -moz-transition: bottom 0.3s ease; -ms-transition: bottom 0.3s ease; -o-transition: bottom 0.3s ease; } .solution-wrapper .box-1 .name { font-size: 24px; color: #fff; line-height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .solution-wrapper .box-1 .desc, .solution-wrapper .box-1 .icon { opacity: 0; visibility: hidden; transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); -o-transform: translateY(25px); transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; } .solution-wrapper .box-1 .desc { color: #ccdaf7; line-height: 24px; margin: 5px auto 23px; transition-delay: 0.1s; } .solution-wrapper .box-1 .icon { display: block; margin-bottom: 30px; transition-delay: 0.2s; } .solution-wrapper .tab-box { width: 21.27%; } .solution-wrapper .tab-box .item { position: relative; cursor: pointer; background-color: #ddeaf6; height: 33.33%; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; } .solution-wrapper .tab-box .item:before { content: ""; border: 15px solid transparent; position: absolute; right: -30px; top: 50%; margin-top: -15px; border-left-color: #0033a0; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; } .solution-wrapper .tab-box .item.on { background-color: #0033a0; } .solution-wrapper .tab-box .item.on:before { opacity: 1; visibility: visible; } .solution-wrapper .tab-box .item.on p, .solution-wrapper .tab-box .item.on .name { color: #fff; } .solution-wrapper .tab-box .inner { width: 100%; padding: 0 40px; } .solution-wrapper .tab-box p { font-size: 18px; color: #666; line-height: 24px; margin-bottom: 2px; } .solution-wrapper .tab-box .name { font-size: 24px; color: #000; line-height: 30px; font-weight: 700; font-family: "medium"; } .solution-wrapper .detail-box { width: 78.73%; padding: 73px 85px 40px 100px; } .solution-wrapper .detail-box .swiper-slide { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .solution-wrapper .detail-box .title { font-size: 30px; color: #000; font-family: "medium"; line-height: 36px; margin-bottom: 20px; } .solution-wrapper .detail-box .desc { font-size: 16px; line-height: 30px; } .solution-wrapper .swiper-slide-active .left, .solution-wrapper .swiper-slide-active .right { opacity: 1; visibility: visible; } .solution-wrapper .left, .solution-wrapper .right { opacity: 0; visibility: hidden; transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; } .solution-wrapper .left { position: relative; overflow: hidden; width: 61.5%; } .solution-wrapper .right { width: 31.15%; } .solution-wrapper .box-2 { background-color: #f7f7fa; } .solution-wrapper .top { text-align: center; width: 1036px; margin: 0 auto; } .solution-wrapper .top .index-title { margin-bottom: 0; font-weight: 700; font-family: "微软雅黑"; } .solution-wrapper .brief { font-size: 18px; line-height: 30px; margin: 18px auto 60px; } .solution-wrapper .label { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; line-height: 30px; } .solution-wrapper .label span { font-size: 16px; color: #666; margin-right: 55px; } .solution-wrapper .label span:last-child, .solution-wrapper .label span:nth-child(even) { margin-right: 0; } .solution-wrapper .label span > i { display: inline-block; width: 15px; height: 15px; margin-right: 10px; vertical-align: middle; } .solutioninfo-wrapper { padding-bottom: 0!important; } .solutioninfo-wrapper .box-1 ul { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; justify-content: center; } .solutioninfo-wrapper .box-1 li { position: relative; width: 24.088%; margin-top: 1.216%; margin-right: 1.216%; } .solutioninfo-wrapper .box-1 li:nth-child(4n), .solutioninfo-wrapper .box-1 li:last-child { margin-right: 0; } .solutioninfo-wrapper .box-1 li:nth-child(-n+4) { margin-top: 0; } .solutioninfo-wrapper .box-1 li:hover .pic img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .solutioninfo-wrapper .box-1 li:hover .desc { height: auto; min-height: 48px; } .solutioninfo-wrapper .box-1 .pic { position: relative; } .solutioninfo-wrapper .box-1 .pic:before { content: ""; width: 100%; height: 100%; /* background: linear-gradient(rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.8));*/ background-image: url(../img/shadow5.png); background-repeat: no-repeat; background-position: center bottom; background-size:100% 100%; position: absolute; left: 0; bottom: 0; z-index: 2; } .solutioninfo-wrapper .box-1 .info { position: absolute; left: 0; bottom: 25px; z-index: 10; width: 100%; padding: 0 30px; } .solutioninfo-wrapper .box-1 .name { font-size: 30px; color: #fff; line-height: 36px; } .solutioninfo-wrapper .box-1 .desc { font-size: 16px; color: #ddeaf6; line-height: 24px; margin-top: 5px; height: 48px; overflow: hidden; } .solutioninfo-wrapper .index-title { font-family: "微软雅黑"; font-weight: 700; } .solutioninfo-wrapper .box-2, .solutioninfo-wrapper .box-5 { background-color: #f7f7fa; } .solutioninfo-wrapper .box-2 { padding-bottom: 100px; } .solutioninfo-wrapper .box-2 .swiper-container { padding: 20px 0; } .solutioninfo-wrapper .box-2 .swiper-slide { cursor: default; text-align: center; background-color: #fff; padding: 80px 46px 52px; box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.09); } .solutioninfo-wrapper .box-2 .swiper-slide:hover .icon:before { animation: iconScale 1.3s ease-out infinite; } .solutioninfo-wrapper .box-2 .name { font-size: 24px; color: #000; line-height: 30px; margin: 46px auto 10px; font-weight: 700; } .solutioninfo-wrapper .box-2 .desc { font-size: 16px; color: #666; line-height: 24px; min-height: 72px; } .solutioninfo-wrapper .box-2 .icon { display: block; width: 100px; margin: 0 auto; position: relative; transition: transform 0.3s ease; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; -o-transition: transform 0.3s ease; border-radius: 50%; } .solutioninfo-wrapper .box-2 .icon:before { content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #0033a0; border-radius: 50%; z-index: 0; opacity: 0; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .solutioninfo-wrapper .box-2 .icon img { position: relative; z-index: 2; display: block; width: 100%; } .solutioninfo-wrapper .box-2 .swiper-btn { width: 16px; height: 29px; background-size: contain; background-repeat: no-repeat; background-position: center center; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; } .solutioninfo-wrapper .box-2 .prev { left: -65px; background-image: url(../img/prev.png); } .solutioninfo-wrapper .box-2 .prev:hover { background-image: url(../img/prev2.png); } .solutioninfo-wrapper .box-2 .next { right: -65px; background-image: url(../img/next.png); } .solutioninfo-wrapper .box-2 .next:hover { background-image: url(../img/next2.png); } .solutioninfo-wrapper .box-4{ padding-bottom:120px;} .solutioninfo-wrapper .box-4 .swiper-slide:hover .pic img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .solutioninfo-wrapper .box-4 .swiper-slide:hover .name { color: #0033a0; } .solutioninfo-wrapper .box-4 .pic { background-color: #f7f7fa; } .solutioninfo-wrapper .box-4 .name { text-align: center; line-height: 24px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 48px; margin-top: 15px; font-size: 16px; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .solutioninfo-wrapper .box-5 { background-color: #f7f7fa; } .solutioninfo-wrapper .box-5 .box-container { text-align: center; } .solutioninfo-wrapper .box-5 .main { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; background-color: #fff; box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.09); } .solutioninfo-wrapper .box-5 .pic, .solutioninfo-wrapper .box-5 .info { width: 50%; } .solutioninfo-wrapper .box-5 .info { padding: 0 120px 0 80px; text-align: left; } .solutioninfo-wrapper .box-5 .cat { font-size: 24px; color: #0033a0; line-height: 30px; } .solutioninfo-wrapper .box-5 .name { font-weight: 700; font-size: 30px; line-height: 36px; color: #000; margin: 2px auto 22px; } .solutioninfo-wrapper .box-5 .desc { color: #666; font-size: 16px; line-height: 24px; text-align: justify; margin-bottom: 55px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .solutioninfo-wrapper .box-5 .page-more { color: #0033a0; border: solid 1px #0033a0; background-color: transparent; } .solutioninfo-wrapper .box-5 .page-more:hover { background-color: #0033a0; color: #fff; } .solutioninfo-wrapper .box-5 .btn { display: inline-block; min-width: 180px; line-height: 48px; background-color: #0033a0; border-radius: 24px; text-align: center; padding: 0 15px; font-size: 16px; color: #fff; margin-top: 50px; } .solutioninfo-wrapper .box-5 .btn:hover { background-image: linear-gradient(90deg, #016cec 0%, #0237a5 100%), linear-gradient(#0033a0, #0033a0); background-blend-mode: normal, normal; } .mask { position: fixed; left: 0; top: 0; z-index: 40; background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; display: none; } .modal-box { text-align: center; position: fixed; left: 50%; top: 50%; z-index: 41; background: #fff; width: 550px; padding: 53px 50px 80px; border-radius: 5px; transform: translate(-50%, -50%); display: none; /* input placeholder */ } .modal-box .page-title { font-weight: 700; margin-bottom: 24px; } .modal-box .group { position: relative; margin-bottom: 15px; } .modal-box .group:last-child { margin-bottom: 0; } .modal-box .group i { font-style: normal; color: #e61c1c; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); z-index: 1; } .modal-box .text, .modal-box .submit { line-height: 54px; width: 100%; border-radius: 5px; } .modal-box .text { padding: 0 30px; border: solid 1px #eee; } .modal-box ::-webkit-input-placeholder { /* WebKit browsers */ color: 14px; font-size: #666; } .modal-box :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: 14px; font-size: #666; } .modal-box ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: 14px; font-size: #666; } .modal-box :-ms-input-placeholder { /* Internet Explorer 10+ */ color: 14px; font-size: #666; } .modal-box .close { display: block; position: absolute; right: 30px; top: 30px; z-index: 10; width: 12px; height: 12px; background-image: url(../img/close.png); background-size: contain; background-repeat: no-repeat; background-position: center center; transition: transform 0.3s ease; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; -o-transition: transform 0.3s ease; } .modal-box .close:hover { transform: rotate(90deg); } .modal-box .submit { display: block; text-align: center; margin-top: 20px; background-color: #0f358b; font-size: 18px; color: #fff; font-weight: 700; transition: background-color 0.3s ease; -webkit-transition: background-color 0.3s ease; -moz-transition: background-color 0.3s ease; -ms-transition: background-color 0.3s ease; -o-transition: background-color 0.3s ease; } .modal-box .submit:hover { background-color: #0033a0; } /*分页*/ .pageNum { text-align: center; font-size: 0; margin-top: 60px; } .pageNum.bg-grey a { background-color: #f5f6f6; } .pageNum.bg-grey a a:hover, .pageNum.bg-grey a.on { background: #0f358b; } .pageNum a { display: inline-block; color: #3f4150; font-size: 18px; font-family: "gr"; vertical-align: top; margin: 0 5px; width: 50px; height: 50px; line-height: 50px; background: #fff; border-radius: 50%; transition: background 0.5s ease; -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -ms-transition: background 0.5s ease; -o-transition: background 0.5s ease; } .pageNum a.dot { line-height: 40px; } .pageNum a:hover, .pageNum .on { color: #fff; background: #0f358b; } .pageMore { display: none; margin-top: 30px; } .pageMore a { display: block; width: 100%; text-align: center; height: 40px; line-height: 40px; background: #0f358b; color: #fff; font-size: 12px; } .clearfix { zoom: 1; } .clearfix:after { content: ""; display: block; width: 0; height: 0; clear: both; visibility: hidden; } @keyframes circle-chart-fill { to { stroke-dasharray: 0 100; } } @-webkit-keyframes circle-chart-fill { to { stroke-dasharray: 0 100; } } @-moz-keyframes circle-chart-fill { to { stroke-dasharray: 0 100; } } @-ms-keyframes circle-chart-fill { to { stroke-dasharray: 0 100; } } @keyframes shake { 0%, 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); } 50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); } 75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); } 0%, 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); } 50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); } 75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); } } @-webkit-keyframes sonarEffect { 0% { opacity: 0.3; } 40% { opacity: 0.5; } 100% { -webkit-transform: scale(1.5); opacity: 0; } } @-moz-keyframes sonarEffect { 0% { opacity: 0.3; } 40% { opacity: 0.5; } 100% { -moz-transform: scale(1.5); opacity: 0; } } @keyframes sonarEffect { 0% { opacity: 0.3; } 40% { opacity: 0.5; } 100% { transform: scale(1.5); opacity: 0; } } @keyframes iconScale { from { transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); opacity: 1; } to { transform: scale(1.5); -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); opacity: 0; } } @keyframes circleAni { from { transform: rotate(0); -webkit-transform: rotate(0); -mos-transform: rotate(0); -o-transform: rotate(0); -mz-transform: rotate(0); } to { transform: rotate(360deg); -webkit-transform: rotate(360deg); -mos-transform: rotate(360deg); -o-transform: rotate(360deg); -mz-transform: rotate(360deg); } } @keyframes navAni { 0% { opacity: 0; transform: translate(0, 60px); } 50% { opacity: 0; } 100% { opacity: 1; transform: translate(0, 0); } } .index .sideBar-wrapper { display: none; } .index .sideBar-wrapper ul li.gotop { display: block; } /* 侧栏 */ .sideBar-wrapper { position: fixed; bottom: 15%; right: 0; width: 62px; z-index: 6666; } .sideBar-wrapper ul li { margin-bottom: 6px; position: relative; } .sideBar-wrapper ul li:hover a img { animation: shake 0.3s ease; } .sideBar-wrapper ul li.tel { width: 180px; transition: all 0.4s; } .sideBar-wrapper ul li.tel img { float: left; } .sideBar-wrapper ul li:last-child { margin-bottom: 0; } .sideBar-wrapper ul li:hover a img { opacity: 0; visibility: hidden; } .sideBar-wrapper ul li:hover a p { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); opacity: 1; visibility: visible; } .sideBar-wrapper ul li a { display: block; overflow: hidden; background: #b1b1b1; border-radius: 5px; text-align: center; padding: 14px 0; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; } .sideBar-wrapper ul li.gotop a { background: #d2d2d2; } .sideBar-wrapper ul li.gotop a:hover { background: #0f358b; } .sideBar-wrapper ul li a { position: relative; } .sideBar-wrapper ul li a img { display: block; width: 30px; margin: 0 auto; transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; } .sideBar-wrapper ul li a p { color: #fff; position: absolute; left: 0; top: 50%; z-index: 10; width: 100%; text-align: center; padding: 0 8px; font-size: 13px; line-height: 16px; height: 32px; margin-top: -16px; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transform: scale(0.2); -webkit-transform: scale(0.2); -moz-transform: scale(0.2); -ms-transform: scale(0.2); -o-transform: scale(0.2); opacity: 0; visibility: hidden; } .sideBar-wrapper ul li a:hover { opacity: 1; } .sideBar-wrapper ul li.tel:hover { transform: translateX(-124px); -webkit-transform: translateX(-124px); -moz-transform: translateX(-124px); -ms-transform: translateX(-124px); -o-transform: translateX(-124px); } .sideBar-wrapper-ewm { position: absolute; top: 0; left: -125px; width: 140px; display: none; box-shadow: 0 2px 30px rgba(0, 0, 0, 0.1); } .sideBar-wrapper-ewm img { display: block; background-color: #FFF; width: 120px; } .sideBar-wrapper ul li.wechat:hover .sideBar-wrapper-ewm { display: block; animation: fadeIn 0.3s ease; } .sideBar-wrapper ul li:hover a { background-color: #0f358b; } .sideBar-wrapper ul li.gotop { display: none; } .sideBar-wrapper .hidebox { position: absolute; top: 0; right: 100%; width: 180px; background-color: #0f358b; border-radius: 5px 0 0 5px; color: #fff; padding: 0 15px; line-height: 56px; font-family: "mb"; font-size: 20px; transform: translateX(180px); -webkit-transform: translateX(180px); -moz-transform: translateX(180px); -ms-transform: translateX(180px); -o-transform: translateX(180px); z-index: -1; opacity: 0; visibility: hidden; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .sideBar-wrapper ul li.telephone:hover a { border-top-left-radius: 0; border-bottom-left-radius: 0; } .sideBar-wrapper ul li.telephone:hover .hidebox { transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); opacity: 1; visibility: visible; z-index: -1; }