body{font-size: 16px;} .inner{ max-width:1720px; margin: 0 auto; width: 90%; } .pl-inner{ padding-left: 5vw;} .pr-inner{ padding-right: 5vw;} .ml-inner{ margin-left: 5vw;} .mr-inner{ margin-right:5vw;} header{ position: fixed; top: 0; left: 0; width: 100%; z-index: 100; color: #fff;} header .con{ max-width:1720px; margin: 0 auto; width: 90%; } .logoImg{filter: grayscale(100%) brightness(500%); height: 65px; } .oneNav{ line-height:100px; white-space: nowrap; display: block; padding: 0 1.6vw; font-size: 18px; font-weight: bold;} .oneNav span { position: relative;} .oneNav span::after{ width: 100%; height: 2px; display: block; content: ''; background:#fff; transition: all .36s; transform:scale(0,1) ; position: absolute; left: 0; bottom: -10px; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; -webkit-transform:scale(0,1) ; -moz-transform:scale(0,1) ; -ms-transform:scale(0,1) ; -o-transform:scale(0,1) ; } nav li{ position: relative;} nav li.on .oneNav span::after,nav li:hover .oneNav span::after{ transform: scale(1,1); -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); } nav:hover > li:not(:hover) .oneNav{ color: #333; } nav:hover > li:not(:hover) .oneNav span::after{ transform:scale(0,1) ; } nav li dl{position:absolute;text-align: center;min-width:150px; width: auto;top:100%;left: 50%; background:#fff; -webkit-box-shadow:0 13px 42px 11px rgba(0,0,0,.15);box-shadow:0 13px 42px 11px rgba(0,0,0,.15); border-bottom-left-radius:5px;border-bottom-right-radius:5px;} nav li dl dd{white-space: nowrap;height:50px;line-height:50px;border-bottom:1px solid #eee;transition:all .36s ease;-ms-transition:all .36s ease;-o-transition:all .36s ease;-webkit-transition:all .36s ease;-moz-transition:all .36s ease} nav li dl dd:last-child{border-bottom:0} nav li dl dd a{ padding: 0 20px; font-size:14px; color:#333!important; font-weight: normal!important; transition:all .36s ease;-ms-transition:all .36s ease;-o-transition:all .36s ease;-webkit-transition:all .36s ease;-moz-transition:all .36s ease;display:block } nav li dl dd:hover{background:var(--color)} nav li dl dd:hover a{color:#fff!important;} /* nav li dl:before{content:"";position:absolute;border-width:0 9px 9px;border-style:solid;border-color:transparent transparent #f6f1e1;top:-9px;left:50%;margin-left:-9px} */ nav li dl{ pointer-events: none; visibility:hidden; opacity:0; filter:alpha(opacity=0); transform:translateX(-50%) translateY(20px); -ms-transform:; -o-transform:; -webkit-transform:; -moz-transform:; transition:all .5s ease; -ms-transition:all .5s ease; -o-transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; } nav li:hover dl{ pointer-events: auto;visibility:visible; opacity:1; filter:alpha(opacity=100); transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); } .languageBtn{ height: 100px;} .languageBtn span{ font-size: 18px;} .languageBtn dl{ line-height: 40px; position:absolute;text-align: center;min-width:100px; width: auto;top:100%;left: 50%; background:#fff; -webkit-box-shadow:0 13px 42px 11px rgba(0,0,0,.15);box-shadow:0 13px 42px 11px rgba(0,0,0,.15); } .languageBtn dl a{ display: block; border-bottom: 1px solid #e5e5e5;} .languageBtn dl a:hover{ background: var(--color); color: #fff;} .languageBtn dl{pointer-events: none; visibility:hidden; opacity:0; filter:alpha(opacity=0); transform:translateX(-50%) translateY(20px); -ms-transform:translateX(-50%) translateY(20px); -o-transform:translateX(-50%) translateY(20px); -webkit-transform:translateX(-50%) translateY(20px); -moz-transform:translateX(-50%) translateY(20px); transition:all .5s ease; -ms-transition:all .5s ease; -o-transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; } .languageBtn:hover dl{ pointer-events: auto;visibility:visible; opacity:1; filter:alpha(opacity=100); transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); } .languageBtn .iconfont{ transform: scale(0.8); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); } header .line{ width: 1px; height: 1em; background: rgba(255, 255, 255, .6);} header::after{ position: absolute; left: 0; bottom: 0; display: block; content: ''; transition: all .2s; width: 100%; height: 1px; background-color: rgba(255, 255, 255, .15); -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; } header.scroll,header:hover{ box-shadow: 0 0 15px rgba(0, 0, 0, .15); color: #333;} header::after { background-color: #fff; height: 100%; } header .oneNav span::after { background: var(--color); } header nav li.on .oneNav { color: var(--color); } header .logoImg { filter: none; -webkit-filter: none; } header .line { background: #aaa; } .h_nav{ height: 60px; width: 60px; background-color:var(--color); padding: 18px 8px ; align-items: flex-end; display: flex;} .h_nav .burger{ width: 100%; height: 1px ; background: #fff; transition: .8s; display:inline-block; } .h_nav .burger:first-child{ animation: long 2s linear infinite; -webkit-animation:; } .h_nav .burger:nth-of-type(2){ width: 50%;} .h_nav .burger:nth-of-type(3){ animation: long 3s linear infinite; -webkit-animation: long 3s linear infinite; } .h_nav.close .burger:first-child{ display: none;} .h_nav.close .burger:nth-of-type(3){ display: none;} .h_nav.close .burger:nth-of-type(2) { position: relative; z-index: 1; width: 80%;} .h_nav.close .burger:nth-of-type(2):before, .h_nav.close .burger:nth-of-type(2):after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; opacity: 0; z-index: 1;} .h_nav.close .burger:nth-of-type(2) { background: transparent; transform: rotate(-180deg); } .h_nav.close .burger:nth-of-type(2):before, .h_nav.close .burger:nth-of-type(2):after { opacity: 1; transition: all .3s; } .h_nav.close .burger:nth-of-type(2):before { transform: rotate(45deg); } .h_nav .burger:nth-of-type(2):after { transform: rotate(-45deg); } .nav{ color: #fff !important; padding-bottom: 60px; width: 100%; height: calc(100vh - 60px) ; transition:all .6s ; transform: translateX(100%); background-color: #000; position: fixed; top: 60px; right: 0; flex-direction: column; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); -webkit-transition:all .6s ; -moz-transition:all .6s ; -ms-transition:all .6s ; -o-transition:all .6s ; } .nav.show{ transform:translateX(0) ; -webkit-transform:translateX(0) ; -moz-transform:translateX(0) ; -ms-transform:translateX(0) ; -o-transform:translateX(0) ; } .nav li.go-child{ border-top: 1px solid rgba(255, 255, 255, 0.25); position: relative;} .nav li.go-child>a{ line-height: 60px; padding: 0 20px; font-size: 16px;} .h_nav.close{align-items: center; justify-content: center;} .erji{ width: 60px; height: 60px; position: absolute; right: 0 ; top: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; z-index: 10; background: url(../images/jia.png) no-repeat center center; background-size: 40% auto;} .nav li.go-child.on .erji{ background: url(../images/jian.png) no-repeat center center; background-size: 40% auto;} .nav-down li a{ line-height: 50px; border-top: 1px solid rgba(255, 255, 255, 0.25); display: block; padding-left: 25px; font-size: 14px; opacity: 0.8; } .nav{ overflow-y: scroll; } .nav::-webkit-scrollbar {/*滚动条整体样式*/ /*高宽分别对应横竖滚动条的尺寸*/ width: 1px;} .nav::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 3px; background: #555; width: 1px; } .nav::-webkit-scrollbar-track {/*滚动条里面轨道*/border-radius: 3px; background: #000; width: 1px; } .logoImg{ height: 60px;} .footLogo{ height: 100px;} .z_page_swiper{ height: 100vh;overflow: hidden;} .z_slide{ overflow: hidden;} .footer {height: auto;overflow: initial;} .z_kdc_bar{ position: fixed; z-index: 100; left: 20px !important; right: auto !important; top: 50%; transform:translateY(-50%) ; -webkit-transform:translateY(-50%) ; -moz-transform:translateY(-50%) ; -ms-transform:translateY(-50%) ; -o-transform:translateY(-50%) ; } .z_kdc_bar .swiper-pagination-bullet{ width: 14px; height: 14px; margin: 10px 0 !important; opacity: 1; transform: scale(0.8); transition: all .36s; background-color: rgba(255, 255, 255, .5); border: 3px solid transparent; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } .z_kdc_bar .swiper-pagination-bullet.swiper-pagination-bullet-active{ border: 3px solid #fff; background-color: transparent; opacity: 1; transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); } .linka a:hover{ color: var(--color);} .z_kdc_bar.active .swiper-pagination-bullet{background-color: rgba(2, 102, 156, .5);} .z_kdc_bar.active .swiper-pagination-bullet.swiper-pagination-bullet-active{ background: transparent; border-color: var(--color);} .searchBtn:hover{ color: var(--blue);} .searchBox{ background : var(--color); z-index: 15; transform: translateY(-105%); transition:all .6s ; -webkit-transition:all .6s ; -moz-transition:all .6s ; -ms-transition:all .6s ; -o-transition:all .6s ; -webkit-transform: translateY(-105%); -moz-transform: translateY(-105%); -ms-transform: translateY(-105%); -o-transform: translateY(-105%); } .searchBox .form{ width: calc(100% - 80px);} .searchBox .keys{ width: 80%; background: url(../images/search-w.png) no-repeat left center; } .searchBox .submit{ width: 90px; height: 40px; border: 1px solid #fff;} .searchBox input::-webkit-input-placeholder {color:rgba(255, 255, 255, .65);} .searchBox input:-moz-placeholder {color:rgba(255, 255, 255, .65);;} .searchBox input::-moz-placeholder {color:rgba(255, 255, 255, .65);;} .searchBox input:-ms-input-placeholder {color: rgba(255, 255, 255, .65);;} .searchBox.show{ transform: translateY(0%); -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); } .zw{ padding-top: 100px; margin-top: -100px;} .zwHeader{ height: 100px;} .headerPadding { padding-top: 100px;} .mypagination .swiper-pagination-bullet{ margin: 0 4px;} /* .idxBan .swiper-slide::after{ display: block; content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; background: rgba(0, 0, 0, .35); } animation: swiper_img_move 8s linear 0s infinite normal both; */ .idxBanImg{ width: 100vw; height: 100vh; object-fit: cover; min-height: 360px; } .idxBan .text{ ; } .idxBan .text .more{ background-image: linear-gradient(to right,#02669c,#34b6fd);} .idxBan .text .more:hover{ letter-spacing: 2px;} .idxBan .swiper-pagination{ bottom: 6%;} .idxBan .swiper-pagination-bullet {transition: all 0.5s;position: relative;opacity: 1;margin: 0;width: 48px;height: 48px;border: rgba(255, 255, 255, 0) 1px solid;background: transparent;} .idxBan .swiper-pagination-bullet:after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; border-radius: 50%; background: #fff; content: '';} .idxBan .swiper-pagination-bullet.swiper-pagination-bullet-active { transition: all 0.5s; border: #ffffff 1px solid;} .h55{ height: 55px;} .idxMore .round{ width: 55px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); } .idxMore:hover .left{ letter-spacing: 2px; color: var(--color);} .idxMore:hover .round{ transform: rotate(0); background: var(--color); color: #fff; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); } .proItem .more { height: 50px; width: 50px;} .proItem .more .zi { width: 0; opacity: 0;} .proItem .img{ width: 100%; height:200px ;} .proItem::after{ display: block; content: ''; width: 100%; height: 0; position: absolute; left: 0; top: 0; background: url(../images/proItemBg.jpg) no-repeat center top; background-size: 100% 100%; transition: all .36s;-webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; /* background-image: linear-gradient(to bottom,#02669c, #02669c 48%, #c3e3f4 91%,#c3e3f4); */ } .proItem:hover:after{ height: 100%;} .proItem:hover{ color: #fff;} .proItem:hover .more { width: 10em; color: var(--color); } .proItem:hover .more .zi { width:auto ; opacity: 1; margin-right: 10px;} .mySwiperBtn{ width: 64px; height: 64px; z-index: 10; } .mySwiperBtn:hover{ background: var(--color); color: #fff;} .idxPro .mySwiperBtn{ position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .idxPro .mySwiperBtn.prev{ left: -75px;} .idxPro .mySwiperBtn.next{ right: -75px;} .idxAbout .img{ border-radius: 0 10vw 0 0; -webkit-border-radius: 0 10vw 0 0; -moz-border-radius: 0 10vw 0 0; -ms-border-radius: 0 10vw 0 0; -o-border-radius: 0 10vw 0 0; } .yinIcon{ height: 5vw; position: absolute; right: 0; top: -2vw;} .idxAbout .titleEng{ line-height: .8; position: absolute; left: 50%; bottom: 0 ; font-size: 300px;-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;background-image: linear-gradient(to bottom, #eff3f7,transparent);} .idxAboutUl li{ width: calc((100% - 4.2vw)/4); margin-right: 1.4vw;} .idxAboutUl li:nth-child(4){ margin-right: 0;} .idxCooSwiper{ height: 470px;} .idxCooSwiper .swiper-slide{ height: calc((100% - 80px)/3);} .newslist li{ width: calc((100% - 4vw)/3); margin-right: 2vw;} .newslist li:nth-child(3n){ margin-right: 0;} .newslist li .img{ height: 0; padding-bottom: 60%;} .newslist li .more::after{ display: block; content: ''; width: 0; height: 100%; position: absolute; left: 0; top: 0; background: var(--color); transition: all .36s; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } .newslist li:hover{ transform: translateY(-10px); box-shadow: 0 0 15px rgba(2, 102, 156, .15); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); } .newslist li:hover .more{ color: #fff;} .newslist li:hover .more::after{ width: 100%;} .newslist li .tit span{ /*text-decoration: underline; */background-image: linear-gradient(currentColor 0, currentColor 0); background-image: linear-gradient(currentColor 0 0); background-position: 0 calc(100% - 1px); background-size: 0 1px; background-repeat: no-repeat; transition: 400ms cubic-bezier(0.645, 0.045, 0.355, 1), background-position 0s 400ms cubic-bezier(0.645, 0.045, 0.355, 1), color 0ms; -webkit-transition: 400ms cubic-bezier(0.645, 0.045, 0.355, 1), background-position 0s 400ms cubic-bezier(0.645, 0.045, 0.355, 1), color 0ms; -moz-transition: 400ms cubic-bezier(0.645, 0.045, 0.355, 1), background-position 0s 400ms cubic-bezier(0.645, 0.045, 0.355, 1), color 0ms; -ms-transition: 400ms cubic-bezier(0.645, 0.045, 0.355, 1), background-position 0s 400ms cubic-bezier(0.645, 0.045, 0.355, 1), color 0ms; -o-transition: 400ms cubic-bezier(0.645, 0.045, 0.355, 1), background-position 0s 400ms cubic-bezier(0.645, 0.045, 0.355, 1), color 0ms; } .newslist li:hover .tit span{ color:var(--color); background-position: 100% calc(100% - 1px); background-size: 100% 1px} .pic::before {content: "";width: 100%;height: 100%;position: absolute;z-index: 10;left: 0px;} a:hover .pic::before { animation: gradient-rectangle 1s ; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.18, 0.96); -webkit-animation: gradient-rectangle 1s ; } .footerTop{ background: url(../images/footTopBg.jpg) no-repeat center center; background-attachment: fixed; background-size: cover; padding: 18vh 0 ;} .footLogo{ margin-right: 4vw;} .footEwm img{ width: 120px;} .outLink{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .footerBot a:hover{ opacity: .8;} .object{object-fit: cover;} .neibanImg{ width: 100%; max-height: calc(100vh - 100px); object-fit: cover; min-height: 260px; animation: zoomBig 2s forwards; -webkit-animation: zoomBig 2s forwards; } .neiBan .text{ background-image: linear-gradient(to top,rgba(0,0,0,.5),transparent);} .neiBan .line{ width: 1.5em; height: 4px;} .prolistUl li{ width: calc((100% - 135px )/4); margin-right: 45px;} .prolistUl li:nth-child(4n){ margin-right: 0;} .prolistUl li:hover{ transform: translateY(-5px); -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -o-transform: translateY(-5px); } .proLeft{ } .proLeft li{ } .proLeft li::after{ display: block; content: ''; width:0; height: 100%; position: absolute; left: 0; top: 0; background: var(--color); transition: all .36s; } /* .proLeft li:hover::after{ width: 100%;} */ .proLeft li.on::after{ width: 100%;} .proLeft li.on, .proLeft li.on:hover{ color: #fff;} .proLeft li:hover{ color: var(--color);} .proLeft li.on .border-bottom { border-color: transparent;} /* .proRight{ width: calc(100% - 400px );} */ .proRightUl li{ display: none;} .proRightUl li.on{ display: block;} .proRightUl li .title{ border-bottom: 2px solid var(--color);} .proRightUl li .more::after{ display: block; content: ''; width:0; height: 100%; position: absolute; left: 0; top: 0; background: var(--color); transition: all .36s; } .proRightUl li .more:hover::after{ width: 100%;} .proRightUl li .more:hover{ color: #fff; } .w90{ width:88%; max-width: 1360px; margin: 0 auto;} .proInfoOne .img{ height: 55vh;} .proInfoOne .line{ width: 2em; height: 3px;} .proInfoOne .more{ background-image: linear-gradient(to right,#02669c,#34b6fd);} .proInfoOne .more:hover{ letter-spacing: 2px;} .proInfoTwo .left .line{ width: 1.1em; height: 4px; background-image: linear-gradient(to right,#34b6fd,#03679d);} .proInfoTwo .right ul li.on a{ background: var(--color); color: #fff;} .proInfoTwo .right{ position: sticky; top: 100px; right: 0;} .newsRightUl{ position: sticky; right: 0; top: 100px;} .newsRightUl a .img{ width: 185px; height: 115px;} .newsRightUl a .img img{ width: 100%; height: 100%; object-fit: cover;} .newsRightUl a .text{ width: calc(100% - 204px);} .newsRightUl a:hover .img img{ transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); } .contactStyleLine{ height: 3px; width: 5%;} .contactStyle .iconfont{ font-size: 30px; } .yamImg{ max-height: 90%; top: 50%; width: auto; transform: translateY(-50%); right: 2px; z-index: 10;cursor: pointer; position: absolute; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .mapBox{ width: 100% ; height: 600px;} .mapBox *{ box-sizing: content-box !important;} .mapBox img{ max-width: none !important;} .searchTop form{ width: 700px;} .searchTop form .text{ width: calc(100% - 70px); } .searchTop form .submit{ width: 70px; height: 70px; background: url(../images/searchbig.png) no-repeat center center; background-size: 35% auto;} .searchlist li::after{ width: 0; height: 2px; position: absolute; left: 0; bottom: 0; background-color: var(--blue); display: block; content: ''; transition: all .36s; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } .searchlist li .left{ width:70% ;} .searchlist li .right{ width: 70px; height: 70px;} .searchlist li:hover::after{ width: 100%;} .searchlist li:hover .right{ background-color: var(--blue); color: #fff; transform: scale(0.95); -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); } .side_bar { background-color: rgb(255 255 255/ 0.95);border-radius: 5px;box-shadow: 0 0 10px 0 rgba(0, 0, 0, .15);position: fixed;right: 10px;top: 40%;width: 70px;z-index: 100 } .side_bar>ul>li {height: 70px;border-bottom: 1px solid #e5e5e5;} .side_bar>ul>li a span {font-size: 12px;line-height: 2} .messageJump { animation: messageJump .5s linear infinite; -webkit-animation: messageJump .5s linear infinite; } .side_bar>ul>li.side_bar_phone {position: relative} .side_bar>ul>li.side_bar_phone .box { -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; left: 0; opacity: 0; pointer-events: none; position: absolute; top: 50%; -webkit-transform: translate(-100%, -50%); -ms-transform: translate(-100%, -50%); transform: translate(-100%, -50%); -webkit-transition: all .5s; transition: all .5s; visibility: hidden; z-index: 20 } @media (max-width:1180px) { .side_bar>ul>li.side_bar_phone .box { display: none !important } } .side_bar>ul>li.side_bar_phone .box:after { border: 10px dashed transparent; border-left: 10px solid #fff; border-right: none; content: ""; cursor: pointer; font-size: 0; height: 0; line-height: 0; overflow: hidden; -webkit-transform: translateX(-1px); -ms-transform: translateX(-1px); transform: translateX(-1px); width: 0 } .side_bar>ul>li.side_bar_phone .box_inner { background-color: rgb(255 255 255/ 1); border-radius: 5px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1); font-family: Manrope; font-weight: 700; padding: 15px } .side_bar>ul>li.side_bar_phone .box_inner, .side_bar>ul>li.side_bar_phone .box_inner .icon { -webkit-box-align: center; -ms-flex-align: center; --tw-bg-opacity: 1; -webkit-align-items: center; align-items: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } .side_bar>ul>li.side_bar_phone .box_inner .icon { -ms-flex-negative: 0; -webkit-box-pack: center; -ms-flex-pack: center; background-color: rgb(243 245 247/ 1); border-radius: 9999px; -webkit-flex-shrink: 0; flex-shrink: 0; height:42px; -webkit-justify-content: center; justify-content: center; margin-right: 10px; width:42px } .side_bar>ul>li.side_bar_phone .box_inner .icon svg { color: rgb(170 169 175/ 1); height: 40%; width: 40% } .side_bar>ul>li.side_bar_phone .box_inner p { white-space: nowrap } .side_bar>ul>li.side_bar_phone .box_inner p span { color: rgb(255 0 0/ 1); display: block; font-size: var(--20px) } .side_bar>ul>li.side_bar_phone .box_inner p em { color: rgb(148 148 148/ 1); font-size: 14px; font-style: normal } .side_bar>ul>li.side_bar_phone:hover .box { opacity: 1; pointer-events: auto; visibility: visible } .side_bar>ul>li.side_bar_wechat { position: relative } .side_bar>ul>li.side_bar_wechat .box { -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; left: 0; opacity: 0; pointer-events: none; position: absolute; top: 50%; -webkit-transform: translate(-100%, -50%); -ms-transform: translate(-100%, -50%); transform: translate(-100%, -50%); -webkit-transition: all .5s; transition: all .5s; visibility: hidden; width: 120px; z-index: 20 } @media (max-width:1180px) { .side_bar>ul>li.side_bar_wechat .box { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-box-pack: center; -ms-flex-pack: center; bottom: 54px; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; left: 50%; top: auto; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%) } } .side_bar>ul>li.side_bar_wechat .box:after { content: "" } @media (max-width:1180px) { .side_bar>ul>li.side_bar_wechat .box:after { border: 10px dashed transparent; border-bottom: none; border-top: 10px solid #fff; cursor: pointer; font-size: 0; height: 0; line-height: 0; overflow: hidden; -webkit-transform: translateY(-1px); -ms-transform: translateY(-1px); transform: translateY(-1px); width: 0 } } @media (min-width:1180px) { .side_bar>ul>li.side_bar_wechat .box:after { border: 10px dashed transparent; border-left: 10px solid #fff; border-right: none; cursor: pointer; font-size: 0; height: 0; line-height: 0; overflow: hidden; -webkit-transform: translateX(-1px); -ms-transform: translateX(-1px); transform: translateX(-1px); width: 0 } } .side_bar>ul>li.side_bar_wechat .box p { background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1); padding: 5px } .side_bar>ul>li.side_bar_wechat .box p span { display: block; font-size: 12px; text-align: center; white-space: nowrap } .side_bar>ul>li.side_bar_wechat:hover .box { opacity: 1; pointer-events: auto; visibility: visible } @media (min-width:968px) { .side_bar>ul>li.side_bar_backtotop { display: none } } @media screen and (max-width:1440px) { .side_bar{ width: 60px; right: 0;} .side_bar>ul>li{ height: 60px;} .side_bar>ul>li a{ height: 60px; } } @keyframes messageJump { 0% { -webkit-transform: translateY(0); transform: translateY(0) } 25% { -webkit-transform: translateY(-5px); transform: translateY(-5px) } 50% { -webkit-transform: translateY(5px) scale(1.1, .9); transform: translateY(5px) scale(1.1, .9) } 75% { ransform: translateY(-5px) } to { -webkit-transform: translateY(0); transform: translateY(0) } }