body{ font-size: 16px;} .w1440{ width: 1440px; margin: 0 auto;} header{ box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background-color: #fff;} nav li{ padding: 0 25px; position: relative;} nav a.onenav{ line-height: 90px; white-space: nowrap; font-size: 18px; position: relative; display: block;} nav a.onenav::after{ display: block; content: ''; width: 100%; height: 5px; transition: all .36s; background-color: #125999; position: absolute; bottom: 0; left: 0; transform:scale(0,1) ; -webkit-transform:scale(0,1) ; -moz-transform:scale(0,1) ; -ms-transform:scale(0,1) ; -o-transform:scale(0,1) ; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } nav li.on a.onenav::after,nav li:hover a.onenav::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 li dl{position:absolute;text-align: center;min-width: 100%; width: auto;top:100px;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 10px; 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:#125999} 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 #fff;top:-9px;left:50%;margin-left:-9px} nav li dl{ 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; } .iconfont.icon-arrow-down{ transition:all .36s ; -webkit-transition:all .36s ; -moz-transition:all .36s ; -ms-transition:all .36s ; -o-transition:all .36s ; } .iconfont.icon-arrow-down.up{ transform: rotate(180deg) ; -webkit-transform: rotate(180deg) ; -moz-transform: rotate(180deg) ; -ms-transform: rotate(180deg) ; -o-transform: rotate(180deg) ; } @media screen and (min-width:1000px) { nav li:hover dl{ 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%); -webkit-filter:alpha(opacity=100); } nav li>a:hover:after{top:0} nav li>a:hover span{transform:translateY(-100%);-ms-transform:translateY(-100%);-o-transform:translateY(-100%);-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%)} } */ .h_nav{ height: 60px; width: 60px; background-color:#125999; padding: 18px 8px ; align-items: flex-end; display: none;} .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: long 2s linear infinite; } .h_nav .burger:nth-of-type(2){ width: 50%;} .h_nav .burger:nth-of-type(3){ 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); } .hidden{ overflow: hidden;} .idx-banner{background-color:#fff;height:100vh} .idx-banner .swiper-container{width: 100%; z-index: 0; height: 100%;} .idx-banner .swiper-slide{background-color: rgba(255,255,255,.5);} .idx-banner .swiper-wrapper, .idx-banner [data-swiper-parallax]{will-change:transform} .idx-banner .headbg{position:absolute;z-index:0;width:100%;height: 100%;background-repeat:no-repeat;background-size:cover;background-position:center center;-webkit-animation-fill-mode: both; animation-fill-mode: both;} .idx-banner .headbg::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.1);background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 30%);background-image:linear-gradient(to bottom,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 30%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000', endColorstr='#00000000', GradientType=0);z-index: 1;} .idx-banner .swiper-slide-active .headbg{-webkit-animation: scaleBigToSmall 4s; animation: scaleBigToSmall 4s;} .idx-banner .swiper-slide .txt{ display: flex; justify-content: center; flex-direction: column; position: absolute; left: calc((100% - 1440px)/2); height: 100%;z-index: 5;} .idx-banner .swiper-slide .txt .f150{ animation: fadeOutUp 2s; -webkit-animation: fadeOutUp 2s; animation-fill-mode: both;opacity: 0; } .idx-banner .swiper-slide .txt .bot{ animation: fadeOutDown 2s; -webkit-animation: fadeOutDown 2s; animation-fill-mode: both; opacity: 0;} .idx-banner .swiper-slide-active .txt .f150{ animation: fadeInDown 1.5s; animation-fill-mode: both; -webkit-animation: fadeInDown 1.5s; opacity: 1;} .idx-banner .swiper-slide-active .txt .bot{ animation: fadeInUp 1.5s; animation-fill-mode: both; -webkit-animation: fadeInUp 1.5s;opacity: 1;} .idx-banner .pagination{ position: absolute; bottom: 0; right: 5vw; background-color: rgba(255, 255, 255, 0.8); height: 100px; padding: 0 60px; width: 30vw;} .idx-banner .pagination .prev,.idx-banner .pagination .next{ width:60px; height: 60px;} .idx-banner .pagination .prev:hover .iconfont,.idx-banner .pagination .next:hover .iconfont{ color: #00b0b7;} .f150{ font-size: 150px; line-height: 1;} .editorial { display: block; width: 100%; height: 160px; margin: 0; position: absolute; bottom: -1px; left: 0; z-index: 10; } ::selection { background-color: salmon; color: white; } .parallax > use { animation: move-forever 12s linear infinite; } .parallax > use:nth-child(1) { animation-delay: -2s; } .parallax > use:nth-child(2) { animation-delay: -2s; animation-duration: 5s; } .parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 3s; } .inxTit .f20{ letter-spacing: 6px;} .proTop{ color: #999; } .proTop .yuan{ border-radius: 50%; width: 54px; height: 54px; background-color: #e4eaf0; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .proTop .yuan img{ height: 50%;} .proTop .active { color: #333;} .proTop .active .yuan{ background-color: #125999;} .proTop .yuan img{filter: grayscale(100%) brightness(500%);} .gallery-top .swiper-slide{ padding-bottom: 30px; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; -o-border-radius: 25px; } .gallery-top{ display: none;} .gallery-top.active{ display: block;} #swiperTop .swiper-slide{ cursor: pointer; color: #999; display: flex; flex-direction: column; align-items: center; justify-content: center;} #swiperTop .yuan{ border-radius: 50%; width: 54px; height: 54px; background-color: #e4eaf0; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } #swiperTop .yuan img{ height: 50%;} #swiperTop .swiper-slide-thumb-active { color: #333;} #swiperTop .swiper-slide-thumb-active .yuan{ background-color: #125999;} #swiperTop .swiper-slide-thumb-active .yuan img{filter: grayscale(100%) brightness(500%);} .gallery-top .swiper-slide{ padding-bottom: 30px; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; -o-border-radius: 25px; } .protabItem .txt{ width: 42.5%; padding-right: 100px;} .protabItem .txt img.classImg{filter: grayscale(100%) brightness(500%); max-width: 68px; max-height: 68px;} /* height: 460px; */ .protabItem .img{ width: 57.5%; background: url(../images/bg3.jpg) no-repeat center center; background-size: cover;} /* .protabItem .img img{ max-width: 100%; max-height: 100%; } */ /* .protabItem: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); } */ .protabItem .thumb{ max-height: 80%; max-width: 30%; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); } .gallery-top .swiper-pagination{ align-items: center ; justify-content: center; flex-direction: column; display: flex; width: 10px; height: 100%; bottom: 0; left: 23%;} .gallery-top .swiper-pagination .swiper-pagination-bullet{ margin: 5px 0 !important;} .swiperBnt{ width: 130px; position: absolute; right: 20%; color: #dddddd; height: 100%; top: 0; z-index: 10;} .swiperBnt>div:hover .iconfont{ color: #125999;} .areImg .img{display: none;transition: all .36s;animation: scaleIn 2s forwards cubic-bezier(0.4, 0, 0.49, 0.93);-webkit-animation: scaleIn 2s forwards cubic-bezier(0.4, 0, 0.49, 0.93);} .areImg .img.on{ display: block;} .areUl{ width: 100%; height: 100%; position: absolute; top: 0; left: 0;z-index: 2; background-color: rgba(0, 0, 0, 0.3);} .areUl li{ width: 10%; transition: all .36s; border-right: 1px solid rgba(255, 255, 255, 0.1); -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } .areUl li.on{ width: 50%;} .areUl li .txt{ transform: translateY(20px); opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); } .areUl li .more{ margin-top:150px;} .areUl li a{ width: 180px; height: 54px;} .areUl li a:hover{ box-shadow: 0 0 10px rgba(18,89,153, 0.8); transform: translateY(-10px); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); } .areUl li.on .txt{ opacity: 1; transform:translateY(0) ; -webkit-transform:translateY(0) ; -moz-transform:translateY(0) ; -ms-transform:translateY(0) ; -o-transform:translateY(0) ; } #areSwiper .txt{ padding: 10px 20px 20px; border: 1px solid #eee;} .newTop .txt .more{ display: inline-block;} .newTop:hover .txt .more{ padding:6px 20px ; background-color: #125999; color: #fff;} .newTop .txt ,.newTop .img{ height: 420px;} .newTop .img>img{ width: 100%; height: 100%; object-fit: cover;} .newTop:hover { color: #125999;} .newTop: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); } .idxnewsUl li{ width: calc(100% / 3); border-right: 1px solid #e5e5e5;} .idxnewsUl li:nth-child(3n){ border-right: none;} .idxnewsUl li::after{ width: 100%; height: 0; z-index: 1; bottom: 0; left: 0; display: block; content: ''; position: absolute; background-color: #125999; transition: all .36s; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } .idxnewsUl li a{ position: relative; z-index: 10; display: block;} .idxnewsUl li .more{ display: inline-block;} .idxnewsUl li:hover::after{ height: 100%;} .idxnewsUl li:hover a { color: #fff !important;} .idxnewsUl li:hover .more{ transform: translateX(20px); -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); } footer{ background: url(../images/bg1.jpg) no-repeat bottom center; background-size: cover; color: #a0c0e8;} footer .top{ border-bottom: 1px solid rgba(255, 255, 255, 0.2);} .ewmImg{ width: 130px;} footer .bot{ background: rgba(0, 0, 0, 0.15);} footer a:hover{ color: #fff;} .page-aside { position: fixed; right: -6px; bottom: 180px; transform: translateX(100%); z-index: 25; opacity: 0; transition: transform .3s, opacity .3s; -webkit-transition: transform .3s, opacity .3s; -moz-transition: transform .3s, opacity .3s; -ms-transition: transform .3s, opacity .3s; -o-transition: transform .3s, opacity .3s; } .page-aside.show {transform: translateX(0);opacity: 1} .page-aside .img {max-width: 100%} .page-aside-item {width: 54px;text-align: center;height: 50px;position: relative;z-index: 1;cursor: pointer;display: block;background-color: rgba(0, 0, 0, .5);margin: 4px 0;border-top-left-radius: 6px; border-bottom-left-radius: 6px;padding-right: 6px;transition: transform .3s;display: flex;align-items: center;justify-content: center} .page-aside-item .icon {width: 24px} #toolbar{ position: fixed; bottom: 0; left: 0; width: 100%; z-index: 90; display: none;} #toolbar a {width: 25%;padding: 10px 0;text-align: center;color: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column;} #toolbar img{ height: 20px; margin-bottom:5px;} .neiBan{ margin-top: 90px;} .f140{ font-size: 140px;} .numUl{ padding-top: 150px; margin-bottom: 120px;} .numUl .DIN{ display: flex; align-items: flex-start; line-height: 1;background-image: linear-gradient(to right,#0e2acc,#00a0e9); -webkit-background-clip: text; color: transparent;} .introduce{ padding:130px 100px; background: url(../images/bg2.png ) no-repeat bottom left #fff; border-radius: 50px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; } .introduce .left{ width: 37.5%;} .aboutline{ width: 60px; height: 3px;} .introduce .right{ width: 62.5%; } .CultureUl{display: grid; grid-gap: 20px; grid-template-columns: repeat(6,1fr);} .CultureUl li:first-child{ grid-area: 1 / 1 / span 2 / span 2;} /* .CultureUl li{ width: 24.3%;} */ .CultureUl li .desc{ background-color: rgba(0, 0, 0, .5); position: absolute; bottom: 0; left: 0; z-index: 2; width: 100%; color: #fff; } .CultureUl li:first-child .txt{ display: none;} .CultureUl li:first-child .desc,.CultureUl li:first-child .wap-show{ display: none !important;} .CultureUl li:first-child:hover .desc{ opacity:1;background-color: rgba(18,89,153, 0.8);} .CultureUl li .txt{ padding: 0 20px; background-color: rgba(0, 0, 0, .5); bottom: 0; left: 0; width: 100%; position: absolute; z-index: 5; transform: translateY(100%); -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); } .CultureUl li .txt .f14{opacity: 0;} .CultureUl li>img{ object-fit: cover;} @media screen and (min-width:750px) { .CultureUl li:hover .desc{ opacity: 0;} .CultureUl li:nth-child(n+2):hover .txt{ transform:translateY(0) ; background-color: rgba(18,89,153, 0.8); -webkit-transform:translateY(0) ; -moz-transform:translateY(0) ; -ms-transform:translateY(0) ; -o-transform:translateY(0) ; } } .CultureUl li:hover 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) ; } .CultureUl li:hover .txt .f14{opacity: 1;} #envSwiper{ margin-bottom: 20px;} #envSwiper .swiper-slide{ padding-bottom:60px;} #envSwiper .swiper-pagination-bullet{ border-radius:4px ; margin: 0 6px !important; transition: all .36s; -webkit-border-radius:4px ; -moz-border-radius:4px ; -ms-border-radius:4px ; -o-border-radius:4px ; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } #envSwiper .swiper-pagination-bullet.swiper-pagination-bullet-active{ width: 25px;} .poab{ position: absolute; top: 0; left: 0;} .f160{ font-size: 160px; opacity: 0.02;} .areaslist li{ border-radius: 20px; overflow: hidden; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; } .areaslist .img{ width: 62.5%;} .areaslist .txt{ width: 37.5%;} .areaslist .img img{ width: 100%; height: 440px ; object-fit: cover;} .areaslist .txt .more{ border: 1px solid #888; width: 140px; height: 50px; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; -o-border-radius: 25px; } .areaslist li: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) ; } .areaslist .txt .more:hover{ background-color: #125999; transform: scale(0.95); color: #fff; box-shadow: 0 0 10px rgba(18,89,153, 0.8); -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); } .areaslist li:hover{ box-shadow: 0 0 15px rgba(18,89,153, 0.25);} .banback{ position: absolute; bottom: 10px ; right: calc((100% - 1440px) / 2);} .areasnav a{ margin: 0 15px; width: 180px; transition: all .36s; height: 60px; border: 1px solid rgba(18,89,153, 0.15); border-radius: 30px; display: flex; align-items: center; justify-content: center; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } .areasnav a.on{ background-color: #125999; color: #fff;} .areasnav a:hover{ background-color: #125999; color: #fff; box-shadow: 0 0 10px rgba(18,89,153, 0.4); transform: translateY(-6px); -webkit-transform: translateY(-6px); -moz-transform: translateY(-6px); -ms-transform: translateY(-6px); -o-transform: translateY(-6px); } .caselist li{ margin-bottom: 45px; width: 31.2%; border-radius: 25px; margin-right: 3.2%; -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; -o-border-radius: 25px; } .caselist li:nth-child(3n){ margin-right: 0;} .caselist li .txt{ position: relative; } .caselist li .img img{ width: 100%; height: 380px; object-fit: cover;} .caselist li:hover{ border-radius: 0; color: #fff; transform: translateY(-6px); box-shadow: 0 0 10px rgba(18,89,153, 0.5); -webkit-transform: translateY(-6px); -moz-transform: translateY(-6px); -ms-transform: translateY(-6px); -o-transform: translateY(-6px); -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; } .caselist li .txt::after{ width: 0; height: 100%; z-index: 1; position: absolute; left: 0; top: 0; background-color: #125999; display: block; content: ''; transition: all .36s; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } .caselist li: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); } .caselist li:hover .txt::after{width: 100%;} .caselist li .txt div{ position: relative; z-index: 5; } .prolist li{ width: 31.2%; margin-right: 3.2%; margin-bottom: 28px; } .prolist li:nth-child(3n){ margin-right: 0;} .prolist li .img{ background: url(../images/bg3.jpg) no-repeat center center; background-size: cover; height: 350px;} .prolist li .img img{ max-width: 100%; max-height: 90%;} .prolist li:hover .mask-white{ -webkit-transform:scale3d(2.2,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0); transform:scale3d(2.2,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0)} .prolist li:hover { box-shadow: 0 0 10px rgba(18,89,153, 0.25); transform: translateY(-10px); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); } .proInfoOne .img{ background: url(../images/bg3.jpg) no-repeat center center; background-size: cover;} .proInfoOne .img img{ max-height: 90%;} .proInfoOne a{ border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; } .proInfoOne a:hover{ transform: translateY(-10px); box-shadow: 0 0 10px rgba(43 ,23, 110, 0.2); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); } .proTip{ height: 23px;} .newslist .img{ width: 28%;} .newslist .txt{ width: 72%;} .newslist li .img img{ width: 100%; height: 260px; object-fit: cover;} .newslist li:hover { box-shadow: 0 0 10px rgba(18,89,153, 0.25); border-color: transparent;} .newslist li: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); } .newslist li:hover .mask-white{ -webkit-transform:scale3d(2.2,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0); transform:scale3d(2.2,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0)} .newslist li:hover .txt span{ background-color: #125999; color: #fff; padding: 5px 25px;} .artLink { padding: 45px 0; display: flex; align-items: center; justify-content: space-between; color: #666666; } .artLink a { color: #666666; width: 40%; transition: all 0.2s; } .artLink a:hover { color: #125999; } .artLink a p { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; flex: 1; font-size: 15px; } .artLink a:nth-child(2) { margin: 0 15px; background: #125999; color: #ffffff; border-radius: 35px; width: 110px; padding: 10px 0; text-align: center; } .artLink a:nth-child(1) p { width: 94%; } .artLink a:nth-child(3) p { width: 94%; text-align: right; } .link1 span { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; border: 1px solid #d8d8d8; } .contactBanUl { border-top: 1px solid rgba(255, 255, 255, 0.25); border-bottom: 1px solid rgba(255, 255, 255, 0.25);} .contactBanUl span{ width: 70px; height: 70px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .onlineinput{ border: 1px solid #e5e2f0; background-color: #f5f7fa; width: 23.8%; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; } .onlinetextarea{ width: 100%; border: 1px solid #e5e2f0; background-color: #f5f7fa;border-radius: 30px;} .btntj,.btnqx{ border: 1px solid #e5e5e5; border-radius:30px ; margin: 0 15px; width: 230px; height: 60px; display: flex; align-items: center; justify-content: center; -webkit-border-radius:30px ; -moz-border-radius:30px ; -ms-border-radius:30px ; -o-border-radius:30px ; } .btntj{ border-color: #125999;} .pop{ width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 100; background: rgba(0 0 0 / 0.8); display: none;} .searchPop .footSearch{ width: 50%;} .searchClose{ position: absolute; top: 10vh; right: 10vw; cursor: pointer; opacity: 0.8; transition: all .36s;} .searchClose:hover{ opacity: 1; transform: rotate(180deg);} .footSearch .text{ width:73%; height: 56px; padding-left: 15px; line-height: 56px;} .footSearch .submit{ width:27%; height: 56px; text-align: center; line-height: 56px;} .casenav a{ flex: 1; line-height: 50px; text-align: center; border-right: 1px solid #e5e2f0;} .casenav a.on{ background-color: #125999; color: #fff;} .joinOne .text-uppercase{ font-size: 100px;-webkit-text-stroke: 1px rgba(0,0,0,.3);color: transparent;font-weight: bold;} .joinTwo{ background: url(../images/bg5.jpg) no-repeat center center; background-size: cover;} .joinList{ border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; } .joinList dl{ border-bottom: 1px solid #e5e5e5;} .joinList dl dd{ display: none;} .joinList dl.on .tit{ color: #1f61c0;} div.video-play{position:fixed;top:0;bottom:0;right:0;left:0;width:100vw;height:100vh;z-index:10001;display:none} div.video-bg{position:absolute;top:0;bottom:0;width:100%;z-index:1001;background:#0b0b0b;opacity:.8} div.video-wrap{z-index:1002;position:fixed;top:52%;left:50%;-webkit-transform:translate3d(-50%, -52%, 0);transform:translate3d(-50%, -52%, 0);width:1000px;height:570px; } div.video-wrap video{width:100%;height:auto} div.close-btn{cursor: pointer; transition: all .36s; text-align: center; line-height: 40px; z-index: 9999; position: absolute; background: #000; border: 2px solid #fff; width: 50px; height: 50px; border-radius: 50%; opacity: 0.5; right: -20px; top: -25px;} div.close-btn:hover{ transform: rotate(180deg); opacity: 1;} .veideoPlay .text{ position: absolute; top:0 ;left: 0; z-index: 10;} .veideoPlay .text .play{ width:70px; border-radius: 50%;} .veideoPlay .text img{ } @media screen and (max-width:1280px) { div.video-wrap{ width: 90vw;height: auto;} } @media screen and (max-width:750px) { .veideoPlay .text .play{ width:50px; } }