@charset "utf-8"; body {-webkit-font-smoothing: subpixel-antialiased !important; } @font-face { font-family: sans-serif; src: local("Helvetica"); } @font-face { font-family: serif; src: local("Times"); } * { outline: none; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul { margin: 0; padding: 0; } body, button, input, select, textarea { font: 14px/1.8 "-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif"; font-family:"SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif; color: #777; font-size: 14px; font-weight: 300; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } b, cite, code, em, i, small, th { font-style: normal; } ol, ul { list-style: none; } a { text-decoration: none; -webkit-transition: 300ms; -moz-transition: 300ms; transition: 300ms; cursor: pointer; } fieldset, iframe, img { border: 0; } button, input, select, textarea { font-size: 100%; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; appearance: none; -moz-appearance: none; -webkit-appearance: none; border: none; background: none; outline: none; } table { border-collapse: collapse; border-spacing: 0; } th { text-align: inherit; } button, input[type=button], input[type=submit] { cursor: pointer; } button::-moz-focus-inner, button::-moz-focus-outer, input::-moz-focus-inner, input::-moz-focus-outer { border: 0 none; padding: 0; margin: 0; } input[type=search] { -webkit-appearance: textfield; } input:focus::-webkit-input-placeholder { color: transparent; } input::-ms-clear { display: none; } textarea { resize: vertical; overflow-y: auto; } ::-moz-selection { background: #d76c00; color: #fff; text-shadow: none; } ::selection { background: #d76c00; color: #fff; text-shadow: none; } a:link, a:visited { text-decoration: none; } a:active, a:hover { text-decoration: none; } .clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0px; } .clearfix:after { clear: both; } @font-face { font-family: "iconfont"; /* Project id 2887171 */ src: url("iconfont.woff2?t=1634965522902") format("woff2"), url("iconfont.woff?t=1634965522902") format("woff"), url("iconfont.ttf?t=1634965522902") format("truetype"); } @font-face { font-family: 'Conv_DINPro-Light'; src: url('DINPro-Light.eot'); src: local('☺'), url('DINPro-Light.woff') format('woff'), url('DINPro-Light.ttf') format('truetype'), url('DINPro-Light.svg') format('svg'); font-weight: normal; font-style: normal; } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-guanbi:before { content: "\e653"; } .icon-weibo:before { content: "\e643"; } .icon-weixin1:before { content: "\e62e"; } .icon-shipin:before { content: "\e60f"; } .icon-zanting:before { content: "\e61e"; } .icon-yonghu:before { content: "\e65e"; } .icon-dianhua:before { content: "\e6b4"; } .icon-douyin1:before { content: "\e8db"; } .icon-dianhua1:before { content: "\e605"; } .icon-dizhi:before { content: "\e63a"; } .icon-fangdajing:before { content: "\e66b"; } .icon-dianhua2:before { content: "\e660"; } .icon-sousuo1:before { content: "\e610"; } .icon-gengduo:before { content: "\e602"; } .icon-youjiantou:before { content: "\e731"; } .icon-zuojiantou:before { content: "\e735"; } .icon-jingdong:before { content: "\e631"; } .icon-tianmao:before { content: "\e612"; } .icon-rocket:before { content: "\e7d9"; } .icon-iconfontyoujiantou:before { content: "\e600"; } .icon-iconfontyoujiantou1:before { content: "\e601"; } .icon-facebook:before { content: "\e641"; } .icon-kuaishou:before { content: "\e633"; } .icon-sousuo:before { content: "\e7f2"; } .freeTx a { color: #666; } .btn-wrap { line-height: 1; } .ly-box { position: fixed; z-index: 9999; top: 0; bottom: 0; left: 0; right: 0; background: url(../images/black5.png); overflow: hidden; } .bsBox { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .ly-anim { opacity: 0; visibility: hidden; -webkit-transition: 600ms; -moz-transition: 600ms; transition: 600ms; } .ly-anim .ly-cont { -webkit-transform: translateY(10%); -moz-transform: translateY(10%); -ms-transform: translateY(10%); transform: translateY(10%); opacity: 0; visibility: hidden; -webkit-transition: 600ms; -moz-transition: 600ms; transition: 600ms; } .ly-box.show.ly-anim { opacity: 1; visibility: visible; } .ly-box.show.ly-anim .ly-cont { -webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none; opacity: 1; visibility: visible; } .ly-cont { background: #fff; position: absolute; top: 50%; left: 50%; } @media screen and (max-width: 1024px) { .ly-cont { position: relative; width: 100%; height: 100%; overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } } .header { position: fixed; z-index: 1010; top: 0; left: 0; right: 0; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } .menuBox { position: fixed; z-index: 1009; top: -100%; right: 0; width: 100%; height: 100%; background: rgba(97, 205, 107, 0.8); display: none; } .omenuWrap { height: 100%; overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .menuBlack { position: fixed; z-index: 1008; top: 0; bottom: 0; right: 0; left: 0; background: url(../images/black5.png); display: none; } /* pw */ .pw { width: 1200px; margin: 0 auto; } @media screen and (max-width: 1366px) { .pw { width: 1000px; } } @media screen and (max-width: 1024px) { .pw { width: 90%; } } /* fix */ .tar { text-align: right; } .tb { display: table; table-layout: fixed; width: 100%; height: 100%; } .tbc { display: table-cell; vertical-align: middle; } .mcv { text-align: center; line-height: 50px; display: none; } .mcv .sj-b { display: inline-block; vertical-align: middle; margin-left: 8px; border-top-width: 6px; -webkit-transition: 400ms; -moz-transition: 400ms; transition: 400ms; } .pnav.show .sj-b { -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } @media screen and (max-width: 861px) { .mcv { display: block; } } .splwo span { display: block; } .splwo i { display: inline-block; } .bsz { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .cover { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: url(../images/black5.png); } .bg { -moz-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: center center; } .open { overflow: hidden; } .na { cursor: default; } .pai { overflow: hidden; position: relative; } .pai>img { display: block; position: absolute; width: 100%; height: 100%; -webkit-transition: 600ms; -moz-transition: 600ms; transition: 600ms; object-fit: cover; } .picbox, .pic, .pic2 { display: block; position: relative; overflow: hidden; } .pic>img { display: block; width: 100%; -webkit-transition: 600ms; -moz-transition: 600ms; transition: 600ms; } .pic2>img { display: block; width: 100%; } /* .aico{ display: inline-block; background: url(../images/aicos.png); } */ /* .bico{ display: inline-block; background: url(../images/bicos.png); } */ .logo { display: block; } .now { white-space: nowrap; } .nowti { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; line-height: 1.4; } .freeTx { overflow: hidden; position: relative; } .freeTx img { max-width: 100%; vertical-align: bottom; height: auto !important; } .sbar { overflow: hidden; overflow-y: auto; } .sbar::-webkit-scrollbar { width: 6px; background: #ccc; } .sbar::-webkit-scrollbar-thumb { background: #0891a3; } .tx { overflow: hidden; line-height: 24px !important; } .ti, .name, .ch { line-height: 1.4; } .en { line-height: 1; } .ttu { text-transform: uppercase; } .fwb { font-weight: bold; } .rel { position: relative; } .tac { text-align: center; } .fsi { font-style: italic; } .bra { -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .ico, .aw { background-repeat: no-repeat; background-position: center top; } .fixbg { background-repeat: no-repeat; -moz-background-size: cover; background-size: cover; background-position: center center; background-attachment: fixed; } .fixbg>img { display: block; width: 100%; opacity: 0; visibility: hidden; } @media screen and (max-width: 1024px) { .fixbg { background-attachment: scroll; } } .psfixbg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center center; -moz-background-size: cover; background-size: cover; z-index: -1; } .fib, .pager { text-align: center; letter-spacing: -6px; } .ib, .pager a { display: inline-block; vertical-align: middle; letter-spacing: 0; } .ib { vertical-align: top; } /* triangle */ .sj { width: 0; height: 0; } .sj-t { border-right-style: solid; border-left-style: solid; border-bottom-style: solid; border-right-color: transparent; border-left-color: transparent; border-left-width: 4px; border-right-width: 4px; border-bottom-width: 8px; } .sj-b { border-right-style: solid; border-left-style: solid; border-top-style: solid; border-right-color: transparent; border-left-color: transparent; border-left-width: 4px; border-right-width: 4px; border-top-width: 8px; } .sj-r { border-bottom-style: solid; border-top-style: solid; border-left-style: solid; border-top-color: transparent; border-bottom-color: transparent; border-top-width: 4px; border-bottom-width: 4px; border-left-width: 8px; } .sj-l { border-bottom-style: solid; border-top-style: solid; border-right-style: solid; border-top-color: transparent; border-bottom-color: transparent; border-top-width: 4px; border-bottom-width: 4px; border-right-width: 8px; } /* pbanner */ .banner-box, .pbanner { position: relative; overflow: hidden; } .i_g { display: block; position: absolute; top: 0; left: -10%; width: 110% !important; } .active .i_g { left: -5%; -webkit-transition: imgMove 6s 0.2s linear; -moz-transition: imgMove 6s 0.2s linear; transition: imgMove 6s 0.2s linear; } @-webkit-keyframes imgMove { 0% { left: -10%; } 100% { left: -5%; } } @-moz-keyframes imgMove { 0% { left: -10%; } 100% { left: -5%; } } @keyframes imgMove { 0% { left: -10%; } 100% { left: -5%; } } .u-slick { position: relative; overflow: hidden; } .u-slick .item { position: relative; overflow: hidden; } /* one line */ .ol { display: block; z-index: 9; position: absolute; -webkit-transition: 400ms; -moz-transition: 400ms; transition: 400ms; } .ol-l { left: auto; right: 0; bottom: 0; width: 0; height: 100%; background: #000; } .ol-v { left: 0; top: auto; bottom: 0; height: 0; width: 100%; background: #000; } @media screen and (min-width: 1025px) { .ol-h:hover .ol-l { width: 100%; left: 0; right: auto; } .ol-h:hover .ol-v { height: 100%; top: 0; bottom: auto; } } /* four line */ .fl { display: block; z-index: 9; position: absolute; background: #000; -webkit-transition: 400ms; -moz-transition: 400ms; transition: 400ms; } .fl-t, .fl-b { width: 0; height: 2px; } .fl-l, .fl-r { height: 0; width: 2px; } .fl-t { top: 0; left: 0; } .fl-r { top: 0; right: 0; } .fl-b { right: 0; bottom: 0; } .fl-l { left: 0; bottom: 0; } @media screen and (min-width: 1025px) { .fl-h:hover .fl-t, .fl-h:hover .fl-b { width: 100%; } .fl-h:hover .fl-l, .fl-h:hover .fl-r { height: 100%; } } /* diagonal line */ .dl { display: block; z-index: 9; position: absolute; background: #000; -webkit-transition: 400ms; -moz-transition: 400ms; transition: 400ms; } .dl-t, .dl-b { width: 0; height: 2px; } .dl-l, .dl-r { height: 0; width: 2px; } .dl-l, .dl-t { left: 0; top: 0; } .dl-b, .dl-r { right: 0; bottom: 0; } @media screen and (min-width: 1025px) { .dl-h:hover .dl-t, .dl-h:hover .dl-b { width: 100%; } .dl-h:hover .dl-l, .dl-h:hover .dl-r { height: 100%; } } /* share */ .bdsharebuttonbox a { padding: 0 !important; margin: 0 !important; } /*video style*/ .jwlogo, .jwclick { display: none !important; } /*video style end*/ /* winxin */ .popUpblack { display: none; position: fixed; z-index: 1020; top: 0; bottom: 0; left: 0; right: 0; background: url(../images/black5.png); } .popUp { position: absolute; left: 50%; top: 50%; margin: -108px 0 0 -95px; width: 190px; height: 216px; border: 5px solid #254B96; background: #777; opacity: 0; visibility: hidden; -webkit-transform: translateY(20%); -moz-transform: translateY(20%); -ms-transform: translateY(20%); transform: translateY(20%); -webkit-transition: 600ms; -moz-transition: 600ms; transition: 600ms; } .popUpblack.show .popUp { -webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none; opacity: 1; visibility: visible; } .popUp .t { height: 26px; padding: 0 5px; line-height: 26px; color: #777; background: #254B96; overflow: hidden; } .popUp .t .close { float: right; font-size: 12px; cursor: pointer; } .popUp .img { width: 180px; height: 180px; padding: 20px; text-align: center; line-height: 140px; } .popUp .img img { max-width: 100%; vertical-align: middle; max-height: 100%; } /* winxin end */ /* menuBtn */ .menu-handler { position: fixed; z-index: 1012; right: 0; top: 0; width: 60px; height: 60px; overflow: hidden; cursor: pointer; -webkit-transition: 300ms; -moz-transition: 300ms; transition: 300ms; display: none; } .menu-handler .burger { display: block; position: absolute; top: 21px; left: 50%; margin-left: -16px; width: 32px; height: 4px; background: #000; -webkit-transition: 800ms; -moz-transition: 800ms; transition: 800ms; } .menu-handler .burger-2 { top: 28px; } .menu-handler .burger-3 { top: 35px; } .menu-handler.active .burger-1 { top: 28px; -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); transform: rotate(225deg); } .menu-handler.active .burger-2 { opacity: 0; visibility: hidden; left: -100%; } .menu-handler.active .burger-3 { top: 28px; -webkit-transform: rotate(-225deg); -moz-transform: rotate(-225deg); -ms-transform: rotate(-225deg); transform: rotate(-225deg); } /* menuBtn end */ /* menuBtn: */ .menuBtn { position: absolute; z-index: 1012; top: 0; right: 0; width: 60px; height: 60px; display: none; } .menuBtn .mb { position: relative; height: 100%; -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: -webkit-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -moz-transition: transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99), -moz-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99), -moz-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); } .menuBtn .ml { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: -webkit-transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99); -moz-transition: transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99), -moz-transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99), -moz-transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99); } .menuBtn .ml:before { content: ''; position: absolute; top: 29px; left: 50%; margin-left: -9px; width: 18px; height: 2px; background: #254B96; } .menuBtn .ml-1:before { -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); -webkit-transition: -webkit-transform 0.2s 0.2s; transition: -webkit-transform 0.2s 0.2s; -moz-transition: transform 0.2s 0.2s, -moz-transform 0.2s 0.2s; transition: transform 0.2s 0.2s; transition: transform 0.2s 0.2s, -webkit-transform 0.2s 0.2s, -moz-transform 0.2s 0.2s; transition: transform 0.2s 0.2s, -webkit-transform 0.2s 0.2s; } .menuBtn .ml-2:before { -webkit-transform: translateY(3px); -moz-transform: translateY(3px); -ms-transform: translateY(3px); transform: translateY(3px); -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; -moz-transition: transform 0.2s, -moz-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s, -moz-transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; } .menuBtn.active .mb { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .menuBtn.active .ml { -webkit-transition: -webkit-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: -webkit-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99); -moz-transition: transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99), -moz-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99), -moz-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99); } .menuBtn.active .ml-1 { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .menuBtn.active .ml-2 { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .menuBtn.active .ml:before { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /* menuBtn end */ /* slick */ .slick-slider { position: relative; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; width: 100%; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .slick-arrow { position: absolute; z-index: 101; top: 50%; margin-top: -20px; width: 40px; height: 40px; background: #000; } .slick-prev { left: 0; } .slick-next { right: 0; } .slick-dots { position: absolute; z-index: 100; left: 0; right: 0; bottom: 30px; text-align: center; letter-spacing: -6px; line-height: 0; } .slick-dots li { display: inline-block; vertical-align: middle; width: 10px; height: 10px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: rgba(255, 255, 255, 0.5); -webkit-transition: 300ms; -moz-transition: 300ms; transition: 300ms; } .slick-dots li+li { margin-left: 15px; } .slick-dots li a { display: block; width: 100%; height: 100%; text-indent: -9999px; } .slick-dots li:hover, .slick-dots .slick-active { background: white; } /* slick end */ /* banner animation */ .cg-w .item.slick-current { z-index: 3 !important; } .cg-w .item.prevSlick { z-index: 4 !important; } .cg-w .item { opacity: 1 !important; z-index: 2 !important; } .cg-w .item.prevSlick .pic2 { -moz-animation: increaseHeight 1.5s forwards; animation: increaseHeight 1.5s forwards; -webkit-animation: increaseHeight 1.5s forwards; } .cg-s.active .pic img { -webkit-transition: none; -moz-transition: none; transition: none; -webkit-animation: scaleUpDown 5s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94); -moz-animation: scaleUpDown 5s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94); animation: scaleUpDown 5s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94); } .cg-s .slick-current .pai img, .cg-s .slick-current .pic2 img { -webkit-transition: none; -moz-transition: none; transition: none; -webkit-animation: scaleUpDown 5s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94); -moz-animation: scaleUpDown 5s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94); animation: scaleUpDown 5s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94); } .igm { position: relative; top: -5%; left: -5%; width: 110% !important; } .cg-m .active .igm { -webkit-animation: imgMove 6s linear; -moz-animation: imgMove 6s linear; animation: imgMove 6s linear; } /* banner animation end */ /* animation */ @-webkit-keyframes phoneRotate { from, to { -webkit-transform: none; transform: none; } 20% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 40% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 60% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 80% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } } @-moz-keyframes phoneRotate { from, to { -webkit-transform: none; -moz-transform: none; transform: none; } 20% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); transform: rotate(-10deg); } 40% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); transform: rotate(10deg); } 60% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); transform: rotate(-10deg); } 80% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); transform: rotate(10deg); } } @keyframes phoneRotate { from, to { -webkit-transform: none; -moz-transform: none; transform: none; } 20% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); transform: rotate(-10deg); } 40% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); transform: rotate(10deg); } 60% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); transform: rotate(-10deg); } 80% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); transform: rotate(10deg); } } /* 电话颤抖 animation: phoneRotate .5s 3; */ @-webkit-keyframes phoneJump { from, to { -webkit-transform: none; transform: none; } 50% { -webkit-transform: translate(0, -7px); transform: translate(0, -7px); } } @-moz-keyframes phoneJump { from, to { -webkit-transform: none; -moz-transform: none; transform: none; } 50% { -webkit-transform: translate(0, -7px); -moz-transform: translate(0, -7px); transform: translate(0, -7px); } } @keyframes phoneJump { from, to { -webkit-transform: none; -moz-transform: none; transform: none; } 50% { -webkit-transform: translate(0, -7px); -moz-transform: translate(0, -7px); transform: translate(0, -7px); } } /* 电话数字 animation: phoneJump .5s 1; */ @-webkit-keyframes _cyLogoShow { 0% { background: -webkit-linear-gradient(330deg, transparent -15%, rgba(255, 255, 255, 0.5), transparent 15%); background: linear-gradient(120deg, transparent -15%, rgba(255, 255, 255, 0.5), transparent 15%); } 10% { background: -webkit-linear-gradient(330deg, transparent -5%, rgba(255, 255, 255, 0.5), transparent 25%); background: linear-gradient(120deg, transparent -5%, rgba(255, 255, 255, 0.5), transparent 25%); } 20% { background: -webkit-linear-gradient(330deg, transparent 5%, rgba(255, 255, 255, 0.5), transparent 35%); background: linear-gradient(120deg, transparent 5%, rgba(255, 255, 255, 0.5), transparent 35%); } 30% { background: -webkit-linear-gradient(330deg, transparent 15%, rgba(255, 255, 255, 0.5), transparent 45%); background: linear-gradient(120deg, transparent 15%, rgba(255, 255, 255, 0.5), transparent 45%); } 40% { background: -webkit-linear-gradient(330deg, transparent 25%, rgba(255, 255, 255, 0.5), transparent 55%); background: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, 0.5), transparent 55%); } 50% { background: -webkit-linear-gradient(330deg, transparent 35%, rgba(255, 255, 255, 0.5), transparent 65%); background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.5), transparent 65%); } 60% { background: -webkit-linear-gradient(330deg, transparent 45%, rgba(255, 255, 255, 0.5), transparent 75%); background: linear-gradient(120deg, transparent 45%, rgba(255, 255, 255, 0.5), transparent 75%); } 70% { background: -webkit-linear-gradient(330deg, transparent 55%, rgba(255, 255, 255, 0.5), transparent 85%); background: linear-gradient(120deg, transparent 55%, rgba(255, 255, 255, 0.5), transparent 85%); } 80% { background: -webkit-linear-gradient(330deg, transparent 65%, rgba(255, 255, 255, 0.5), transparent 95%); background: linear-gradient(120deg, transparent 65%, rgba(255, 255, 255, 0.5), transparent 95%); } 90% { background: -webkit-linear-gradient(330deg, transparent 75%, rgba(255, 255, 255, 0.5), transparent 105%); background: linear-gradient(120deg, transparent 75%, rgba(255, 255, 255, 0.5), transparent 105%); } 100% { background: -webkit-linear-gradient(330deg, transparent 85%, rgba(255, 255, 255, 0.5), transparent 115%); background: linear-gradient(120deg, transparent 85%, rgba(255, 255, 255, 0.5), transparent 115%); } } @-moz-keyframes _cyLogoShow { 0% { background: -moz-linear-gradient(330deg, transparent -15%, rgba(255, 255, 255, 0.5), transparent 15%); background: linear-gradient(120deg, transparent -15%, rgba(255, 255, 255, 0.5), transparent 15%); } 10% { background: -moz-linear-gradient(330deg, transparent -5%, rgba(255, 255, 255, 0.5), transparent 25%); background: linear-gradient(120deg, transparent -5%, rgba(255, 255, 255, 0.5), transparent 25%); } 20% { background: -moz-linear-gradient(330deg, transparent 5%, rgba(255, 255, 255, 0.5), transparent 35%); background: linear-gradient(120deg, transparent 5%, rgba(255, 255, 255, 0.5), transparent 35%); } 30% { background: -moz-linear-gradient(330deg, transparent 15%, rgba(255, 255, 255, 0.5), transparent 45%); background: linear-gradient(120deg, transparent 15%, rgba(255, 255, 255, 0.5), transparent 45%); } 40% { background: -moz-linear-gradient(330deg, transparent 25%, rgba(255, 255, 255, 0.5), transparent 55%); background: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, 0.5), transparent 55%); } 50% { background: -moz-linear-gradient(330deg, transparent 35%, rgba(255, 255, 255, 0.5), transparent 65%); background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.5), transparent 65%); } 60% { background: -moz-linear-gradient(330deg, transparent 45%, rgba(255, 255, 255, 0.5), transparent 75%); background: linear-gradient(120deg, transparent 45%, rgba(255, 255, 255, 0.5), transparent 75%); } 70% { background: -moz-linear-gradient(330deg, transparent 55%, rgba(255, 255, 255, 0.5), transparent 85%); background: linear-gradient(120deg, transparent 55%, rgba(255, 255, 255, 0.5), transparent 85%); } 80% { background: -moz-linear-gradient(330deg, transparent 65%, rgba(255, 255, 255, 0.5), transparent 95%); background: linear-gradient(120deg, transparent 65%, rgba(255, 255, 255, 0.5), transparent 95%); } 90% { background: -moz-linear-gradient(330deg, transparent 75%, rgba(255, 255, 255, 0.5), transparent 105%); background: linear-gradient(120deg, transparent 75%, rgba(255, 255, 255, 0.5), transparent 105%); } 100% { background: -moz-linear-gradient(330deg, transparent 85%, rgba(255, 255, 255, 0.5), transparent 115%); background: linear-gradient(120deg, transparent 85%, rgba(255, 255, 255, 0.5), transparent 115%); } } @keyframes _cyLogoShow { 0% { background: -webkit-linear-gradient(330deg, transparent -15%, rgba(255, 255, 255, 0.5), transparent 15%); background: -moz-linear-gradient(330deg, transparent -15%, rgba(255, 255, 255, 0.5), transparent 15%); background: linear-gradient(120deg, transparent -15%, rgba(255, 255, 255, 0.5), transparent 15%); } 10% { background: -webkit-linear-gradient(330deg, transparent -5%, rgba(255, 255, 255, 0.5), transparent 25%); background: -moz-linear-gradient(330deg, transparent -5%, rgba(255, 255, 255, 0.5), transparent 25%); background: linear-gradient(120deg, transparent -5%, rgba(255, 255, 255, 0.5), transparent 25%); } 20% { background: -webkit-linear-gradient(330deg, transparent 5%, rgba(255, 255, 255, 0.5), transparent 35%); background: -moz-linear-gradient(330deg, transparent 5%, rgba(255, 255, 255, 0.5), transparent 35%); background: linear-gradient(120deg, transparent 5%, rgba(255, 255, 255, 0.5), transparent 35%); } 30% { background: -webkit-linear-gradient(330deg, transparent 15%, rgba(255, 255, 255, 0.5), transparent 45%); background: -moz-linear-gradient(330deg, transparent 15%, rgba(255, 255, 255, 0.5), transparent 45%); background: linear-gradient(120deg, transparent 15%, rgba(255, 255, 255, 0.5), transparent 45%); } 40% { background: -webkit-linear-gradient(330deg, transparent 25%, rgba(255, 255, 255, 0.5), transparent 55%); background: -moz-linear-gradient(330deg, transparent 25%, rgba(255, 255, 255, 0.5), transparent 55%); background: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, 0.5), transparent 55%); } 50% { background: -webkit-linear-gradient(330deg, transparent 35%, rgba(255, 255, 255, 0.5), transparent 65%); background: -moz-linear-gradient(330deg, transparent 35%, rgba(255, 255, 255, 0.5), transparent 65%); background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.5), transparent 65%); } 60% { background: -webkit-linear-gradient(330deg, transparent 45%, rgba(255, 255, 255, 0.5), transparent 75%); background: -moz-linear-gradient(330deg, transparent 45%, rgba(255, 255, 255, 0.5), transparent 75%); background: linear-gradient(120deg, transparent 45%, rgba(255, 255, 255, 0.5), transparent 75%); } 70% { background: -webkit-linear-gradient(330deg, transparent 55%, rgba(255, 255, 255, 0.5), transparent 85%); background: -moz-linear-gradient(330deg, transparent 55%, rgba(255, 255, 255, 0.5), transparent 85%); background: linear-gradient(120deg, transparent 55%, rgba(255, 255, 255, 0.5), transparent 85%); } 80% { background: -webkit-linear-gradient(330deg, transparent 65%, rgba(255, 255, 255, 0.5), transparent 95%); background: -moz-linear-gradient(330deg, transparent 65%, rgba(255, 255, 255, 0.5), transparent 95%); background: linear-gradient(120deg, transparent 65%, rgba(255, 255, 255, 0.5), transparent 95%); } 90% { background: -webkit-linear-gradient(330deg, transparent 75%, rgba(255, 255, 255, 0.5), transparent 105%); background: -moz-linear-gradient(330deg, transparent 75%, rgba(255, 255, 255, 0.5), transparent 105%); background: linear-gradient(120deg, transparent 75%, rgba(255, 255, 255, 0.5), transparent 105%); } 100% { background: -webkit-linear-gradient(330deg, transparent 85%, rgba(255, 255, 255, 0.5), transparent 115%); background: -moz-linear-gradient(330deg, transparent 85%, rgba(255, 255, 255, 0.5), transparent 115%); background: linear-gradient(120deg, transparent 85%, rgba(255, 255, 255, 0.5), transparent 115%); } } /* logo 闪光 */ /* .header .logo:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .header .logo:hover:before { animation: _cyLogoShow .8s 1; } */ @-webkit-keyframes logoShow { from, to { -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); } } @-moz-keyframes logoShow { from, to { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); transform: scale(1, 1); } 25% { -webkit-transform: scale(0.9, 1.1); -moz-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); } 50% { -webkit-transform: scale(1.1, 0.9); -moz-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); } 75% { -webkit-transform: scale(0.95, 1.05); -moz-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); } } @keyframes logoShow { from, to { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); transform: scale(1, 1); } 25% { -webkit-transform: scale(0.9, 1.1); -moz-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); } 50% { -webkit-transform: scale(1.1, 0.9); -moz-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); } 75% { -webkit-transform: scale(0.95, 1.05); -moz-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); } } /* 抖一抖的效果 animation: logoShow .5s 1; */ @-webkit-keyframes scaleUpDown { from { -webkit-transform: scale(1.08); transform: scale(1.08); } to { -webkit-transform: scale(1); transform: scale(1); } } @-moz-keyframes scaleUpDown { from { -webkit-transform: scale(1.08); -moz-transform: scale(1.08); transform: scale(1.08); } to { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } } @keyframes scaleUpDown { from { -webkit-transform: scale(1.08); -moz-transform: scale(1.08); transform: scale(1.08); } to { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } } /* img缩小效果(banner) */ @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 60px, 0); transform: translate3d(0, 60px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @-moz-keyframes fadeInUp { from { opacity: 0; -moz-transform: translate3d(0, 60px, 0); transform: translate3d(0, 60px, 0); } to { opacity: 1; -moz-transform: none; transform: none; } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 60px, 0); -moz-transform: translate3d(0, 60px, 0); transform: translate3d(0, 60px, 0); } to { opacity: 1; -webkit-transform: none; -moz-transform: none; transform: none; } } /* 下出现效果 */ @-webkit-keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } @-moz-keyframes lightSpeedIn { from { -moz-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -moz-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -moz-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -moz-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); -moz-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); -moz-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); -moz-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; -moz-transform: none; transform: none; opacity: 1; } } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -60px, 0); transform: translate3d(0, -60px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @-moz-keyframes fadeInDown { from { opacity: 0; -moz-transform: translate3d(0, -60px, 0); transform: translate3d(0, -60px, 0); } to { opacity: 1; -moz-transform: none; transform: none; } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -60px, 0); -moz-transform: translate3d(0, -60px, 0); transform: translate3d(0, -60px, 0); } to { opacity: 1; -webkit-transform: none; -moz-transform: none; transform: none; } } /* 上出现效果 */ @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(60px, 0, 0); transform: translate3d(60px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @-moz-keyframes fadeInRight { from { opacity: 0; -moz-transform: translate3d(60px, 0, 0); transform: translate3d(60px, 0, 0); } to { opacity: 1; -moz-transform: none; transform: none; } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(60px, 0, 0); -moz-transform: translate3d(60px, 0, 0); transform: translate3d(60px, 0, 0); } to { opacity: 1; -webkit-transform: none; -moz-transform: none; transform: none; } } /* 右出现效果 */ @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-60px, 0, 0); transform: translate3d(-60px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @-moz-keyframes fadeInLeft { from { opacity: 0; -moz-transform: translate3d(-60px, 0, 0); transform: translate3d(-60px, 0, 0); } to { opacity: 1; -moz-transform: none; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-60px, 0, 0); -moz-transform: translate3d(-60px, 0, 0); transform: translate3d(-60px, 0, 0); } to { opacity: 1; -webkit-transform: none; -moz-transform: none; transform: none; } } /* 左出现效果 */ @-webkit-keyframes reveal-v { 0% { -webkit-transform: scaleY(0); transform: scaleY(0); } 50% { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: 0% 0% 0px; transform-origin: 0% 0% 0px; } 51% { -webkit-transform-origin: 50% 100% 0px; transform-origin: 50% 100% 0px; } 100% { -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100% 0px; transform-origin: 50% 100% 0px; } } @-moz-keyframes reveal-v { 0% { -moz-transform: scaleY(0); transform: scaleY(0); } 50% { -moz-transform: scaleY(1); transform: scaleY(1); -moz-transform-origin: 0% 0% 0px; transform-origin: 0% 0% 0px; } 51% { -moz-transform-origin: 50% 100% 0px; transform-origin: 50% 100% 0px; } 100% { -moz-transform: scaleY(0); transform: scaleY(0); -moz-transform-origin: 50% 100% 0px; transform-origin: 50% 100% 0px; } } @keyframes reveal-v { 0% { -webkit-transform: scaleY(0); -moz-transform: scaleY(0); transform: scaleY(0); } 50% { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: 0% 0% 0px; -moz-transform-origin: 0% 0% 0px; transform-origin: 0% 0% 0px; } 51% { -webkit-transform-origin: 50% 100% 0px; -moz-transform-origin: 50% 100% 0px; transform-origin: 50% 100% 0px; } 100% { -webkit-transform: scaleY(0); -moz-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100% 0px; -moz-transform-origin: 50% 100% 0px; transform-origin: 50% 100% 0px; } } /* 垂直出现遮盖层 */ @-webkit-keyframes reveal-l { 0% { -webkit-transform: scaleX(0); transform: scaleX(0); } 50% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: 0% 0% 0px; transform-origin: 0% 0% 0px; } 51% { -webkit-transform-origin: 100% 50% 0px; transform-origin: 100% 50% 0px; } 100% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 100% 50% 0px; transform-origin: 100% 50% 0px; } } @-moz-keyframes reveal-l { 0% { -moz-transform: scaleX(0); transform: scaleX(0); } 50% { -moz-transform: scaleX(1); transform: scaleX(1); -moz-transform-origin: 0% 0% 0px; transform-origin: 0% 0% 0px; } 51% { -moz-transform-origin: 100% 50% 0px; transform-origin: 100% 50% 0px; } 100% { -moz-transform: scaleX(0); transform: scaleX(0); -moz-transform-origin: 100% 50% 0px; transform-origin: 100% 50% 0px; } } @keyframes reveal-l { 0% { -webkit-transform: scaleX(0); -moz-transform: scaleX(0); transform: scaleX(0); } 50% { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: 0% 0% 0px; -moz-transform-origin: 0% 0% 0px; transform-origin: 0% 0% 0px; } 51% { -webkit-transform-origin: 100% 50% 0px; -moz-transform-origin: 100% 50% 0px; transform-origin: 100% 50% 0px; } 100% { -webkit-transform: scaleX(0); -moz-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 100% 50% 0px; -moz-transform-origin: 100% 50% 0px; transform-origin: 100% 50% 0px; } } /* 水平出现遮盖层 */ @-webkit-keyframes hide-lr { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(30px); transform: translateX(30px); } } @-moz-keyframes hide-lr { 0% { opacity: 1; -moz-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(30px); transform: translateX(30px); } } @keyframes hide-lr { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(30px); -moz-transform: translateX(30px); transform: translateX(30px); } } /* 向右消失 */ @-webkit-keyframes hide-dt { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); } } @-moz-keyframes hide-dt { 0% { opacity: 1; -moz-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(30px); transform: translateY(30px); } } @keyframes hide-dt { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); transform: translateY(30px); } } /* 向下消失 */ @-webkit-keyframes hide-dt-f { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } } @-moz-keyframes hide-dt-f { 0% { opacity: 1; -moz-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(-30px); transform: translateY(-30px); } } @keyframes hide-dt-f { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); transform: translateY(-30px); } } /* 向上消失 */ @-webkit-keyframes increaseHeight { from { width: 100%; } to { width: 0; } } @-moz-keyframes increaseHeight { from { width: 100%; } to { width: 0; } } @keyframes increaseHeight { from { width: 100%; } to { width: 0; } } /* banner切换效果 animation: increaseHeight 1.5s forwards; 需要JS设置pic2图片高度 */ @-webkit-keyframes tbfade { 0% { -webkit-transform: translateY(-10%); transform: translateY(-10%); opacity: 1; } 100% { -webkit-transform: translateY(10%); transform: translateY(10%); opacity: 0; } } @-moz-keyframes tbfade { 0% { -moz-transform: translateY(-10%); transform: translateY(-10%); opacity: 1; } 100% { -moz-transform: translateY(10%); transform: translateY(10%); opacity: 0; } } @keyframes tbfade { 0% { -webkit-transform: translateY(-10%); -moz-transform: translateY(-10%); transform: translateY(-10%); opacity: 1; } 100% { -webkit-transform: translateY(10%); -moz-transform: translateY(10%); transform: translateY(10%); opacity: 0; } } /* animation: tbfade 1.8s 0.2s infinite linear; */ /* animation end */ .stransY { -webkit-transform: translateY(60px); -moz-transform: translateY(60px); -ms-transform: translateY(60px); transform: translateY(60px); opacity: 0; visibility: hidden; } .stransYF { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; visibility: hidden; } .stransX { -webkit-transform: translateX(60px); -moz-transform: translateX(60px); -ms-transform: translateX(60px); transform: translateX(60px); opacity: 0; visibility: hidden; } .stransXF { -webkit-transform: translateX(-60px); -moz-transform: translateX(-60px); -ms-transform: translateX(-60px); transform: translateX(-60px); opacity: 0; visibility: hidden; } .active .stransY, .active .stransYF, .active .stransX, .active .stransXF { -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); transform: translate(0); opacity: 1; visibility: visible; } .trans { -webkit-transition: opacity 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.2s, visibility 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.2s, -webkit-transform 0.8s; transition: opacity 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.2s, visibility 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.2s, -webkit-transform 0.8s; -moz-transition: opacity 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.2s, visibility 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.2s, transform 0.8s, -moz-transform 0.8s; transition: opacity 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.2s, visibility 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.2s, transform 0.8s; transition: opacity 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.2s, visibility 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.2s, transform 0.8s, -webkit-transform 0.8s, -moz-transform 0.8s; } .dly-1 { -webkit-transition-delay: 100ms; -moz-transition-delay: 100ms; transition-delay: 100ms; } .dly-2 { -webkit-transition-delay: 200ms; -moz-transition-delay: 200ms; transition-delay: 200ms; } .dly-3 { -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; transition-delay: 300ms; } .dly-4 { -webkit-transition-delay: 400ms; -moz-transition-delay: 400ms; transition-delay: 400ms; } .dly-5 { -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; transition-delay: 500ms; } .dly-6 { -webkit-transition-delay: 600ms; -moz-transition-delay: 600ms; transition-delay: 600ms; } .dly-7 { -webkit-transition-delay: 700ms; -moz-transition-delay: 700ms; transition-delay: 700ms; } .dly-8 { -webkit-transition-delay: 800ms; -moz-transition-delay: 800ms; transition-delay: 800ms; } .dly-9 { -webkit-transition-delay: 900ms; -moz-transition-delay: 900ms; transition-delay: 900ms; } .dly-10 { -webkit-transition-delay: 1000ms; -moz-transition-delay: 1000ms; transition-delay: 1000ms; } @media screen and (min-width: 1025px) { .gray img { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .gray:hover img { -webkit-filter: grayscale(0); filter: grayscale(0); } .scapic:hover .pai img, .scapic:hover .pic img { -webkit-transform: scale(1.02); -moz-transform: scale(1.02); -ms-transform: scale(1.02); transform: scale(1.02); } .transY { -webkit-transform: translateY(60px); -moz-transform: translateY(60px); -ms-transform: translateY(60px); transform: translateY(60px); opacity: 0; visibility: hidden; } .transYF { -webkit-transform: translateY(-60px); -moz-transform: translateY(-60px); -ms-transform: translateY(-60px); transform: translateY(-60px); opacity: 0; visibility: hidden; } .transX { -webkit-transform: translateX(60px); -moz-transform: translateX(60px); -ms-transform: translateX(60px); transform: translateX(60px); opacity: 0; visibility: hidden; } .transXF { -webkit-transform: translateX(-60px); -moz-transform: translateX(-60px); -ms-transform: translateX(-60px); transform: translateX(-60px); opacity: 0; visibility: hidden; } .active2 .transY, .active .transY, .active .transYF, .active .transX, .active .transXF { -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); transform: translate(0); opacity: 1; visibility: visible; } .am-lsi, .am-fiu, .am-fid, .am-fir, .am-fil { opacity: 0; } .active .am-lsi { -webkit-animation: lightSpeedIn 800ms both; -moz-animation: lightSpeedIn 800ms both; animation: lightSpeedIn 800ms both; } .active .am-fiu { -webkit-animation: fadeInUp 800ms both; -moz-animation: fadeInUp 800ms both; animation: fadeInUp 800ms both; } .active .am-fid { -webkit-animation: fadeInDown 800ms both; -moz-animation: fadeInDown 800ms both; animation: fadeInDown 800ms both; } .active .am-fir { -webkit-animation: fadeInRight 800ms both; -moz-animation: fadeInRight 800ms both; animation: fadeInRight 800ms both; } .active .am-fil { -webkit-animation: fadeInLeft 800ms both; -moz-animation: fadeInLeft 800ms both; animation: fadeInLeft 800ms both; } .active .am-rvv { position: relative; /* display: inline-block; vertical-align: bottom; */ /* 文字加上 */ } .active .am-rvv:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #000; -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 0% 0% 0px; -moz-transform-origin: 0% 0% 0px; -ms-transform-origin: 0% 0% 0px; transform-origin: 0% 0% 0px; -webkit-animation: reveal-v 2s 200ms cubic-bezier(0, 0, 0.2, 1) both; -moz-animation: reveal-v 2s 200ms cubic-bezier(0, 0, 0.2, 1) both; animation: reveal-v 2s 200ms cubic-bezier(0, 0, 0.2, 1) both; } .active .am-rvl { position: relative; /* display: inline-block; vertical-align: bottom; */ /* 文字加上 */ } .active .am-rvl:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #000; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0% 0% 0px; -moz-transform-origin: 0% 0% 0px; -ms-transform-origin: 0% 0% 0px; transform-origin: 0% 0% 0px; -webkit-animation: reveal-l 2s 200ms cubic-bezier(0, 0, 0.2, 1) both; -moz-animation: reveal-l 2s 200ms cubic-bezier(0, 0, 0.2, 1) both; animation: reveal-l 2s 200ms cubic-bezier(0, 0, 0.2, 1) both; } .active .am-delay-1 { -webkit-animation-delay: 100ms; -moz-animation-delay: 100ms; animation-delay: 100ms; } .active .am-delay-2 { -webkit-animation-delay: 200ms; -moz-animation-delay: 200ms; animation-delay: 200ms; } .active .am-delay-3 { -webkit-animation-delay: 300ms; -moz-animation-delay: 300ms; animation-delay: 300ms; } .active .am-delay-4 { -webkit-animation-delay: 400ms; -moz-animation-delay: 400ms; animation-delay: 400ms; } .active .am-delay-5 { -webkit-animation-delay: 500ms; -moz-animation-delay: 500ms; animation-delay: 500ms; } .active .am-delay-6 { -webkit-animation-delay: 600ms; -moz-animation-delay: 600ms; animation-delay: 600ms; } .active .am-delay-7 { -webkit-animation-delay: 700ms; -moz-animation-delay: 700ms; animation-delay: 700ms; } .active .am-delay-8 { -webkit-animation-delay: 800ms; -moz-animation-delay: 800ms; animation-delay: 800ms; } .active .am-delay-9 { -webkit-animation-delay: 900ms; -moz-animation-delay: 900ms; animation-delay: 900ms; } .active .am-delay-10 { -webkit-animation-delay: 1000ms; -moz-animation-delay: 1000ms; animation-delay: 1000ms; } .active .am-delay-11 { -webkit-animation-delay: 1100ms; -moz-animation-delay: 1100ms; animation-delay: 1100ms; } .active .am-delay-12 { -webkit-animation-delay: 1200ms; -moz-animation-delay: 1200ms; animation-delay: 1200ms; } } /* 1153 */ /* btn效果 */ .bubbly-button:before, .bubbly-button:after { position: absolute; content: ''; display: block; width: 140%; height: 100%; left: -20%; -webkit-transition: all ease-in-out 0.5s; -moz-transition: all ease-in-out 0.5s; transition: all ease-in-out 0.5s; background-repeat: no-repeat; } .bubbly-button:before { display: none; top: -75%; background-image: -webkit-radial-gradient(circle, #0079c3 20%, transparent 20%), -webkit-radial-gradient(circle, transparent 20%, #0079c3 20%, transparent 30%), -webkit-radial-gradient(circle, #0079c3 20%, transparent 20%), -webkit-radial-gradient(circle, #0079c3 20%, transparent 20%), -webkit-radial-gradient(circle, transparent 10%, #0079c3 15%, transparent 20%), -webkit-radial-gradient(circle, #0079c3 20%, transparent 20%), -webkit-radial-gradient(circle, #0079c3 20%, transparent 20%), -webkit-radial-gradient(circle, #0079c3 20%, transparent 20%), -webkit-radial-gradient(circle, #0079c3 20%, transparent 20%); background-image: -moz-radial-gradient(circle, #0079c3 20%, transparent 20%), -moz-radial-gradient(circle, transparent 20%, #0079c3 20%, transparent 30%), -moz-radial-gradient(circle, #0079c3 20%, transparent 20%), -moz-radial-gradient(circle, #0079c3 20%, transparent 20%), -moz-radial-gradient(circle, transparent 10%, #0079c3 15%, transparent 20%), -moz-radial-gradient(circle, #0079c3 20%, transparent 20%), -moz-radial-gradient(circle, #0079c3 20%, transparent 20%), -moz-radial-gradient(circle, #0079c3 20%, transparent 20%), -moz-radial-gradient(circle, #0079c3 20%, transparent 20%); background-image: radial-gradient(circle, #0079c3 20%, transparent 20%), radial-gradient(circle, transparent 20%, #0079c3 20%, transparent 30%), radial-gradient(circle, #0079c3 20%, transparent 20%), radial-gradient(circle, #0079c3 20%, transparent 20%), radial-gradient(circle, transparent 10%, #0079c3 15%, transparent 20%), radial-gradient(circle, #0079c3 20%, transparent 20%), radial-gradient(circle, #0079c3 20%, transparent 20%), radial-gradient(circle, #0079c3 20%, transparent 20%), radial-gradient(circle, #0079c3 20%, transparent 20%); -moz-background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%; background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%; } .bubbly-button:after { display: none; bottom: -75%; background-image: -webkit-radial-gradient(circle, #0079c3 20%, transparent 20%), -webkit-radial-gradient(circle, #0079c3 20%, transparent 20%), -webkit-radial-gradient(circle, transparent 10%, #0079c3 15%, transparent 20%), -webkit-radial-gradient(circle, #0079c3 20%, transparent 20%), -webkit-radial-gradient(circle, #0079c3 20%, transparent 20%), -webkit-radial-gradient(circle, #0079c3 20%, transparent 20%), -webkit-radial-gradient(circle, #0079c3 20%, transparent 20%); background-image: -moz-radial-gradient(circle, #0079c3 20%, transparent 20%), -moz-radial-gradient(circle, #0079c3 20%, transparent 20%), -moz-radial-gradient(circle, transparent 10%, #0079c3 15%, transparent 20%), -moz-radial-gradient(circle, #0079c3 20%, transparent 20%), -moz-radial-gradient(circle, #0079c3 20%, transparent 20%), -moz-radial-gradient(circle, #0079c3 20%, transparent 20%), -moz-radial-gradient(circle, #0079c3 20%, transparent 20%); background-image: radial-gradient(circle, #0079c3 20%, transparent 20%), radial-gradient(circle, #0079c3 20%, transparent 20%), radial-gradient(circle, transparent 10%, #0079c3 15%, transparent 20%), radial-gradient(circle, #0079c3 20%, transparent 20%), radial-gradient(circle, #0079c3 20%, transparent 20%), radial-gradient(circle, #0079c3 20%, transparent 20%), radial-gradient(circle, #0079c3 20%, transparent 20%); -moz-background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%; background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%; } @-webkit-keyframes topBubbles { 0% { background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%; } 50% { background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%; } 100% { background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%; background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; } } @-moz-keyframes topBubbles { 0% { background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%; } 50% { background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%; } 100% { background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%; -moz-background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; } } @keyframes topBubbles { 0% { background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%; } 50% { background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%; } 100% { background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%; -moz-background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; } } @-webkit-keyframes bottomBubbles { 0% { background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%; } 50% { background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%; } 100% { background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%; background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; } } @-moz-keyframes bottomBubbles { 0% { background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%; } 50% { background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%; } 100% { background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%; -moz-background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; } } @keyframes bottomBubbles { 0% { background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%; } 50% { background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%; } 100% { background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%; -moz-background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; } } @media screen and (min-width: 1025px) { .bubbly-button:hover:before { display: block; -webkit-animation: topBubbles ease-in-out 0.75s forwards; -moz-animation: topBubbles ease-in-out 0.75s forwards; animation: topBubbles ease-in-out 0.75s forwards; } .bubbly-button:hover:after { display: block; -webkit-animation: bottomBubbles ease-in-out 0.75s forwards; -moz-animation: bottomBubbles ease-in-out 0.75s forwards; animation: bottomBubbles ease-in-out 0.75s forwards; } } /* link */ .friendship-link { position: relative; z-index: 99; width: 370px; } .friendship-link .s { position: relative; background: #4d4d4d; height: 54px; padding: 0 60px 0 30px; line-height: 54px; overflow: hidden; cursor: pointer; } .friendship-link .sj-t { display: block; position: absolute; right: 35px; top: 50%; margin-top: -3px; border-right-width: 6px; border-left-width: 6px; border-bottom-width: 6px; color: #fff; } .friendship-link .k { position: absolute; left: 0; right: 0; bottom: 100%; background: #4d4d4d; overflow: hidden; display: none; } .friendship-link .g { max-height: 300px; overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .friendship-link .nowti { display: block; margin: 0 30px; line-height: 30px; } .friendship-link.act .sj-t { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } /* link end */ @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @-moz-keyframes zoomIn { 0% { opacity: 0; -moz-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -moz-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .active .zoomIn i { -webkit-animation: zoomIn 0.8s both; -moz-animation: zoomIn 0.8s both; animation: zoomIn 0.8s both; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .active .fadeIn i { -webkit-animation: fadeIn 1s both; -moz-animation: fadeIn 1s both; animation: fadeIn 1s both; } /* Look at the big picture */ .pswp { display: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; -ms-touch-action: none; touch-action: none; z-index: 1500; -webkit-text-size-adjust: 100%; -webkit-backface-visibility: hidden; outline: none; } .pswp * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .pswp img { max-width: none; } .pswp--animate_opacity { opacity: 0.001; will-change: opacity; -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); -moz-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--open { display: block; } .pswp--zoom-allowed .pswp__img { cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .pswp--zoomed-in .pswp__img { cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .pswp--dragging .pswp__img { cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; } .pswp__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; will-change: opacity; } .pswp__scroll-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .pswp__container, .pswp__zoom-wrap { -ms-touch-action: none; touch-action: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .pswp__container, .pswp__img { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .pswp__zoom-wrap { position: absolute; width: 100%; -webkit-transform-origin: left top; -ms-transform-origin: left top; -moz-transform-origin: left top; transform-origin: left top; -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1); -moz-transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1), -moz-transform 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1), -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1), -moz-transform 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp__bg { will-change: opacity; -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); -moz-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--animated-in .pswp__bg, .pswp--animated-in .pswp__zoom-wrap { -webkit-transition: none; -moz-transition: none; transition: none; } .pswp__container, .pswp__zoom-wrap { -webkit-backface-visibility: hidden; } .pswp__item { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; } .pswp__img { position: absolute; width: auto; height: auto; top: 0; left: 0; } .pswp__img--placeholder { -webkit-backface-visibility: hidden; } .pswp__img--placeholder--blank { background: #222; } .pswp--ie .pswp__img { width: 100% !important; height: auto !important; left: 0; top: 0; } .pswp__error-msg { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; font-size: 14px; line-height: 16px; margin-top: -8px; color: #ccc; } .pswp__error-msg a { color: #ccc; text-decoration: underline; } .pswp__button { width: 44px; height: 44px; position: relative; background: none; cursor: pointer; overflow: visible; -webkit-appearance: none; display: block; border: 0; padding: 0; margin: 0; float: right; opacity: 0.75; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; transition: opacity 0.2s; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .pswp__button:focus, .pswp__button:hover { opacity: 1; } .pswp__button:active { outline: none; opacity: 0.9; } .pswp__button::-moz-focus-inner { padding: 0; border: 0; } .pswp__ui--over-close .pswp__button--close { opacity: 1; } .pswp__button, .pswp__button--arrow--left:before, .pswp__button--arrow--right:before { background: url(../images/default-skin.png) 0 0 no-repeat; -moz-background-size: 264px 88px; background-size: 264px 88px; width: 44px; height: 44px; } @media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min--moz-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min--moz-device-pixel-ratio: 1.1), (min-resolution: 1.1dppx) { .pswp--svg .pswp__button, .pswp--svg .pswp__button--arrow--left:before, .pswp--svg .pswp__button--arrow--right:before { background-image: url(../images/default-skin.svg); } .pswp--svg .pswp__button--arrow--left, .pswp--svg .pswp__button--arrow--right { background: none; } } .pswp__button--close { background-position: 0 -44px; } .pswp__button--share { background-position: -44px -44px; } .pswp__button--fs { display: none; } .pswp--supports-fs .pswp__button--fs { display: block; } .pswp--fs .pswp__button--fs { background-position: -44px 0; } .pswp__button--zoom { display: none; background-position: -88px 0; } .pswp--zoom-allowed .pswp__button--zoom { display: block; } .pswp--zoomed-in .pswp__button--zoom { background-position: -132px 0; } .pswp--touch .pswp__button--arrow--left, .pswp--touch .pswp__button--arrow--right { visibility: hidden; } .pswp__button--arrow--left, .pswp__button--arrow--right { background: none; top: 50%; margin-top: -50px; width: 70px; height: 100px; position: absolute; } .pswp__button--arrow--left { left: 0; } .pswp__button--arrow--right { right: 0; } .pswp__button--arrow--left:before, .pswp__button--arrow--right:before { content: ''; top: 35px; background-color: rgba(0, 0, 0, 0.3); height: 30px; width: 32px; position: absolute; } .pswp__button--arrow--left:before { left: 6px; background-position: -138px -44px; } .pswp__button--arrow--right:before { right: 6px; background-position: -94px -44px; } .pswp__counter, .pswp__share-modal { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .pswp__share-modal { display: block; background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; top: 0; left: 0; padding: 10px; position: absolute; z-index: 1600; opacity: 0; -webkit-transition: opacity 0.25s ease-out; -moz-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; -webkit-backface-visibility: hidden; will-change: opacity; } .pswp__share-modal--hidden { display: none; } .pswp__share-tooltip { z-index: 1620; position: absolute; background: #fff; top: 56px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; display: block; width: auto; right: 44px; -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); -webkit-transform: translateY(6px); -ms-transform: translateY(6px); -moz-transform: translateY(6px); transform: translateY(6px); -webkit-transition: -webkit-transform 0.25s; transition: -webkit-transform 0.25s; -moz-transition: transform 0.25s, -moz-transform 0.25s; transition: transform 0.25s; transition: transform 0.25s, -webkit-transform 0.25s, -moz-transform 0.25s; -webkit-backface-visibility: hidden; will-change: transform; } .pswp__share-tooltip a { display: block; padding: 8px 12px; color: #000; text-decoration: none; font-size: 14px; line-height: 18px; } .pswp__share-tooltip a:hover { text-decoration: none; color: #000; } .pswp__share-tooltip a:first-child { -webkit-border-radius: 2px 2px 0 0; -moz-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0; } .pswp__share-tooltip a:last-child { -webkit-border-radius: 0 0 2px 2px; -moz-border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px; } .pswp__share-modal--fade-in { opacity: 1; } .pswp__share-modal--fade-in .pswp__share-tooltip { -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } .pswp--touch .pswp__share-tooltip a { padding: 16px 12px; } a.pswp__share--facebook:before { content: ''; display: block; width: 0; height: 0; position: absolute; top: -12px; right: 15px; border: 6px solid transparent; border-bottom-color: #fff; -webkit-pointer-events: none; -moz-pointer-events: none; pointer-events: none; } a.pswp__share--facebook:hover { background: #3e5c9a; color: #fff; } a.pswp__share--facebook:hover:before { border-bottom-color: #3e5c9a; } a.pswp__share--twitter:hover { background: #55acee; color: #fff; } a.pswp__share--pinterest:hover { background: #ccc; color: #ce272d; } a.pswp__share--download:hover { background: #ddd; } .pswp__counter { position: absolute; left: 0; top: 0; height: 44px; font-size: 13px; line-height: 44px; color: #fff; opacity: 0.75; padding: 0 10px; } .pswp__caption { position: absolute; left: 0; bottom: 0; width: 100%; min-height: 44px; } .pswp__caption small { font-size: 11px; color: #bbb; } .pswp__caption__center { text-align: left; max-width: 420px; margin: 0 auto; font-size: 13px; padding: 10px; line-height: 20px; color: #ccc; } .pswp__caption--empty { display: none; } .pswp__caption--fake { visibility: hidden; } .pswp__preloader { width: 44px; height: 44px; position: absolute; top: 0; left: 50%; margin-left: -22px; opacity: 0; -webkit-transition: opacity 0.25s ease-out; -moz-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; will-change: opacity; direction: ltr; } .pswp__preloader__icn { width: 20px; height: 20px; margin: 12px; } .pswp__preloader--active { opacity: 1; } .pswp__preloader--active .pswp__preloader__icn { background: url(../images/preloader.gif) 0 0 no-repeat; } .pswp--css_animation .pswp__preloader--active { opacity: 1; } .pswp--css_animation .pswp__preloader--active .pswp__preloader__icn { -webkit-animation: clockwise 500ms linear infinite; -moz-animation: clockwise 500ms linear infinite; animation: clockwise 500ms linear infinite; } .pswp--css_animation .pswp__preloader--active .pswp__preloader__donut { -webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; -moz-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; } .pswp--css_animation .pswp__preloader__icn { background: none; opacity: 0.75; width: 14px; height: 14px; position: absolute; left: 15px; top: 15px; margin: 0; } .pswp--css_animation .pswp__preloader__cut { position: relative; width: 7px; height: 14px; overflow: hidden; } .pswp--css_animation .pswp__preloader__donut { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 14px; height: 14px; border: 2px solid #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border-left-color: transparent; border-bottom-color: transparent; position: absolute; top: 0; left: 0; background: none; margin: 0; } @media screen and (max-width: 1024px) { .pswp__preloader { position: relative; left: auto; top: auto; margin: 0; float: right; } } @-webkit-keyframes clockwise { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes donut-rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(-140deg); transform: rotate(-140deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); } } @-moz-keyframes donut-rotate { 0% { -webkit-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(-140deg); -moz-transform: rotate(-140deg); transform: rotate(-140deg); } 100% { -webkit-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0); } } @keyframes donut-rotate { 0% { -webkit-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(-140deg); -moz-transform: rotate(-140deg); transform: rotate(-140deg); } 100% { -webkit-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0); } } .pswp__ui { -webkit-font-smoothing: auto; visibility: visible; opacity: 1; z-index: 1550; } .pswp__top-bar { position: absolute; left: 0; top: 0; height: 44px; width: 100%; } .pswp__caption, .pswp__top-bar, .pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right { -webkit-backface-visibility: hidden; will-change: opacity; -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); -moz-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right { visibility: visible; } .pswp__top-bar, .pswp__caption { background-color: rgba(0, 0, 0, 0.5); } .pswp__ui--fit .pswp__top-bar, .pswp__ui--fit .pswp__caption { background-color: rgba(0, 0, 0, 0.3); } .pswp__ui--idle .pswp__top-bar { opacity: 0; } .pswp__ui--idle .pswp__button--arrow--left, .pswp__ui--idle .pswp__button--arrow--right { opacity: 0; } .pswp__ui--hidden .pswp__top-bar, .pswp__ui--hidden .pswp__caption, .pswp__ui--hidden .pswp__button--arrow--left, .pswp__ui--hidden .pswp__button--arrow--right { opacity: 0.001; } .pswp__ui--one-slide .pswp__button--arrow--left, .pswp__ui--one-slide .pswp__button--arrow--right, .pswp__ui--one-slide .pswp__counter { display: none; } .pswp__element--disabled { display: none !important; } .pswp--minimal--dark .pswp__top-bar { background: none; } /* Look at the big picture end */ .btn { display: inline-block; vertical-align: bottom; } .slick-arrow { font-family: "iconfont" !important; background: none; width: auto; line-height: 40px; text-align: center; } .slick-prev:before { content: "\e71b"; } .slick-next:before { content: "\e71a"; } .pic>img { object-fit: cover; height: 100%; } .container { width: 1200px; margin: 0 auto; } .containerfull { width: 100%; margin: 0 auto; } .header { background: white; } .header .container { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 96px; } .header .r { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 100%; } .header .logo { width: 72px; } .header .logo>img { width: 100%; vertical-align: bottom; } .header .nav { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .header .nav li+li { margin-left: 90px; } .header .nav a { display: block; color: #555; font-size: 16px; line-height: 22px; padding-bottom: 11px; position: relative; font-weight: normal; } .header .nav a::before { content: ""; position: absolute; left: auto; right: 0; bottom: 0; width: 0; height: 2px; background: #254B96; -webkit-transition: 600ms; -moz-transition: 600ms; transition: 600ms; } .header .nav a:hover { color: #254B96; } .header .nav a:hover::before { left: 0; right: auto; width: 100%; } .header .nav a.act { color: #254B96; font-weight: bold; } .header .nav a.act::before { left: 0; right: auto; width: 100%; } .header .top { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; line-height: 22px; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 11px; } .header .top .line { width: 1px; height: 16px; background: #ccc; margin: 0 16px; } .header .top .lang { color: #999; } .header .top .lang+.lang { margin-left: 12px; } .header .top a { color: #999; } .header .top a:not(.act):hover { color: #254B96; } .header .top .iconfont { font-size: 14px; } .header .top .act { color: #999; } .mtop { height: 96px; } .banner .txts { position: absolute; left: 0; right: 0; top: 0; padding-top: 3.5%; } .banner .txts .container { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .banner .txts .desc { background: rgba(97, 205, 107, 0.8); color: white; font-weight: bold; font-size: 32px; line-height: 44px; padding: 13px 20px 17px; float: right; margin-right: 5%; } .page-box { overflow: hidden; min-height: 300px; } .page-bg { position: fixed; top: 0; bottom: 0; right: 0; left: 0; background: url("../images/bg.png") no-repeat center center; -moz-background-size: cover; background-size: cover; z-index: -1; } .ix-title { font-weight: bold; font-size: 40px; line-height: 1; color: #555; } .ix-news-list { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -25px; } .ix-news-list>li { width: 33.33%; margin-bottom: 68px; } .ix-news-list>li>a { display: block; margin-left: 25px; color: #777; } .ix-news-list>li>a:hover .ti { color: #254B96; } .ix-news-list .pai { padding-bottom: 62.85714%; } .ix-news-list .txts { padding-top: 13px; } .ix-news-list .txts .date { color: #999; line-height: 1; } .ix-news-list .txts .ti { margin-top: 17px; color: #555; font-size: 18px; line-height: 24px; font-weight: bold; height: 48px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; -webkit-transition: 300ms; -moz-transition: 300ms; transition: 300ms; } .ix-news-list .txts .desc { margin-top: 11px; line-height: 20px; height: 40px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ix-more { width: 340px; height: 44px; border: 3px solid #ccc; line-height: 38px; color: black; font-size: 16px; } .ix-more .iconfont { display: inline-block; vertical-align: bottom; } .ix-more:hover { background: #254B96; color: #fff; border-color: #254B96; } .ix-news { padding: 110px 0; } .ix-news .ix-title { margin-bottom: 57px; } .footer { background: white; } .footer .tj { /* background: url("../img/footer_1.png") no-repeat center center; */ -moz-background-size: cover; background-size: cover; color: white; } .footer .tj img{ width: 100%; } .footer .tj .container { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.56); font-size: 48px; font-weight: bold; line-height: 1; position: relative; margin-top: -13%; height: 0; margin-bottom: 13%; } .footer .cont { padding: 70px 0 60px; } .footer .cont .container { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .footer .cont .l { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; } .footer .f-contact { margin-bottom: 70px; } .footer .f-cop a{ color: #555; } .footer .f-cop { color: #999; font-size: 12px; } .footer .f-cop a:hover { color: #61CD6B; } .f-share { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .f-share>a { width: 40px; height: 40px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; line-height: 40px; text-align: center; background: #C4C4C4; color: white; font-size: 19px; } .f-share>a+a { margin-left: 13px; } .f-share>a:hover { background: #61CD6B; } .f-contact { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .f-contact .item { min-width: 253px; } .f-contact .item+.item { margin-left: 9px; } .f-contact .item>a, .f-contact .item>span { display: block; color: #555; line-height: 24px; } .f-contact .item>a:hover { } #top .iconfont { -webkit-transition: 300ms; -moz-transition: 300ms; transition: 300ms; color: #eee; font-size: 34px; filter: drop-shadow(2px 2px 10px #555); } #top { position: fixed; right: 12px; bottom: 52px; line-height: 1; cursor: pointer; -webkit-transition: 600ms; -moz-transition: 600ms; transition: 600ms; } #top:hover .iconfont { color: #61CD6B; } #top.hide { -webkit-transform: translateY(-300%); -moz-transform: translateY(-300%); -ms-transform: translateY(-300%); transform: translateY(-300%); opacity: 0; visibility: hidden; } .ix-pro { padding-top: 110px; } .ix-pro .ix-desc { margin-top: 20px; } .ix-pro .more { margin-top: 30px; } .ix-pro .global-layout { margin-top: 110px; } .ix-desc { margin: 0 auto; max-width: 930px; font-size: 16px; line-height: 24px; } .pic>img { height: 100%; object-fit: cover; } .global-layout .pic { float: left; width: 725px; height: 419px; margin-right: 47px; } .global-layout .txts { overflow: hidden; padding-top: 87px; } .global-layout .ti { font-weight: bold; font-size: 32px; line-height: 40px; color: #555; } .global-layout .desc { font-size: 16px; line-height: 24px; margin-top: 11px; } .ix-links { margin-left: -25px; } .ix-links li { width: 33.33%; float: left; } .ix-links .item { display: block; margin-left: 25px; position: relative; } .ix-links a { color: white; } .ix-links .pic { height: 360px; } .ix-links .txts { position: absolute; left: 35px; right: 80px; top: 30px; bottom: 0; } .ix-links .ti { display: block; font-weight: bold; font-size: 32px; line-height: 40px; margin-bottom: 14px; } .ix-links .report>span { display: block; } .ix-links .report .text { font-size: 32px; line-height: 1; font-weight: bold; } .ix-links .report .num { font-weight: bold; font-size: 48px; line-height: 56px; } .ix-links .date { position: absolute; left: 0; right: 0; bottom: 27px; line-height: 1; } .ix-links .details-link { display: block; font-size: 28px; line-height: 32px; font-weight: bold; } .ix-links .details-link+.details-link { margin-top: 6px; } .ix-links .details-link:hover { color: #fff; } .ix-box .container { padding-top: 110px; } .ly-share { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.5); z-index: 9999; display: none; } .ly-share.show .content { opacity: 1; visibility: visible; -webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none; } .ly-share .content { width: 556px; height: 456px; position: absolute; top: 50%; left: 50%; margin: -228px 0 0 -278px; background: white; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-transition: 600ms; -moz-transition: 600ms; transition: 600ms; -webkit-transform: translateY(20%); -moz-transform: translateY(20%); -ms-transform: translateY(20%); transform: translateY(20%); opacity: 0; visibility: hidden; } .ly-share .content .ti { color: #000; font-weight: bold; line-height: 22px; } .ly-share .ly-header { padding: 20px 30px; } .ly-share .ly-close { position: absolute; font-size: 20px; right: 10px; top: 21px; line-height: 1; z-index: 9; } .ly-share .ly-close:hover { color: #254B96; } .ly-share .ly-body { padding: 22px 50px; } .ly-share .list { margin-left: -35px; } .ly-share .list li { width: 33.33%; float: left; margin-bottom: 15px; } .ly-share .list .item { margin-left: 35px; } .ly-share .list .picbox { width: 132px; height: 132px; border: 1px solid #000; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } .ly-share .list .picbox>img { max-width: 100%; max-height: 100%; } .ly-share .list .nowti { text-align: center; line-height: 22px; height: 22px; margin-top: 10px; } .news-banner-txts { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 5.70313%; color: white; } .news-banner-txts .desc { font-weight: bold; font-size: 64px; line-height: 1; } .news-nav { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; border-bottom: 1px solid #e5e5e5; } .news-nav a { display: block; font-size: 16px; line-height: 24px; color: #555; padding-bottom: 14px; } .news-nav a.act { color: #254B96; font-weight: bold; } .news-nav a:hover { color: #254B96; } .news-nav li+li { margin-left: 23px; } .news-box { padding: 63px 0 79px; } .news-box .news-nav { margin-bottom: 100px; } .breadcrumb-nav { background: #e5e5e5; font-size: 12px; line-height: 22px; padding: 5px 0; } .breadcrumb-nav a { color: #777; } .breadcrumb-nav a .act, .breadcrumb-nav a:hover { color: #254B96; } .nd-banner>img { width: 100%; vertical-align: bottom; } .nd-cont { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; padding: 70px 0 110px; } .nd-cont .nd_l { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; } .nd-cont .nd_l .ti { font-weight: bold; font-size: 32px; color: #555; line-height: 40px; } .nd-cont .nd_l .date { margin-top: 29px; line-height: 1; color: #555; } .nd-cont .nd_l .date>span { color: #ccc; } .nd-cont .nd_l .freeTx { margin-top: 58px; } .nd-cont .nd_r { width: 350px; margin-left: 50px; } .nd-cont .ix-links li { width: 100%; } .nd-cont .hot-news-list { margin-top: 25px; } .nd-cont .more { margin-top: 15px; } .nd-cont .nd-back { margin-top: 77px; } .hot-news-list a { display: block; padding: 16px 0 24px; color: #555; border-bottom: 1px solid #e5e5e5; } .hot-news-list a:hover .desc { color: #254B96; } .hot-news-list .date { line-height: 1; color: #999; margin-bottom: 10px; } .hot-news-list .desc { line-height: 20px; height: 40px; overflow: hidden; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; -webkit-transition: 300ms; -moz-transition: 300ms; transition: 300ms; } .nd-more { display: inline-block; vertical-align: bottom; color: #000; font-size: 16px; line-height: 24px; } .nd-more .iconfont { display: inline-block; vertical-align: bottom; font-size: 20px; } .nd-more:hover { color: #254B96; } .nd-back { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .nd-back>a { height: 44px; width: 214px; border: 3px solid #ccc; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; color: #000; } .nd-back>a:hover { background: #254B96; border-color: #254B96; color: white; } .nd-back .iconfont { font-size: 20px; font-weight: bold; line-height: 1; } .nd-back .back { width: 110px; } .jd-nav { border-bottom: 1px solid #e5e5e5; padding-bottom: 22px; } .jd-nav>li { float: left; } .jd-nav>li+li { margin-left: 100px; } .jd-nav>li>a { display: block; font-size: 20px; line-height: 40px; color: #555; } .jd-nav>li>a.act { font-size: 40px; font-weight: bold; } .jd-nav>li>a:not(.act):hover { color: #254B96; } .jd-box .jd-nav { padding-top: 100px; } .jd-box .jd-cont { padding: 50px 0 170px; } .jd-cont { color: #555; } .jd-cont a { color: #555; } .jd-cont a:hover { color: #254B96; } .jd-cont .en, .jd-cont .ch { font-weight: bold; font-size: 18px; } .jd-cont .en { margin-top: 5px; text-transform: uppercase; } .jd-cont .cta { margin-top: 30px; } .jd-cont .cta span, .jd-cont .cta a { display: block; font-size: 16px; line-height: 28px; } .jn-title { font-size: 20px; line-height: 1; letter-spacing: 0.56em; color: #555; font-weight: normal; } .jn-desc { max-width: 880px; font-size: 16px; line-height: 24px; margin: 0 auto; } .jn1 { padding: 100px 0 130px; } .jn1 .ix-title { margin-bottom: 15px; } .jn1 .jn-title { margin:20px 0 28px 0; } .jn2 { border-top: 1px solid #e5e5e5; padding: 53px 0 67px; } .idea-list { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; margin-left: -25px; } .idea-list li { width: 33.33%; } .idea-list .item { margin-left: 25px; } .idea-list .pic { height: 220px; } .idea-list .ti { font-weight: bold; font-size: 24px; line-height: 1; color: #555; margin-bottom: 9px; } .idea-list .desc { line-height: 20px; } .idea-list .txts { padding-top: 18px; } .jn3>.container { border-top: 1px solid #e5e5e5; padding-top: 100px; } .jn3 .ix-title { margin-bottom: 22px; } .jn3 .fixbg { height: 560px; margin-top: 67px; } .join-cta-list { margin-left: -25px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .join-cta-list li { width: 33.33%; margin-bottom: 53px; } .join-cta-list .item { display: block; margin-left: 25px; position: relative; color: #777; } .join-cta-list .pic { height: 400px; } .join-cta-list .en { text-transform: uppercase; font-weight: bold; font-size: 32px; color: #555; line-height: 20px; position: absolute; top: 30px; left: 25px; } .join-cta-list .txts { padding-top: 25px; line-height: 20px; } .jn4 { padding: 100px 0 37px; } .jn4 .ix-title { margin-bottom: 67px; } .imgShowBox { position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 1020; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; } .imgShowClose { width: 40px; height: 40px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: rgba(255, 255, 255, 0.5); text-align: center; line-height: 40px; color: white; top: 15px; right: 20px; position: absolute; z-index: 99; cursor: pointer; -webkit-transition: 300ms; -moz-transition: 300ms; transition: 300ms; } .imgShowClose:hover { background: #254B96; } .imgShowDemo .img { width: auto; height: auto; max-height: 90%; max-width: 90%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; vertical-align: middle; } .imgShowBox.img-show { opacity: 1; visibility: visible; } .imgShowBox .slick-arrow { width: 40px; height: 40px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: rgba(255, 255, 255, 0.5); text-align: center; line-height: 40px; color: white; position: absolute; top: 50%; margin-top: -20px; z-index: 99; font-size: 20px; } .imgShowBox .slick-arrow:hover { background: #254B96; } .imgShowBox .slick-prev { left: 20px; } .imgShowBox .slick-prev::before { content: "\e735"; } .imgShowBox .slick-next { right: 20px; } .imgShowBox .slick-next::before { content: "\e731"; } .life-list li { float: left; width: 25%; margin-bottom: 6px; } .life-list li>a { display: block; margin-left: 6px; } .life-list .pic { height: 240px; } .jn5 { border-top: 1px solid #e5e5e5; padding: 100px 0 110px; } .jn5 .ix-title { margin-bottom: 42px; } .pro-banner .txts .desc { background: rgba(37, 75, 152, 0.8); } .pt-logo-list { width: 100%; margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } .pt-logo-list li { width: 14%; margin-top: 10px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; } .pt-logo-list .img { margin: 12px 3px; height: 84px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: 300ms; -moz-transition: 300ms; transition: 300ms; } .pt-logo-list .imgnomal { margin: 0 3px; height: 84px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .pt-logo-list .imgnomal>img, .pt-logo-list .img>img { max-width: 90%; max-height: 90%; } .pt-logo-list .img:hover { -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); } .pt1 { border-bottom: 1px solid #e5e5e5; padding: 74px 0 87px; } .pt1 .ix-title { margin-bottom: 40px; } .pro-box { padding-top: 20px; } .pt-list a { display: block; overflow: hidden; color: #777; } .pt-list .pic { width: 725px; float: left; margin-right: 47px; } .pt-list .txts { padding-top: 46px; overflow: hidden; } .pt-list .img { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 30px; } .pt-list .desc { font-size: 16px; line-height: 24px; height: 120px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; } .pt-list .more { margin-top: 105px; } .pt-list .ix-more { width: 180px; -webkit-transition: 300ms; -moz-transition: 300ms; transition: 300ms; } .pt-list li { padding: 83px 0; border-bottom: 1px solid #e5e5e5; } .pt-list li:nth-child(2n) .pic { float: right; margin-right: 0; margin-left: 47px; } .pt2 { padding-bottom: 83px; } .worth-list { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; margin-left: -25px; } .worth-list li { width: 20%; } .worth-list .item { margin-left: 25px; padding-top: 11px; border-top: 2px solid #000; } .worth-list .ti { font-weight: bold; font-size: 18px; line-height: 2; color: #555; } .worth-list .desc { font-size: 14px; line-height: 22px; } .ab-worth-box { padding: 91px 0 0; } .ab-worth-box .ix-title { margin-bottom: 64px; } .aw2 { padding: 90px 0 70px; } .aw2 .ix-title { margin-bottom: 48px; } .peer-list { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; margin-right: -25px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .productimg{ width: 100%; } .productimg img{ width: 100%; } .peer-list li { width: 33.33%; margin-bottom: 40px; } .peer-list a { display: block; margin-left: 25px; color: #777; } .peer-list .pic { display: block; margin-right: 25px; color: #777; } .peer-list a:hover { color: #254B96; } .peer-list .pic { height: 220px; } .peer-list .nowti { line-height: 22px; margin-top: 17px; } .az-intro { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .az-intro .pic { width: 500px; height: 275px; } .az-intro .txts { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; } .az-intro .ti { font-weight: bold; font-size: 28px; color: #555; line-height: 36px; } .az-intro .desc { font-size: 16px; line-height: 24px; margin-top: 26px; } .az1 { padding: 90px 0 0; } .az1 .az-intro { margin-top: 49px; } .az2 { padding: 90px 0 110px; } .az2 .az-title { margin-bottom: 16px; } .az2 .ix-desc { margin-bottom: 67px; } .az-title { font-weight: bold; font-size: 28px; line-height: 40px; color: #555; } .ie-list li { background: #E7E5F1; overflow: hidden; } .ie-list li+li { margin-top: 70px; } .ie-list li:nth-child(2n) .pic { float: left; } .ie-list li:nth-child(2n) .txts { padding:100px 60px 0 110px; } .ie-list .pic { float: right; width: 600px; height: 446px; } .ie-list .txts { overflow: hidden; padding: 105px 130px 0 60px; } .ie-list .ti { font-weight: bold; font-size: 32px; color: #555; line-height: 40px; margin-bottom: 22px; } .ie-list .desc { font-size: 16px; line-height: 24px; } .ie1 { padding: 100px 0 65px; } .ie1 .ix-title { margin-bottom: 20px; } .ie1 .ix-desc { margin-bottom: 85px; } .az-logo-list { width: 854px; margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } .az-logo-list li { width: 25%; margin-bottom: 32px; } .az-logo-list .img { height: 100px; margin: 0 9px; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: 300ms; -moz-transition: 300ms; transition: 300ms; } .az-logo-list .imgnomal { height: 100px; margin: 0 9px; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: 300ms; -moz-transition: 300ms; transition: 300ms; } .az-logo-list .img:hover { -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); } .az-logo-list .img>img { max-width: 90%; max-height: 90%; } .ie2 { border-top: 1px solid #e5e5e5; padding: 88px 0 58px; } .ie2 .ix-title { margin-bottom: 48px; } .ie-desc { font-size: 20px; line-height: 24px; } .ie3 { border-top: 1px solid #e5e5e5; padding: 78px 0 110px; } .ie3 .ix-title { margin-bottom: 18px; } .ie3 .honor-slick { margin-top: 72px; } .honor-list { margin-left: -47px; } .honor-list .item1 { width: 25%; float: left; margin-bottom: 55px; } .honor-list .pic { margin-left: 47px; height: 357px; cursor: pointer; } .honor-list .pic::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; visibility: hidden; -webkit-transition: 300ms; -moz-transition: 300ms; transition: 300ms; } .honor-list .pic:hover::before { opacity: 1; visibility: visible; } .honor-slick .slick-dots { position: static; } .honor-slick .slick-dots li { background: #ABABAB; } .honor-slick .slick-dots .slick-active { background: #254B96; } .ab-banner .txts .desc { background: rgba(255, 255, 255, 0.7); color: #254B96; width: 450px; font-size: 28px; float: right; margin-right: 5%; } .leader-box { position: relative; background: #254B96; color: white; padding: 50px 0; } .leader-box .pic { float: left; margin-right: 90px; } .leader-box .txts { padding: 12px 130px 0 0; overflow: hidden; } .leader-box .ti { font-weight: bold; font-size: 32px; line-height: 40px; margin-bottom: 20px; } .leader-box .desc { font-size: 16px; line-height: 32px; margin-bottom: 25px; text-align: justify } .leader-box .sign { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .leader-box .sign .name { width: 64px; margin-left: 15px; } .leader-box .zzh-logo { position: absolute; z-index: 9; right: 18px; bottom: 18px; } .zzh1 { padding-top: 110px; } .zzh2 { padding-top: 110px; } .zzh2 .ix-title { margin-bottom: 80px; } .zzh2>.container { position: relative; z-index: 1; } .zzh-links { position: relative; margin-top: -50px; } .zzh-links .img { display: block; width: 100%; } .zzh-links .cont { position: absolute; left: 0; right: 0; top: 0; padding-top: 174px; } .zzh-links .list { margin-left: -40px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .zzh-links .list li { width: 33.33%; } .zzh-links .list a { display: block; margin-left: 40px; background: #A89976; height: 44px; color: white; padding: 0 15px 0 20px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-size: 16px; } .zzh-links .list a:hover { background: #A89976; } .zzh-links .list .iconfont { font-weight: bold; font-size: 18px; } .zzh3 { padding: 110px 0 0; } .zzh3 .ix-title { margin-bottom: 15px; } .zzh3 .more { margin-top: 50px; } .who-list .item { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; padding: 35px 0; border-bottom: 1px solid #e5e5e5; } .who-list .pic { width: 50%; margin-right: 70px; } .who-list .txts { overflow: hidden; -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } .who-list .ti { font-weight: bold; font-size: 32px; line-height: 40px; color: #555; margin-bottom: 22px; } .who-list .desc { font-size: 16px; line-height: 24px; } .who-list li:nth-child(2n) .pic { -webkit-box-ordinal-group: 3; -webkit-order: 2; -moz-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin-right: 0; margin-left: 70px; } .zzh4 { padding: 110px 0; } .zzh4 .ix-title { margin-bottom: 33px; } .history-list { padding: 0 150px; border-bottom: 1px solid #e5e5e5; } .history-list .pic { height: 450px; } .history-list .txts { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 13px; } .history-list .year { font-size: 72px; line-height: 72px; color: #555; margin-right: 35px; } .history-list .desc { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; } .history-list .slick-arrow { width: 56px; height: 56px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: #C4C4C4; margin: 0; top: 197px; line-height: 56px; color: white; font-weight: bold; font-size: 20px; } .history-list .slick-arrow:hover { background: #254B96; } .history-list .slick-next::before { content: "\e731"; } .history-list .slick-prev::before { content: "\e735"; } .history-list .slick-dots { position: static; letter-spacing: normal; line-height: 1; padding-top: 65px; } .history-list .slick-dots li { width: auto; height: auto; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .history-list .slick-dots li a { position: relative; text-indent: 0; font-weight: bold; font-size: 14px; padding: 0 2px 24px 2px; } .history-list .slick-dots li a::before { content: ""; position: absolute; left: auto; right: 0; bottom: 0; width: 0; height: 2px; background: #254B96; -webkit-transition: 600ms; -moz-transition: 600ms; transition: 600ms; } .history-list .slick-dots li a:hover { color: #254B96; } .history-list .slick-dots .slick-active a { color: #254B96; } .history-list .slick-dots .slick-active a::before { left: 0; right: auto; width: 100%; } .peer-list-two li { width: 50%; } .peer-list-two .pic { height: 337px; } .worth-intro { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .worth-intro .wi-r { width: 580px; margin-left: 40px; } .worth-intro .worth-list-two { overflow: hidden; -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; } .wi-r .pic { height: 315px; } .wi-r .ti { text-align: center; line-height: 22px; margin-top: 17px; } .worth-list-two li+li { margin-top: 14px; } .worth-list-two .ti { font-weight: bold; font-size: 16px; color: #555; line-height: 1; margin-bottom: 6px; } .worth-list-two .desc { line-height: 22px; } .pd-img { position: relative; padding-bottom: 94px; } .pd-img .img1 { display: block; width: 100%; } .pd-img .img2 { vertical-align: bottom; } .pd-img .imgBox { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; } .pd1 { padding: 85px 0; } .pd1 .ix-title { margin-bottom: 24px; } .pd2 .pd-img { padding-bottom: 139px; } .pd2>.container { padding: 10px 0 52px; } .pd-logo { display: block; } .pd-list li { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; padding: 20px 0 58px; } .pd-list li+li { border-top: 1px solid #e5e5e5; } .pd-list li:nth-child(2n) .pic { -webkit-box-ordinal-group: 3; -webkit-order: 2; -moz-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin-right: 0; margin-left: 76px; } .pd-list .pic { width: 408px; margin-right: 76px; } .pd-list .txts { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; } .pd-list .ti { font-weight: bold; font-size: 24px; line-height: 40px; color: #555; margin-bottom: 13px; } .pd-list .pd-logo { margin-top: 45px; } .desc-list { font-size: 14px; line-height: 24px; } .desc-list .icon { width: 21px; height: 18px; vertical-align: bottom; margin-bottom: 3px; margin-right: 7px; } .pro-navbeifen { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: 100%; left: 0; right: 0; height: 64px; background-color: rgba(153, 153, 153, 0.8); opacity: 0; visibility: hidden; -webkit-transition: 300ms; -moz-transition: 300ms; transition: 300ms; } .pro-nav { display:none; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: 100%; left: 0; right: 0; height: 64px; background-color: rgba(153, 153, 153, 0.8); opacity: 0; visibility: hidden; -webkit-transition: 300ms; -moz-transition: 300ms; transition: 300ms; } .pro-nav.show { opacity: 1; visibility: visible; } .pro-nav .item { padding: 0 15px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } .pro-nav .item.act, .pro-nav .item:hover { background: #254B96; } .pro-nav .item img { max-height: 90%; } .pd3 .pic2::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 156px; background: -webkit-gradient(linear, left top, left bottom, from(rgba(72, 152, 84, 0)), to(rgba(72, 152, 84, 0.56))); background: -webkit-linear-gradient(top, rgba(72, 152, 84, 0) 0%, rgba(72, 152, 84, 0.56) 100%); background: -moz-linear-gradient(top, rgba(72, 152, 84, 0) 0%, rgba(72, 152, 84, 0.56) 100%); background: linear-gradient(180deg, rgba(72, 152, 84, 0) 0%, rgba(72, 152, 84, 0.56) 100%); } .pd3 .box { position: absolute; left: 0; right: 0; bottom: 30px; z-index: 7; } .pd3 .wti { color: white; font-weight: bold; font-size: 48px; line-height: 64px; padding-left: 512px; } .pd3 .pd-list { margin-top: -253px; position: relative; z-index: 2; margin-bottom: 56px; } .pd3 .pd-list li { -webkit-box-align: start; -webkit-align-items: flex-start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; } .pd3 .pd-list .txts { padding-top: 300px; } .pd3 .pd-list .pic { width: 483px; margin-right: 29px; } .pd3:nth-child(2n) .pd-list .pic { -webkit-box-ordinal-group: 3; -webkit-order: 2; -moz-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin-right: 0; margin-left: 0; } .pd3:nth-child(2n) .wti { padding-left: 0; } .sos-cont { height: 100%; background: #f2f2f2; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .sos-cont .ix-more { width: 180px; } .sos-cont .ix-more+.ix-more { margin-left: 14px; } .sos-cont .more { padding-top: 39px; } .search-input { background: #254B96; padding: 94px 0 58px; } .search-input .container { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } .search-input .input { width: 560px; height: 48px; background: white; padding: 0 16px; margin-right: 8px; border: 2px solid white; -webkit-transition: 300ms; -moz-transition: 300ms; transition: 300ms; } .search-input .button { width: 80px; height: 48px; border: 2px solid white; color: white; -webkit-transition: 300ms; -moz-transition: 300ms; transition: 300ms; } .search-input .box{ display: flex; align-items: center; } .search-input .button:hover { background: white; color: #254B96; } .search-cont { padding: 24px 0 110px; } .search-cont .ti { color: black; line-height: 22px; margin-bottom: 53px; } .search-cont .key { color: #254B96; } .search-cont .search-nav { margin-bottom: 29px; transition: all 0.5s; } .search-nav { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; border-bottom: 1px solid #e5e5e5; } .search-nav li a { color: #555; font-size: 16px; line-height: 22px; padding-bottom: 11px; display: block; } .search-nav li a.act { font-weight: bold; color: #254B96; } .search-nav li+li { margin-left: 72px; } .search-list a { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; color: #000; line-height: 22px; } .search-list a:hover .more { color: #254B96; } .search-list .nowti { line-height: 22px; max-width: 80%; } .search-list .tag { color: #999; margin-right: 15px; } .search-list .more { color: #777; } .search-list li+li { margin-top: 12px; } .search-empty { padding-top: 54px; text-align: center; } .search-empty .img { max-width: 100%; vertical-align: bottom; } .search-empty .desc { line-height: 22px; margin-top: 18px; } .gpdm{ color: #555; font-size: 16px; margin-bottom: 20px; } .search-nav:hover{ color: #264B94; } .imgjoin{ width: 100vw; margin-top: 24px; } .banner .txts .blue{ background-color: rgba(37, 75, 152, 0.8); color: white; font-weight: bold; font-size: 32px; line-height: 44px; padding: 13px 20px 17px; float: right; margin-right: 5%; } .org-box{ width: 912px; margin: 0 auto; padding-top: 128px; height: 634px; position: relative; } .statistics-item{ position: absolute; top: 0; left: 0; z-index: 9; } .statistics-item .num-box{ color: #333; } .statistics-item .statistics-num{ font-size: 90px; line-height: 72px; margin-right: 8px; vertical-align: bottom; font-family: 'Conv_DINPro-Light'; } .statistics-item .unit{ font-size: 24px; line-height: 24px; vertical-align: bottom; } .statistics-item .ti{ margin-top: 9px; font-size: 14px; line-height: 24px; padding-left: 6px; } .org-box .item1{ left: 301px; top: 0; } .org-box .item2{ left: 0; top: 217px; } .org-box .item3{ left: 309px; top: 217px; } .org-box .item4{ left: 583px; top: 217px; } .org-box .item5{ left: 132px; top: 374px; } .org-box .item6{ left: 589px; top: 374px; } .org-box .item7{ left: 442px; top: 529px; } .prod-nav{ position: absolute; left: 0; right: 0; z-index: 99; top: 100%; background: #F7F7F7; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } .prod-nav a{ line-height: 40px; font-size: 16px; height: 40px; color: #555; } .prod-nav a:hover, .prod-nav a.act{ color: #264B94; } .prod-nav a + a{ margin-left: 67px; } .pdtop{ height: 136px; } .news-list > li > a{ border: 1px solid #E1E1E1; padding: 18px 20px 40px; margin-left: 15px; } .news-list{ margin-left: -15px; } .news-list .txts{ padding-top: 21px; } .news-list .txts .ti{ margin-top: 11px; font-size: 20px; line-height: 28px; height: 56px; } .news-list .txts .desc{ line-height: 24px; height: 48px; } .news-list > li{ margin-bottom: 56px; } .spe-news-list a{ display: block; overflow: hidden; color: #999; } .spe-news-list a:hover .ti{ color: #264B94; } .spe-news-list .pic{ width: 560px; height: 360px; float: left; margin-right: 80px; } .spe-news-list .txts{ overflow: hidden; } .spe-news-list .ti{ font-weight: bold; font-size: 28px; line-height: 40px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; -webkit-transition: 300ms; -moz-transition: 300ms; transition: 300ms; color: #555; } .spe-news-list .date{ line-height: 14px; margin-top: 14px; } .spe-news-list .desc{ font-size: 16px; line-height: 28px; margin-top: 20px; } .spe-news-list li:nth-child(2n) .pic { float: right; margin-right: 0; margin-left: 80px; } .spe-news-list li{ margin-bottom: 108px; } .news-box .spe-news-list{ padding-bottom: 20px; } .header .s-btn{ position: relative; } .header .s-btn > .iconfont{ cursor: pointer; } .header .s-btn:hover .s-inp{ transform: none; opacity: 1; visibility: visible; } .s-inp{ position: absolute; top: 100%; right: 0; width: 320px; height: 44px; z-index: 99; transform: translateY(10px); opacity: 0; visibility: hidden; transition: 300ms; } .s-inp input{ padding: 5px 57px 1px 13px; height: 100%; width: 100%; background: url('../images/Union.png') no-repeat top left; } .s-inp a{ height: 24px; line-height: 24px; position: absolute; right: 8px; bottom: 8px; } .s-inp .iconfont{ font-weight: bold; } .investorpdf li{ margin: 12px 0; } .investorpdf>ul{ padding-top: 24px ; } .picpdf>img{ height: 20px; width: 17px; } .investorpdf p:hover{ color:#254B96; } .investorpdf p{ isplay: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; -webkit-transition: 300ms; -moz-transition: 300ms; transition: 300ms; color:#333; font-size: 18px; } .picpdf{ position: relative; float: left; padding-right: 12px; height: 40px; line-height: 40px; }