@charset "utf-8"; /* ====================公共样式========================= */ .container-max{max-width:1800px;width:100%;margin:0 auto} .container-md{max-width:1600px;width:100%;margin:0 auto} .container-sm{max-width: 1400px;width: 100%;margin: 0 auto} .container-xs{max-width:1200px;width: 100%;margin: 0 auto} .header-white main{margin-top:80px} .arrow-icon{font-family:"\5B8B\4F53";font-weight:700} .obj-cover{width:100%;height:100%;object-fit:cover} .placeholder{visibility:hidden!important;height:0!important;border:0!important;padding:0!important;margin:0!important}/*space-between占位*/ body.pc .menu-item{display: block!important} .positionDot{position:relative;top:-180px;display:block;overflow:hidden} /* header */ header{height:80px;position:fixed;left:0;top:0;width:100%;z-index:999;border-bottom:1px solid rgba(255,255,255,.12);transition:all .4s ease} header .header{max-width:1800px;width:100%;margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between} header .logo{width:10%} header .logo a{display:flex;align-items:center} header .logo h1{text-indent:-99999px} header .menu-item .menu-cell{display:inline-block;line-height:80px;color:#fff;padding:0 30px;font-size:18px} .header-rgt{display:flex;align-items:center;height:100%} .header-language{display:flex;align-items:center;color:#fff;font-size:14px;cursor:pointer;height:100%;transition:all .4s ease} .header-language ul{background:#fff;box-shadow: 0 5px 40px rgba(17,58,93,.1);width:100px;position:absolute;top:70px;opacity:0;visibility:hidden;transform:translateY(5px)} .header-language:hover ul{opacity:1;visibility:visible;transform:translateY(0px);transition:all .4s ease} .header-language ul a{padding:5px 15px;display:block;color:#333} .header-language ul a:hover{background:#08a3f3;color:#fff} .header-language:hover,header.color .header-language:hover{color:#0093dd} .header-language i.icon{display:block;background:url(../images/common/language-icon.png) no-repeat center/100%;width:21px;height:21px;margin-right:8px;transition:all .4s ease} .header-language:hover i.icon,header.color .header-language:hover i.icon{background:url(../images/common/language-icon-hover.png) no-repeat center/100%} .header-language i.arrow{display:block;background:url(../images/common/arrow-down.png) no-repeat center/100%;width:7px;height:4px;margin-left:5px;transition:all .4s ease} .header-language:hover i.arrow,header.color .header-language:hover i.arrow{background:url(../images/common/arrow-down-hover.png) no-repeat center/100%} header .logo-color,header.color .logo-white,body.header-white header .logo-white{display:none} body.PC header .menu-item{display: flex!important} header .menu-item{display:flex} header .menu-item li{position: relative} header .menu-item li.on .menu-cell,header.color .menu-item li.on .menu-cell,body.header-white header .menu-item li.on.menu-cell{color:#0093dd} header .menu-item .menu-cell span{position:relative;height:100%;display:block;line-height:80px} header .menu-item .menu-cell span:after{content:'';position:absolute;bottom:0;left:0;height:5px;width:100%;opacity:0;background:#0093dd;-webkit-transition:transform .2s ease-out,opacity .2s ease-out;transform-origin:50% 0;transform:scale(.01,1)} header .menu-item .menu-cell.on span:after,header .menu-item .menu-cell:hover span:after{transform:scale(1,1);opacity:1} header.color .logo-color,body.header-white header .logo-color{display:block} header.color,body.header-white header{background:#fff;box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.1)} header.color .menu-item .menu-cell,body.header-white header .menu-item .menu-cell{color:#2d3650} header.color .header-language,body.header-white header .header-language{color:#2d3650} header.color .header-language i.icon,body.header-white header .header-language i.icon{background:url(../images/common/language-icon-black.png) no-repeat center/100%} header.color .header-language i.arrow,body.header-white header .header-language i.arrow{background:url(../images/common/arrow-down-black.png) no-repeat center/100%} header.color .bread-icon:after,body.header-white header .bread-icon:after{content:'';height:80px;width:9999%;background:linear-gradient(to right,#236abd 0,#038fda 99%);position:absolute;left:-80px;top:-24px;z-index:-1;transition:all .4s ease} header.color .header-search .search-btn,body.header-white header .header-search .search-btn{color:#0093dd} header.color .bread-icon .lines,header.color .bread-icon .lines:after,header.color .bread-icon .lines:before{background:#fff} header.color .header-search{border-color:#fff} .header-bg{content: '';position: fixed;left: 0;top: 60px;width: 100%;height: 100%;z-index: 0;background: rgba(0,0,0,.8);display: none} /* 下拉 */ .header-arrow{width:35px;height:30px;border-radius:5px;position:absolute;z-index:9;right:4%;top:5px;background:#f4f4f4 url(../images/common/select.svg) no-repeat center/12px auto;display:none} .header-arrow.active{transform:rotate(180deg)} header .menu-sub{position:absolute;width:168px;left:50%;transform:translateX(-50%);top:80px;display:none} header .menu-sub a{display:block;color:#fff;background-color:rgba(5,11,24,.6);text-align:center;padding:15px 5px;transition:background-color .4s ease,color .4s ease} header .menu-sub a:hover{background-color:#080f1f} /* search */ .header-search{margin-right:20px;margin-left:40px;padding-right:20px} .header-search .search-btn{color:#fff;display:flex;align-items:center} .header-search .search-btn.close .i-close,.header-search .search-btn.open .i-open{display:none} .header-search .search-btn.open .i-close{display:block} .header-search .search-box{display:none;height:50px;position:absolute;top:101%;right:0;right:0;width:400px;opacity:1;z-index:101;background-color:rgba(0,0,0,.3);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)} .header-search .search-box .search-form{padding:1rem 20px;border-radius:2px;position:relative;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;width:100%} .header-search input[type=text]{background-color:transparent;color:#fff;border:none;border-radius:0;padding:0;width:calc(100% - 20px)} .header-search input::-webkit-input-placeholder{color:#f2f2f5;opacity:1} .header-search input::-moz-placeholder{color:#f2f2f5;opacity:1} .header-search input:-ms-input-placeholder{color:#f2f2f5;opacity:1} .header-search input::-ms-input-placeholder{color:#f2f2f5;opacity:1} .header-search input::placeholder{color:#f2f2f5;opacity:1} .header-search .search-submit{color:#fff;background:0 0;cursor:pointer;width: 20px;height: 20px;display: flex;align-items: center;justify-content: center} /* 汉堡菜单 */ header .bread-icon{cursor:pointer;user-select:none;margin-top: -10px;position: relative;display: none} .bread-icon .lines:after,.bread-icon .lines:before,header .bread-icon .lines{display:inline-block;height:2px;width:22px;background:#0093dd;transition:top .2s linear} header.white .bread-icon .lines:after,header.white .bread-icon .lines:before,header.white .bread-icon .lines{background: #444} header .bread-icon .lines{position:relative} .bread-icon .lines:before,header .bread-icon .lines:after{position:absolute;left:0;content:'';transform-origin:50% 50%;transition:top .2s .4s ease,transform .4s ease;height:2px} header .bread-icon .lines:before{top:6px} header .bread-icon .lines:after{top:-6px} header .bread-icon.active .lines{transition:all .2s 0s ease;background:0 0} header .bread-icon.active .lines:after,header .bread-icon.active .lines:before{transition:top .2s ease,transform .2s .3s ease;top:0;width:22px} header .bread-icon.active .lines:before{transform:rotate3d(0,0,1,45deg)} header .bread-icon.active .lines:after{transform:rotate3d(0,0,1,-45deg)} /* footer */ footer{padding:30px 0;background:#191919;color:#888} .footer-top{display:flex;justify-content:space-between} .footer-lft{width:320px} .footer-rgt{padding-top: 72px;} .footer-logo{display:block;margin-bottom:30px} .footer-lft p{font-size:14px;line-height:24px} .footer-sns{display:flex;margin-top:30px} .footer-sns a{display:flex;width:100px;height:100px;background:#2d2d2d;border-radius:50%;align-items:center;justify-content:center;position: relative} .footer-sns a:hover{color:#fff} .footer-sns li+li{margin-left:10px} .footer-sns a.qq:hover{background:#179ee8} .footer-sns a.wechat:hover{background:#1fb961} .footer-sns a.weibo:hover{background:#e70e29} .footer-sns a.wechat .wechat-qr-code{display: none;width: 100px;height: 100px;position: absolute;bottom: 40px;background: #fff;padding: 8px;left: -34px} .footer-sns a.wechat .wechat-qr-code:after{content: "";width: 0;height: 0;border-top: 5px solid #fff;border-left: 5px solid transparent;border-right: 5px solid transparent;position: absolute;bottom: -5px;left: 50%;transform: translateX(-50%)} .footer-sns a.wechat:hover .wechat-qr-code{display: block} .footer-list{display:flex;justify-content:flex-end} .footer-list li+li{margin-left:30px;padding-left:30px;position:relative} .footer-list li+li:after{content:'';position:absolute;left:0;top:5px;background:#474747;height:14px;width:1px} footer a:hover{color:#fff} .footer-copyright{display:flex;align-items:center;margin-top:60px} .footer-copyright .sate{margin-left:36px;display:flex} .footer-copyright li+li{margin-left:10px;padding-left:10px;position:relative} .footer-copyright li+li:after{content:'';position:absolute;width:4px;height:4px;left:-2px;top:10px;background:#888;border-radius:50%} .footer-link{margin-top:40px;padding-top:40px;border-top:1px solid #2b2b2b;display:flex;align-items:flex-start;font-size:16px;line-height:24px} .link-tit{min-width:80px} .footer-link li{font-size:14px;margin-left:20px} .footer-link ul{display:flex;flex-wrap:wrap} footer a{transition:color .4s ease} /* animation */ @keyframes to-up{0%{opacity: 0;transform: translate3d(0, 50px, 0);}100%{opacity: 1;transform: translate3d(0, 0, 0);}} @keyframes to-down{0%{opacity: 0;transform: translate3d(0, -50px, 0);}100%{opacity: 1;transform: translate3d(0, 0, 0);}} @keyframes to-rgt{0%{opacity: 0;transform: translate3d(50px, 0, 0);}100%{opacity: 1;transform: translate3d(0, 0, 0);}} @keyframes to-lft{0%{opacity: 0;transform: translate3d(-50px, 0, 0);}100%{opacity: 1;transform: translate3d(0, 0, 0);}} @keyframes to-upB{0%{opacity: 0;transform: translate3d(0, 100px, 0);}100%{opacity: 1;transform: translate3d(0, 0, 0);}} @keyframes clip{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}} @keyframes fontB{0%{transform:scale(1.1);opacity: 0}100%{transform:scale(1);opacity: 1}} @keyframes bounceR{0%,100%,20%,50%,80%{transform:translateX(0)}40%{transform:translateX(-10px)}60%{transform:translateX(-5px)}} @keyframes zoom-icon { 0%{opacity: 0;transform: scale(0)} 100%{opacity: 1;transform: scale(1)} } @keyframes backInLeft{0%{transform:translateX(-1000px) scale(.7);transform:translateX(-1000px) scale(.7);opacity:.7}80%{transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{transform:scale(1);transform:scale(1);opacity:1}} /* common */ .full-cover{width:100%;height:100%;object-fit:cover;transition:all .8s ease} .full-width{width:100%;object-fit:cover;transition:all .8s ease} .full-maxWidth{max-width:100%;object-fit:cover;height:auto;transition:all .8s ease} .full-maxHeight{max-height:100%;width:auto;object-fit:cover;transition:all .8s ease} .full-auto{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:cover} .full-maxAuto{max-width:80%;max-height:80%;width:auto;height:auto;transition:all .8s ease} .placeholder{visibility:hidden!important;height:0!important;border:0!important;padding:0!important;margin:0!important} .centered{display:flex;align-items:center;justify-content:center} /*flex*/ .block{display:block} .inline-block{display:inline-block} .flex{display:flex} .inline-flex{display:inline-flex} .flex-direction-row{flex-direction:row} .flex-direction-row-reverse{flex-direction:row-reverse} .flex-direction-column{flex-direction:column} .flex-wrap-nowrap{flex-wrap:nowrap} .flex-wrap-wrap{flex-wrap:wrap} .flex-wrap-reverse{flex-wrap:wrap-reverse} .flex-justify-start{justify-content:flex-start} .flex-justify-end{justify-content:flex-end} .flex-justify-center{justify-content:center} .flex-justify-between{justify-content:space-between} .flex-align-start{align-items:flex-start} .flex-align-end{align-items:flex-end} .flex-align-center{align-items:center} .height100{height:100%} /*font justify*/ .text-left{text-align:left} .text-center{text-align:center} .text-right{text-align:right} .inline-bg{background-repeat:no-repeat;background-size:cover;background-position:center} .swiper-button-disabled{cursor:not-allowed!important;opacity:.6} .relative{position:relative} .swiper-pagination{font-size:0} .margin{margin:0 auto} .btn-hvr{transition:box-shadow .4s ease,border .4s ease} .btn-hvr:hover{border-color:transparent;box-shadow:0 0 0 .2rem rgba(0, 147, 221,.5)} /* side-nav */ .side-nav{position:fixed;right:20px;top:40%;z-index:9999} .side-nav .sn-item{color:#0082e4;font-size:12px;text-align:center;line-height:1;width:64px;height:70px;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;border:1px solid #dfe5eb;background:#fff;border-bottom:0} .side-nav .sn-item:first-child{border-top-left-radius:4px;border-top-right-radius:4px} .side-nav .sn-item:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:1px solid #dfe5eb} .side-nav .sn-item:hover{background:linear-gradient(164deg,#0082e4 0,#0097ec 80%);color:#fff;border-color:#0082e4} .side-nav .sn-item .tit{margin-top:5px} .side-nav .goTop{color:#dadada} .side-nav .in{background:#fff;box-shadow:2px 0 8px 0 rgba(0,0,0,.1);border-radius:4px} .side-nav .sn-inner{position:absolute;right:100%;top:0;display:none;padding-right:12px;cursor:default} .side-nav .sn-item:hover .sn-inner{display:block} .side-nav .sn-inner .heading{font-size:15px;line-height:1;color:#333;padding:16px 16px 0} .side-nav .sn-inner .heading .title{border-bottom:1px solid #ececec;padding-bottom:12px} .side-nav .sn-inner ul{padding:16px;width:auto} .side-nav .sn-inner ul li{margin-left:4px} .side-nav .sn-inner ul li:first-child{margin-left:0} .side-nav .sn-inner p{color:#888;font-size:14px;margin-top:6px} .side-nav .sn-inner .pic{width:80px;height:80px;border:1px solid #e5e5e5;padding:5px} .side-nav .sn-inner .pic img{width:100%;height:100%;object-fit:cover} .side-nav .sn-inner .list{width:126px;padding:10px 0 16px} .side-nav .sn-inner a{color:#777;font-size:14px;height:30px;line-height:30px;display:block} .side-nav .sn-inner a:hover{background:#f2f2f2} .sitePlace{position: relative;height: 0;overflow: hidden;display: block;top: -78px;} /* -------------------------PC端--------------------------- */ @media all and (max-width:1700px) { /* 1600 × (900/1024/1200) */ header .header,.container-max{max-width: 1400px} } @media all and (max-width:1599px) { /* 1440 × (900/1050) */ header .header, .container-max,.container-sm,.container-md{max-width: 1200px} .container-xs{max-width: 1000px} } @media all and (max-width:1439px) { /* 1360 × (768) */ } @media all and (max-width:1359px) { /* 1280 × (800/854/1024) */ } @media all and (max-width:1279px) { /* 1152 × (864) */ .container-xs{max-width: 900px} header .header, .container-max,.container-sm,.container-md{max-width: 1000px} .header-search{margin-right: 15px;padding-right: 15px;margin-left: 20px} .header-language{font-size: 0} header .menu-item .menu-cell{font-size: 16px;padding: 0 15px} header.color .bread-icon:after,header.color .bread-icon:after, body.header-white header .bread-icon:after{left: -65px} header .header-language i.arrow{display: none} } @media all and (max-width:1151px) { /* 1024 × (600/768) */ } /* ------------------------手机端-------------------------- */ @media all and (max-width:1000px) { /* 平板设备 720 适配 */ header .header, .container-max,.container-sm,.container-xs,.container-md{max-width:92%} .header-white main{margin-top: 60px} header .bread-icon{display: block} header.color .header-search .search-btn, body.header-white header .header-search .search-btn{color: #fff} .header-search{border-right:1px solid rgba(255,255,255,.2)} header .menu-item{display:none;position:absolute;top:60px;left:0;background-color:#fff;width:100%;padding:10px 0;z-index: 1} header .menu-item .menu-cell{display:block;line-height:unset;width:98%;padding:1% 2%;border-radius:2px;margin:0 auto;color:#2d3650} header .menu-item .menu-cell:not(:first-child){margin-top:10px} header .menu-item .menu-cell span{line-height:unset} header .menu-item .menu-cell.on span:after,header .menu-item .menu-cell:hover span:after{display:none} header{height:60px} header .logo img{width:110px} header.color .bread-icon:after,header.color .bread-icon:after, body.header-white header .bread-icon:after{height:60px;top:-14px} .footer-top{flex-wrap:wrap} .footer-lft,.footer-rgt{width:100%} .footer-lft{text-align:center} .footer-rgt{margin-top:40px;padding-top: 0;} .footer-copyright,.footer-list,.footer-sns{justify-content:center} .footer-copyright{margin-top:15px} .header-white .bread-icon .lines:after,.header-white .bread-icon .lines:before,.header-white header .bread-icon .lines{background: #fff} .header-white header .bread-icon.active .lines{background: 0 0} .header-white .header-search{border-color: #fff} .header-search .search-box{height:40px;width:100%} .header-search .search-box .search-form{padding:11px 20px} .header-language ul a{font-size:14px} .header-language ul{top:50px;width:80px;margin-left:-30px} .header-arrow{display: block} header .menu-sub{position: static;left: 0;transform:none;width: 100%} header .menu-sub a{text-align: left;padding: 10px 4%} .side-nav .sn-item:not(.goTop){display:none} .side-nav .goTop{width:40px;height:40px;border-top-left-radius:4px;border-top-right-radius:4px} .side-nav{top:auto;bottom:10%} .side-nav .goTop .icon{width:20px;height:20px} .sitePlace{top: -58px;} } @media all and (max-width:640px) { /* 移动终端以上 360 适配 */ .footer-list li+li{margin-left: 0;padding-left: 0} .footer-list li{margin-bottom: 10px;padding-bottom: 10px;border-bottom: 1px dashed #474747} .footer-list,.footer-copyright,.footer-link{flex-direction: column} footer .beian{display: block;margin: 10px auto;text-align: center} .footer-list li+li:after{display: none} .footer-copyright .sate{margin-left: 0} .footer-link{padding-top: 20px;margin-top: 20px} .footer-link ul{margin-left: -20px;margin-top: 10px} .side-nav .goTop{width:35px;height:35px;border-top-left-radius:4px;border-top-right-radius:4px} }