.rel { position: relative; } .abs { position: absolute; } .fixed { position: fixed; } .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; } .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: "regular"; src: url('../fonts/Montserrat-Regular.otf'); font-weight: normal; font-style: normal; } @font-face { font-family: "mibold"; src: url('../fonts/MISANS-DEMIBOLD.TTF'); font-weight: normal; font-style: normal; } @font-face { font-family: "light"; src: url('../fonts/Montserrat-Light.otf'); font-weight: normal; font-style: normal; } @font-face { font-family: "mb"; src: url('../fonts/MontserratBold.ttf'); font-weight: normal; font-style: normal; } .pic { font-size: 0; overflow: hidden; display: block; width: 100%; } .pic img { width: 100%; display: block; 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.phone { display: none; } .phone-nav { display: none; } .link { font-size: 0; } .link a { position: relative; font-size: 12px; color: rgba(255, 255, 255, 0.6); padding-right: 10px; margin-right: 10px; display: inline-block; vertical-align: top; line-height: 20px; font-family: "light"; 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; } .link a:hover { color: #fff; } .link a:after { content: ""; display: inline-block; position: absolute; right: 0; top: 7px; z-index: 1; width: 2px; height: 6px; background: rgba(255, 255, 255, 0.6); } .link a:last-child { margin-right: 0; padding-right: 0; } .link a:last-child:after { display: none; } .content { font-size: 16px; color: #666; line-height: 32px; text-align: justify; } .content img, .content input[type="image"] { max-width: 100%; height: auto!important; display: block; margin: 0 auto; } .swiper-box { position: relative; } .search-form { display: none; } .header-wrapper { position: absolute; left: 0; top: 40px; z-index: 10; } .header-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 */ align-items: center; height: 80px; padding: 0 50px 0 40px; background-color: rgba(255, 255, 255, 0.6); border-radius: 0px 30px 0px 30px; } .header-wrapper .logo-box { width: 117px; } .header-wrapper .logo-box a { display: block; } .header-wrapper .logo-box a img { display: block; width: 100%; } .header-wrapper .language { font-size: 0; margin-right: 28px; } .header-wrapper .language a, .header-wrapper .language span { display: inline-block; font-family: "mibold"; font-size: 16px; color: #222; } .header-wrapper .language a { text-transform: uppercase; 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; } .header-wrapper .language a:hover { color: #d0121b; } .header-wrapper .language span { margin: 0 6px; } .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-box { position: relative; margin-left: 60px; } .header-wrapper .search-box:hover .text { width: 240px; opacity: 1; visibility: visible; } .header-wrapper .submit { display: inline-block; width: 18px; height: 18px; background-size: contain; background-repeat: no-repeat; background-position: center center; background-image: url(../img/search.png); position: relative; z-index: 2; } .header-wrapper .text { width: 0; line-height: 50px; padding: 0 46px 0 20px; position: absolute; right: -20px; top: 50%; margin-top: -25px; z-index: 1; background: #ffffff; 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; } .pc-nav-box { flex: 1; margin: 0 80px; } .pc-nav-box a { display: block; font-family: "regular"; } .pc-nav-box ul { font-size: 0; text-align: right; } .pc-nav-box li { position: relative; display: inline-block; margin-right: 70px; } .pc-nav-box li:last-child { margin-right: 0; } .pc-nav-box li.on > a { color: #d0121b; } .pc-nav-box li:hover > a { color: #d0121b; } .pc-nav-box li:hover .nav { transform: rotateY(0); opacity: 1; visibility: visible; } .pc-nav-box li > a { font-size: 16px; line-height: 80px; color: #222; font-weight: 700; text-transform: uppercase; 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; } .pc-nav-box .nav { position: absolute; left: 50%; margin-left: -120px; top: 100%; z-index: 10; width: 240px; background-color: #fff; text-align: center; box-shadow: 0 2px 30px rgba(0, 0, 0, 0.1); padding: 10px 0; 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; transform: rotateY(90deg); } .pc-nav-box .nav:before { content: ""; border: 6px solid transparent; border-bottom-color: #fff; position: absolute; left: 50%; top: -12px; z-index: 10; margin-left: -6px; } .pc-nav-box .nav a { font-size: 15px; padding: 10px 15px; line-height: 24px; } .pc-nav-box .nav a:hover { color: #d0121b; } .footer-nav-box { flex: 1; overflow: hidden; margin-right: 180px; } .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 > a { font-size: 18px; color: #fff; font-family: "mb"; margin-bottom: 15px; } .footer-nav-box li > a:hover { color: #d0121b; } .footer-nav-box a { line-height: 30px; display: block; transition: color 0.5s ease; -webkit-transition: color 0.5s ease; -moz-transition: color 0.5s ease; -ms-transition: color 0.5s ease; -o-transition: color 0.5s ease; } .footer-nav-box .nav a { color: rgba(255, 255, 255, 0.75); margin-bottom: 6px; font-family: "light"; } .footer-nav-box .nav a:hover { color: #d0121b; } .footer-wrapper { background-color: #a0a0a0; padding: 92px 0 45px; } .footer-wrapper .box-1 .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 .logo-box { display: block; width: 137px; position: absolute; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); z-index: 10; background-color: #a0a0a0; top: -16px; padding: 0 10px; } .footer-wrapper .logo-box img { display: block; width: 100%; height: 46px; object-fit: contain; } .footer-wrapper .other-box { position: relative; width: 22.27%; height: 100%; border: solid 1px rgba(238, 238, 238, 0.2); border-radius: 30px; padding: 58px 45px 34px; } .footer-wrapper .other-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-wrapper .other-box li { width: 43.65%; text-align: center; } .footer-wrapper .other-box li .pic { border-radius: 5px; } .footer-wrapper .other-box p { font-size: 12px; color: #fff; line-height: 20px; font-weight: 700; margin-top: 10px; } .footer-wrapper .other-box .title { position: absolute; left: 0; bottom: -12px; z-index: 1; width: 100%; color: #fff; text-align: center; line-height: 24px; letter-spacing: 1px; } .footer-wrapper .other-box .title span { padding: 0 8px; background-color: #a0a0a0; } .footer-wrapper .copyright, .footer-wrapper .copyright a { font-size: 12px; color: rgba(255, 255, 255, 0.6); } .footer-wrapper .copyright { line-height: 20px; font-family: "light"; margin-top: 2px; } .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: #fff; } .footer-wrapper .other { 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 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .footer-wrapper .share { font-size: 0; width: 100%; padding-bottom: 40px; margin: 32px auto 42px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .footer-wrapper .share a { display: inline-block; width: 22px; height: 20px; background-size: contain; background-repeat: no-repeat; background-position: center center; margin-right: 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; } .footer-wrapper .share a:last-child { margin-right: 0; } .footer-wrapper .ins { background-image: url(../img/icon-ins.png); } .footer-wrapper .ins:hover { background-image: url(../img/icon-ins-on.png); } .footer-wrapper .facebook { background-image: url(../img/icon-facebook.png); } .footer-wrapper .facebook:hover { background-image: url(../img/icon-facebook-on.png); } .footer-wrapper .wechat { background-image: url(../img/icon-wechat.png); } .footer-wrapper .wechat:hover { background-image: url(../img/icon-wechat-on.png); } .footer-wrapper .weibo { background-image: url(../img/icon-weibo.png); } .footer-wrapper .weibo:hover { background-image: url(../img/icon-weibo-on.png); } .footer-wrapper .qq { background-image: url(../img/icon-qq.png); } .footer-wrapper .qq:hover { background-image: url(../img/icon-qq-on.png); } .footer-wrapper .right { 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; } .gotop { display: block; bottom: 15%; background-image: url(../img/up.png); background-position: center center; background-repeat: no-repeat; display: none; } .gotop, .goback { width: 54px; height: 54px; background-color: #d0121b; border-radius: 5px; position: fixed; z-index: 40; right: 50px; 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; } .gotop:hover, .goback:hover { box-shadow: 0 2px 30px rgba(208, 18, 27, 0.3); } .goback { bottom: calc(15% + 70px); color: #fff; text-align: center; background-color: #d0121b; 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; justify-content: center; } .goback svg { fill: #fff; width: 22px; } .swiper-btn { display: inline-block; width: 46px; height: 46px; background-size: contain; background-repeat: no-repeat; background-position: center center; 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; 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; } .prev { left: 0; background-image: url(../img/prev2.png); } .prev:hover { background-image: url(../img/prev3.png); } .next { right: 0; background-image: url(../img/next2.png); } .next:hover { background-image: url(../img/next3.png); } .btn-box { font-size: 0; position: absolute; z-index: 10; } .btn-box a { position: static; transform: none; opacity: 0.7; } .btn-box a:hover { opacity: 1; } .btn-box .prev { margin-right: 20px; background-image: url(../img/prev.png); } .btn-box .next { background-image: url(../img/next.png); } .friend-link { width: 246px; border-radius: 5px; border: solid 1px rgba(255, 255, 255, 0.4); position: relative; margin-right: 40px; } .friend-link .caption { cursor: pointer; color: #fff; font-size: 12px; padding: 0 30px 0 20px; height: 42px; line-height: 40px; background-image: url(../img/up2.png); background-repeat: no-repeat; background-position: right 20px center; } .friend-link .list { font-size: 0; width: 100%; position: absolute; right: 0; bottom: 100%; z-index: 10; max-height: 211px; overflow-y: auto; display: none; border: 1px solid rgba(255, 255, 255, 0.4); border-bottom: none; } .friend-link .list::-webkit-scrollbar { width: 4px; background-color: #eee; } .friend-link .list::-webkit-scrollbar-thumb { background-color: #d0121b; } .friend-link .list a { display: block; color: #fff; background: #a0a0a0; line-height: 41px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.4); padding: 0 20px; } .friend-link .list a:hover { color: #d0121b; font-weight: 700; } .index-swiper-box .swiper-slide-active.index-box-1 .about { animation: fadeInUp 1.5s ease; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); } .index-swiper-box .swiper-slide-active.index-box-1 .data { animation: fadeInUp 2s ease; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); } .index-swiper-box .swiper-slide-active.index-box-1 .pic { animation: fadeInUp 2s ease; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); } .index-swiper-box .swiper-slide-active.index-box-2 .intro, .index-swiper-box .swiper-slide-active.index-box-2 .info, .index-swiper-box .swiper-slide-active.index-box-2 .pic { animation: zoomIn 2s ease; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); } .index-swiper-box .swiper-slide-active.index-box-3 .index-more, .index-swiper-box .swiper-slide-active.index-box-3 .swiper-box, .index-swiper-box .swiper-slide-active.index-box-3 .index-title { animation: fadeInUp 2s ease; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); } .index-swiper-box .swiper-slide-active.index-box-4 .index-title-box, .index-swiper-box .swiper-slide-active.index-box-4 .main { animation: fadeInUp 2s ease; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); } .index-swiper-box .index-swiper-pagination { position: absolute; width: 22px; right: 44px; z-index: 10; } .index-swiper-box .index-swiper-pagination.on .swiper-pagination-bullet .circle-chart__circle { stroke: #d0121b; } .index-swiper-box .index-swiper-pagination.on .swiper-pagination-bullet.swiper-pagination-bullet-active .circle-chart__circle { stroke: #fff; } .index-swiper-box .index-swiper-pagination .swiper-pagination-bullet { position: relative; opacity: 1; margin: 0 0 8px; background-color: transparent; } .index-swiper-box .index-swiper-pagination .swiper-pagination-bullet:before { content: ""; width: 100%; height: 100%; border-radius: 50%; background-color: #d0121b; 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; position: absolute; left: 0; top: 0; z-index: -1; } .index-swiper-box .index-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:before { opacity: 1; visibility: visible; } .index-swiper-box .index-swiper-pagination .swiper-pagination-bullet:last-child { margin-bottom: 0; } .index-swiper-box .index-swiper-pagination .swiper-pagination-bullet { width: 22px; height: 22px; position: relative; } .index-swiper-box .index-swiper-pagination .swiper-pagination-bullet svg { width: 10px; height: 10px; position: absolute; top: 50%; margin-top: -5px; left: 50%; margin-left: -5px; border-radius: 50%; } .index-swiper-box .index-swiper-pagination .swiper-pagination-bullet svg:nth-child(2) { position: absolute; left: 0; top: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .index-swiper-box .index-swiper-pagination .swiper-pagination-bullet { fill: none; } .index-swiper-box .index-swiper-pagination .swiper-pagination-bullet .circle-chart__background { stroke: transparent; stroke-width: 10; transition: border 0.3s ease; -webkit-transition: border 0.3s ease; -moz-transition: border 0.3s ease; -ms-transition: border 0.3s ease; -o-transition: border 0.3s ease; } .index-swiper-box .index-swiper-pagination .circle-chart__circle { stroke-linecap: square; fill: none; } .index-swiper-box .index-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active .circle-chart__background { stroke: rgba(255, 255, 255, 0); } .index-swiper-box .index-swiper-pagination .swiper-pagination-bullet .circle-chart__circle { stroke: #fff; stroke-width: 10; 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-swiper-box .index-swiper-pagination .swiper-pagination-bullet.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-swiper-box .index-swiper-pagination .swiper-pagination-bullet.one.swiper-pagination-bullet-active .circle-chart__circle { animation: circle-chart-fill 1.5s linear reverse; -moz-animation: circle-chart-fill 1.5s linear reverse; -webkit-animation: circle-chart-fill 1.5s linear reverse; -ms-animation: circle-chart-fill 1.5s linear reverse; } .index-banner-wrapper { position: relative; } .index-banner-wrapper .index-banner-swiper .swiper-slide-active .box-container { 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; transform: translateY(120px); -webkit-transform: translateY(120px); -moz-transform: translateY(120px); -ms-transform: translateY(120px); -o-transform: translateY(120px); transition: all 1.5s ease; -webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; -ms-transition: all 1.5s ease; -o-transition: all 1.5s ease; transition-delay: 0.4s; 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 img { display: block; width: 100%; height: 100vh; object-fit: cover; } .index-banner-wrapper .swiper-slide img.phone { display: none; } .index-banner-wrapper .info { position: absolute; left: 0; z-index: 10; width: 100%; top: 32.4%; } .index-banner-wrapper .leftB { bottom: 95px; top: auto; } .index-banner-wrapper .rightT { text-align: right; } .index-banner-wrapper .center { text-align: center; } .index-banner-wrapper .info-1 .name { color: #fff; } .index-banner-wrapper .info-1 .en { color: rgba(255, 255, 255, 0.6); font-family: "light"; } .index-banner-wrapper .info-2 .name { color: #343226; letter-spacing: 6px; font-weight: 500; } .index-banner-wrapper .info-2 .en { color: #745a40; font-family: Arial; letter-spacing: 0; } .index-banner-wrapper .name { font-size: 60px; color: #fff; font-weight: 700; line-height: 70px; letter-spacing: 2px; } .index-banner-wrapper .en { text-transform: uppercase; font-size: 30px; line-height: 30px; margin-top: 15px; } .index-banner-wrapper .swiper-pagination { display: none; } .index-banner-wrapper .btn-box { bottom: 100px; right: calc((100% - 1536px) / 2); } .index-title { font-size: 48px; line-height: 50px; font-weight: 700; margin-bottom: 50px; color: #222; } .index-title:after { content: ""; display: block; width: 40px; height: 3px; background-color: #d0121b; margin-top: 28px; } .index-title.center { text-align: center; } .index-title.center:after { margin-left: auto; margin-right: auto; } .index-more { display: inline-block; width: 180px; line-height: 54px; text-align: center; color: #d0121b; border-radius: 28px; 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; border: solid 1px #d0121b; font-size: 18px; } .index-more:hover, .index-more.on { background-color: #cb292e; color: #fff; } .index-more.on { box-shadow: 0 2px 30px rgba(0, 0, 0, 0.1); } .mt { margin-top: 120px; } .index-box-1 { position: relative; padding-top: 120px; } .index-box-1 .content { margin-bottom: 80px; height: 288px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; overflow: hidden; } .index-box-1 .num span, .index-box-1 .num i, .index-box-1 .num em { display: inline-block; } .index-box-1 .num i, .index-box-1 .num em { font-style: normal; } .index-box-1 .num span { font-size: 58px; color: #d0121b; font-family: "mb"; line-height: 50px; } .index-box-1 .num em { font-size: 22px; line-height: 24px; color: #656565; } .index-box-1 .num i { font-size: 28px; color: #d0121b; line-height: 20px; height: 20px; font-family: "mb"; position: relative; vertical-align: top; top: -3px; margin-right: 14px; } .index-box-1 .data li { margin-bottom: 110px; } .index-box-1 .data li:last-child { margin-bottom: 0; } .index-box-1 .data p { color: #666; line-height: 24px; margin-top: 14px; } .index-box-1 .pic img { height: calc(100vh - 120px); object-fit: cover; object-position: top center; } .index-box-1 .main { position: absolute; left: 0; top: 18%; z-index: 10; width: 100%; padding-top: 74px; } .index-box-1 .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 */ } .index-box-1 .about { width: 35.8%; margin-right: 100px; } .index-box-1 .data { width: 18.3%; } .index-box-2 { background: url(../img/index2bg.jpg) no-repeat center center; background-size: cover; padding-top: 180px; } .index-box-2 .index-title { display: none; } .index-box-2 .box-container { position: relative; height: 100%; } .index-box-2 .swiper-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; } .index-box-2 .swiper-box .swiper-slide-active .name, .index-box-2 .swiper-box .swiper-slide-active .brief, .index-box-2 .swiper-box .swiper-slide-active .index-more, .index-box-2 .swiper-box .swiper-slide-active .dot, .index-box-2 .swiper-box .swiper-slide-active .desc, .index-box-2 .swiper-box .swiper-slide-active .bottom { opacity: 1; visibility: visible; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } .index-box-2 .swiper-box .swiper-slide-active > .model { opacity: 1; visibility: visible; } .index-box-2 .swiper-box .name, .index-box-2 .swiper-box .brief, .index-box-2 .swiper-box .index-more, .index-box-2 .swiper-box .dot, .index-box-2 .swiper-box .desc, .index-box-2 .swiper-box .bottom { opacity: 0; visibility: hidden; transform: translateY(80px); -webkit-transform: translateY(80px); -moz-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); 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; } .index-box-2 .swiper-box .brief, .index-box-2 .swiper-box .dot { transition-delay: 0.2s; } .index-box-2 .swiper-box .index-more, .index-box-2 .swiper-box .bottom { transition-delay: 0.3s; } .index-box-2 .swiper-box .pic { position: relative; z-index: 2; width: 560px; height: 553px; border-radius: 50%; } .index-box-2 .swiper-box .pic:before { content: ""; width: 100%; height: 100%; background-color: #fff; border-radius: 50%; position: absolute; left: 0; top: 0; z-index: 0; } .index-box-2 .swiper-box .pic img { position: relative; z-index: 10; } .index-box-2 .swiper-box .pic .model { display: none; } .index-box-2 .swiper-box .name { font-size: 44px; color: #222; line-height: 48px; font-weight: 700; margin-bottom: 26px; } .index-box-2 .info { position: relative; width: 24.088%; } .index-box-2 .brief { font-size: 18px; color: #888; line-height: 36px; } .index-box-2 .index-more { position: absolute; left: 0; bottom: 10px; z-index: 10; } .index-box-2 .intro { position: relative; text-align: right; width: 20.833%; padding-top: 54px; } .index-box-2 .dot { font-size: 24px; font-family: "mb"; color: #d0121b; letter-spacing: 2px; line-height: 20px; margin-bottom: 12px; } .index-box-2 .desc { color: rgba(0, 0, 0, 0.7); line-height: 28px; } .index-box-2 .bottom { position: absolute; right: 0; bottom: 0; z-index: 10; line-height: 48px; } .index-box-2 .bottom div { font-size: 24px; font-family: "mb"; } .index-box-2 .bottom .model { color: #d0121b; } .index-box-2 .bottom .companyName { text-transform: uppercase; } .index-box-2 .swiper-slide > .model { font-size: 310px; line-height: 250px; color: rgba(0, 0, 0, 0.04); position: absolute; left: 0; top: 32%; z-index: 0; width: 100%; text-transform: uppercase; text-align: center; font-family: "gb"; letter-spacing: 39px; white-space: nowrap; 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; display: none; } .index-box-2 .thumb-box { position: absolute; left: 0; bottom: 0; z-index: 10; width: 100%; } .index-box-2 .thumb-box .swiper-container { padding-bottom: 10px; } .index-box-2 .thumb-box .swiper-slide { padding: 26px 25px; cursor: pointer; background-color: #fff; box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.05); } .index-box-2 .thumb-box .swiper-slide:hover .line_t, .index-box-2 .thumb-box .swiper-slide.on .line_t, .index-box-2 .thumb-box .swiper-slide:hover .line_b, .index-box-2 .thumb-box .swiper-slide.on .line_b { width: 100%; } .index-box-2 .thumb-box .swiper-slide:hover .line_r, .index-box-2 .thumb-box .swiper-slide.on .line_r, .index-box-2 .thumb-box .swiper-slide:hover .line_l, .index-box-2 .thumb-box .swiper-slide.on .line_l { height: 100%; } .index-box-2 .thumb-box .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-2 .thumb-box .swiper-slide 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; } .index-box-2 .thumb-box .pic { width: 51.52%; background-color: #f5f5f5; } .index-box-2 .thumb-box .pic img { height: 80px; object-fit: contain; } .index-box-2 .thumb-box .info { margin-left: 20px; flex: 1; } .index-box-2 .thumb-box .name { font-size: 18px; font-weight: 700; line-height: 24px; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .index-box-2 .thumb-box p { color: #bbb; font-family: "regular"; line-height: 20px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 40px; } .index-box-2 .prev { left: -96px; } .index-box-2 .next { right: -96px; } .index-box-2 .line { position: absolute; 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; background-color: #d0121b; z-index: 10; } .index-box-2 .line_t { width: 0; height: 2px; left: 0; top: 0; } .index-box-2 .line_r { height: 0; width: 2px; right: 0; top: 0; } .index-box-2 .line_b { right: 0; bottom: 0; width: 0; height: 2px; } .index-box-2 .line_l { width: 2px; height: 0; left: 0; bottom: 0; } .index-box-3 .box-container { position: relative; } .index-box-3 .swiper-slide { width: 30.46875%; } .index-box-3 .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-3 .swiper-slide:hover .title { color: #d0121b; } .index-box-3 .date { font-size: 16px; color: #bbb; font-family: "mb"; line-height: 20px; margin: 46px auto 20px; } .index-box-3 .title { font-size: 20px; color: #222; font-weight: 700; line-height: 36px; font-family: "mb"; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: 72px; 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 .index-more { position: absolute; right: 0; top: 0; z-index: 1; } .index-box-3 .swiper-btn { top: 165px; transform: none; } .index-box-3 .prev { left: -112px; background-image: url(../img/prev6.png); } .index-box-3 .prev:hover { background-image: url(../img/prev7.png); } .index-box-3 .next { right: -112px; background-image: url(../img/next6.png); } .index-box-3 .next:hover { background-image: url(../img/next7.png); } .index-box-4 { padding-top: 180px; background: url(../img/index4bg.jpg) no-repeat center center; background-size: cover; } .index-box-4 .num span, .index-box-4 .num i, .index-box-4 .num em { display: inline-block; } .index-box-4 .num i, .index-box-4 .num em { font-style: normal; } .index-box-4 .num span { font-size: 52px; color: #222; font-family: "mb"; line-height: 40px; } .index-box-4 .num em { font-size: 22px; line-height: 24px; color: #656565; } .index-box-4 .num i { font-size: 28px; color: #d0121b; line-height: 20px; height: 20px; font-family: "mb"; position: relative; vertical-align: top; top: -3px; margin-right: 14px; } .index-box-4 .data { position: absolute; left: 0; bottom: 18px; z-index: 10; width: 20%; } .index-box-4 .data li { margin-bottom: 43px; } .index-box-4 .data li:last-child { margin-bottom: 0; } .index-box-4 .data p { color: #666; line-height: 24px; margin-top: 12px; } .index-box-4 .main { position: relative; } .index-box-4 .map { width: 78.125%; margin-right: 136px; margin-left: auto; } .index-box-4 .map > img { width: 100%; } .index-box-4 .map > img.phone { display: none; } .index-box-4 .map > img.pc { display: block; } .index-box-4 .local { display: none; position: absolute; right: 20.8%; bottom: 46.5%; z-index: 10; font-size: 24px; letter-spacing: 2px; line-height: 30px; font-family: "regular"; cursor: default; } .index-box-4 .local:hover .icon img { transform: translateY(-4px); -webkit-transform: translateY(-4px); -moz-transform: translateY(-4px); -ms-transform: translateY(-4px); -o-transform: translateY(-4px); } .index-box-4 .local .icon { position: relative; margin-bottom: 6px; } .index-box-4 .local .icon:before, .index-box-4 .local .icon:after { content: ''; display: inline-block; position: absolute; z-index: 10; left: 50%; } .index-box-4 .local .icon:before { bottom: -3px; width: 10px; height: 5px; margin-left: -5px; background: url(../img/dot1.png) no-repeat; background-size: contain; animation: circleFadeIn infinite 2s ease; } .index-box-4 .local .icon:after { width: 53px; height: 27px; background: url(../img/dot2.png) no-repeat; background-size: contain; bottom: -15px; margin-left: -27px; animation: circleFadeIn infinite 2s ease; animation-delay: 0.5s; } .index-box-4 .local .icon img { display: block; margin: 0 auto; width: 36px; 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; } @keyframes circleFadeIn { 0% { opacity: 0; transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); } 100% { opacity: 1; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } } .page-banner-wrapper { position: relative; z-index: 2; font-size: 0; overflow: hidden; } .page-banner-wrapper.research > img { display: block; width: 100%; } .page-banner-wrapper.research .box-container { position: absolute; left: calc((100% - 1536px) / 2); top: 47%; z-index: 10; } .page-banner-wrapper.research .info { display: block; padding-top: 0; position: static; width: 50%; text-align: center; } .page-banner-wrapper.research .name { font-weight: 500; line-height: 72px; text-align: center; font-family: "arial"; font-size: 50px; } .page-banner-wrapper.research .name b { margin-top: 14px; display: inline-block; } .page-banner-wrapper.research .name img { vertical-align: middle; position: relative; top: -3px; margin-left: 20px; } .page-banner-wrapper.research .pic { width: 51.43%; } .page-banner-wrapper .info { position: absolute; left: 0; top: 0; z-index: 10; width: 100%; 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; padding-top: 60px; } .page-banner-wrapper .info.black h1, .page-banner-wrapper .info.black p { color: #222; } .page-banner-wrapper .info.black h1:after, .page-banner-wrapper .info.black p:after { background-color: #222; } .page-banner-wrapper h1 { color: #fff; font-size: 60px; font-weight: 700; line-height: 60px; margin-bottom: 22px; } .page-banner-wrapper p { font-size: 30px; color: #fff; font-family: "light"; text-transform: uppercase; line-height: 30px; } .page-banner-wrapper .name { font-size: 60px; color: #222; font-weight: 700; font-family: "mb"; line-height: 60px; } .page-banner-wrapper .desc { font-size: 26px; color: #222; opacity: 0.8; line-height: 30px; font-family: "light"; margin-top: 25px; } .page-banner-wrapper video { position: absolute; left: 0; top: 0; z-index: 10; width: 100%; display: block; height: 100%; object-fit: cover; } .page-banner-wrapper.video { position: relative; text-align: center; overflow: hidden; } .page-banner-wrapper.video > img { opacity: 0; visibility: hidden; } .page-banner-wrapper .title { font-size: 100px; line-height: 130px; color: #fff; margin-top: 5px; text-shadow: 0px 0px 15px rgba(0, 27, 57, 0.08); } .page-banner-wrapper .en { font-size: 28px; color: #fff; font-family: "regular"; line-height: 30px; letter-spacing: 1px; text-shadow: 0px 0px 15px rgba(0, 27, 57, 0.08); } .page-title { position: relative; font-size: 48px; color: #222; font-family: "mb"; line-height: 50px; margin-bottom: 55px; font-weight: 700; } .page-title:after { content: ""; display: block; width: 40px; height: 3px; background-color: #e1e1e1; margin-top: 26px; } .page-title img { vertical-align: middle; margin-left: 24px; } .page-box, .padding { padding: 120px 0; } .loading { text-align: center; margin-top: 80px; } .loading a { display: inline-block; color: #d0121b; font-weight: 700; font-family: "regular"; line-height: 34px; } .loading a:hover img { transform: rotateY(180deg); } .loading a img { vertical-align: middle; margin-right: 15px; display: inline-block; 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 { padding-bottom: 0!important; } .about-wrapper .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; } .about-wrapper .main .info { position: relative; width: 44.14%; padding-top: 40px; } .about-wrapper .main .en { font-size: 120px; text-transform: uppercase; position: absolute; left: 0; top: 5px; z-index: 0; font-family: "mb"; color: transparent; line-height: 90px; -webkit-text-stroke: 1px rgba(0, 0, 0, 0.08); } .about-wrapper .main .pic { width: 50%; } .about-wrapper .main .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); } .about-wrapper .main .content { line-height: 30px; } .about-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 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .about-wrapper .data li { position: relative; cursor: default; padding-left: 80px; } .about-wrapper .data li:hover .icon { animation: shake 0.5s ease; } .about-wrapper .data .icon { position: absolute; left: 0; top: 0; z-index: 10; width: 60px; } .about-wrapper .data .num { font-size: 72px; color: #d0121b; font-family: "mb"; line-height: 60px; height: 60px; } .about-wrapper .data .num span, .about-wrapper .data .num i, .about-wrapper .data .num em { display: inline-block; } .about-wrapper .data i, .about-wrapper .data em { font-style: normal; } .about-wrapper .data em { position: relative; font-size: 16px; color: #666; line-height: 20px; top: -2px; } .about-wrapper .data i { font-size: 30px; font-family: "mb"; color: #d0121b; position: absolute; line-height: 20px; height: 20px; left: 0; top: -36px; z-index: 1; } .about-wrapper .data p { font-size: 16px; color: #666; line-height: 24px; font-family: "light"; margin-top: 16px; } .about-wrapper .box-2 .video-box { position: relative; overflow: hidden; } .about-wrapper .box-2 .video-box.on .pic, .about-wrapper .box-2 .video-box.on .play { opacity: 0; visibility: hidden; } .about-wrapper .box-2 .video-box.on video { opacity: 1; visibility: visible; } .about-wrapper .box-2 video { position: absolute; left: 0; top: 0; z-index: 10; width: 100%; height: 100%; object-fit: cover; opacity: 0; visibility: hidden; } .about-wrapper .box-2 .info { text-align: center; position: absolute; left: 0; top: 185px; z-index: 10; width: 100%; } .about-wrapper .box-2 .title { color: #fff; font-size: 48px; text-shadow: 1px 2px 30px rgba(0, 0, 0, 0.2); line-height: 50px; margin-bottom: 55px; } .about-wrapper .box-2 .play { position: relative; width: 90px; height: 90px; margin: 0 auto; cursor: pointer; } .about-wrapper .box-2 .play:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background-image: url(../img/play2.png); background-position: center center; background-repeat: no-repeat; background-size: contain; border-radius: 50%; } .about-wrapper .box-2 .play:before { content: ""; width: 100%; height: 100%; opacity: 0; position: absolute; left: 0; top: 0; z-index: 0; background-color: rgba(255, 255, 255, 0.4); border-radius: 50%; animation: iconScale2 1.8s linear infinite; } .about-wrapper .box-3 { background: url(../img/aboutbg2.jpg) no-repeat center center; background-size: cover; } .about-wrapper .box-3 .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; } .about-wrapper .box-3 .pic, .about-wrapper .box-3 .info { width: 50%; } .about-wrapper .box-3 .info { padding-left: 100px; } .about-wrapper .box-3 .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); } .about-wrapper .box-3 .content i { font-style: normal; } .research-wrapper { position: relative; } .research-wrapper.animated:before { transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); opacity: 1; visibility: visible; } .research-wrapper:before { content: ""; width: 382px; height: 255px; background-image: url(../img/circle.png); background-repeat: no-repeat; background-position: right top; background-size: contain; position: absolute; right: calc((100% - 1536px) / 2); z-index: -1; top: 0; transform: translateX(100px); -webkit-transform: translateX(100px); -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); opacity: 0; visibility: hidden; 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; } .research-wrapper .box-1 .item { 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; margin-bottom: 120px; } .research-wrapper .box-1 .item:nth-child(even) { flex-direction: row-reverse; } .research-wrapper .box-1 .info { width: 43.62%; } .research-wrapper .box-1 .pic { width: 50%; height: 100%; } .research-wrapper .box-1 .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); } .research-wrapper .box-1 .content { line-height: 30px; } .research-wrapper .box-2 { 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 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; background: url(../img/researchbg2.jpg) no-repeat center center; background-size: cover; background-attachment: fixed; } .research-wrapper .box-2 .info-box { position: relative; width: 22.135%; margin-left: calc((100% - 1536px) / 2); z-index: 1; } .research-wrapper .box-2 .page-title { margin-bottom: 40px; } .research-wrapper .box-2 .swiper-box { width: 61.875%; } .research-wrapper .box-2 .content { line-height: 34px; margin-bottom: 80px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; height: 272px; } .research-wrapper .box-2 .swiper-container { padding-bottom: 20px; padding-left: 20px; } .research-wrapper .box-2 .swiper-slide { position: relative; width: 38.55%; padding-left: 44px; padding-top: 48px; height: auto; padding-bottom: 52px; background-color: #fff; 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; border-top: 2px solid rgba(190, 190, 190, 0.3); } .research-wrapper .box-2 .swiper-slide:hover { box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.2); } .research-wrapper .box-2 .swiper-slide:hover:before { width: 100%; } .research-wrapper .box-2 .swiper-slide:hover .desc::-webkit-scrollbar { background-color: #f7f8f9; } .research-wrapper .box-2 .swiper-slide:hover .desc::-webkit-scrollbar-thumb { background-color: #d0121b; } .research-wrapper .box-2 .swiper-slide:before { content: ""; width: 0; height: 2px; position: absolute; left: 0; top: 0; z-index: 10; background-color: #d0121b; transition: width 0.5s ease; -webkit-transition: width 0.5s ease; -moz-transition: width 0.5s ease; -ms-transition: width 0.5s ease; -o-transition: width 0.5s ease; } .research-wrapper .box-2 .swiper-slide > div { padding-right: 44px; } .research-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); } .research-wrapper .box-2 .pic img { height: 254px; object-fit: contain; } .research-wrapper .box-2 .name { font-size: 30px; color: #222; font-weight: 700; line-height: 36px; text-align: center; } .research-wrapper .box-2 .desc { color: #999; line-height: 29px; text-align: justify; margin: 18px auto 30px; height: 203px; overflow-y: auto; } .research-wrapper .box-2 .desc::-webkit-scrollbar { width: 4px; background-color: #fff; } .research-wrapper .box-2 .desc::-webkit-scrollbar-thumb { background-color: #fff; } .research-wrapper .btn-box { font-size: 0; } .research-wrapper .btn-box a { width: 60px; height: 60px; margin-right: 35px; display: inline-block; background-size: contain; background-repeat: no-repeat; background-position: center center; box-shadow: 0px 3px 32px 0px rgba(0, 0, 0, 0.06); 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; } .research-wrapper .btn-box a:last-child { margin-right: 0; } .research-wrapper .prev { background-image: url(../img/prev.jpg); } .research-wrapper .prev:hover { background-image: url(../img/prev2.jpg); } .research-wrapper .next { background-image: url(../img/next.jpg); } .research-wrapper .next:hover { background-image: url(../img/next2.jpg); } .research-wrapper .box-3 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; } .research-wrapper .box-3 ul li { width: 31.77%; text-align: center; margin-top: 56px; margin-right: 2.345%; } .research-wrapper .box-3 ul li:nth-child(3n) { margin-right: 0; } .research-wrapper .box-3 ul li:nth-child(-n+3) { margin-top: 0; } .research-wrapper .box-3 ul 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); } .research-wrapper .box-3 ul li:hover .desc { bottom: 0; } .research-wrapper .box-3 .title { font-size: 24px; line-height: 30px; margin-top: 24px; } .research-wrapper .box-3 .pic { position: relative; } .research-wrapper .box-3 .pic img { height: 308px; object-fit: cover; } .research-wrapper .box-3 .desc { width: 100%; position: absolute; left: 0; bottom: -100%; z-index: 10; font-size: 16px; color: #fff; padding: 0 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 60px; background-color: rgba(0, 0, 0, 0.5); transition: bottom 0.5s ease; -webkit-transition: bottom 0.5s ease; -moz-transition: bottom 0.5s ease; -ms-transition: bottom 0.5s ease; -o-transition: bottom 0.5s ease; } .research-wrapper .swiper-pagination { display: none; } .website-wrapper .main ul li { padding: 22px 0; background: url(../img/line.jpg) repeat-x left bottom; } .website-wrapper .main ul li .cat { display: block; font-size: 16px; color: #333; font-weight: 700; } .website-wrapper .main ul li .cat:hover { color: #d0121b; } .website-wrapper .main ul li .navs { font-size: 0; margin-top: 12px; } .website-wrapper .main ul li .navs a { position: relative; display: inline-block; font-size: 14px; color: #666; margin-right: 40px; margin-bottom: 15px; min-width: 230px; } .website-wrapper .main ul li .navs a:last-child { margin-right: 0; } .website-wrapper .main ul li .navs a span { display: inline-block; background: url(../img/border.png) no-repeat; background-size: 0 1px; background-position: 100% 100%; transition: background-size 0.5s ease; } .website-wrapper .main ul li .navs a:hover { color: #d0121b; } .website-wrapper .main ul li .navs a:hover span { background-size: 100% 1px; background-position: 0 100%; } .website-wrapper .main ul li .navs a:hover:before { background: url(../img/icon2.png) no-repeat left center; } .website-wrapper .main ul li .navs a:before { position: relative; top: -1px; content: ""; display: inline-block; width: 5px; height: 7px; background: url(../img/icon.png) no-repeat left center; margin-right: 10px; } .goods-wrapper.special .list { width: 72%; } .goods-wrapper.special .pic img { height: 301px; } .goods-wrapper.special .info { margin-top: 33px; } .goods-wrapper.special li a { padding-bottom: 20px; padding-top: 30px; } .goods-wrapper .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; } .goods-wrapper .cat { width: 22.78%; height: 100%; border: solid 1px #eee; } .goods-wrapper .cat 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; height: 95px; padding: 0 32px; border-bottom: solid 1px #eee; 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; } .goods-wrapper .cat a:hover span, .goods-wrapper .cat a.on span { color: #d0121b; font-weight: 700; } .goods-wrapper .cat a:hover span:after, .goods-wrapper .cat a.on span:after { background-image: url(../img/iright2.png); } .goods-wrapper .cat a:last-child { border-bottom: none; } .goods-wrapper .cat a span { position: relative; font-size: 16px; color: #222; line-height: 28px; max-height: 56px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding-right: 42px; width: 100%; } .goods-wrapper .cat a span:after { content: ""; width: 7px; height: 100%; background-image: url(../img/iright.png); background-position: center right; background-repeat: no-repeat; position: absolute; right: 0; top: 0; z-index: 1; } .goods-wrapper 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; } .goods-wrapper li { width: 33.33%; border-bottom: solid 1px #eee; border-left: solid 1px #eee; } .goods-wrapper 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); } .goods-wrapper li:hover .model { color: #d0121b; } .goods-wrapper li:hover .icon { transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); opacity: 1; visibility: visible; } .goods-wrapper li a { display: block; text-align: center; overflow: hidden; padding: 20px 0 30px; } .goods-wrapper .pic { width: 83%; margin: 0 auto; } .goods-wrapper .pic img { height: 420px; object-fit: contain; } .goods-wrapper .icon { width: 47px; height: 33px; background: url(../img/more3.png); background-size: contain; background-repeat: no-repeat; background-position: center center; margin: 23px auto 0; opacity: 0; visibility: hidden; transform: translateY(20px); -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); 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; } .goods-wrapper .info { padding: 0 30px; margin-top: 10px; } .goods-wrapper .model, .goods-wrapper .name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } .goods-wrapper .model { font-size: 18px; color: #000; font-family: "mb"; line-height: 30px; transition: color 0.5s ease; -webkit-transition: color 0.5s ease; -moz-transition: color 0.5s ease; -ms-transition: color 0.5s ease; -o-transition: color 0.5s ease; } .goods-wrapper .name { font-size: 16px; color: #666; margin: 4px auto 10px; line-height: 24px; } .goods-wrapper .brief { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; color: #999; line-height: 22px; max-height: 66px; } .goods-wrapper .guide-box { position: relative; padding-bottom: 120px; } .goods-wrapper .guide-box .pic { width: 100%; } .goods-wrapper .guide-box .pic img { height: auto; } .goods-wrapper .guide-box 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 */ position: absolute; z-index: 1; padding-right: 15px; } .goods-wrapper .guide-box a:hover .title { color: #d0121b; } .goods-wrapper .guide-box a:before, .goods-wrapper .guide-box a:after { content: ""; background-color: #e76481; position: absolute; z-index: -1; } .goods-wrapper .guide-box a:before { width: 90%; height: 1px; right: 0; bottom: 16px; } .goods-wrapper .guide-box a:after { width: 1px; left: 100%; top: 33px; } .goods-wrapper .guide-box a:nth-child(2) { left: 0; top: -45px; } .goods-wrapper .guide-box a:nth-child(2):after { height: 49px; } .goods-wrapper .guide-box a:nth-child(3) { left: 22%; top: -86px; } .goods-wrapper .guide-box a:nth-child(3):after { height: 55px; } .goods-wrapper .guide-box a:nth-child(4) { left: 43.3%; top: -107px; } .goods-wrapper .guide-box a:nth-child(4):after { height: 160px; } .goods-wrapper .guide-box a:nth-child(4) .title { min-width: 110px; } .goods-wrapper .guide-box a:nth-child(5), .goods-wrapper .guide-box a:nth-child(8), .goods-wrapper .guide-box a:nth-child(9) { flex-direction: row-reverse; padding-right: 0; padding-left: 15px; } .goods-wrapper .guide-box a:nth-child(5):after, .goods-wrapper .guide-box a:nth-child(8):after, .goods-wrapper .guide-box a:nth-child(9):after { left: 0; } .goods-wrapper .guide-box a:nth-child(5):before, .goods-wrapper .guide-box a:nth-child(8):before, .goods-wrapper .guide-box a:nth-child(9):before { left: 0; right: auto; } .goods-wrapper .guide-box a:nth-child(5) .title, .goods-wrapper .guide-box a:nth-child(8) .title, .goods-wrapper .guide-box a:nth-child(9) .title { padding-right: 15px; padding-left: 0; } .goods-wrapper .guide-box a:nth-child(5) { right: 6%; top: -100px; } .goods-wrapper .guide-box a:nth-child(5):after { height: 73px; } .goods-wrapper .guide-box a:nth-child(6) { left: 3%; bottom: 34px; } .goods-wrapper .guide-box a:nth-child(6):after { height: 154px; } .goods-wrapper .guide-box a:nth-child(7) { left: 23%; bottom: 0; } .goods-wrapper .guide-box a:nth-child(7):after { height: 143px; } .goods-wrapper .guide-box a:nth-child(7) .title { min-width: 104px; } .goods-wrapper .guide-box a:nth-child(8) { left: 48.5%; bottom: 10px; } .goods-wrapper .guide-box a:nth-child(8):after { height: 146px; } .goods-wrapper .guide-box a:nth-child(9) { left: 74%; bottom: 15px; } .goods-wrapper .guide-box a:nth-child(9):after { height: 154px; } .goods-wrapper .guide-box a:nth-last-child(-n+4):after { top: auto; bottom: 16px; } .goods-wrapper .guide-box i { display: block; width: 50px; height: 50px; line-height: 50px; text-align: center; color: #fff; border-radius: 50%; font-family: "regular"; font-size: 32px; font-style: normal; background-color: #e76481; } .goods-wrapper .guide-box .title { text-align: center; font-size: 20px; color: #000; line-height: 28px; font-weight: 700; min-width: 130px; padding-left: 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; } .honor-wrapper .content { color: #808080; line-height: 30px; } .honor-wrapper .box-2 { padding: 100px 0; margin-top: 60px; background-color: #f7f7f7; } .honor-wrapper .box-3 { position: relative; } .honor-wrapper .box-3:before { content: ""; width: 100%; height: 2px; background-color: #e3e4e6; position: absolute; left: 0; top: 50%; margin-top: -1px; z-index: -1; } .honor-wrapper .swiper-container { height: 624px; padding: 0 calc((100% - 1536px) / 2 + 90px); } .honor-wrapper .swiper-slide { position: relative; height: 100%; } .honor-wrapper .swiper-slide:nth-child(odd) .inner { top: 50%; padding-top: 60px; } .honor-wrapper .swiper-slide:nth-child(even) .inner:after { top: auto; bottom: -6px; } .honor-wrapper .line { width: 24px; height: 4px; background-image: url(../img/line.png); background-size: contain; background-repeat: no-repeat; background-position: center center; } .honor-wrapper .year { font-size: 48px; color: #d0121b; font-family: "mb"; line-height: 48px; margin: 32px auto 23px; } .honor-wrapper .desc { font-size: 15px; color: #666; line-height: 30px; } .honor-wrapper .inner { height: 50%; position: absolute; padding-left: 50px; width: 440px; left: 0; top: 0; z-index: 10; } .honor-wrapper .inner:before { content: ""; width: 2px; height: 100%; background-color: #e3e4e6; position: absolute; left: 5px; top: 0; z-index: 1; } .honor-wrapper .inner:after { content: ""; width: 12px; height: 12px; background-color: #fff; border: solid 2px #d0121b; box-sizing: border-box; position: absolute; left: 0; top: -6px; z-index: 10; border-radius: 50%; } .honor-wrapper .swiper-btn { width: 49px; height: 49px; } .honor-wrapper .prev { left: calc((100% - 1536px) / 2); background-image: url(../img/prev4.png); } .honor-wrapper .prev:hover { background-image: url(../img/prev5.png); } .honor-wrapper .next { right: calc((100% - 1536px) / 2); background-image: url(../img/next4.png); } .honor-wrapper .next:hover { background-image: url(../img/next5.png); } .job-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; } .job-wrapper .job-box { position: relative; width: 69.44%; } .job-wrapper .job-box ul li { position: relative; cursor: pointer; background: #fff; margin-bottom: 25px; border: solid 1px #f3f3f3; border-top: 3px solid #ececec; 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; } .job-wrapper .job-box ul li:hover, .job-wrapper .job-box ul li.on { border-color: #ccd3df; } .job-wrapper .job-box ul li:hover .name, .job-wrapper .job-box ul li.on .name { color: #d0121b; } .job-wrapper .job-box ul li.on .btn { bottom: 60px; top: auto; transform: none; background-image: url(../img/more2.png); } .job-wrapper .job-box ul li .top { 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; padding: 28px 130px 30px 32px; } .job-wrapper .job-box ul li .desc { width: 100%; font-size: 14px; color: #969696; line-height: 26px; text-align: justify; margin-top: 14px; } .job-wrapper .job-box ul li .desc img, .job-wrapper .job-box ul li .desc input[type="image"] { max-width: 100%; height: auto!important; } .job-wrapper .job-box ul li .name { width: 280px; padding-right: 20px; font-size: 22px; color: #17171d; font-weight: 700; line-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; } .job-wrapper .job-box ul li .brief { flex: 1; overflow: hidden; font-size: 0; line-height: 30px; } .job-wrapper .job-box ul li .brief span { font-size: 14px; color: #a5a5a5; margin-right: 42px; } .job-wrapper .job-box ul li .brief span:last-child { margin-right: 0; } .job-wrapper .job-box ul li .btn { display: block; width: 58px; height: 58px; background-image: url(../img/more.png); background-repeat: no-repeat; background-position: center center; background-size: contain; position: absolute; right: 40px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); z-index: 10; } .job-wrapper .job-box ul li .hide-box { display: none; line-height: 24px; padding: 5px 130px 60px 32px; } .job-wrapper .job-box ul li .caption { font-size: 14px; color: #252525; font-weight: 700; } .job-wrapper .job-box ul li .content { font-size: 12px; color: #999; margin-bottom: 22px; } .job-wrapper .job-box ul li .send { display: block; width: 150px; height: 50px; line-height: 50px; text-align: center; font-size: 16px; color: #fff; border-radius: 30px; background: #d0121b; margin-top: 36px; 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; } .job-wrapper .job-box ul li .send:hover { box-shadow: 0 2px 30px rgba(0, 0, 0, 0.1); } .job-wrapper .other-box { width: 26.38%; } .job-wrapper .other-box .info { width: 100%; position: absolute; left: 0; z-index: 10; padding: 0 26px 0 40px; line-height: 30px; } .job-wrapper .other-box .info .name { font-size: 24px; } .job-wrapper .other-box .desc { margin-top: 12px; } .job-wrapper .form { position: relative; z-index: 20; background-color: #f7f7f7; padding: 40px 40px 58px 40px; } .job-wrapper .form .group { position: relative; margin-bottom: 30px; } .job-wrapper .form .group:last-child { margin-bottom: 0; } .job-wrapper .form .title { font-size: 18px; color: #222; line-height: 24px; font-weight: 700; margin-bottom: 18px; } .job-wrapper .form .caption { position: relative; cursor: pointer; height: 50px; line-height: 50px; padding: 0 34px 0 20px; font-size: 14px; color: #a4a4a4; background: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .job-wrapper .form .caption.on:after { transform: rotateX(180deg); -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); } .job-wrapper .form .caption:after { content: ""; display: block; width: 8px; height: 100%; background-position: left center; background-repeat: no-repeat; background-size: contain; background-image: url(../img/down3.png); position: absolute; right: 20px; top: 0; z-index: 10; } .job-wrapper .form .list { width: 100%; position: absolute; left: 0; top: 100%; z-index: 12; background: #fff; max-height: 250px; overflow-y: auto; display: none; border: 1px solid #f7f8f9; } .job-wrapper .form .list a { display: block; font-size: 14px; color: #a4a4a4; line-height: 50px; padding: 0 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid #f7f8f9; } .job-wrapper .form .list a:hover, .job-wrapper .form .list a.on { color: #d0121b; } .job-wrapper .form .list a:last-child { border-bottom: none; } .job-wrapper .join { position: relative; } .job-wrapper .join > img { display: block; width: 100%; } .job-wrapper .join .info { top: 42px; } .job-wrapper .join .name { color: #d0121b; } .job-wrapper .join .desc { font-size: 16px; color: #929292; } .job-wrapper .join .desc 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; } .job-wrapper .join .desc a:hover { color: #d0121b; } .job-wrapper .loading { margin-top: 50px; background: #f5f5f5; padding: 11px 0; text-align: center; } .job-wrapper .loading img { margin-right: 0; } .job2-wrapper .content { line-height: 40px; margin-bottom: 38px; } .job2-wrapper .content h2 { font-size: 30px; color: #222; } .job2-wrapper .email { display: inline-block; font-size: 24px; color: #666; font-family: "light"; 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; padding-left: 70px; line-height: 50px; background: url(../img/email.png) no-repeat left center; background-size: contain; } .job2-wrapper .email:hover { color: #d0121b; } .news-wrapper .first-box { margin-bottom: 100px; } .news-wrapper .first-box: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 .first-box:hover .title { color: #d0121b; } .news-wrapper .first-box 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 */ box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.08); align-items: center; } .news-wrapper .first-box .pic, .news-wrapper .first-box .info { width: 50%; } .news-wrapper .first-box .desc { font-size: 16px; color: #666; line-height: 30px; height: 60px; } .news-wrapper .first-box .date { font-size: 30px; } .news-wrapper .first-box .info { padding: 0 76px; } .news-wrapper .first-box .title { font-size: 28px; line-height: 36px; max-height: 72px; margin: 40px auto 17px; } .news-wrapper .first-box .desc { margin-bottom: 62px; } .news-wrapper 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; } .news-wrapper li { width: 30.468%; margin-right: 4.298%; margin-top: 4.298%; box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.08); position: relative; } .news-wrapper li:after { content: ""; width: 0; height: 3px; background-color: #cb292e; position: absolute; left: 0; bottom: 0; z-index: 1; transition: width 0.5s ease; -webkit-transition: width 0.5s ease; -moz-transition: width 0.5s ease; -ms-transition: width 0.5s ease; -o-transition: width 0.5s ease; } .news-wrapper li:nth-child(-n+3) { margin-top: 0; } .news-wrapper li:nth-child(3n) { margin-right: 0; } .news-wrapper li:hover:after { width: 100%; } .news-wrapper 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 li:hover .title { color: #d0121b; } .news-wrapper li .pic img { height: 295px; object-fit: cover; } .news-wrapper li .info { padding: 30px 40px 40px; } .news-wrapper li a { display: block; } .news-wrapper li .desc { line-height: 24px; height: 48px; opacity: 0.75; margin: 15px auto 23px; } .news-wrapper li .date { font-size: 18px; } .news-wrapper li .title { font-size: 20px; line-height: 30px; max-height: 60px; } .news-wrapper .title { font-weight: 700; color: #222; 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; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .news-wrapper .desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .news-wrapper .date { color: #222; opacity: 0.25; font-family: "mb"; line-height: 24px; } .newsinfo-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; } .newsinfo-wrapper .main { width: 67.83%; } .newsinfo-wrapper .top { margin-bottom: 46px; } .newsinfo-wrapper .top h2 { font-size: 36px; color: #d0121b; font-weight: 700; line-height: 48px; margin-bottom: 28px; } .newsinfo-wrapper .other { font-size: 0; } .newsinfo-wrapper .other span { font-size: 14px; color: #ccc; font-family: "mb"; display: inline-block; margin-right: 18px; line-height: 24px; } .newsinfo-wrapper .other span:last-child { margin-right: 0; } .newsinfo-wrapper .other img { vertical-align: middle; position: relative; top: -2px; margin-right: 6px; } .newsinfo-wrapper .relative-box { width: 26.041%; } .newsinfo-wrapper .relative-box li { padding: 45px 0; border-bottom: 1px solid #f5f5f5; } .newsinfo-wrapper .relative-box li:first-child { padding-top: 0; } .newsinfo-wrapper .relative-box li:hover .title { color: #d0121b; } .newsinfo-wrapper .relative-box li .title { font-size: 24px; line-height: 30px; 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 li .desc { font-size: 15px; color: #666; line-height: 26px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 52px; margin: 9px auto 22px; } .newsinfo-wrapper .relative-box .time { color: #d0121b; font-family: "regular"; line-height: 20px; } .newsinfo-wrapper .quick-news { margin-top: 44px; } .newsinfo-wrapper .quick-news p, .newsinfo-wrapper .quick-news p a { font-size: 16px; line-height: 24px; } .newsinfo-wrapper .quick-news p { color: #999; margin-bottom: 15px; 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 .quick-news p:last-child { margin-bottom: 0; } .newsinfo-wrapper .quick-news p:hover a { color: #d0121b; } .newsinfo-wrapper .quick-news p a { color: #333; max-width: 75%; 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 .share { font-size: 0; margin: 42px auto 50px; } .newsinfo-wrapper .share a { display: inline-block; width: 36px; height: 36px; background-size: contain; background-repeat: no-repeat; background-position: center center; margin-right: 15px; border: 1px solid #e0e0e0; padding: 8px; border-radius: 50%; 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 .share a:last-child { margin-right: 0; } .newsinfo-wrapper .share a:last-child svg { position: relative; top: 2px; } .newsinfo-wrapper .share a:hover { background-color: #d0121b; border-color: #d0121b; } .newsinfo-wrapper .share a:hover svg { fill: #fff; } .newsinfo-wrapper .share a svg { fill: #e0e0e0; width: 100%; height: 100%; } .newsinfo-wrapper .twitter { background-image: url(../img/ni-twitter.png); } .newsinfo-wrapper .twitter:hover { background-image: url(../img/ni-twitter2.png); } .newsinfo-wrapper .wechat { background-image: url(../img/ni-wechat.png); } .newsinfo-wrapper .wechat:hover { background-image: url(../img/ni-wechat2.png); } .newsinfo-wrapper .weibo { background-image: url(../img/ni-weibo.png); } .newsinfo-wrapper .weibo:hover { background-image: url(../img/ni-weibo2.png); } .newsinfo-wrapper .return { display: block; line-height: 50px; background-color: #d0121b; border-radius: 25px; text-align: center; color: #fff; font-size: 16px; 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; } .newsinfo-wrapper .return:hover { box-shadow: 0 2px 30px rgba(208, 18, 27, 0.25); } .newsinfo-wrapper .return img { vertical-align: middle; position: relative; top: -2px; margin-left: 10px; } .newsinfo-wrapper .caption-box { margin-bottom: 36px; } .newsinfo-wrapper .caption-box .caption { font-size: 22px; color: #393435; line-height: 30px; font-weight: 700; margin-bottom: 10px; } .newsinfo-wrapper .caption-box p { color: #999; font-family: "light"; line-height: 20px; } .recommendGoods-wrapper .cat-box { padding: 200px 0 80px; background: url(../img/recommendGoodsbg.jpg) no-repeat center center; background-size: cover; } .recommendGoods-wrapper .cat-box .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 */ justify-content: center; } .recommendGoods-wrapper .cat-box a { width: 25%; text-align: center; padding: 8px 30px 4px; position: relative; } .recommendGoods-wrapper .cat-box a:last-child:after { display: none; } .recommendGoods-wrapper .cat-box a:hover .icon { animation: shake 0.5s ease; } .recommendGoods-wrapper .cat-box a:hover p { color: #d0121b; } .recommendGoods-wrapper .cat-box a:after { content: ""; width: 1px; height: 100%; position: absolute; right: 0; top: 0; z-index: 1; background-color: #ccc; } .recommendGoods-wrapper .cat-box p { font-size: 18px; line-height: 30px; color: #222; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 18px; transition: color 0.5s ease; -webkit-transition: color 0.5s ease; -moz-transition: color 0.5s ease; -ms-transition: color 0.5s ease; -o-transition: color 0.5s ease; } .recommendGoods-wrapper .swiper-pagination-bullet { width: 8px; height: 8px; background: rgba(255, 255, 255, 0.8); position: relative; } .recommendGoods-wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #fff; } .recommendGoods-wrapper .swiper-pagination-bullet svg { width: 38px; height: 38px; position: absolute; top: 50%; margin-top: -19px; left: 50%; margin-left: -19px; } .recommendGoods-wrapper .swiper-pagination-bullet svg:nth-child(2) { position: absolute; left: 0; top: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .recommendGoods-wrapper .swiper-pagination-bullet { fill: none; } .recommendGoods-wrapper .circle-chart__circle { stroke-linecap: square; fill: none; } .recommendGoods-wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active .circle-chart__background { stroke: rgba(255, 255, 255, 0.2); } .recommendGoods-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; } .recommendGoods-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; } .recommendGoods-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; } .recommendGoods-wrapper .swiper-pagination { bottom: 60px; } .recommendGoods-wrapper .swiper-pagination .swiper-pagination-bullet { margin: 0 17px; opacity: 1; } .recommendGoods-wrapper .swiper-pagination .swiper-pagination-bullet:focus, .recommendGoods-wrapper .swiper-pagination .swiper-pagination-bullet:active, .recommendGoods-wrapper .swiper-pagination .swiper-pagination-bullet:link { outline: none; } .recommendGoods-wrapper .swiper-slide { padding: 166px 0 160px; } .recommendGoods-wrapper .swiper-slide a { display: block; } .recommendGoods-wrapper .swiper-slide.swiper-slide-active .pic, .recommendGoods-wrapper .swiper-slide.swiper-slide-active .info { opacity: 1; visibility: visible; transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); } .recommendGoods-wrapper .pic { width: 39.12%; } .recommendGoods-wrapper .icon { width: 60px; margin: 0 auto; display: block; } .bigPic-box .info, .recommendGoods-wrapper .info { width: 38%; transform: translateX(-100px); -webkit-transform: translateX(-100px); -moz-transform: translateX(-100px); -ms-transform: translateX(-100px); -o-transform: translateX(-100px); opacity: 0; visibility: hidden; transition: all 1.2s ease; -webkit-transition: all 1.2s ease; -moz-transition: all 1.2s ease; -ms-transition: all 1.2s ease; -o-transition: all 1.2s ease; } .bigPic-box .info div, .recommendGoods-wrapper .info div { color: #222; } .bigPic-box .name, .recommendGoods-wrapper .name { font-size: 48px; font-family: "mb"; font-weight: 700; line-height: 60px; position: relative; margin-bottom: 30px; } .bigPic-box .name:after, .recommendGoods-wrapper .name:after { content: ""; width: 40px; height: 3px; background-color: #222; opacity: 0.2; margin-top: 22px; display: block; } .bigPic-box .name img, .recommendGoods-wrapper .name img { margin-left: 8px; vertical-align: middle; position: relative; top: -4px; } .bigPic-box .brief, .recommendGoods-wrapper .brief { font-size: 34px; line-height: 40px; font-family: "light"; margin: 8px auto 40px; } .bigPic-box .brief:after, .recommendGoods-wrapper .brief:after { content: ""; display: block; width: 40px; height: 3px; margin-top: 32px; background-color: #cfcfcf; } .bigPic-box .desc, .recommendGoods-wrapper .desc { font-size: 18px; line-height: 36px; font-family: "light"; } .bigPic-box, .recommendGoods-wrapper .swiper-slide { background-repeat: no-repeat; background-size: cover; } .bigPic-box.left .box-container, .recommendGoods-wrapper .swiper-slide.left .box-container { flex-direction: row-reverse; } .bigPic-box.left .box-container .pic, .recommendGoods-wrapper .swiper-slide.left .box-container .pic { margin-right: 0; margin-left: 9.76%; } .bigPic-box .box-container, .recommendGoods-wrapper .swiper-slide .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 */ justify-content: center; align-items: center; } .bigPic-box .pic, .recommendGoods-wrapper .swiper-slide .pic { margin-right: 9.76%; transform: translateX(100px); -webkit-transform: translateX(100px); -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); opacity: 0; visibility: hidden; transition: all 1.2s ease; -webkit-transition: all 1.2s ease; -moz-transition: all 1.2s ease; -ms-transition: all 1.2s ease; -o-transition: all 1.2s ease; } .bigPic-box { padding: 246px 0 34px; } .bigPic-box.animated .pic, .bigPic-box.animated .info { opacity: 1; visibility: visible; transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); } .bigPic-box.special { padding-bottom: 0; } .bigPic-box.special .box-container { justify-content: flex-start; } .bigPic-box.special .name { font-size: 40px; line-height: 50px; } .bigPic-box.special .name img { width: 40px; } .bigPic-box.special .brief { font-size: 32px; line-height: 36px; margin: 19px auto 45px; } .bigPic-box.special .brief:after { margin-top: 36px; } .bigPic-box.special .info { width: 43.88%; padding-bottom: 30px; } .bigPic-box .pic { width: 49.47%; } .bigPic-box .info.white .name, .bigPic-box .info.white .desc, .bigPic-box .info.white .brief { color: #fff; } .bigPic-box .info.white .brief:before { background-color: #fff; } .goodsinfo-wrapper .detail-box { background: url(../img/goodsinfobg.jpg) no-repeat center center; background-size: cover; } .goodsinfo-wrapper .detail-box .box-container { position: relative; } .goodsinfo-wrapper .detail-box .pic { width: 47.2%; margin: 0 auto; position: relative; padding-bottom: 42px; } .goodsinfo-wrapper .detail-box .pic:after { content: ""; width: 600px; height: 600px; background-color: #fff; border-radius: 50%; position: absolute; left: 13%; bottom: 0; z-index: 0; } .goodsinfo-wrapper .detail-box .pic img { position: relative; z-index: 1; } .goodsinfo-wrapper .detail-box ul { position: absolute; left: 0; top: 0; z-index: 1; padding: 0 20px; width: 100%; height: 100%; } .goodsinfo-wrapper .detail-box li { position: absolute; 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; max-width: 346px; } .goodsinfo-wrapper .detail-box li:hover .icon { transform: rotateY(180deg); } .goodsinfo-wrapper .detail-box li:nth-child(odd) .icon { margin-right: 36px; } .goodsinfo-wrapper .detail-box li:nth-child(even) { flex-direction: row-reverse; } .goodsinfo-wrapper .detail-box li:nth-child(even) .icon { margin-left: 36px; } .goodsinfo-wrapper .detail-box li:nth-child(even) .title { text-align: right; } .goodsinfo-wrapper .detail-box li:nth-child(1), .goodsinfo-wrapper .detail-box li:nth-child(7) { left: 46px; } .goodsinfo-wrapper .detail-box li:nth-child(2), .goodsinfo-wrapper .detail-box li:nth-child(8) { right: 46px; } .goodsinfo-wrapper .detail-box li:nth-child(3), .goodsinfo-wrapper .detail-box li:nth-child(5) { left: 0; } .goodsinfo-wrapper .detail-box li:nth-child(4), .goodsinfo-wrapper .detail-box li:nth-child(6) { right: 0; } .goodsinfo-wrapper .detail-box li:nth-child(1), .goodsinfo-wrapper .detail-box li:nth-child(2) { top: 11.8%; } .goodsinfo-wrapper .detail-box li:nth-child(3), .goodsinfo-wrapper .detail-box li:nth-child(4) { top: 33%; } .goodsinfo-wrapper .detail-box li:nth-child(5), .goodsinfo-wrapper .detail-box li:nth-child(6) { top: 54.2%; } .goodsinfo-wrapper .detail-box li:nth-child(7), .goodsinfo-wrapper .detail-box li:nth-child(8) { top: 76%; } .goodsinfo-wrapper .detail-box .title { flex: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 18px; color: #222; line-height: 36px; } .goodsinfo-wrapper .detail-box .icon { background-color: #fff; box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.06); } .goodsinfo-wrapper .icon { width: 100px; height: 100px; border-radius: 50%; display: block; 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; } .goodsinfo-wrapper .param-box { padding: 60px 0; } .goodsinfo-wrapper .param-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 */ justify-content: center; } .goodsinfo-wrapper .param-box li { text-align: center; width: 16.66%; padding: 0 15px; } .goodsinfo-wrapper .param-box li:hover .icon { transform: rotateY(180deg); } .goodsinfo-wrapper .param-box .title { font-size: 18px; color: #222; line-height: 30px; margin-top: 16px; } .goodsinfo-wrapper .param-box .icon { display: block; margin: 0 auto; } .goodsinfo-wrapper .box-4 .content img, .goodsinfo-wrapper .box-4 .content input[type="image"] { margin: 0; } .talent-wrapper .box-1 { padding-bottom: 80px; } .talent-wrapper .box-1 .desc { font-size: 20px; color: #666; line-height: 40px; } .talent-wrapper .box-2 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; } .talent-wrapper .box-2 li { width: 33.33%; padding: 130px 60px 105px 82px; background-color: #f6f6f6; } .talent-wrapper .box-2 li:nth-child(even) { background-color: #fafafa; } .talent-wrapper .box-2 li:hover .icon { transform: translateY(-10px); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); } .talent-wrapper .box-2 .icon { display: block; width: 60px; 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; } .talent-wrapper .box-2 .name { font-size: 28px; margin: 35px auto 18px; font-weight: 700; line-height: 30px; } .talent-wrapper .box-2 .en { font-size: 30px; color: #c4c4c4; font-family: "light"; line-height: 30px; text-transform: uppercase; } .talent-wrapper .box-2 .desc { font-size: 18px; line-height: 34px; color: #797979; margin-top: 48px; } .talent-wrapper .box-3 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 */ } .talent-wrapper .box-3 li { position: relative; width: 50%; text-align: center; } .talent-wrapper .box-3 li:hover .pic img { transform: scale(1.15); -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); } .talent-wrapper .box-3 li:hover .index-more { transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); opacity: 1; visibility: visible; } .talent-wrapper .box-3 .index-more { color: #d0121b; border-color: #fff; background-color: #fff; 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; opacity: 0; visibility: hidden; transform: translateY(-30px); -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); } .talent-wrapper .box-3 .index-more:hover { color: #fff; border-color: #d0121b; background-color: #d0121b; } .talent-wrapper .box-3 .info { position: absolute; left: 0; top: 50%; z-index: 10; width: 100%; padding: 50px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .talent-wrapper .box-3 .title { font-size: 36px; color: #fff; line-height: 36px; font-weight: 700; } .talent-wrapper .box-3 .desc { font-size: 16px; line-height: 30px; color: #fff; margin: 17px auto 42px; } .talent-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; } .talent-wrapper .box-4 li { width: 31.25%; margin-right: 3.125%; margin-top: 3.125%; } .talent-wrapper .box-4 li:hover .pic img { transform: scale(1.15); -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); } .talent-wrapper .box-4 li:nth-child(-n+3) { margin-top: 0; } .talent-wrapper .box-4 li:nth-child(3n) { margin-right: 0; } .talent-wrapper .box-4 .pic img { height: 310px; object-fit: cover; } .culture-wrapper { position: relative; } .culture-wrapper.animated:before { transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); opacity: 1; visibility: visible; } .culture-wrapper:before { content: ""; width: 418px; height: 289px; background-image: url(../img/culturebg.png); background-repeat: no-repeat; background-position: right top; background-size: contain; position: absolute; right: calc((100% - 1536px) / 2); z-index: -1; top: 0; transform: translateX(100px); -webkit-transform: translateX(100px); -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); opacity: 0; visibility: hidden; 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; } .culture-wrapper .cat-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 */ } .culture-wrapper .cat-box a { width: 33.33%; 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; padding: 40px 40px 40px 45px; background-color: #fff; border-top: 1px solid #eee; border-right: 1px solid #eee; 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; } .culture-wrapper .cat-box a:first-child { border-left: 1px solid #eee; } .culture-wrapper .cat-box a.on { background-color: #d0121b; } .culture-wrapper .cat-box a.on .icon .on { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); opacity: 1; visibility: visible; } .culture-wrapper .cat-box a.on .icon .init { transform: scale(0.8); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); opacity: 0; visibility: hidden; } .culture-wrapper .cat-box a.on .name { color: #fff; } .culture-wrapper .cat-box a.on .en { color: rgba(255, 255, 255, 0.6); } .culture-wrapper .cat-box .info { flex: 1; overflow: hidden; } .culture-wrapper .cat-box .name, .culture-wrapper .cat-box .en { 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; } .culture-wrapper .cat-box .name { font-size: 30px; line-height: 36px; color: #222; } .culture-wrapper .cat-box .en { font-size: 18px; color: rgba(34, 34, 34, 0.2); font-family: "light"; text-transform: uppercase; line-height: 24px; margin-top: 10px; } .culture-wrapper .icon { width: 84px; height: 84px; position: relative; margin-right: 30px; } .culture-wrapper .icon img { position: absolute; left: 0; top: 0; z-index: 1; 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; } .culture-wrapper .icon .on { transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); opacity: 0; visibility: hidden; } .culture-wrapper .key { font-size: 300px; font-family: "mb"; color: #000; opacity: 0.05; line-height: 220px; position: absolute; right: 30px; bottom: -80px; z-index: 1; } .culture-wrapper .detail-box { border-top: 1px solid #d0121b; padding-top: 90px; } .culture-wrapper .item { display: none; } .culture-wrapper .item.on { 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 */ } .culture-wrapper .item.on .info { animation: fadeInRight50 0.5s ease; } .culture-wrapper .item.on .pic { animation: fadeInLeft50 0.5s ease; } .culture-wrapper .item .info, .culture-wrapper .item .pic { width: 50%; } .culture-wrapper .item .info { position: relative; overflow: hidden; padding: 146px 120px 0; box-shadow: 0px 5px 35px 0px rgba(14, 41, 86, 0.08); } .culture-wrapper .item .info .name { font-size: 36px; color: #222; line-height: 48px; font-weight: 700; } .culture-wrapper .item .info .name:after { display: block; content: ""; width: 35px; height: 2px; background-color: #e4e4e4; margin-top: 20px; } .culture-wrapper .item .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); } .culture-wrapper .desc { font-size: 16px; color: #666; line-height: 30px; margin-top: 44px; } .contact-wrapper { padding-bottom: 0!important; } .contact-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; } .contact-wrapper .name { font-size: 36px; color: #222; font-weight: 700; line-height: 48px; } .contact-wrapper .info { width: 35.8%; } .contact-wrapper .info .en { font-size: 22px; color: #666; line-height: 30px; font-family: "light"; text-transform: uppercase; margin: 16px auto 52px; } .contact-wrapper .info li { position: relative; font-size: 16px; color: #666; line-height: 32px; padding-left: 52px; margin-bottom: 28px; } .contact-wrapper .info li:last-child { margin-bottom: 0; } .contact-wrapper .info li:hover .icon { animation: shake 0.5s ease; } .contact-wrapper .info .icon { position: absolute; left: 0; top: 0; z-index: 1; } .contact-wrapper .map { position: relative; width: 56.25%; overflow: hidden; height: 580px; } .contact-wrapper .map .img { width: 100%; height: 100%; object-fit: cover; } .contact-wrapper .box-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 */ flex-flow: wrap; } .contact-wrapper .box-2 .item { position: relative; width: 33.33%; padding: 125px 140px 105px; background-color: #f6f6f6; } .contact-wrapper .box-2 .item:hover .icon { transform: translateY(-10px); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); } .contact-wrapper .box-2 .item:nth-child(even) { background-color: #fafafa; } .contact-wrapper .box-2 .item a { display: block; } .contact-wrapper .box-2 .icon { width: 84px; margin-bottom: 48px; 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; } .contact-wrapper .box-2 .en { color: #b9b9b9; font-size: 20px; line-height: 30px; font-family: "regular"; text-transform: uppercase; margin-bottom: 48px; } .contact-wrapper .box-2 li { margin-bottom: 40px; } .contact-wrapper .box-2 li:hover .icon { animation: shake 0.5s ease; } .contact-wrapper .box-2 li:last-child { margin-bottom: 0; } .contact-wrapper .box-2 li p, .contact-wrapper .box-2 li .desc { font-size: 24px; line-height: 30px; } .contact-wrapper .box-2 li .desc { color: #797979; margin-top: 12px; } .contact-wrapper .box-2 .more { font-size: 16px; color: #d0121b; line-height: 24px; font-family: "mb"; margin-top: 66px; } .contact-wrapper .box-2 .more:after { content: ""; display: inline-block; width: 16px; height: 13px; background-image: url(../img/right.png); background-size: contain; background-repeat: no-repeat; background-position: center center; margin-left: 10px; vertical-align: middle; position: relative; top: -1px; } .contact-wrapper iframe { position: absolute; right: 0; top: 0; z-index: 0; width: 50%; height: 50%; } .information-wrapper { padding-bottom: 0!important; } .information-wrapper .content { font-size: 14px; line-height: 34px; } .information-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; } .information-wrapper .box-container .info { width: 62.5%; } .information-wrapper .box-container .pic { width: 31.25%; height: 100%; } .information-wrapper .box-container .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); } .information-wrapper .box-2 { position: relative; } .information-wrapper .box-2 .map { position: relative; overflow: hidden; height: 800px; } .information-wrapper .box-2 .img { display: block; width: 100%; height: 100%; object-fit: cover; } .information-wrapper .box-2 .info { position: absolute; left: calc((100% - 1536px) / 2); top: 0; z-index: 10; width: 33.33%; 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; } .information-wrapper .box-2 .info ul { padding: 0 60px; } .information-wrapper .box-2 .info li { position: relative; font-size: 16px; color: #666; line-height: 32px; padding-left: 52px; margin-bottom: 28px; } .information-wrapper .box-2 .info li:last-child { margin-bottom: 0; } .information-wrapper .box-2 .inner { width: 100%; padding: 78px 0 92px; background-color: #fff; box-shadow: 2px 5px 30px 0px rgba(0, 0, 0, 0.15); } .information-wrapper .box-2 .title { font-size: 32px; padding: 0 62px 44px; line-height: 40px; margin-bottom: 50px; border-bottom: 1px solid #eee; } .information-wrapper .box-2 .icon { position: absolute; left: 0; top: 0; z-index: 1; } .service-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; } .service-wrapper .info { width: 50%; padding-top: 58px; padding-right: 100px; } .service-wrapper .info li { position: relative; color: #666; line-height: 60px; padding-left: 52px; } .service-wrapper .info li:hover .icon { animation: shake 0.5s ease; } .service-wrapper .info .icon { width: 32px; position: absolute; left: 0; top: 14px; z-index: 10; } .service-wrapper .pic { width: 50%; } .advice-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; } .advice-wrapper .advice-box { width: 66.4%; } .advice-wrapper .advice-box li { 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: 88px; align-items: center; padding: 0 60px 0 40px; background-color: #f7f7f7; margin-bottom: 20px; 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; } .advice-wrapper .advice-box li:hover { background-color: #fff; box-shadow: 0 2px 30px rgba(0, 0, 0, 0.1); } .advice-wrapper .advice-box .title { font-size: 18px; color: #373737; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; flex: 1; margin: 0 56px; line-height: 30px; } .advice-wrapper .advice-box .icon { width: 30px; height: 42px; background-image: url(../img/pdf.png); background-size: contain; background-repeat: no-repeat; background-position: center center; } .advice-wrapper .date { font-size: 16px; color: #222; opacity: 0.3; line-height: 24px; font-family: "mb"; } .advice-wrapper .other-box { width: 27.6%; } .advice-wrapper .other-box .info { position: absolute; left: 0; top: 0; width: 100%; padding: 60px 20px 0 36px; } .advice-wrapper .other-box .name, .advice-wrapper .other-box .cname { font-size: 24px; font-weight: 700; line-height: 30px; } .advice-wrapper .other-box .en { font-size: 16px; font-family: "light"; opacity: 0.5; letter-spacing: 1px; line-height: 24px; margin: 8px auto 37px; } .advice-wrapper .other-box p { opacity: 0.4; line-height: 24px; margin-bottom: 6px; } .advice-wrapper .other-box .cname { opacity: 0.8; margin-bottom: 15px; } .advice-wrapper .other-box .code { font-size: 60px; font-family: "mb"; line-height: 50px; color: #d0121b; margin-bottom: 28px; } .advice-wrapper .other-box .title { font-size: 18px; font-weight: 700; line-height: 24px; opacity: 0.6; } .advice-wrapper .form { position: relative; z-index: 20; background-color: #f7f7f7; padding: 50px 60px 60px 60px; /* input placeholder */ } .advice-wrapper .form .group { position: relative; margin-bottom: 32px; } .advice-wrapper .form .group:last-child { margin-bottom: 0; } .advice-wrapper .form .title { font-size: 14px; color: #6f6f6f; line-height: 24px; font-weight: 700; margin-bottom: 16px; } .advice-wrapper .form .text, .advice-wrapper .form .caption { width: 100%; height: 50px; line-height: 50px; font-size: 12px; color: #b4b4b4; background: #fff; padding: 0 40px 0 20px; } .advice-wrapper .form ::-webkit-input-placeholder { /* WebKit browsers */ color: #b4b4b4; font-size: 12px; } .advice-wrapper .form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #b4b4b4; font-size: 12px; } .advice-wrapper .form ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #b4b4b4; font-size: 12px; } .advice-wrapper .form :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #b4b4b4; font-size: 12px; } .advice-wrapper .form .btn { display: block; width: 14px; height: 14px; background-image: url(../img/search4.png); background-size: contain; background-repeat: no-repeat; background-position: center center; position: absolute; right: 20px; bottom: 18px; } .advice-wrapper .form .caption { position: relative; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .advice-wrapper .form .caption.on:after { transform: rotateX(180deg); -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); } .advice-wrapper .form .caption:after { content: ""; display: block; width: 8px; height: 100%; background-position: left center; background-repeat: no-repeat; background-size: contain; background-image: url(../img/down4.png); position: absolute; right: 20px; top: 0; z-index: 10; } .advice-wrapper .form .list { width: 100%; position: absolute; left: 0; top: 100%; z-index: 12; background: #fff; max-height: 250px; overflow-y: auto; display: none; border: 1px solid #f7f8f9; } .advice-wrapper .form .list a { display: block; font-size: 12px; color: #b4b4b4; line-height: 50px; padding: 0 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid #f7f8f9; } .advice-wrapper .form .list a:hover, .advice-wrapper .form .list a.on { color: #d0121b; } .advice-wrapper .form .list a:last-child { border-bottom: none; } .advice-wrapper .loading { background: #f5f5f5; padding: 11px 0; text-align: center; margin-top: 0; } .social-wrapper 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; } .social-wrapper li { width: 48.7%; margin-top: 60px; } .social-wrapper li:nth-child(-n+2) { margin-top: 0; } .social-wrapper 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); } .social-wrapper li:hover .info { background-color: #fff; box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.08); } .social-wrapper li:hover .name { color: #d0121b; } .social-wrapper li:hover .icon { background-image: url(../img/right3.png); } .social-wrapper 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 */ } .social-wrapper .info, .social-wrapper .pic { width: 50%; } .social-wrapper .pic img { height: 290px; object-fit: cover; } .social-wrapper .info { padding: 54px 45px 0; background-color: #f7f7f7; 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; } .social-wrapper .desc { color: #666; line-height: 28px; margin: 18px auto 42px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; height: 84px; } .social-wrapper .name { font-weight: 700; font-size: 20px; 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; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; height: 30px; line-height: 30px; } .social-wrapper .icon { width: 25px; height: 14px; background-image: url(../img/right2.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; } /*分页*/ .pageNum { text-align: center; font-size: 0; } .pageNum a { display: inline-block; color: #666; font-size: 13px; font-family: Arial; vertical-align: middle; font-weight: 700; margin: 0 10px; width: 48px; height: 48px; line-height: 48px; background: #eee; 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 .button { width: 80px; font-family: 微软雅黑; } .pageNum .more { background: #eee; background-size: contain; } .pageNum .more:hover { background: #d0121b; background-size: contain; } .pageNum a:hover, .pageNum .on { color: #fff; background: #d0121b; } .pageMore { display: none; } .pageMore a { display: block; width: 100%; text-align: center; height: 40px; line-height: 40px; background: #c9161e; 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 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(2); -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); opacity: 0; } } @keyframes iconScale2 { 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.7); -webkit-transform: scale(1.7); -moz-transform: scale(1.7); -ms-transform: scale(1.7); -o-transform: scale(1.7); opacity: 0; } } @keyframes circleAni { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes circleAni2 { from { transform: rotate(360deg); } to { transform: rotate(0); } } @-webkit-keyframes left { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes left { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @-webkit-keyframes right { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(100%); transform: translateX(100%); } } @keyframes right { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(100%); transform: translateX(100%); } } @-webkit-keyframes top { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes top { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @-webkit-keyframes bottom { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform: translateY(100%); transform: translateY(100%); } } @keyframes bottom { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform: translateY(100%); transform: translateY(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); } }