::-webkit-scrollbar { background: #fff; width: 5px; height: 5px; border-radius: 30px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0); border-radius: 30px; background: #fff; } ::-webkit-scrollbar { background: #fff; width: 3px; border-radius: 30px; } ::-webkit-scrollbar-thumb { background-color: #0f2e93; border-radius: 30px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0); border-radius: 30px; background: #fff; border-radius: 30px !important; } *{padding: 0px;margin: 0px;} *, ::after, ::before { box-sizing: border-box; } body, h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, fieldset, button, input, textarea, th, td { margin: 0; padding: 0; list-style: none; } html{ font-family:'Urbanist';color: #fff;background-color:#fff;font-size: 62.5%;text-align: start;} h3,h4,h5,h6,.h3,.h4,.h5,.h6,a,span{color: #fff;font-family:'Urbanist';font-weight: normal;display: block;text-align: start;} p{color: #fff;font-family:'Arial';font-weight: normal;display: block;text-align: start;} img {width: 100%;object-fit: cover;transition: 0.3s;display: block;} li {list-style: none;} a {text-decoration: none; display: block;} body,html {height: 100%;width: 100%;} .imgbox {overflow: hidden;position: relative;} :root { --blue: #1e90ff; --white: #ffffff; --dex:#0f2e93; } .clearfix {zoom:1} .clearfix:after {content: '\20'; display: block; clear: both;} .fl { float: left; } .fr { float: right; } input,.form-change select{ -webkit-appearance:none; /*去除系统默认的样式*/ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } @font-face { font-family: "alibb"; font-display: swap; src: url("../font/Alibaba-PuHuiTi-Regular.woff") format("woff"), url("../font/Alibaba-PuHuiTi-Regular.ttf") format("truetype"), url("https://www.chuandao.com/static/chuandao/static/font/Alibaba-PuHuiTi-Regular.otf") format("opentype"), url("../font/Alibaba-PuHuiTi-Regular.svg") format("svg"); } .fa-dr { top: 40%!important; display: flex!important;justify-content: center;align-items: center; background-image: none!important;margin: 0px!important;padding: 0px!important;width: 51px!important;height: 51px!important;font-size: 36px!important;color: #666666;border: 1px solid #666;border-radius: 50%;} @font-face { font-family: "fcmeGotham"; font-display: swap; src: url("../font/fcmeGotham-Bold.ttf") format("truetype"), url("../font/fcmeGotham-Book.ttf") format("truetype"); } @font-face { font-family: "din"; font-display: swap; src: url("../font/D-DIN-Bold.ttf") format("truetype"), url("../font/D-DIN-Bold.ttf") format("truetype"); } /* pc */ .pc-1200px{display: none;} @media only screen and (max-width:1260px){ .pc-1200px{ position: fixed;width: 100%;height: 100%;top: 0;left: 0;background: #333;z-index: 99999999999999999;display: block;} .pc-1200px p{ position: absolute;transform: translateY(-50%);-webkit-transform: translateY(-50%);width: 100%;top: 50%;left: 0;} .pc-1200px p img{ display: block;margin: 0 auto 2em;height: 50px;} .pc-1200px p strong{ display: block;color: #fff;text-align: center;font-size: 2em;letter-spacing: 1px;line-height: 1em;margin-bottom: 2em;} .pc-1200px p span{ display: block;text-align: center;color: #eee;letter-spacing: 1px;font-size: 16px;} } /* h5 */ .drawer-nav { display: none; } .drawer-hamburger{display: none;} .human01_h5,.human02_h5,.i06_h5{display: none;} .i_h5_img {display: none;} .v-ti {display: none;} /* comm */ .icenter1 {width: 1700px;margin: auto;} .icenter {width: 1500px;margin: auto;} .amore{width: 160px;height: 42px;font-size: 14px; text-align: center;line-height: 38px;border-radius: 30px;border: 2px solid rgba(255, 255, 255 , 0.5);position: relative;} .amore::after { content: attr(data-text); position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; color: #fff; -webkit-transform: translate3d(0, 25%, 0); transform: translate3d(0, 25%, 0); } .amore:hover { border-color: #0f2e93; background-color: #0f2e93; } .amore > span { text-align: center; display: block;color: rgba(255, 255, 255 , 0.8); font-size: 14px;} .amore::after, .amore > span { -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); } .amore:hover > span { opacity: 0; -webkit-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0); } .amore:hover::after { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .amore2 {border: 1px solid #0f2e93;line-height: 40px;} .amore2 span {color: #0f2e93;} /* biaodan */ .bd-mask{width: 100%;height: 100%;position: fixed;top:0;left: 0;z-index: 9999;background-color: rgba(0,0,0,0.8);display: none;} .bd-mask .tcbox{width: 100%;height: 100%;position: absolute;top: 0;left: 0;background-image: url();display: flex;display: -webkit-flex;justify-content: center;-webkit-justify-content:center;align-items: center;-webkit-align-items:center;} .bd-mask .tcbox .contwarp{width: 47%;height: auto;background-color: #fff;box-sizing: border-box;padding: 60px 60px;position: relative; border-radius: 16px;} .bd-mask .tcbox .contwarp .min:after{content: '';display: block;clear: both;} .bd-mask .tcbox .contwarp h3,.bd-mask .tcbox .contwarp .h3{font-size: 34px;color: #333;margin-bottom: 10px;text-align: center; margin-bottom: 30px; font-weight: bold;} .bd-mask .tcbox .contwarp form{width: 100%;margin:auto;margin-bottom: auto;box-sizing: border-box;} .bd-mask .tcbox .contwarp form span{display: block;width: 49%;float: left;margin-right: 2%;} .bd-mask .tcbox .contwarp form input,.bd-mask .tcbox .contwarp form select,.bd-mask .tcbox .contwarp form textarea{display: block;width: 100%;background-color: #fff;border:1px solid #ddd;outline: none;border-radius: 5px;margin-bottom: 20px;height: 40px;box-sizing: border-box;padding-left: 10px;font-size: 14px;color: #666;} .bd-mask .tcbox .contwarp form select {padding-left: 6px;color: #666;} .bd-mask .tcbox .contwarp form textarea{height: 120px;resize: none;padding: 10px;} .bd-mask .tcbox .contwarp form span:nth-of-type(2n){margin-right: 0;} .bd-mask .tcbox .contwarp form h3,.bd-mask .tcbox .contwarp form .h3{font-size: 24px;color: #333333;font-weight: bold;text-align: center;margin-bottom: 30px;} .bd-mask .tcbox .contwarp form h3 span,.bd-mask .tcbox .contwarp form .h3 span{color: #ffc602;} .bd-mask .tcbox .contwarp form span:nth-last-child(1){width: 100%;} .bd-mask .tcbox .contwarp font{font-size: 14px;color: var(--dex);display: block;width: 100%;clear: both;margin-top: 20px;} .bd-mask .tcbox .contwarp form button{ border-radius: 30px; cursor: pointer;display: block;width: 160px;height: 40px;border: 1px solid var(--dex);background-color: var(--dex);color: #fff;font-size: 12px;color: #ffffff;margin: auto;outline: none;transition: all .3s;clear: both;padding: 0;margin-top: 30px;} .bd-mask .tcbox .contwarp form button:after{background-color: #ffffff;border-radius: 0;} .bd-mask .tcbox .contwarp form button:hover{color: var(--dex); background: transparent;} .bd-mask .tcbox .contwarp .close {position: absolute; right: -40px; top: -40px; transition: all .3s; pointer-events: painted; width: auto; cursor: pointer;} .bd-mask .tcbox .contwarp .close:hover{transform: rotate(180deg);} .bd-mask .tcbox .contwarp form input::-webkit-input-placeholder,.bd-mask .tcbox .contwarp form textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #666; } .bd-mask .tcbox .contwarp form input::-moz-placeholder,.bd-mask .tcbox .contwarp form textarea::-moz-placeholder { /* Firefox 19+ */ color: #666; } .bd-mask .tcbox .contwarp form input:-ms-input-placeholder,.bd-mask .tcbox .contwarp form textarea:-ms-input-placeholder { /* IE 10+ */ color: #666; } .bd-mask .tcbox .contwarp form input:-moz-placeholder,.bd-mask .tcbox .contwarp form textarea:-moz-placeholder { /* Firefox 18- */ color: #666; } .pagesearch{ display: block;overflow: hidden;min-height: 900px;margin-bottom: 0;} input, button, select, textarea {outline: none;} .searchbanner{ display: block;overflow: hidden;width: 100%;margin: 0 auto 50px;position: relative; max-height: 500px;} .searchbanner p{ display: block;text-align: center;color: #fff;font-size: 40px;line-height: 1em;margin-bottom: 20px;} .searchbanner form{ display: block;width: 50%;margin: 0 auto;overflow: hidden;position: relative;} .searchbanner form .search-field{ display: block; width: 100%; border: 0; background: #eee; height: 40px; text-indent: 1em; font-size: 16px; color: #333;} .searchbanner form .btn{ cursor:pointer; position: absolute;width: 40px;height: 40px;background: #d61818;top: 0;right: 0;border: 0;line-height: 40px;text-align: center;display: block;color: #fff;} .searchbanner form .btn .fa{ color: #fff; font-size: 16px;} .searchbanner dl{ position: absolute;width: 80%;top: 50%;left: 10%;z-index: 3;} .searchbanner img{ display: block;width: 100%} .searchbanner::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1;} .searchlist-titile{display: block;overflow: hidden;width: 100%;margin:30px auto 50px;} .searchlist-titile h3,.searchlist-titile .h3{ text-align: center;color: #fff;font-size: 16px;} .searchlist-titile h3 span,.searchlist-titile .h3 span{color: #f00;display: inline-block; font-size: 20px;} .searchlist-titile .nott{color: #f00;font-size: 20px;margin: 100px 0;} .piclist{ display: block;overflow: hidden;margin-bottom: 100px;} .piclist h4,.piclist .h4{ display: block;color: #000;font-size: 26px;font-weight: 100;border-bottom: 1px solid #eee;margin-bottom: 30px;} .piclist dl{} .piclist dl a{ display: block;overflow: hidden;border-bottom: 1px solid #eee;padding-bottom: 20px;margin-bottom: 20px; display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;align-items: center;-webkit-align-items: center;} .piclist dl a p{ display: block;overflow: hidden;width: 10%;} .piclist dl a p img{display: block; width: 100%;} .piclist dl a dt{display: block;overflow: hidden;width: 88%;} .piclist dl a dt strong{ display: block;color: #333;font-size: 20px;line-height: 30px;margin-bottom: 10px;} .piclist dl a:hover dt strong,.pdflist dl a:hover strong{color:#151a59;} .piclist dl a dt font{ font-size: 14px;color:#666; font-family: Montserrat-Bold;} /* head */ .div1 {position: fixed;top: 0px;left: 0px;width: 100%; z-index: 999; transition: .3s ease;} .head {height: 90px;border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .head .icenter {display: flex; justify-content: space-between; align-items: center; height: 100%; width: 90%;} .head .icenter .logo {width: 187px;filter: grayscale(10) brightness(10);} .head .icenter .right {width: 78%;} .head .icenter .right .content{display: flex;align-items: center;justify-content: space-between;} .head .icenter .right ul {display: flex;align-items: center;width: 85%;} .head .icenter .right ul li {margin: 0 22px; font-size: 18px;font-weight: bold;} @media screen and (max-width:1830px) { .head .icenter .right {width: 82%;} .head .icenter .right ul li {margin: 0 14px; font-size: 20px;} } .pages .head .icenter .right ul li .a{color: #111;} .pages .head{border-bottom: 1px solid rgba(0,0,0,.1);} .pages .head .icenter .logo{filter:none;} .pages .head .icenter .right .tools a{color: #111;} .pages .head .tools .lang img{filter: brightness(0);} .pages .head .icenter .right .tools a:nth-of-type(2){border-color: rgb(111 109 109 / 40%);} .head .icenter .right ul li .a {height: 90px; line-height: 90px;font-weight: 600;text-transform: capitalize;} .head .icenter .right ul li:last-child{margin-right: 0px;} .head .icenter .right .tools{display: flex;align-items: center;} .head .icenter .right .tools a:first-child{font-size: 17px;} .head .icenter .right .tools a.cnn:first-child{min-width: 140px;text-align: center;} .head .icenter .right .tools a {font-size: 19px;color: #fff;} .head .icenter .right .tools a:nth-of-type(2) {padding: 0 14px;margin: 0 14px;position: relative;border-left: 1px solid rgba(255, 255, 255, 0.4);border-right: 0;} .head .tools .lang img { width: 23px; margin-right: 8px;} .head .icenter .right .tools .lang{display: flex;align-items: center;font-size: 16px;} .div1:hover,.div2,.div3 {background-color: #fff; -webkit-box-shadow: 0 6px 15px 0 rgba(0,0,0,.2); box-shadow: 0 6px 15px 0 rgba(0,0,0,.2);} .div1:hover .head{ -webkit-box-shadow: 0 6px 15px 0 rgba(0,0,0,.2); box-shadow: 0 6px 15px 0 rgba(0,0,0,.2);} .div1:hover .head .icenter .logo ,.div2 .head .icenter .logo ,.div3 .head .icenter .logo{filter: none;} .div1:hover .head .icenter li a ,.div2 .head .icenter li a,.div3 .head .icenter li a{color: #333;} .div1:hover .head .icenter .tools a ,.div2 .head .icenter .tools a,.div3 .head .icenter .tools a {color: #666;} .div1:hover .head .icenter .right .tools a:nth-of-type(2),.div2 .head .icenter .right .tools a:nth-of-type(2) ,.div3 .head .icenter .right .tools a:nth-of-type(2){border-color: rgb(111 109 109 / 40%);} .div1:hover .head .icenter .right .tools .lang img,.div2 .head .icenter .right .tools .lang img,.div3 .head .icenter .right .tools .lang img{filter: invert();} .head .icenter .right ul li a:hover {color: #0f2e93;} /* nav_list */ .head .icenter .right ul li:hover .slide { height: 340px; padding: 40px 11%; } .head .icenter .right ul li .slide .imgbox { height: 238px; display: block; overflow: hidden; width: 32%; border-right: 1px solid #eee; padding-right: 3%; margin-right: 2%;} .head .icenter .right ul li .slide .imgbox img {height: 100%;} .head .icenter .right ul li .slide { display: flex; box-shadow: 0 15px 15px 0 rgba(0,0,0,.1); z-index: -1; align-items: center; box-sizing: border-box; transition: 0.5s; padding: 0 11%; overflow: hidden; height: 0px; position: absolute; top: 90px; background: #fff; left: 50%; transform: translateX(-50%); width: 100%;} .head .icenter .right ul li .slide .min { width: 672px; display: flex; justify-content: flex-start; margin-top: -80px; flex-flow: wrap; height: 160px;} .head .icenter .right ul li .slide .min a { width: 50%; display: flex; margin-right: 0px; font-size: 16px; color: #666; align-items: center; height: 80px;} .head .icenter .right ul li .slide .min a:nth-of-type(2n){margin-right: 0px;} .head .icenter .right ul li .slide .min a:nth-of-type(4n) {margin-right: 0px;} .head .icenter .right ul li .slide .min a:hover {color: #0f2e93; } .head .icenter .right ul li .slide .min a img {width: 42px; margin-right: 20px;} .head .icenter .right ul li .slide .min a:hover img { transform: rotateY(180deg);} .head .icenter .right ul li .slide .min a:last-child {margin-right: 0px;} .head .icenter .right ul li .slide2 { padding: 0 11% 0 0%; display: flex; box-shadow: 0 15px 15px 0 rgba(0,0,0,.1); z-index: -1; align-items: center; box-sizing: border-box; transition: 0.5s; overflow: hidden; height: 0px; position: absolute; top: 90px; background: #fff; left: 50%; transform: translateX(-50%); width: 100%;} .head .icenter .right ul li:hover .slide2 { height: 705px; padding: 0px 11% 0px 0%; } .head .icenter .right ul li .slide2 .le { background-color: rgb(246, 246, 246); padding: 24px 0; padding-left: 16.5%; height: 100%;} .head .icenter .right ul li .slide2 .le .min{ width: 400px; cursor: pointer; align-items: center; display: flex; padding: 25px 35px; position: relative;transition: .3s ease;} .head .icenter .right ul li .slide2 .le .min:hover img,.head .icenter .right ul li .slide2 .le .min.on img{transform: rotateY(180deg);-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);} .head .icenter .right ul li .slide2 .le .min::before { content: ""; opacity: 0; transition: 0.3s; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); content: ""; height: 100%; background-color: #5055a9; width: 2px;} .head .icenter .right ul li .slide2 .le .min img { width: 45px; margin-right: 24px;} .head .icenter .right ul li .slide2 .le .min span { font-size: 18px; color: #666;text-transform: capitalize;font-weight: bold;} .head .icenter .right ul li .slide2 .le .min.on span {color: #fff;} .head .icenter .right ul li .slide2 .le .min.on:nth-child(1) {background:url("../images/navi1.jpg") no-repeat;background-size: cover;background-position: center center;} .head .icenter .right ul li .slide2 .le .min.on:nth-child(2) {background:url("../images/navi2.jpg") no-repeat;background-size: cover;background-position: center center;} .head .icenter .right ul li .slide2 .le .min.on:nth-child(3) {background:url("../images/navi3.jpg") no-repeat;background-size: cover;background-position: center center;} .head .icenter .right ul li .slide2 .le .min.on:nth-child(4) {background:url("../images/navi4.jpg") no-repeat;background-size: cover;background-position: center center;} .head .icenter .right ul li .slide2 .le .min.on:nth-child(5) {background:url("../images/navi5.jpg") no-repeat;background-size: cover;background-position: center center;} .head .icenter .right ul li .slide2 .le .min.on:nth-child(6) {background:url("../images/navi6.jpg") no-repeat;background-size: cover;background-position: center center;} .head .icenter .right ul li .slide2 .le .min.on:nth-child(7) {background:url("../images/navi7.jpg") no-repeat;background-size: cover;background-position: center center;} .head .icenter .right ul li .slide2 .le .min.on::before {opacity: 1;} .head .icenter .right ul li .slide2 .ri {padding: 60px 120px; height: 100%; display: flex; align-items: flex-start;} .head .icenter .right ul li .slide2 .ri dl{display: none;flex-flow: wrap; opacity: 0;transition: 0.3s; justify-content: center;} .oo{width: 100%;text-align: center;} .oo a{display: inline-block;text-align: center;} .head .icenter .right ul li .slide2 .ri dl a.more{margin-top: 20%;} .head .icenter .right ul li .slide2 .ri dl.active { display: flex; animation: bian 0.8s linear forwards; width: 823px;justify-content: flex-start;} .head .icenter .right ul li .slide2 .ri dl dd { width: 31%; margin-right: 3.3333%; margin-bottom: 50px; height: fit-content; line-height: inherit; } .head .icenter .right ul li .slide2 .ri dl dd a {height: fit-content;line-height: inherit;} .head .icenter .right ul li .slide2 .ri dl dd:nth-of-type(3n) {margin-right: 0px;} .head .icenter .right ul li .slide2 .ri dl dd img{ width: 170px; margin: auto;} .head .icenter .right ul li .slide2 .ri dl dd h4,.head .icenter .right ul li .slide2 .ri dl dd .h4 {font-size: 16px;color: #666;margin-top: 10px;text-align: center;text-transform: capitalize;} .head .icenter .right ul li .slide2 .ri dl dd:hover a h4,.head .icenter .right ul li .slide2 .ri dl dd:hover a .h4 {color: #0f2e93;} @keyframes bian { 100%{ opacity: 1; } } .head .icenter .right .tools a:nth-of-type(2) {position: relative;} .head .icenter .right .tools a:nth-of-type(2) .p_body { transform: translateX(-50%); left: 50%; top: 72px; background-color: #fff; -webkit-box-shadow: 0 6px 15px 0 rgb(0 0 0 / 20%); box-shadow: 0 6px 15px 0 rgb(0 0 0 / 20%); font-size: 20px; color: #0f2e93; position: absolute; width: 220px; height: 60px; display: none; justify-content: center; align-items: center; border-radius: 10px; font-weight: bold; font-family: Arial;} .head .icenter .right .tools a:nth-of-type(2) .p_body::after { position: absolute; content: ""; left: 50%; transform: translateX(-50%) rotate(134deg); top: -8px; width: 18px; height: 18px; background-color: #fff;} .head .icenter .right .tools a:nth-of-type(2):hover .p_body {display:flex;} /* banner */ .index_banner {height: 100%;width: 100%;overflow: hidden;position: relative;} .index_banner .box{position: relative;height: 100%;} .index_banner .box .bg {height: 100%;} .index_banner .box .bg img{height: 100%;} .index_banner .box::after { content: ""; display: inline-block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.35); position: absolute; left: 0; top: 0; } .index_banner.strength .box::after{background-color: rgba(0, 0, 0, 0);} .index_banner .box .text { z-index: 1; position: absolute; left: 50%; top: 55%; transform: translate(-50%,-30%); display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transition: 1s;} .index_banner .swiper-slide-active .box .text {transform: translate(-50%,-50%);opacity: 1;} .index_banner .box .text .line {width: 72px;height: 3px;background-color: #fff;margin-bottom: 20px;margin-top: 10px;} .index_banner .box .text h3,.index_banner .box .text .h3 { font-size: 75px; font-weight: bold; margin-bottom: 0; white-space: nowrap; line-height: 100px;font-family: arial;line-height: 1;padding-bottom: 10px; } .index_banner .box .text h4,.index_banner .box .text .h4 {font-size: 18px; margin-bottom: 60px; font-weight: normal; width: 968px; text-align: center;line-height: 1.5;} .index_banner.strength .box .text h4,.index_banner.strength .box .text .h4{font-size: 24px;font-weight:bold;text-shadow: 0px 5px 20px #333;} .index_banner .indexSwiper {width: 100%;height: 100%;} .index_banner .box .bg video {width: 100%;height: 100%;object-fit: cover; display: block;} .index_banner .swiper-slide-active .box .bg img {width:100%;height: 100%;object-fit: cover;transition: 12s;transform: scale(1.2);} .index_banner .scroll { height: 50px; width: 20px; position: absolute; cursor: pointer; left: 50%; transform: translateX(-50%); bottom: 0px; z-index: 1;} .index_banner .scroll::after { position: absolute; content: ""; left: 50%; top: 50%; width: 2px; height: 100%; background-color: rgba(255, 255, 255, 0.4); transform: translate(-50%, -50%); } .index_banner .scroll .dot { width: 7px; height: 7px; background-color: #fff; position: absolute; left: 50%; transform: translateX(-50%); top: 0px; animation: 1.5s linear 0.5s infinite hua; } .index_banner .scroll span { color: #fff; font-size: 13px; position: absolute; top: -25px; left: 50%; transform: translateX(-50%); white-space: nowrap;} @keyframes hua { from { top: 0%; } to { top: 80%; } } .index_banner .indexSwiper-pagination {left: auto!important; right: 5%; display: flex; flex-direction: column; top: auto; transform: translateY(-50%); width: fit-content!important; bottom: -3px!important;} .index_banner .indexSwiper-pagination .swiper-pagination-bullet-active { opacity: 1; background: #fff;} .index_banner .indexSwiper-pagination .swiper-pagination-bullet {opacity: 1;background-color: #fff; position: relative;} .index_banner .indexSwiper-pagination .swiper-pagination-bullet::after{ display: none; opacity: 0; position: absolute;content: ""; border-radius: 50%; width: 30px;height: 30px;border: 1px solid #fff;left: 50%;top: 50%;transform: translate(-50%,-50%);} .index_banner .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 19px 0px; } .index_banner .indexSwiper-pagination .swiper-pagination-bullet-active::after{opacity: 0.5;display: block;} /* index01 */ .index01{min-height: 180vh;position: relative;} .index01 .short{transition: 0.2s; position: absolute;z-index: 2;top: 88px;left: 50%;transform: translateX(-50%);width: 950px;display: flex;flex-direction: column;justify-content: center;align-items: center;} .index01 .com_h3 {font-size: 52px;} .index01 .short h4,.index01 .short .h4 {font-size: 30px;color: #0f2e93;margin: 11px 0;} .index01 .short p { text-align: center; font-size: 18px; line-height: 28px; color: #666666;} .index01 .content {min-height: 90vh; position: sticky; position: -webkit-sticky; top: 90px; overflow: hidden; height: calc(100vh - 90px);} .index01 .content .up_img{ position: absolute; width: 100%; transition: 0.3s; height: 110%; top:55%; left: 50%;transform: translate(-50%,-50%);z-index: 3;} .index01 .content .up_img img {height: 100%;} .index01 .content::after { content: ""; display: inline-block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.35); position: absolute; left: 0; top: 0; } .index01 .text_cc{ opacity: 0;position: absolute;z-index: 2;top: 50%;left: 50%; transform: translate(-50%,-10%);width: 842px;display: flex;flex-direction: column;justify-content: center;align-items: center;} .index01 .text_cc .com_h3 {color: #fff;text-transform: capitalize;} .index01 .text_cc h4,.index01 .text_cc .h4 { font-size: 30px; color: #fff; margin: 20px 0;} .index01 .text_cc p {text-align: center; font-size: 20px; line-height: 30px;} .index01 .text_cc img { margin-top: 44px; width: 226px; transition: 1s; transition-delay: 1s;transform: scale(1.65);opacity: 0;} .index01 .text_cc h6,.index01 .text_cc .h6{ font-size: 30px;margin-top: 20px;color: #fff;transition: 1s; transition-delay: 1.5s;opacity: 0;transform: translateY(20px);} .index01 .text_cc.show {opacity: 1;transform: translate(-50%,-50%); transition: 0.8s; transition-delay: 0.3s; } .index01 video {width: 100%;height: 100%;object-fit: cover; display: block;} .index01 .text_cc.show1 { transition: 0.0s;} .index01 .text_cc.show img { transform: scale(1);opacity: 1;} .index01 .text_cc.show h6,.index01 .text_cc.show .h6{ opacity: 1;transform: translateY(0);} .index01 .text_cc.show1 img {transition: 0.0s;} .index01 .text_cc.show1 h6,.index01 .text_cc.show1 .h6 {transition: 0.0s;} /* index02 */ .index02 { padding: 60px 0 80px; overflow: hidden; position: relative; } .index02 .icenter { padding: 50px; box-sizing: border-box; padding-top: 0px; } .index02 .bg { position: absolute; left: 50%; top: 41%; transform: translate(-50%, -50%); z-index: -1; width: 1603px; height: 600px; overflow: hidden; } .index02 .bg img { width: 100%; height: auto; width: 100%; height: auto; filter: brightness(0.9); animation: ro1 90s infinite linear; padding: 30px;} @keyframes ro1 { to {transform: rotate(1000deg);} } .index02 .top { margin-bottom: 75px; width: fit-content; margin: auto;justify-content: center;} .index02 .top h3,.index02 .top .h3 { font-size: 60px; color: #333; margin-bottom: 31px; font-weight: 600;line-height: 1.1;} @keyframes shine { from{background-position:0% center;} to {background-position: 300% center} } .index02 .top h4,.index02 .top .h4 {font-size: 22px; font-family: "airal"; color: #0f2e93; position: relative; display: flex; justify-content: flex-end;} .index02 .top h4::after,.index02 .top .h4::after { position: absolute; content: ""; right: -38px; height: 75px; width: 3px; background-color: #0f2e93; top: 50%; transform: translateY(-50%); } .index02 ul { display: flex; justify-content: space-between; align-items: flex-end; } .index02 ul li { width: 20%; display: flex; justify-content: center; align-items: center; flex-direction: column; } .index02 ul li h4,.index02 ul li .h4 { font-size: 24px; color: #fff; } .index02 ul li h4 strong,.index02 ul li .h4 strong { font-size: 70px; font-family: "alibb"; font-weight: bold; margin-right: 10px; line-height: 55px; } .index02 ul li h5,.index02 ul li .h5 { text-align: center; font-size: 16px; line-height: 26px; color: #fff; width: 82%; } .index02 ul li:nth-of-type(1) { padding: 45px 0; background-color: #2a4ec4; } .index02 ul li:nth-of-type(1) h4,.index02 ul li:nth-of-type(1) .h4 { margin-bottom: 20px; } .index02 ul li:nth-of-type(2) { padding: 70px 0; background-color: #0f2e93 } .index02 ul li:nth-of-type(2) h4,.index02 ul li:nth-of-type(2) .h4 { margin-bottom: 20px; } .index02 ul li:nth-of-type(3) { padding: 70px 0; background-color: #2a4ec4;} .index02 ul li:nth-of-type(5) { padding: 70px 0; background-color: #2a4ec4;} .index02 ul li:nth-of-type(3) h4,.index02 ul li:nth-of-type(3) .h4 { margin-bottom: 20px; } .index02 ul li:nth-of-type(5) h4,.index02 ul li:nth-of-type(5) .h4 { margin-bottom: 20px; } .index02 ul li:nth-of-type(4) { padding: 52px 0; background-color: #0f2e93} .index02 ul li:nth-of-type(4) h4,.index02 ul li:nth-of-type(4) .h4 { margin-bottom: 20px; } .index02 ul li:nth-of-type(1):hover, .index02 ul li:nth-of-type(3):hover,.index02 ul li:nth-of-type(5):hover { background-color:#2746ab; } .index02 ul li:nth-of-type(2):hover, .index02 ul li:nth-of-type(4):hover { background-color:#1538aa; } /* index03 */ .index03Swiper {overflow: hidden; position: relative;} .index03 {position: relative;overflow: hidden;} .index03Swiper .swiper-slide {position: relative;} .index03Swiper::before {content: ""; position: absolute; left: 0%; top: 25%; transform: translateY(-50%); height: 1px; width: 8%; background-color: rgba(255, 255, 255, 0.2); z-index: 5;} .index03Swiper::after { content: ""; position: absolute; left: 52%; top: 25%; transform: translateY(-50%); height: 1px; width: 70%; background-color: rgba(255, 255, 255, 0.2); z-index: 5;opacity: 0;} .index03Swiper .swiper-slide-active .cc_img{transform: scale(1.1);} .index03Swiper .swiper-slide-active .text {transform: translate(-50%,0px);opacity: 1;} .index03Swiper .swiper-slide::after { z-index: 1; content: ""; display: inline-block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.35); position: absolute; left: 0; top: 0; } .index03 .text {position: absolute;left: 50%;top: 78px;z-index: 3;transform: translate(-50%,20px);transition: all 1s ease 0s;opacity: 0;} .index03 .cc_img {height: calc(100vh - 90px);transition: all 5s cubic-bezier(0.04, 0.79, 1, 1);} .index03 .text .icon {width: 80px;margin-bottom: 32px;} .index03 .text h4,.index03 .text .h4 { display: flex;align-items: center; font-size: 36px;font-weight: bold;margin-bottom: 17px;position: relative;width: 42%; font-family: arial;display: none ;} .index03 .text h5,.index03 .text .h5 {font-size: 50px;margin-bottom: 30px;font-weight: 600;text-transform: capitalize;} .index03 .text h6,.index03 .text .h6 {font-size: 18px;margin-bottom: 60px;max-width: 60%;} .index03 .tab { z-index: 2; position: absolute;right: 0px;top: 0px;height: 100%;width: 25%;} .index03 .tab .tab_cc{ cursor: pointer; height: 33.333%; border-bottom: 1px solid rgba(255, 255, 255, 0.4); padding: 0 50px 0 80px; display: flex; align-items: center; background-color: rgba(0,0,0,0.3); justify-content: space-between;} .index03 .tab .tab_cc .icon {width: 42px;margin-bottom: 20px;} .index03 .tab .tab_cc h4,.index03 .tab .tab_cc .h4 {font-size: 30px; margin-bottom: 4px; line-height: 30px;text-transform: capitalize;} .index03 .tab .tab_cc h5,.index03 .tab .tab_cc .h5 {font-size: 16px;font-family: arial;display: none;} .index03 .tab .tab_cc .bt_hide {transform: translateY(50px); opacity: 0;transition: 0.5s;width: 50px;} .index03 .tab .tab_cc.active {background-color: rgba(15,46,147,.8);} .index03 .tab .tab_cc.active .bt_hide {opacity: 1;transform: translateY(0px);} .index03 .tab .tab_cc.active .bt .icon {display: none;} .index03 .tab .tab_cc.active .bt {animation: down 0.5s 1;} .index03 .tab .tab_cc:hover {background-color: rgba(15,46,147,.8);} .index03 .tab .tab_cc:hover .bt_hide {opacity: 1;transform: translateY(0px);} .index03 .tab .tab_cc:hover .bt .icon {display: none;} .index03 .tab .tab_cc:hover .bt {animation: down 0.5s 1;} @keyframes down { 0%{ transform: translateY(-50px); /* transition: 0.5s; */ } 100%{ transform: translateY(0px); /* transition: 0s; */ } } /* index04 */ .index04 { padding: 105px 0 130px; position: relative; overflow: hidden;} .index04 .top {display: flex;justify-content: space-between;align-items: flex-end;margin-bottom: 30px;} .index04 .top .title span{font-size: 18px;margin-bottom: 8px;color: #666;} .index04 .bot {display: flex;height: 670px;} .index04 .bot dd {width: 16.6%;position: relative;transition: 0.4s; overflow: hidden;} .index04 .bot dd a { width: 100%; height: 100%; position: relative; transition: 0.4s; overflow: hidden;z-index: 1;} .index04 .bot dd a::after { content: ""; display: inline-block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); position: absolute; left: 0; top: 0; } .index04 .bot dd:hover a::after {background-color: rgba(0, 0, 0, 0.25);} .index04 .bot dd.dan a::after {background-color: rgba(0, 0, 0, 0.7);} .index04 .bot dd .bg_img {height: 100%;} .index04 .bot dd .ti-text { position: absolute; left: 50%; transform: translate(-50%,-50%); z-index: 1; transition: 0.5s; opacity: 1; font-size: 18px; top: 68%; height: 48px; white-space: nowrap;} .index04 .bot dd:hover .ti-text{top: 60%; opacity: 0;} .index04 .bot dd .icon {width: 61px; position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%);z-index: 1;transition: 0.5s;opacity: 1;} .index04 .bot dd .icon::before {position: absolute; content: ""; height: 70px; width: 1px; transform: translateX(-50%); left: 50%; background-color: rgba(255, 255, 255 , 0.4); top: -93px;} .index04 .bot dd .content { position: absolute;top: 120px;left: 85px; opacity: 0; z-index: 1; } .index04 .bot dd:hover .content { transition: 0.4s;transition-delay: 0.15s; opacity: 1;top: 90px;} .index04 .bot dd .content .con_img {width: 72px;margin-bottom: 26px;} .index04 .bot dd .content h4,.index04 .bot dd .content .h4 {font-size: 40px;font-weight: bold;} .index04 .bot dd p {font-size: 18px;line-height: 26px;margin-bottom: 155px;width: 483px;} .index04 .bot dd .tips { display: flex; opacity: 0; justify-content: center;align-items: center; z-index: 3; width: 48px;height: 48px;border-radius: 50%;border: 1px solid #fff;font-size: 16px;position: absolute;top: 50%;transform: translateY(-50%);right: -32px;} .index04 .bot dd .tips::before { position: absolute; content: ""; height: 246px; background-color: #fff; width: 1px; top: -246px; left: 50%; transform: translateX(-50%);} .index04 .bot dd .tips::after { position: absolute; content: ""; height: 246px; background-color: #fff; width: 1px; top: 46px; left: 50%; transform: translateX(-50%);} .index04 .bot dd:hover {width: 74%;} .index04 .bot dd:hover .icon {bottom: 20px;opacity: 0;} .index04 .bot dd:hover .tips {transition: 0.4s; transition-delay: 0.15s; right: 32px;opacity: 0.5;} .jian { display: flex; padding: 16px; justify-content: center; align-items: center; width: 87px; height: 19px; margin: 18px 0;} .jian .cc { border: 8px solid transparent; border-left: 8px solid #fff;} .jian .cc.cc1{opacity: 0.4;animation:mymove1 1.2s infinite; -webkit-animation:mymove1 1.2s infinite} .jian .cc.cc2{opacity: 0.7;animation:mymove1 1.2s 0.2s infinite; -webkit-animation:mymove1 1.2s 0.2s infinite} .jian .cc.cc3{opacity: 1;animation:mymove1 1.2s 0.4s infinite; -webkit-animation:mymove1 1.2s 0.4s infinite} .jian .cc.cc4{opacity: 1;animation:mymove1 1.2s 0.6s infinite; -webkit-animation:mymove1 1.2s 0.6s infinite} .jian .cc.cc5{opacity: 1;animation:mymove1 1.2s 0.8s infinite; -webkit-animation:mymove1 1.2s 0.8s infinite} @keyframes mymove1 { 0% {opacity: 1;} 100% {opacity: 0.2;} } @-webkit-keyframes mymove1 { 0% {opacity: 1;} 100% {opacity: 0.2;} } /* index05 */ .index05 {margin-bottom: 20px;position: relative;background-color: #f5f5f5;overflow: hidden;} .index05 .bg { width: 51.5%; background: url("../images/zsbg.jpg") no-repeat; background-size: auto; height: 708px; position: relative; left: 0%; clip-path: polygon(0% 0%, 78% 0%, 100% 100%,0% 100%); background-attachment: fixed;} .index05 .bg::after { content: ""; display: inline-block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); position: absolute; left: 0; top: 0; } .index05 .icenter1 {display: flex; justify-content: space-between; align-items: center; position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%);} .index05 .icenter1 .left {width: 35%;} .index05 .icenter1 .left h3,.index05 .icenter1 .left .h3 {font-size: 46px;font-weight: bold;font-family: arial;line-height: 60px;margin-bottom: 50px;text-transform: uppercase;} .index05 .icenter1 .left h4,.index05 .icenter1 .left .h4 {font-size: 38px; margin-bottom: 14px; line-height: 46px;} .index05 .icenter1 .left p {font-size: 18px;line-height: 30px;margin-bottom: 60px;} .index05 .icenter1 .right { width: 42%; display: flex; position: relative; justify-content: flex-end;} .index05 .icenter1 .right .ph { position: absolute; left: -180px; top: -287px; height: auto;padding-top: 5%;width: 128%;} .index05 .icenter1 .right .pei { align-items: center; display: flex; flex-direction: column; justify-content: center; position: relative; top: 33px;} .index05 .icenter1 .right .pei img {width: 180px;margin-bottom: 15px;} .index05 .icenter1 .right .pei h4,.index05 .icenter1 .right .pei .h4 {font-size: 40px;color: #333333;margin-bottom: 28px;} .index05 .icenter1 .right .pei h5,.index05 .icenter1 .right .pei .h5 {font-size: 14px; line-height: 22px; color: #333333; margin-bottom: 30px; text-align: center; width: 303px;} .index05 .icenter1 .right .pei h6,.index05 .icenter1 .right .pei .h6 {display: flex;} .index05 .icenter1 .right .pei h6 a,.index05 .icenter1 .right .pei .h6 a {text-decoration: underline;color: #999999;font-size: 14px;} .index05 .icenter1 .right .pei h6 a:nth-of-type(1),.index05 .icenter1 .right .pei .h6 a:nth-of-type(1){margin-right: 10px;} .index05 .th_box { width: 100px; right: 60px; top: 45px; position: absolute; } /* index06 */ .index06 {padding: 150px 0 100px; position: relative; overflow: hidden; background: url(../images/sy_ywbj1.jpg) 100%; background-size: cover;} .index06 .icenter {position: relative;} .index06 .title {position: absolute;top: -20px;left: 50px; z-index: 1;} .index06 .title .com_h3 {color: #fff;margin-bottom: 8px;} .index06 .title h4,.index06 .title .h4 {font-size: 30px;font-family: arial;} .index06 .num {position: absolute;bottom: 80px;left: 50px;} .index06 .num span {font-size: 20px;margin-bottom: 5px;font-weight: bold;} .index06 .num h4,.index06 .num .h4 { font-size: 40px; font-family: 'alibb'; display: flex; align-items: flex-end; margin-bottom: 22px; line-height: 85px;} .index06 .num h4 strong,.index06 .num .h4 strong{font-size: 90px;font-weight: bold;margin-right:5px; font-family: "alibb";} .index06 .num h4 i,.index06 .num .h4 i {line-height: 42px;} .index06 .num h5,.index06 .num .h5 {font-size: 24px;font-weight: normal;color: #fff;margin-bottom: 10px;} .index06 .num h6,.index06 .num .h6 {font-size: 16px;} .index06 .map { width: 86%; margin-left: 14%; height: 618px; position: relative; z-index: 10; } .index06 .map .ditu {position: absolute;right: 0px;bottom: 0px;} .index06 .map .ditu img {width: 100%; transition: 0s; opacity: 0.4;} .index06 .map .ditu.active img {opacity: 1;} .ditu2 {z-index: 3;} .mapicon{ position: absolute;top: 0;left: 0; opacity: 1;transition: all .3s;z-index: 10;} .mapicon:hover {z-index: 20;opacity: 1!important;} .mapicon:hover .detail{display:flex;} .mapicon .detail { display: none; width: 400px; position: absolute; top: -182px; left: -174px; background-color: rgba(255, 255, 255, 0.85); justify-content: space-between; align-items: center; padding: 15px; border-radius: 6px; } .mapicon .detail .imgbox {width: 155px;} .mapicon .detail .imgbox img { width: 100%; height: 140px;border-radius: 6px;} .mapicon .detail .text {width: 200px;} .mapicon .detail .text h4,.mapicon .detail .text .h4 { font-size: 16px; color: #0f2e93; font-weight: bold; margin-bottom: 6px;line-height: 1.1;} .mapicon .detail .text p {font-size: 14px; line-height: 20px; color: #333333;} .mapicon img{ display: block; width: auto; height: auto;} .mapicon01{top: 43%; left: 80%;background: transparent;} .mapicon .map_cc {width: 32px; } .mapicon02{ top: 39%; left: 80%; z-index: 15;} .mapicon02 .map_cc {animation: jump 1s 0.6s infinite } .mapicon03{top: 14%; left: 74%;} .mapicon03 .map_cc {animation: jump 1.2s infinite } .mapicon04{ top: 36%; left: 81%;} .mapicon04 .map_cc {animation: jump 1.5s infinite } .mapicon05{top: 59%; left: 53%;display: none;} .mapicon05 .map_cc {animation: jump 1.6s infinite } .mapicon06{ top: 29%; left: 18%;display: none;} .mapicon06 .map_cc {animation: jump 1.3s infinite } .mapicon07{ top: 75%; left: 31%;display: none;} .mapicon07 .map_cc {animation: jump 1.1s infinite } .mapicon08{top: 48%; left: 69.5%;} .mapicon08 .map_cc {animation: jump 1.6s infinite } .mapicon09{top: 59%; left: 78%;} .mapicon09 .map_cc {animation: jump 1.6s infinite} .index06 .map .hide {position: absolute; z-index: 4; background-color: transparent; border-radius: 50%;} .index06 .map .hide1 { width: 147px; height: 127px;right: 119px; bottom: 56px; } .index06 .map .hide2 {width: 216px; height: 150px; top: 30%; left: 68%;} .index06 .map .hide3 { width: 405px; height: 113px; top: 11%; left: 65%;} .index06 .map .hide4 { width: 237px; height: 169px; top: 15%; left: 45%;} .index06 .map .hide5 { width: 244px; height: 259px; top: 43%; left: 44%;} .index06 .map .hide6 { width: 358px; height: 296px; top: 7%; left: 4%;} .index06 .map .hide7 { width: 166px; height: 256px; top: 58%; left: 25%;} .index06 .map .hide8 { width: 79px; height: 130px; top: 28%; left: 62.5%;} .index06 .map .hide9 { width: 150px; height: 167px; top: -1%; left: 31%;;} .index06 .map .mapicon08{top: 42%;left: 70%;} .index06 .map .mapicon09{top: 39%;left: 74%;} .index06 .map .mapicon10{top: 46%;left: 75%;} .index06 .map .mapicon11{top: 47.5%;left: 76.5%;} .index06 .map .mapicon12{top: 42%;left: 67%;} .index06 .map .mapicon13{top: 46%;left: 63%;} .index06 .map .mapicon14{top: 78%;left: 86%;} .index06 .map .mapicon15{top: 77%;left: 81%;} .index06 .map .mapicon16{top: 34%;left: 55%;} .index06 .map .mapicon17{top: 32%;left: 50%;} .index06 .map .mapicon18{top: 46%;left: 52%;} .index06 .map .mapicon19{top: 50%;left: 54%;} .index06 .map .mapicon20{top: 56%;left: 52%;} .index06 .map .mapicon21{top: 72%;left: 54%;} .index06 .map .mapicon22{top: 26%;left: 66%;} .index06 .map .mapicon23{top: 19%;left: 35%;} .index06 .map .mapicon24{top: 13%;left: 35%;} .index06 .map .mapicon25{top: 15%;left: 26%;} .index06 .map .mapicon26{top: 31%;left: 26%;} .index06 .map .mapicon27{top: 32%;left: 23%;} .index06 .map .mapicon28{top: 44%;left: 23%;} .index06 .map .mapicon29{top: 21%;left: 19%;} .index06 .map .mapicon30{top: 37%;left: 19%;} .index06 .map .mapicon31{top: 60%;left: 28%;} .index06 .map .mapicon32{top: 70%;left: 31%;} .index06 .map .mapicon.hide_cc{opacity: 0;} /* @keyframes jump { 0%{ transform: scale(1); opacity: 0.6; } 100%{ transform: scale(1.1); opacity: 1; } } */ /* index07 */ .index07 {padding: 100px 0 170px;position: relative;overflow: hidden;} .index07 .top,.human03.pro .top {display: flex;justify-content: space-between;align-items: center;margin-bottom: 32px;} .com_h3 {font-size: 42px; white-space: nowrap;font-weight: bold;color: #333333;} .index07 .top a,.human03.pro .top a {border-color: #0f2e93;} .human03.pro .top a{margin-right: 20px;} .index07 .top a span,.human03.pro .top a span {color: #0f2e93;font-weight: 600;} .index07 .top a:hover,.human03.pro .top a:hover {color: #fff;} .index07 dl {display: flex;justify-content: space-between; z-index: 3; position: relative;} .index07 dl dd {width: 31%;} .index07 dl dd {margin-right: 3.5%;} .index07 dl dd:nth-of-type(3n){margin-right: 0px;} .index07 dl dd:hover .imgbox img {transform: scale(1.1);} .index07 dl dd h4,.index07 dl dd .h4 { font-size: 24px; color: #333333; font-weight: bold; line-height: 34px; margin: 30px 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; height: 68px;} .index07 dl dd p { font-size: 18px; color: #666666; padding-bottom: 0px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical;} .index07 dl dd .date {color: #a3a3a3; font-family: arial; font-size: 18px; border-top: 1px solid #ddd; padding-top: 32px; margin-top: 14px;} .index07 dl dd .date strong{ font-size: 40px; color: #a3a3a3; margin-right: 9px; font-weight: 100;} .index07 dl dd:hover h4,.index07 dl dd:hover .h4,.index07 dl dd:hover .date,.index07 dl dd:hover .date strong {color: #0f2e93;} /* side_btn */ .side_btn { position: fixed; left: 2.5%; bottom: 55px; display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; z-index: 50;} .side_btn::before {content:''; width:100%; height:100%; position: absolute; left:0; top:0; background:url(../image/img_text_side.png) no-repeat; background-size:100%; animation: rotate 10s linear infinite; } .side_btn a { position: relative; width: 88px; height: 88px; display: block; text-align: center; line-height: 88px; } .side_btn a::before {content:''; width:100%; height:100%; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); border-radius: 50%; background:#d61818; opacity: 0.25; display:none;} .side_btn a::after {content:''; width:67px; height:67px; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); border-radius: 50%; background:#d61818; z-index:9;} .side_btn a img {width:26px; z-index:10; vertical-align: middle; position:Absolute; left:50%; top:50%; margin-top:-11px; margin-left:-13px; } @keyframes rotate { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } } /* footer */ .waves { position: absolute; width: 100%; height: 80px; margin-top: 0; margin-bottom: -8px; left: 0; bottom: 0; width: 100%; z-index: 3; margin-top: -78px; } .parallax > use {animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;} .parallax > use:nth-child(1) {animation-delay: -2s;animation-duration: 7s;} .parallax > use:nth-child(2) {animation-delay: -3s;animation-duration: 10s;} .parallax > use:nth-child(3) {animation-delay: -4s;animation-duration: 13s;} .parallax > use:nth-child(4) {animation-delay: -5s;animation-duration: 20s;} @keyframes move-forever {0% {transform: translate3d(-90px,0,0);}100% { transform: translate3d(85px,0,0);}} footer { padding: 70px 0 100px; background-color: rgba(32,32,32,1); position: relative;z-index: 10;} footer .waves { bottom: auto; position: absolute; top: 0px; margin-bottom: 0px; } footer .icenter .icon{width: 228px;margin-bottom: 50px;} footer .icenter .top {display: flex;align-items: center;justify-content:space-between;} footer .icenter .top dl {display: flex;justify-content: flex-start;width: 68%;} footer .icenter .top dl dd { width: fit-content; width: 25%;} footer .icenter .top dl dd h3,footer .icenter .top dl dd .h3{margin-bottom: 27px;position: relative;} footer .icenter .top dl dd h3::after,footer .icenter .top dl dd .h3::after {position: absolute;content: "";bottom: -8px;left: 0px;width: 22px;height: 2px;background-color: #163cb8;} footer .icenter .top dl dd h3 a,footer .icenter .top dl dd .h3 a {font-size: 20px;font-weight: bold;} footer .icenter .top dl dd .min a{font-size: 18px;opacity: 0.5;margin-bottom: 16px;} footer .icenter .top dl dd .min a:hover {opacity: 1;} footer .icenter .top dl dd .box1 {margin-top: 60px;} footer .icenter .top .right {display: flex;flex-direction: column;align-items: flex-end;} footer .icenter .top .right p { width: 400px; opacity: 0.5; font-size: 16px; line-height: 28px; text-align: right;} footer .icenter .top .right h3,footer .icenter .top .right .h3 { font-size: 30px; font-weight: bold; margin: 4px 0 8px;} footer .icenter .top .right .ewm {display: flex;margin-top: 35px;} footer .icenter .top .right .ewm img {width: 100px;} footer .icenter .top .right .ewm .ewm01 {margin-right: 10px;} footer .icenter .top .right .ewm span {font-size: 13px; opacity: 0.5; text-align: center; margin-top: 5px; width: 100px;} footer .icenter .bot {display: flex;align-items: center;justify-content: space-between; margin-top: 84px;} footer .icenter .bot .left {width: 411px;display: flex;flex-flow: wrap;opacity: 0.5;} footer .icenter .bot .left span { position: relative; line-height: 24px; font-size: 14px;padding-right: 7px;margin-right: 7px;} footer .icenter .bot .left span::after{position: absolute;content: "";right: 0px;height: 14px;width: 1px;background-color: #fff;top: 50%;transform: translateY(-50%);} footer .icenter .bot .left span:last-child::after{display: none} footer .icenter .bot .left a { line-height: 24px; font-size: 14px; padding-right: 7px;margin-right: 7px;position: relative;} footer .icenter .bot .left a::after{position: absolute;content: "";right: 0px;top: 50%;transform: translateY(-50%); height: 14px;width: 1px;background-color: #fff;} footer .icenter .bot .left a:nth-of-type(1),footer .icenter .bot .left a:last-child{padding-right: 0px;margin-right: 0px;} footer .icenter .bot .left a:nth-of-type(1)::after,footer .icenter .bot .left a:last-child::after{display: none;} footer .icenter .bot .share {display: flex;align-items: center;} footer .icenter .bot .share a { border: 1px solid #fff; width: 37px; height: 37px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; opacity: 0.5; border-radius: 50%; margin-right: 10px;} footer .icenter .bot .share a:hover {opacity: 1;} /* contact */ .icenter2 {width: 1400px;margin: auto;} .con_banner {position: relative;overflow: hidden;} .con_banner img {height: 700px;} .con_banner::after { content: ""; display: inline-block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.35); position: absolute; left: 0; top: 0; } .con01 {padding: 200px 0 ;position: relative;} .con01 .icenter2 { position: absolute; top: -487px; left: 50%; transform: translateX(-50%);} .con01 .icenter2 .icon { background-color: #0f2e93; margin-bottom: 45px; width: fit-content; padding: 15px;} .con01 .icenter2 .icon img { width: 53px;animation: bounce-up-data-v-7e3caf58 1.5s linear infinite;} @keyframes bounce-up-data-v-7e3caf58 { 10% { transform: rotate(20deg); } 20% { transform: rotate(-10deg); } 30% { transform: rotate(5deg); } 40% { transform: rotate(-5deg); } 50%, 100% { transform: rotate(0deg); } } @-webkit-keyframes myanimate { 10% { transform: rotate(20deg); } 20% { transform: rotate(-10deg); } 30% { transform: rotate(5deg); } 40% { transform: rotate(-5deg); } 50%, 100% { transform: rotate(0deg); } } .con01 .icenter2 .tel {display: flex;margin-bottom: 85px;} .con01 .icenter2 .tel .num {margin-right: 72px;} .con01 .icenter2 .tel .num a {font-weight: bold;font-family: arial;font-size: 50px;padding-bottom: 5px;position: relative;} .con01 .icenter2 .tel .num a::after {transition: 0.5s; position: absolute; content: ""; bottom: 0px; letter-spacing: 0px; width: 70px; height: 2px; background-color: #0f2e93; left: 0px;} .con01 .icenter2 .tel .num:hover a::after {width: 161px;} .con01 .icenter2 .tel .num h4,.con01 .icenter2 .tel .num .h4 {font-size: 20px;margin-top: 20px;color: rgba(255, 255, 255, 0.6);} .con01 .icenter2 .bot {position: relative;overflow: hidden;padding-bottom: 100px;} .con01 .icenter2 .bot::after {content: ""; position: absolute; width: 88%; height: 1px; background-color: #eeeeee; bottom: 4%; left: 50%; transform: translateX(-50%); } .con01 .icenter2 .bot .box {} .con01 .icenter2 .bot .box .imgbox {border-radius: 10px;} .con01 .icenter2 .bot .box .imgbox::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,.5); content: ''; -webkit-transition: -webkit-transform .6s; transition: transform .6s; -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-110%,0); transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-110%,0); z-index: 1; } .con01 .icenter2 .bot .box:hover .imgbox::before { -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 115%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 115%, 0); } .con01 .icenter2 .bot .box .imgbox img {height: 300px;} .con01 .icenter2 .bot .box:hover .imgbox img {transform: scale(1.1);} .con01 .icenter2 .bot .bottom {margin-top: 20px;} .con01 .icenter2 .bot .bottom .title {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;} .con01 .icenter2 .bot .bottom .title h3,.con01 .icenter2 .bot .bottom .title .h3 {font-size: 22px;font-weight: bold;color: #333333;} .con01 .icenter2 .bot .box:hover .bottom .title h3,.con01 .icenter2 .bot .box:hover .bottom .title .h3 {color: #0f2e93;} .con01 .icenter2 .bot .bottom .title .h4 { transition: 0.5s; font-size: 16px; font-family: arial; color: #666666; display: flex; align-items: center;} .con01 .icenter2 .bot .bottom .title .h4 span{color: #666666; position: relative;transition: 0.5s;margin-left: 0px;} .con01 .icenter2 .bot .box:hover .bottom .title .h4 {color: #0f2e93;} .con01 .icenter2 .bot .box:hover .bottom .title .h4 span {margin-left: 10px;color: #0f2e93;} .con01 .icenter2 .bot dl dd{ margin-bottom: 14px; display: flex; align-items: center;} .con01 .icenter2 .bot dl dd img {width: 20px; margin-right: 20px;} .con01 .icenter2 .bot dl dd .a {font-size: 18px;color: #666666;font-family: arial;} .con01 .icenter2 .bot dl dd:last-child {margin-bottom: 0px;} .con01 .icenter2 .bot .fa {background-image: none; margin: 0px; padding: 0px; width: 50px; height: 50px; font-size: 23px; border: 1px solid #dad9d9; display: flex; justify-content: center; align-items: center; top: 91%;} .con01 .icenter2 .bot .fa img {width: 27px;transition: 0s;} .con01 .icenter2 .bot .fa:hover {background-color: #0f2e93;} .con01 .icenter2 .bot .fa:hover img {filter: grayscale(10) brightness(10);} .con01 .icenter2 .bot .swiper-button-prev { left: 0px; } .con01 .icenter2 .bot .swiper-button-next { right: 0px; } .con02 {padding: 90px 0 180px;position: relative;overflow: hidden;} .con02 .top {margin-bottom: 40px;} .con02 .top h3,.con02 .top .h3 {font-size: 44px;font-weight: bold;color: #333333;margin-bottom: 10px;} .con02 .top h4,.con02 .top .h4 {font-size: 18px;color: #666666;} .con02 form label{display: flex;justify-content: space-between;align-items: center; margin-bottom: 26px;} .con02 form label span {width: 49%;font-size: 18px;color: #666666;} .con02 form label span sup {color: #0f2e93;} .con02 form label span input { font-family: 微软雅黑; font-weight: normal;color: #666; padding-left: 20px;font-size: 18px; outline: none; width: 100%; margin-top: 12px; background-color: #fafafa; border: 1px solid #ddd; height: 43px;} .con02 form label textarea { resize: none; font-family: 微软雅黑; font-weight: normal; color: #666; padding: 10px 20px; font-size: 18px; outline: none; height: 130px; width: 100%; margin-top: 20px; background-color: #fafafa; border: 1px solid #ddd; } .con02 form .label3 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; display: flex; flex-flow: wrap; font-size: 18px; color: #666666;} .con02 form h5,.con02 form .h5 {font-size: 14px;color: #666666;margin: 10px 0 60px;} .con02 form button {font-weight: bold; transition: 0.3s; cursor: pointer; border: 1px solid transparent; width: 160px;height: 44px;display: flex;justify-content: center;align-items: center;font-size: 14px;border-radius: 44px;background-color: #0f2e93;color: #fff;} .con02 form button:hover {background-color: #fff;border: 1px solid #0f2e93;color: #0f2e93;} /* news */ .inner_banner { position: fixed; top: 0px; left: 0px; height: fit-content; z-index: 0; width: 100%; overflow: hidden;} .inner_banner img {height: 700px; animation: mysacle 4s ease both;} .inner_banner.cc{position: relative;height: 100vh;} .inner_banner.cc img{height: 100vh} .inner_banner .text {position: absolute;left: 50%;top: 59%;transform: translate(-50%,-50%);z-index: 5;width: 100%;} .inner_banner.cc .text{top: 50%;} .inner_banner .text h3,.inner_banner .text .h3 {font-size: 60px;margin-bottom:3%;text-align: center;color: #000;font-weight: bold;font-family: 'Urbanist'; line-height: 1.1;} .inner_banner .text h4,.inner_banner .text .h4 {font-size: 22px;font-weight: normal; text-align: center; color: #0f2e93;} .inner_banner::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 1; } .inner_banner.nb::after{display: none;} .fx {margin-top: 700px; position: relative; overflow: hidden; background-color: #fff; z-index: 10;} .fx.ff{margin-top: 58px;} .fx.cc{margin-top: 0} .fx.dd{margin-top: 150px;} .pagenews{display: block; overflow: hidden; position: relative; z-index: 9; padding: 0px 0 80px; background-color: #fff;} .pagenews dl{ margin: 0 auto; transition: all .3s; display: block; width: calc(100% - 0px); overflow: hidden; position: relative; padding: 70px 0;} .pagenews dl:nth-of-type(2n){background-color: #f5f5f5;} .pagenews dl a{position: relative;} .pagenews dl a p{display: block; overflow: hidden; width: 40%; margin-left: 16%;} .pagenews dl a p img{ transition: all .3s; display: block; width: 100%;} .pagenews dl a .dates{ position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%);} .pagenews dl a .dates span{ font-family: Montserrat-Bold; display: block; font-size: 40px; color: #333; line-height: 1em; font-family: 'fcmeGotham';} .pagenews dl a .dates font{font-family: Montserrat-Bold; display: block; color: #666; font-size: 20px; line-height: 1em; margin-top: 10px;} .pagenews dl a dd{ position: absolute; top: 0; right: 0; width: 38%;} .pagenews dl a dd strong,.pagenews dl a dd h2,.pagenews dl a dd h3,.pagenews dl a dd .h2,.pagenews dl a dd .h3{ display: block; color: #333; font-size: 32px; margin-bottom:20px; } .pagenews dl a dd font{ display: block; color: #666; font-size: 18px; line-height: 30px;} .pagenews dl:nth-child(2n) p{margin-left: 45%;} .pagenews dl:nth-child(2n) .dates{right: 0;} .pagenews dl:nth-child(2n) dd{ right: auto;} .pagenews dl a:hover p img{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); transform:scale(1.1); } .pagenews dl:hover{ background: #0f2e93; } .pagenews dl:hover a dd strong,.pagenews dl:hover a dd font,.pagenews dl:hover a .dates span,.pagenews dl:hover a .dates font{color:#fff;} .h5_dates02 { display: none; } .page {display: flex; justify-content: center; align-items: center; padding-bottom: 180px; background-color: #fff; position: relative; z-index: 1;} .page a {width: 46px;height: 46px;border: 1px solid #cbcbcb;display: flex;align-items: center;justify-content: center;font-size: 20px;color: #464647;margin-right: 18px;} .page a:last-child{margin-right: 0px;} .page a.active {color: #fff;background-color: #0f2e93;border-color: #0f2e93;} .page a:hover {color: #fff;background-color: #0f2e93;border-color: #0f2e93;} .page a.activ {color: #fff;background-color: #0f2e93;border-color: #0f2e93;} /* newsinfo */ .newsinfo_banner {position: relative;overflow: hidden;} .newsinfo_banner::after { content: ""; display: inline-block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.35); position: absolute; left: 0; top: 0; } .newsinfo_banner .news_text{ z-index: 1; width: 900px; top: 47%; position: absolute; left: 50%; transform: translateX(-50%);} .newsinfo_banner .news_text .bt {font-size: 36px;font-weight: bold;} .newsinfo_banner h4,.newsinfo_banner .h4 {margin-bottom: 14px;} .newsinfo_banner h5,.newsinfo_banner .h5 { font-size: 16px; display: flex;} .newsinfo_banner h5 span:nth-of-type(1),.newsinfo_banner .h5 span:nth-of-type(1){margin-right: 20px;} .newshowtt{ display: block; overflow: hidden; background: #f5f5f5; padding: 100px 0; width: calc(100% - 200px); margin: 100px auto;} .newshowtt dd{ display: block; width: 900px; margin: 0 auto; overflow: hidden;} .newshowtt dd strong{ display: block; color: #333; font-size: 40px; line-height: 1em; margin-bottom: 20px;} .newshowtt dd p{ display: block; overflow: hidden; } .newshowtt dd p span{font-family: Montserrat-Bold; display: block; float: left; color: #666; margin: 0 30px 0 0; line-height: 30px;} .newshowtxt{ display: block; overflow: hidden; width: 900px; margin: 100px auto 150px;} .newshowtxt tr td{color: #666;} .newshowtxt p{ display: block; color: #666666; font-size: 18px; line-height: 30px; margin-bottom: 20px;} .newshowtxt p a{ display: block; color: #666666; font-size: 18px; line-height: 30px; margin-bottom: 20px;} .newshowtxt img{ display: block; width: auto; max-width: 100%; margin: auto; height: auto;} .newshowtxt p b {color: #0f2e93;} .newshowtxt p span{display: inline-block;}#0f2e93 .newshowtxt section{ display: block; color: #333; font-size: 18px; line-height: 32px; margin-bottom: 20px;} .newshowtxt section b {color: #0f2e93;} .sxy{ display: block; overflow: hidden; margin-top: 80px; border-top: 1px solid #ddd; } .sxy a{ display: block; color: #666666; border-bottom: 1px solid #ddd; padding: 16px 0; font-size: 18px;} .sxy a:hover {color: #0f2e93;} .bottomfx{display: block;margin-top: 40px;border-top: 1px solid #ddd;padding-top: 40px;} .bottomfx dt a{ width: 115px; height: 40px; float: right; font-size: 16px;} .bottomfx dt a > span {font-size: 16px;} .amore2 {border-color: #0f2e93;color: #0f2e93;} .bottomfx dd{} .bottomfx dd span{ color: #666; display: block; float: left; font-size: 16px; line-height: 32px; margin-right: 16px;} .bottomfx dd .fx1{ display: block;float: left;} .bottomfx dd .fx1 a{ display: block; width: 32px; height: 32px; text-align: center; line-height: 32px; background: #b0b0b0; border-radius: 50%; color: #333; float: left; margin-right: 10px; font-size: 15px; color: #fff;} .bottomfx dd .fx1 a:hover{color: #fff; background: #0f2e93;} /* human */ .hu_h3 {font-size: 40px;font-weight: 600;color: #111;position: relative;text-transform: capitalize;} .hu_h3.cast{font-weight: bold;font-size: 48px;} .hu_h3.sm{font-size: 32px;} .hu_h3 img{width: 40px;display: inline-block;margin-right: 10px;} .linex1 { position: relative; width: 200px; height: 1px; margin: 28px 0; background-color: rgba(15, 85, 214, 0.35); } .linex1::after { content: ""; position: absolute; top: 50%; left: 0%; transform: translate(0%, -50%); width: 80px; height: 4px; background: url(../images/tit_solid.png); background-size: 100% 100%; } .hu_p {font-size: 20px;color: #111;line-height: 30px;text-align: justify;} .human_banner {position: relative;overflow: hidden;} .human_banner img {animation: mysacle 4s ease both;height: 800px;} @keyframes mysacle { 0% { transform: scale(1.15); } } .human_banner .text {position: absolute; left: 50%; top: 92%; transform: translate(-50%,-50%); z-index: 1; height: 800px;} .human_banner .text p { white-space: inherit; transform: scale(1.2); font-size: 24px; color: #fff; font-weight: bold; line-height: 40px; position: relative; top: 0px; transition: 0.1s; width: 1090px; text-align: center;} .human_banner::after { content: ""; display: inline-block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.35); position: absolute; left: 0; top: 0; } .human01 {position: relative; padding:50px 0 130px; overflow: hidden;} .human01 .text { position: absolute; left: 50%; top: -65px; transform: translate(-50%,-50%); z-index: 1; height: 800px;} .human01 .text p {white-space: inherit; font-size: 24px; color: #333333; font-weight: bold; line-height: 40px; position: relative; top: 0px; transition: 0.1s; width: 1090px; text-align: center;} .human01 .bg1 { position: absolute; left: -13%; top: 5%; z-index: -1; animation: ro 5s infinite;} .human01 .bg2 { position: absolute; right: -22%; bottom: 12%; z-index: -1;animation: ro 5s infinite;} @keyframes ro { 0%{ transform: rotate(0deg) translate(0px,0px); } 50%{ transform: rotate(10deg) translate(30px,30px); } 100%{ transform: rotate(0deg) translate(0px,0px); } } .human01 .segment1 {display: flex;justify-content: space-between;align-items: center;padding-bottom: 100px;} .human01 .segment1 .left {width: 43.5%;} .human01 .segment1 .left .hu_h3{margin-bottom: 20px;} .human01 .segment1 .right {position: relative;overflow: hidden;border-radius: 10px;width: 49.5%;} .human01 .segment1 .right:hover img{transform: scale(1.1);} .human01 .segment3 {flex-flow: row-reverse;} .human01 .segment2 {margin: 110px 0;} .human01 .segment2 .title{width: fit-content;margin: auto;position: relative;} .human01 .segment2 .title img {width: 700px;} .human01 .segment2 .title .content { position: absolute; left: 50%; top: 59%; transform: translate(-50%,-50%); font-size: 22px; font-weight: bold; color: #fff; white-space: nowrap;} .human01 .segment2 .svg {padding: 0 200px;display: flex;justify-content: space-between;align-items: center; margin-top: 90px;} .human01 .segment2 .svg .icon {position: relative;} .human01 .segment2 .svg .icon1 p { position: absolute; left: 28px; top: -90px;} .human01 .segment2 .svg .icon2 p { position: absolute; left: 28px; top: -90px;} .human01 .segment2 .svg .icon3 p { position: absolute; right: 28px; top: -90px;} .human01 .segment2 .svg img { z-index: 1; position: relative; width: 75px; transition: 0.4s; animation-delay: -2.2s; animation-duration: 2.5s; transition-delay: .6s; animation-direction: alternate; animation-iteration-count: infinite; animation-name: floating; animation-play-state: running; animation-timing-function: ease-in-out;} .human01 .icon1 .g-rect-fill,.human01 .icon3 .g-rect-fill { fill: none; stroke-dasharray: 100, 380; stroke-dashoffset: -160; animation: xian1 2s linear 0.6s infinite; } .human01 .icon2 .g-rect-fill { fill: none; stroke-dasharray: 20,100; stroke-dashoffset: -40; animation: xian2 2s linear 0.6s infinite; } .human01 .icon1 .g-rect-fill, .human01 .icon2 .g-rect-fill,.human01 .icon3 .g-rect-fill {stroke: #ecaaac; display: none;} /* @keyframes floating{ from{transform:translateY(5px) } to{transform:translateY(-5px)} } @keyframes xian1 { 0% { stroke-dasharray: 100, 380; stroke-dashoffset: 0; } 100% { stroke-dasharray: 100, 380; stroke-dashoffset: 480; } } @keyframes xian2 { 0% { stroke-dasharray: 20, 75; stroke-dashoffset: 0; } 100% { stroke-dasharray: 20, 75; stroke-dashoffset: 95; } } */ .human01 .segment2 dl {display: flex;justify-content: space-between;flex-flow: wrap;margin-top: 40px;} .human01 .segment2 dl dd {width: 31.6%; box-shadow: 0 0 15px #ddd; background-color: #fff; padding: 36px 30px; font-size: 17px; line-height: 27px; color: #666666;} .human01 .segment2 dl dd:hover {box-shadow: 0 0 30px #c5c5c5; } .human02 {position: relative;overflow: hidden;padding: 130px 0 252px;background: url(../image/hu02_bg.jpg);background-size: cover;} .human02 .hu_h3 {text-align: center;} .human02 dl {margin-top: 60px;display: flex;justify-content: space-between;} .human02 dl dd {width: 150px;position: relative;} .human02 dl dd:hover img {transform: rotateY(180deg);} .human02 dl dd:hover h4,.human02 dl dd:hover .h4{color: #0f2e93;} .human02 dl dd img {width: 90px;margin: auto;} .human02 dl dd h4,.human02 dl dd .h4 { font-size: 16px; font-weight: bold; color: #333333; white-space: inherit; margin-top: 14px; text-align: center; } .human02 dl dd h5,.human02 dl dd .h5 {position: absolute; font-size: 16px; line-height: 24px; color: #666; text-align: center;} .human02 dl dd:nth-of-type(1) h5,.human02 dl dd:nth-of-type(1) .h5 { width: 199px; left: 50%; transform: translateX(-50%); bottom: -89px;} .human02 dl dd:nth-of-type(2) h5,.human02 dl dd:nth-of-type(2) .h5 { width: 569px; left: -11px; bottom: -134px;} .human02 dd .box1 { width: 52px; height: 38px; position: absolute; left: -84px; top: -9px;} .human02 dd .box2 { width: 52px; height: 38px; position: absolute; left: -42px; top: 181px; transform: rotate(50deg);} .human02 dd .box { width: 49px; height: 38px; position: absolute; left: 174px; top: 43px;} #path_jian1{ stroke:#9C27B0; stroke-dasharray: 0% 35%; stroke-dashoffset: 7%; animation: re 4s linear forwards ; fill:transparent } @keyframes re { 60%{ stroke-dasharray: 7% 7%; stroke-dashoffset: 7%; } 100%{ stroke-dasharray: 7% 7%; stroke-dashoffset: 7%; fill:#0f2e93 } } #path_jian2{ stroke:#0f2e93; stroke-dasharray: 0% 35%; stroke-dashoffset: 7%; animation: re2 4s linear forwards; fill:transparent } @keyframes re2 { 60%{ stroke-dasharray: 7% 7%; stroke-dashoffset: 14%; } 100%{ stroke-dasharray: 7% 7%; stroke-dashoffset: 14%; fill: #0f2e93; } } .human03 {padding: 100px 0 100px;position: relative;overflow: hidden;} .human03.pro{padding: 110px 0 60px;} .human03.pro.ioi{padding: 0;} .human03 .hu_h3 {text-align: center;} .human03.pro .hu_h3 {font-size: 48px;} .human03 dl {margin-top: 30px;display: flex;flex-flow: wrap;} .human03 dl dd {overflow: hidden; position: relative; transition: 0.5s; padding: 30px 0 28px; border: 1px solid #ddd; background-color: #fff; width: 18%; margin-right: 1.5%; margin-bottom: 2.5%; box-shadow: 0 0 20px #ddd; display: flex; justify-content: center; align-items: center; flex-direction: column; border-radius: 10px;} .human03.pro dl dd {width: 31.82%; margin-right: 1.5%; margin-bottom: 1.5%; } .human03.pro dl dd:nth-of-type(5n){margin-right: 1.5%;} /* .human03 dl dd::after {content: "";position: absolute;bottom: 0px;left: 0px;width: 100%;background-color: #0f2e93;transition: 0.5s;height: 0px;} .human03 dl dd:hover::after {height: 100%;} */ .human03 dl dd:hover { background: #0f2e93; transform: scale(1.05); } .human03.ioi dl dd:hover{background: #fff;} .human03 dl dd:hover {transform: scale(1.1);z-index: 3;} .human03.ioi dl dd:hover{transform: scale(1);} .human03 dl dd:nth-of-type(5n){margin-right: 0px;} .human03 dl dd .icon {transition: 0.5s; position: relative;z-index: 1; margin-bottom: 14px; border-radius: 50%;height: 118px;width: 118px;background-color: #f5f5f5;display: flex;justify-content: center;align-items: center;} .human03 dl dd:hover .icon {background-color: rgba(245, 245, 245,0.2);} .human03 dl dd .icon img {width: 43px;} .human03 dl dd:hover .icon img {filter: grayscale(5) brightness(10);} .human03.pro dl dd:hover .icon img {filter: none;} .human03 dl dd h4,.human03 dl dd .h4 {transition: 0.5s; position: relative; z-index: 1; font-size: 16px; font-weight: bold; color: #333333; text-align: center; width: 94%; margin: auto;text-transform: capitalize;} .human03.pro dl dd h4,.human03.pro dl dd .h4{font-size: 20px;padding-top: 15px;} .human03 dl dd h5,.human03 dl dd .h5 {transition: 0.5s; position: relative;z-index: 1;font-size: 16px;color: #666;font-family: arial;opacity: 0;transition: 0.5s; display: none;} .human03 dl dd:hover h5,.human03 dl dd:hover .h5 {opacity: 1;} .human03 dl dd:hover h4 ,.human03 dl dd:hover h5,.human03 dl dd:hover .h4 ,.human03 dl dd:hover .h5 {color: #fff;} .human03.ioi dl dd:hover h4, .human03.ioi dl dd:hover h5,.human03.ioi dl dd:hover .h4, .human03.ioi dl dd:hover .h5 {color: #111;} .human04 {position: relative;overflow: hidden;background: url(../image/hu04_bg.jpg);background-attachment: fixed;background-size: cover;padding: 160px 0 180px;} .human04::after { content: ""; display: inline-block; width: 100%; height: 100%; /* background: linear-gradient(to top ,rgba(255,255,255,1) 0%,rgba(255,255,255,0.9) 30% ,rgba(255,255,255,0.2) 100%); */ position: absolute; left: 0; top: 0; } .human04 .icenter2 {display: flex;justify-content: center;align-items: center;flex-direction: column; z-index: 1; position: relative;} .human04 .icenter2 h4,.human04 .icenter2 .h4 {font-family: arial; font-size: 30px;font-weight: bold;color: #0f2e93;margin-bottom: 22px;text-align: center;} .human04 .icenter2 .hu_h3 { margin: 0px 0 16px; text-align: center; } .human04 .icenter2 p { margin-bottom: 58px; text-align: center;width: 948px;} .human04 .icenter2 .icon{ border-radius: 50%; width: 100px;height: 100px; position: relative;margin: auto;background-color: #0f2e93;display: flex;justify-content: center;align-items: center;font-size: 16px;color: #fff;} .human04 .icenter2 .icon::before{ content: ""; position:absolute; width: 240px;height: 1px;background-color: rgba(255, 138, 143,0.6);top: 50%;transform: translateY(-50%);left: -300px;} .human04 .icenter2 .icon::after{ content: ""; position:absolute; width: 240px;height: 1px;background-color: rgba(255, 138, 143,0.6);top: 50%;transform: translateY(-50%);right: -300px;} .human04 .icenter2 .icon strong { z-index: -1; background-color: rgba(230, 0, 18, 0.2); display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; -webkit-animation: ringscale 2s linear infinite; -moz-animation: ringscale 2s linear infinite; -ms-animation: ringscale 2s linear infinite; animation: ringscale 2s linear infinite; opacity: 0; } .human04 .icenter2 .icon strong:nth-of-type(2) { animation-delay: .7s; } .human04 .icenter2 .icon strong:nth-of-type(3) { animation-delay: 1.4s; } @keyframes ringscale { 0% { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -ms-transform: scale(1.6); transform: scale(1.6); } } /* cul */ .culF{height: auto;} .culF .hu_h3{color: #111;} .culture01 { position: -webkit-sticky; position: sticky; top: 90px; background: url(../images/shzr2.jpg); background-size: cover; height: auto; margin-top: 0; z-index: 1; padding: 82px 0 290px;min-height: 100vh;background-position: top center;} .culture01.hj{background: url(../images/hjzr1.jpg); background-size: cover;background-position: bottom center;} /*.culture01.hj::before{position: absolute;height: 100%;width: 100%;content: '';display: block; background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(15,46,147,1) 100%);}*/ .culture01 .icenter2 {display: flex;justify-content: center;flex-direction: column;align-items: center;/*text-shadow: 0px 0px 5px rgba(0, 0, 0, .3);*/} .culture01 .icenter2 h4,.culture01 .icenter2 .h4 {font-size: 20px;font-family: arial;color: #0f2e93;margin: 10px 0 34px;} .culture01 .icenter2 p {font-size: 18px; font-weight: normal; color: #111; line-height: 1.5; margin-bottom: 41px; width: 985px; text-align: center;/*text-shadow: 0px 0px 5px rgba(0, 0, 0, .3);*/} .culture01 .icenter2 img {width: 66px;} .culture02 { position: sticky; top: 90px; background: url(../image/cul02_bg.jpg); background-size: cover; height: auto; z-index: 1; padding: 280px 0 240px;min-height: 100vh;} .culF .linex1::after { left: 30%; } /*.culF .linex1{background-color: rgba(255,255,255,.5);}*/ .culture02.bn{background: url(../images/shzr3.jpg); background-size: cover;padding: 82px 0 290px;background-position: top center;} .culture02.bn.hj1{background: url(../images/hjzr2.jpg); background-size: cover;background-position: top center;} .culture02.bn.hj2{background: url(../images/hjzr3.jpg); background-size: cover;background-position: top center;} .culture02.bn.bnn{background: url(../images/shzr4.jpg); background-size: cover;background-position: top center;} .culture02.bn .icenter2 {display: flex;justify-content: center;flex-direction: column;align-items: center;} .culture02.bn .icenter2 h4,.culture02.bn .icenter2 .h4 {font-size: 20px;font-family: arial;color: #0f2e93;margin: 10px 0 34px;text-shadow: 0px 0px 5px rgba(0, 0, 0, .3);} .culture02.bn .icenter2 p {font-size: 18px; font-weight: normal; color: #111; line-height: 1.3; margin-bottom: 41px; width: 985px; text-align: center;/*text-shadow: 0px 0px 5px rgba(0, 0, 0, .3);*/} .culture02.bn .icenter2 img {width: 66px;} .culture02 dl dd:hover .icon img {transform: rotateY(180deg);} .culture02 dl {display: flex;justify-content: space-between;} .culture02 dl dd {top: 0px; transition: 0.5s; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 100px 50px 43px; position: relative; width: 31.5%; background-color: #fff; border-radius: 10px;} .culture02 dl dd:hover {top:-15px;} .culture02 dl dd .text {display: flex;flex-direction: column;justify-content: center;align-items: center; } .culture02 dl dd::after {position: absolute;content: "";bottom: 0px;left: 0px;height: 8px;width: 0%;background-color: #0f2e93;border-radius: 10px;transition: 0.5s;} .culture02 dl dd:hover::after {width: 100%;} .culture02 dl dd h5,.culture02 dl dd .h5{font-size: 32px;color: #333333;font-weight: bold;margin-bottom: 12px;} .culture02 dl dd:hover h5,.culture02 dl dd:hover .h5 {color: #0f2e93;} .culture02 dl dd p{padding-right: 3px;font-size: 18px; color: #666666; line-height: 30px; margin-bottom: 40px; text-align: center; height: 90px; overflow-y: scroll;} .culture02 dl dd p::-webkit-scrollbar { height: 1px; width: 3px; } .culture02 dl dd p::-webkit-scrollbar-thumb { border-radius: 2px; -webkit-box-shadow: inset 0 0 5px rgba(127,127,127,0.3); background: #ded8d8; } .culture02 dl dd p::-webkit-scrollbar-track { /* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */ border-radius: 2px; background: rgba(164,164,164,0.1); } .culture02 dl dd span{font-size: 30px;font-weight: bold;color: rgb(202, 199, 198);font-family: arial;} .culture02 dl dd .icon {left: 50%;transform: translateX(-50%);top: -18%; position: absolute;width: 135px;height: 135px;background-color: #fff;border-radius: 50%;display: flex;justify-content: center;align-items: center;} .culture02 dl dd .icon img {width: 60px;} .culture03 { height: 826px;; z-index: 3;justify-content: space-between;display: flex;position: relative;} .culture03 .bg { position: absolute; left: calc(50% + 20px); top: 50%; transform: translate(-50%,-50%); z-index: 1;} .culture03 .bg .cir {width: 440px;} .culture03 .bg .tips{position: absolute;left: 46%;top: 50%;transform: translate(-50%,-50%);} .culture03 .bg .tips img {width: 40px; margin: auto;} .culture03 .bg:hover .tips img {transform: rotateY(180deg);} .culture03 .bg:hover .tips h4,.culture03 .bg:hover .tips .h4 {color: #0f2e93;} .culture03 .bg .tips h4,.culture03 .bg .tips .h4 { font-size: 23px; font-weight: bold; margin: 20px 0; color: #333333;} .culture03 .bg .tips h5,.culture03 .bg .tips .h5 {font-size: 18px;font-family: arial;color: #666666;text-align: center;} .culture03 .left {width: 50%;height: 100%;} .culture03 .left img {height: 100%;} .culture03 .right {width: 50%;height: 100%;position: relative; } .culture03 .right img {height: 100%;} .culture03 .right .text {position: absolute;top: 50%;transform: translateY(-50%);left: 33%;} .culture03 .right .text .seg {margin-bottom: 60px;} .culture03 .right .text .seg:last-child {margin-bottom: 0px;} .culture03 .right .text .seg h4,.culture03 .right .text .seg .h4 {font-size: 32px;font-weight: bold;color: #333333;margin-bottom: 30px;position: relative;} .culture03 .right .text .seg:hover h4,.culture03 .right .text .seg:hover .h4 {color: #0f2e93;} .culture03 .right .text .seg h4::after,.culture03 .right .text .seg .h4::after { position: absolute; content: ""; width: 29px; height: 3px; background-color: #0f2e93; left: 2px; bottom: -17px;} .culture03 .right .text .seg p {font-size: 18px; color: #666666; line-height: 30px; width: 461px;} .culture04 { position: relative; height: 826px; z-index: 1; justify-content: space-between; display: flex;} .culture04 .icenter2 {position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);z-index: 1;} .culture04 .icenter2 .box {width: 62%;background-color: #fff;box-shadow: 10px 5px 20px rgb(102 102 102 / 30%);padding: 126px 85px;box-sizing: border-box;position: relative;} .culture04 .icenter2 .box .icon { position: absolute; right: -30%; top: 4%; } .culture04 .icenter2 .box .icon img {width: 627px;} .culture04 .icenter2 .box .seg {margin-bottom: 65px;position: relative; z-index: 1;} .culture04 .icenter2 .box .seg:hover h4,.culture04 .icenter2 .box .seg:hover .h4 {color: #0f2e93;} .culture04 .icenter2 .box .seg:last-child {margin-bottom: 0px;} .culture04 .icenter2 .box .seg h4,.culture04 .icenter2 .box .seg .h4 {font-size: 32px;font-weight: bold;color: #333333;margin-bottom: 30px;position: relative;} .culture04 .icenter2 .box .seg h4::after,.culture04 .icenter2 .box .seg .h4::after { position: absolute; content: ""; width: 29px; height: 3px; background-color: #0f2e93; left: 2px; bottom: -17px;} .culture04 .icenter2 .box .seg p {font-size: 18px; color: #666666; line-height: 30px;} .culture04 .left { width: 50%; height: 100%; position: relative; background-color: #fff;} .culture04 .left .wen { position: absolute; font-size: 150px; color: rgb(242,242,242); left: -9%; top: 0px; transform: translateY(0%) rotate(90deg);} .culture04 .right {width: 50%;height: 100%;position: relative; } .culture04 .right img {height: 100%;} .culture05 { background: url(../image/cul05_bg.jpg); background-size: cover; z-index: 1; position: relative; padding: 110px 0 180px;} .culture05 .hu_h3 {text-align: center;} .culture05 dl{display: flex;justify-content: space-between;flex-flow: wrap;margin-top: 20px;} .culture05 dl dd {width: 33.333%;position: relative;} .culture05 dl dd .imgbox::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,.5); content: ''; -webkit-transition: -webkit-transform .6s; transition: transform .6s; -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-110%,0); transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-110%,0); z-index: 1; } .culture05 dl dd:hover .imgbox::before { -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 115%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 115%, 0); } .con01 .icenter2 .bot .box .imgbox img {height: 300px;} .culture05 dl dd .imgbox img {height: 300px;} .culture05 dl dd:nth-of-type(2):after{position: absolute;content: "";height: 100%;width: 1px;background-color: #ddd;left: 0px;top: 0px;} .culture05 dl dd:nth-of-type(2)::before{position: absolute;content: "";height: 100%;width: 1px;background-color: #ddd;right: 0px;top: 0px;z-index: 1;} .culture05 dl dd:nth-of-type(2) {position: relative;z-index: 2;} .culture05 dl dd:hover .imgbox img{transform: scale(1.1);} .culture05 dl dd .bot { padding: 38px 38px 109px; background-color: #fff;position: relative;} .culture05 dl dd .bot h4,.culture05 dl dd .bot .h4 {position: relative;font-size: 18px;color: #666666;margin-bottom: 25px;} .culture05 dl dd .bot h4::after,.culture05 dl dd .bot .h4::after { position: absolute; left: 1px; bottom: -14px; width: 25px; height: 2px; background-color: #0f2e93; content: "";} .culture05 dl dd .bot h5,.culture05 dl dd .bot .h5 { height: 102px; font-size: 24px; font-weight: bold; color: #333333; line-height: 34px;} .culture05 dl dd:hover .bot h5,.culture05 dl dd:hover .bot .h5 {color: #0f2e93;} .culture05 dl dd .bot .icon { position: absolute; right: 8px; bottom: 8px;} .culture05 dl dd .bot .icon img {width: 90px;} /* real code that you need*/ .vi_box { top: 0px; left: 0px; display: none; position: fixed;width: 100%;height: 100%;z-index: 999;background-color: rgba(0,0,0,0.8);} .vi_box .box {height: 100%;width: 100%; display: flex;justify-content: center;align-items: center;} .vi_box .box video{ width: 100%;height: 100%; position: relative; object-fit: cover; display: block;} .vi_box .box .video {position: relative;width: 70%; height: 68%;} .vi_box .box .video img.close{ cursor: pointer;width: auto;position: absolute;right: -40px;top: -40px;transition: all .3s;pointer-events: painted;} .vi_box .box .video .close:hover {transform: rotate(135deg);} /* company */ .com01 {padding: 100px 0;position: relative;overflow: hidden;} .com01 .top {display: flex;justify-content: space-between;align-items: center;} .com01 .top .le {width: 42.5%;display: flex;justify-content: space-between;} .com01 .top .le .com01Swiper {width: 470px; overflow: hidden; height: 365px;} .com01 .top .le .op { display: flex; flex-direction: column; align-items: center;} .com01 .top .le .swiper-pagination-bullet { outline: none; width: 13px; height: 13px; margin: 11px 0; background: transparent; opacity: 1; border: 2px solid #ddd;} .com01 .top .le .swiper-pagination-bullet-active { opacity: 1; background: #0f2e93; border-color: #0f2e93;} .com01 .top .le .op .control { position: relative; cursor: pointer; width: 56px; height: 56px; border-radius: 50%; margin-bottom: 27px; display: flex; justify-content: center; align-items: center; background-color: #fff; box-shadow: 0 0 16px #ddd;} .com01 .top .le .op .control .icon {width: fit-content;} .com01 .top .le .op .control .icon img{width: 18px;} .com01 .top .le .op .control .icon .com_icon2{display: none; position: relative; left: 2px;} .com01 .top .le .op .com01Swiper-pagination {position: unset;display: flex;flex-direction: column;} .com01 .top .le .text {} .com01 .top .le .text h4,.com01 .top .le .text .h4 {font-size: 34px;color: #333333;font-weight: bold;line-height: 1.1;margin-bottom: 45px;/*height: 120px;overflow-y: scroll;*/} .com01 .top .le .text h5,.com01 .top .le .text .h5 {font-family:arial ; font-size: 20px;color: #666666;line-height: 1.3;/*height: 224px;overflow-y: scroll;*/} .com01 .top .le .text h4::-webkit-scrollbar ,.com01 .top .le .text h5::-webkit-scrollbar,.com01 .top .le .text .h4::-webkit-scrollbar ,.com01 .top .le .text .h5::-webkit-scrollbar{ height: 1px; width: 3px; } .com01 .top .le .text h4::-webkit-scrollbar-thumb,.com01 .top .le .text h5::-webkit-scrollbar-thumb,.com01 .top .le .text .h4::-webkit-scrollbar-thumb,.com01 .top .le .text .h5::-webkit-scrollbar-thumb { border-radius: 2px; -webkit-box-shadow: inset 0 0 5px rgba(127,127,127,0.3); background: #ded8d8; } .com01 .top .le .text h4::-webkit-scrollbar-track,.com01 .top .le .text h5::-webkit-scrollbar-track,.com01 .top .le .text .h4::-webkit-scrollbar-track,.com01 .top .le .text .h5::-webkit-scrollbar-track { /* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */ border-radius: 2px; background: rgba(164,164,164,0.1); } .com01 .top .ri video{width: 100%;height: 390px;border-radius:20px;position: relative; object-fit: cover;} .com01 .top .ri {position: relative;width: 100%;} .com01 .top .ri .bo { cursor: pointer; position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%); z-index: 3;} .com01 .top .ri .bo img {width: 80px;} .com01 dl {display: flex;justify-content: space-between;justify-content: space-between;margin-top: 90px;} .com01 dl dd {width: 200px;display: flex;flex-direction: column;justify-content: center;align-items: center;} .com01 dl dd:hover img {transform: rotateY(180deg);} .com01 dl dd img { height: 85px; width: auto;} .com01 dl dd h4，.com01 dl dd .h4 {font-size: 60px;font-weight: bold;color: #333333;margin: 30px 0 20px;display: flex;} .com01 dl dd strong {font-size: 60px;font-weight: bold;color: #333333; line-height: 50px;font-family: 'fcmeGotham';} .com01 dl dd span { font-size: 16px; color: #666666; text-align: center; height: 67px;} .com01 dl dd:hover h4,.com01 dl dd:hover .h4,.com01 dl dd:hover strong {color: #0f2e93;} .com01 .top .ri {width: 49%;position: relative;} .com01 .top .ri .mask { -webkit-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); position: absolute; top: 50%; left: 50%; z-index: 1; } .com01 .top .ri .mask:before { position: relative; content: ''; display: block; margin-top: 100%; } .com01 .top .ri .mask:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 50%; } .com01 .top .ri:hover .mask{-webkit-animation:anim-out 1s;animation:anim-out 1s} .com01 .top .ri:hover .mask:after{-webkit-animation:anim-out-pseudo 1s;animation:anim-out-pseudo 1s} @-webkit-keyframes anim-out{0%{width:0%} 100%{width:100%} } @keyframes anim-out{0%{width:0%} 100%{width:100%} } @-webkit-keyframes anim-out-pseudo{0%{background:rgba(255,255,255,.5)} 100%{background:0 0} } @keyframes anim-out-pseudo{0%{background:rgba(255,255,255,.5)} 100%{background:0 0} } .com01 .circle { position: absolute; left: 54%; top: 51%; transform: translate(-50%,-50%) rotate(-90deg);} .com01 .circle .arc {stroke-dashoffset: 138px; stroke-dasharray: 138px, 138px;} .com01 .circle.active .arc { animation: stroke1 4s linear forwards; stroke-dashoffset: 138px; stroke-dasharray: 138px, 138px;} @keyframes stroke1 { 100%{ stroke-dashoffset: -138px; } } .com02 .circle { position: absolute; left: 56%; top: 49%; transform: translate(-50%,-50%) rotate(-90deg); } .com02 .circle .arc {stroke-dashoffset: 182px; stroke-dasharray: 182px, 182px;} .com02 .swiper-slide-active .circle .arc { animation: stroke2 4s linear forwards; stroke-dashoffset: 182px; stroke-dasharray: 182px, 182px;} @keyframes stroke2 { 100%{ stroke-dashoffset: -182px; } } .com02 {position: relative;padding-top: 220px;overflow: hidden;background-color: #f5f5f5;} .com02 .bg {position: absolute;top: 0px;left: 0px; left: 0px; height: 488px; overflow: hidden; width: 100%;} .com02 .bg img {height: 100%;} .com02 .icenter2 .hu_h3 {color: #fff;text-align: center;} .com02 .bg::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; /* background-color: rgba(0, 0, 0, 0.8); */ z-index: 1; } .com02 .icenter2 {position: relative;z-index: 2;position: relative;} .com02 .icenter2 .content .box::after { z-index: 1; position: absolute;content: "";right: 0px;top: 0px;height: 100%;width: 72%;background: url(../image/com02_gai.png);} .com02 .icenter2 .content { height: fit-content; margin-top: 50px;position: relative; overflow: hidden;border-radius: 20px;} .com02 .icenter2 .content .box {height: 470px;width: 100%;position: relative;} .com02 .icenter2 .content img { height: 100%; width: 900px;} .com02 .icenter2 .fix_icon { backdrop-filter: blur(5px); z-index: 3; position: absolute; width: 195px; height: 64px; border-radius: 30px; display: flex; align-items: center; bottom: 78px; left: 29%; padding: 10px;background-color: rgba(255, 255, 255, 0.1);} .com02 .icenter2 .fix_icon .dot {margin-right: 20px; width: 48px;height: 48px;border: 3px solid #0f2e93;border-radius: 50%;display: flex;justify-content: center;align-items: center;} .com02 .icenter2 .fix_icon .dot img { width: 20px; height: auto;} .com02 .icenter2 .fix_icon span {font-size: 16px; color: #fff; width: 59%;} .com02 .icenter2 .content .text { position: absolute; top: 20%; right: 21%; z-index: 2;} .com02 .icenter2 .content .text .icon { position: relative; border-radius: 50%; width: 62px;height: 62px;border: 4px solid #8b8b8b;background-color: #6e6e6e;display: flex;justify-content: center;align-items: center;} .com02 .icenter2 .content .text .icon img{ width: 35px; height: auto;} .com02 .icenter2 .content .text h4,.com02 .icenter2 .content .text .h4 { font-size: 30px; margin: 25px 0 18px; color: #0f2e93; font-weight: bold;} .com02 .icenter2 .content .text p {padding-right: 3px; font-size: 16px;color: #ffffff;line-height: 30px;width: 362px;height: 120px;overflow-y: scroll;} .com02 .icenter2 .content .text p::-webkit-scrollbar { height: 1px; width: 3px; } .com02 .icenter2 .content .text p::-webkit-scrollbar-thumb { border-radius: 2px; -webkit-box-shadow: inset 0 0 5px rgba(127,127,127,0.3); background: #ded8d8; } .com02 .icenter2 .content .text p::-webkit-scrollbar-track { /* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */ border-radius: 2px; background: rgba(164,164,164,0.1); } .com02 .com02Swiper-pagination { right: 44px; display: flex; flex-direction: column; width: fit-content!important; left: auto!important; top: 50%; transform: translateY(-50%); height: fit-content;} .com02 .com02Swiper-pagination .swiper-pagination-bullet { outline: none; opacity: 1; width: 12px;height: 12px; margin: 10px 0px!important;background-color: transparent;border: 2px solid #fff; } .com02 .com02Swiper-pagination .swiper-pagination-bullet-active { opacity: 1; background: transparent; border-color: #0f2e93; } .com03 {padding: 122px 0;position: relative;overflow: hidden;background-color: #f5f5f5;} .com03 dl {display: flex;flex-flow: wrap;justify-content: space-between;} .com03 dl dd {position: relative; width: 300px;display: flex;justify-content: center;align-items: center;flex-direction: column;} .com03 dl dd img { width: auto; height: 85px;} .com03 dl dd h4,.com03 dl dd h4 { height: 60px;text-align: center; font-size: 22px; color: #333333; position: relative; margin: 28px 0 48px;} .com03 dl dd h4::after,.com03 dl dd .h4::after {position: absolute; content: ""; width: 60px; height: 1px; background-color: #e9101c; left: 50%; transform: translateX(-50%); bottom: -25px;} .com03 dl dd p { font-size: 16px; color: #666666; line-height: 30px; text-align: center; height: 180px;} .com03 dl dd:hover img {transform: rotateY(180deg);} .com03 dl dd:hover h4,.com03 dl dd:hover .h4 {color: #0f2e93;} .com04 {padding: 110px 0 170px;position: relative;overflow: hidden;background-color: #fff;} .com_top {display: flex;justify-content: center;align-items: center;margin-bottom: 50px;flex-flow: wrap;flex-direction: column;} .com_top p {font-size: 18px;color: #666666;line-height: 30px;text-align: center;margin-top: 15px;width: 78%;} .com04 dl {display: flex;flex-flow: wrap;} .com04 dl dd {margin-bottom: 3.5%; transition: 0.5s; margin-right: 3.5%; display: flex;align-items: center; width: 31%;border-radius: 10px;padding: 40px 30px;box-shadow: 0 0 30px #ddd;} .com04 dl dd:hover {transform: scale(1.2);z-index: 3;} .com04 dl dd:nth-of-type(3n) {margin-right: 0px;} .com04 dl dd .icon {margin-right: 20px; background-color: #f2f2f2; width: 118px;height: 118px;border-radius: 50%;display: flex;justify-content: center;align-items: center;} .com04 dl dd:hover .icon {background-color:rgba(242, 242, 242, 0.2)} .com04 dl dd .icon img{width: 60px;transition: 0s;} .com04 dl dd .text h4,.com04 dl dd .text .h4 {margin-bottom: 24px; font-size: 24px;color: #333333;font-weight: bold;position: relative;display: none;} .com04 dl dd .text h4::after,.com04 dl dd .text .h4::after {content: ""; position: absolute;top: -12px; width: 47px; height: 2px; background-color: #0f2e93; left: 2px;} .com04 dl dd .text h5,.com04 dl dd .text .h5 { font-size: 24px;font-family: arial;color: #333;} .com04 dl dd:hover {background: url(../image/com04_bg.jpg);background-size: cover;} .com04 dl dd:hover .icon img {filter: grayscale(10) brightness(10);} .com04 dl dd:hover .text h4 ,.com04 dl dd:hover .text h5,.com04 dl dd:hover .text .h4 ,.com04 dl dd:hover .text .h5 {color: #fff;} .com04 dl dd:hover .text h4::after,.com04 dl dd:hover .text .h4::after {background-color: #fff;} /* honor */ .honor01 { position: relative; padding: 60px 0 ; overflow: hidden; } .honor01 .left .icenter2 {position: relative;} .honor01 .ho01_bg{ position: absolute; width: 100%; top: 11%; left: 30px;} .honor01 .left .hu_h3{margin-bottom: 24px;} .honor01 .left dl dd{width: 33.333%;display: flex;justify-content: flex-start;align-items: center;padding-bottom: 20px;padding-top: 40px; position: relative;cursor: pointer;} .honor01 .right dl dd{width: 22.8%;} .honor01 .left dl dd::after {transition: 0.4s; position: absolute; content: ""; bottom: 0px; background-color: #0f2e93; width: 0%; height: 2px;} .honor01 .left dl dd .text {} .honor01 .left dl dd .text h4,.honor01 .left dl dd .text .h4 {font-size: 16px;color: #999999;font-family: arial;margin-bottom: 4px;} .honor01 .left dl dd .text h5,.honor01 .left dl dd .text .h5 {font-size: 16px;font-weight: bold;color: #666666;} .honor01 .left dl dd .icon {width: 52px;opacity: 1;transition: 0.4s;margin-right: 10px;} .honor01 .left dl dd:hover .text h5,.honor01 .left dl dd:hover .text .h5 {color: #0f2e93;} .honor01 .left dl dd:hover .icon {opacity: 1;} .honor01 .left dl dd:hover::after {width: 100%;} .honor01 .left dl dd.active .text h5,.honor01 .left dl dd.active .text .h5 {color: #0f2e93;} .honor01 .left dl dd.active .icon {opacity: 1;} .honor01 .left dl dd.active::after {width: 100%;} .honor01 .right { border-top-left-radius:15px; position: relative;right: 0px;top: 25px;height: auto; background: #fff; padding: 40px; border-radius: 30px; } .honor01 .honor01Swpier {height: auto;width: 100%; border-top-left-radius: 20px; overflow: hidden;} .honor01 .honor01Swpier .box ,.honor01 .honor01Swpier .box .imgbox {height: auto; border-top-left-radius: 20px;} .honor01 .honor01Swpier .box .imgbox img{ height: auto; border-top-left-radius: 20px; overflow: hidden;} .honor01 .right .h01thumbs { position: absolute; left: -100px; bottom: -106px;} .honor01 .right .h01thumbs .text{ opacity: 0;transition: 0.4s; box-shadow: 5px 0px 24px rgb(0 0 0 / 20%); padding: 70px; border-radius: 20px; width: 542px; height: 318px; display: flex; justify-content: center; flex-direction: column; background: url(../image/top4_bj.png); background-size: cover; box-sizing: border-box;} .honor01 .right .text h4,.honor01 .right .text .h4 {font-size: 30px;font-weight: bold;color: #333333;margin-bottom: 40px;position: relative;} .honor01 .right .text h4::after,.honor01 .right .text .h4::after {content: ""; position: absolute; bottom: -22px; width: 47px; height: 2px; background-color: #0f2e93; left: 2px;} .honor01 .right .text p {font-size: 18px;line-height: 30px;color: #666666;height: 90px;overflow-y: scroll;} .honor01 .right .text p::-webkit-scrollbar { height: 1px; width: 3px; } .honor01 .right .text p::-webkit-scrollbar-thumb { border-radius: 2px; -webkit-box-shadow: inset 0 0 5px rgba(127,127,127,0.3); background: #ded8d8; } .honor01 .right .text p::-webkit-scrollbar-track { /* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */ border-radius: 2px; background: rgba(164,164,164,0.1); } .honor01 .right .h01thumbs .swiper-slide-active .text {opacity: 1;} .honor02 {padding: 120px 0;position: relative;overflow: hidden;background: url(../images/honor02_bg.jpg);background-size: cover; background-attachment: fixed;} .honor02 dl {display:flex;justify-content: space-between;} .honor02 dl dd {transition: 0.5s; position: relative; padding: 40px 38px 32px 50px;width: 31%;border-radius: 10px;box-shadow: 0 0 20px #ddd;background-color: #fff;overflow: hidden;} .honor02 dl dd:hover {background-color: #0f2e93;transform: scale(1.2);z-index: 3;} .honor02 dl dd .text {margin-bottom: 10px;} .honor02 dl dd .text h4,.honor02 dl dd .text .h4 { color: var(--dex); font-size: 16px; line-height: 26px; margin-bottom: 39px; width: 100%;} .honor02 dl dd .text h4 strong,.honor02 dl dd .text .h4 strong { color: var(--dex); font-size: 70px; font-family: arial; font-weight: bold; margin-right: 5px; line-height: 72px;} .honor02 dl dd .text h5,.honor02 dl dd .text .h5 {font-size: 18px;color: #666666;margin-top: 5px;} .honor02 dl dd .bot {display: flex;justify-content: space-between;align-items: flex-end;} .honor02 dl dd .bot span {font-size: 14px;font-weight: bold;color: #666666;opacity: 0.5;} .honor02 dl dd .bot .icon {width: 82px;} .honor02 dl dd .bot .icon img {transition: 0s;} .honor02 dl dd .bg { position: absolute; right: -28px; bottom: -23px; width: 195px; opacity: 0.04;} .honor02 dl dd .bg img {transition: 0s;} .honor02 dl dd:hover .text h4,.honor02 dl dd:hover .text .h4,.honor02 dl dd:hover .bot span,.honor02 dl dd:hover .text h4 strong,.honor02 dl dd:hover .text h5,.honor02 dl dd:hover .text .h4 strong,.honor02 dl dd:hover .text .h5 {color: #fff;} .honor02 dl dd:hover .bg img{filter: grayscale(10) brightness(10);} .honor02 dl dd:hover .bg { opacity: 0.1; } .honor02 dl dd:hover .bot .icon img{filter: grayscale(10) brightness(10);} .honor03 .hu_h3 {margin-bottom: 40px;text-align: center;} .honor03 {padding: 40px 0 188px;position: relative;overflow: hidden;margin-bottom: 80px;} .honor03 .icenter2 {position: relative;} .honor03 .ban {position: absolute; bottom: 125px; width: 100%;} .honor03Swiper {overflow: hidden;height: 580px;} .honor03 .swiper-wrapper .swiper-slide img { width: 190px; max-height: 270px; transition: 0s; } .honor03 .swiper-wrapper .swiper-slide-active img { width: 410px; max-height: 570px; } .honor03 .swiper-wrapper .swiper-slide-active { margin-right: 55px !important; } .honor03 .swiper-wrapper .swiper-slide { display: flex; align-items: flex-end;} .honor03 .swiper-wrapper { align-items: flex-end; } .honor03 .fa {position: relative; right: 0px; top: 0px; margin-top: 0px; left: 0px;background: url(../images/zs/honor_icon.png) 100%; width: 23px; height: 49px; outline: none;} .honor03 .com_cc {display: flex;align-items: center;position: absolute;cursor: pointer; z-index: 8;} .honor03 .com_cc .text h4,.honor03 .com_cc .text .h4 {font-size: 18px;color: #999999;margin-bottom: 0px;} .honor03 .com_cc .text h5,.honor03 .com_cc .text .h5 {font-size: 24px;color: #333333;width: 390px;font-weight: bold;line-height: 1.1;} .honor03 .le_cc .text h5,.honor03 .le_cc .text h5 .pav,.honor03 .le_cc .text .h5,.honor03 .le_cc .text .h5 .pav{text-align: start;} .honor03 .ri_cc .text h5,.honor03 .ri_cc .text h5 .pav,.honor03 .ri_cc .text .h5,.honor03 .ri_cc .text .h5 .pav{text-align: end;} .honor03 .le_cc {left: 0px;top: 0px;} .honor03 .ri_cc {right: 0px;top: 0px; flex-flow: row-reverse;} .honor03 .ri_cc .text h4,.honor03 .ri_cc .text .h4 {text-align: right;} .honor03 .ri_cc .text {margin-right: 18px;} .honor03 .le_cc .text {margin-left: 18px;} .honor03 .le_cc .fa {transform: rotate(180deg);} .honor03Swiper .cc {display: none;} .honor04 {padding: 130px 0 110px;position: relative;overflow: hidden;background: url(../image/honor04_bg1.jpg);background-size: cover; background-attachment: fixed;} .honor04 .hu_h3 {margin-bottom: 20px;text-align: center;} .honor04 .bot {position: relative;width: 1440px;margin: auto;overflow: hidden;} .honor04 .botF {position: relative;width: fit-content; margin: auto;} .honor04 .bot .h04Swiper {overflow: hidden; padding: 20px 0;} .honor04 .box {position: relative;top: 0px;transition: 0.3s;cursor: pointer;} .honor04 .box .imgbox {box-shadow: 0 0 15px #ddd;} .honor04 .imgbox .con {position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);width: 156px; box-shadow: 0 6px 15px rgb(0 0 0 / 20%);} .honor04 .box:hover {top: -15px;} .honor04 .box:hover h4,.honor04 .box:hover .h4 {color:#0f2e93;} .honor04 .box h4,.honor04 .box .h4 {font-size: 20px;font-weight: bold;color: #666666;margin-top: 24px;text-align: center;} .honor04 .fa-angle-right:before { position: relative; left: 2px; height: 51px; line-height: 51px; } .honor04 .fa-angle-left:before { position: relative; right: 2px; height: 51px; line-height: 51px; } .honor04 .swiper-button-next { right: -87px;} .honor04 .swiper-button-prev { left: -87px;} .honor04 .fa:hover {background-color: #0f2e93;color: #fff;border-color: #0f2e93;} .imgshowmask{width: 100%;height: 100%;background-color: rgba(0,0,0,0.8);position: fixed;top: 0;left: 0;z-index: 9999999;display: none;} .imgshow{width: 60%;height: 85%;display: flex;display: -webkit-flex;-webkit-align-items: center;align-items: center;-webkit-justify-content: center;justify-content: center;position: absolute;top: 10%;left: 20%;background-color: #ffffff;} .imgshow p img{ display: block; width: auto; max-width: 100%; min-width: 300px; margin: 0 auto;object-fit: contain;} .honor05 {padding: 80px 0;position: relative;overflow: hidden;} .honor05 .hu_h3 {margin-bottom: 40px;text-align: center;} .honor05 .bot {position: relative;} .honor05 .bot .h05Swiper {overflow: hidden;} .honor05 .box:hover .imgbox img {transform: scale(1.1);} .honor05 .box:hover h4,.honor05 .box:hover .h4 {color:#0f2e93;} .honor05 .box {cursor: pointer;} .honor05 .box .imgbox {border: 17px solid #d7d7d7;} .honor05.str{padding: 100px 0 240px} .honor05.str .box .imgbox {border: 1px solid #eee;border-radius: 10px;} .honor05 .box h4,.honor05 .box .h4 {font-size: 20px;font-weight: bold;color: #666666;margin-top: 24px;text-align: center;} .honor05 .bg1 { position: absolute; left: -14%; top: 0%; z-index: -1; animation: ro 5s infinite; width: 20%;} .honor05 .bg2 { position: absolute; right: -14%; bottom: 12%; z-index: -1; animation: ro 5s infinite; width: 20%;} .honor05 .fa-angle-right:before { position: relative; left: 2px; height: 51px; line-height: 51px; } .honor05 .fa-angle-left:before { position: relative; right: 2px; height: 51px; line-height: 51px; } .honor05 .swiper-button-next { right: -87px;} .honor05 .swiper-button-prev { left: -87px;} .honor05 .fa:hover {background-color: #0f2e93;color: #fff;border-color: #0f2e93;} /* acc */ .acc .top {padding: 100px 0 30px;position: relative;} .acc .top .box {display: flex; justify-content: center; align-items: center; flex-direction: column; width: fit-content; padding: 0 42px;} .acc .top .box .icon {width: 220px;border: 1px solid #ccc;margin-bottom: 22px; padding: 8px;} .acc .top .box span {font-size: 18px;color: #333333;margin-bottom: 25px;} .acc .top .box h4,.acc .top .box .h4 { font-size: 26px; font-weight: bold; color: #0f2e93; margin-bottom: 60px; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(45deg, #ff000a 0%, rgb(86 0 0) 50%, rgb(240, 13, 13) 100%); -webkit-text-fill-color: transparent; text-fill-color: transparent; animation: bg 3s linear infinite; width: 849px; text-align: center;} @keyframes bg { 100%{ background-position: -800px; } } .acc .top .box .hu_h3 {} .acc .top .bg1 { position: absolute; left: -23%; top: -18%; z-index: -1; animation: ro 5s infinite;} .acc .bot {padding: 80px 0 165px;position: relative;background: url(../image/apply-bg.jpg);background-size: cover;z-index: 2;} .acc .bot .icenter2 {position: relative;} .acc .bot dl {display: flex;margin-left: 54px;} .acc .bot dl dd {transition: 0.4s; position: relative;top: 0px; width: 182px; position: relative; margin-right: 88px;} .acc .bot dl dd .content { height: 100%;transition: 0.3s; padding: 30px 12px 12px 30px; width: 100%; background-color: #fff; box-shadow: 0 0 20px #e4e4e4;} .acc .bot dl dd:hover .content { transform: scale(1.2);} .acc .bot dl dd h4,.acc .bot dl dd .h4 {font-size: 18px;font-weight: bold;color: #333333;margin-bottom: 13px;} .acc .bot dl dd:hover h4,.acc .bot dl dd:hover .h4 {color: #0f2e93;} .acc .bot dl dd h5,.acc .bot dl dd .h5 {font-size: 14px; color: #666666; margin-bottom: 44px;} .acc .bot dl dd .aft_jian {width: 37px; position: absolute; right: -62px; top: 54%; transform: translateY(-50%);} .acc .bot dl dd .i { display: flex; align-items: flex-end; width: 100%; justify-content: flex-end;} .acc .bot dl dd .i .icon1 {width: 30px; margin-right: 3px;} .acc .bot dl dd .i .icon2 {width: 80px;} .acc .bot .phone {position: absolute;height: 687px;width: auto;right: 20px;bottom: 70px;} .fellow-sea {width: 120px; height: 120px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; display: none;} .fellow-sea span { display: block; width: 100%; height: 100%; border: 1px solid #0f2e93; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; position: absolute; top: 0; left: 0; transform-origin: center center; } .fellow-sea span:nth-of-type(1) { transform: scale(0.25); -webkit-transform: scale(0.25); -moz-transform: scale(0.25); -ms-transform: scale(0.25); -o-transform: scale(0.25); opacity: 0.5; animation: sea1 1.5s infinite; -webkit-animation: sea1 1.5s infinite; } .fellow-sea span:nth-of-type(2) { transform: scale(0.5); -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); opacity: 0.4; animation: sea2 1.5s infinite; -webkit-animation: sea2 1.5s infinite; } .fellow-sea span:nth-of-type(3) { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); opacity: 0.3; animation: sea3 1.5s infinite; -webkit-animation: sea3 1.5s infinite; } .fellow-sea span:nth-of-type(4) { transform: scale(2); -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); opacity: 0.2; animation: sea4 1.5s infinite; -webkit-animation: sea4 1.5s infinite; } .fellow-sea span:nth-of-type(5) { transform: scale(4); -webkit-transform: scale(4); -moz-transform: scale(4); -ms-transform: scale(4); -o-transform: scale(4); opacity: 0.1; animation: sea5 1.5s infinite; -webkit-animation: sea5 1.5s infinite; } @keyframes sea1 { 100% { transform: scale(0.5); -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); opacity: 0.4; } } @keyframes sea2 { 100% { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); opacity: 0.3; } } @keyframes sea3 { 100% { transform: scale(2); -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); opacity: 0.2; } } @keyframes sea4 { 100% { transform: scale(4); -webkit-transform: scale(4); -moz-transform: scale(4); -ms-transform: scale(4); -o-transform: scale(4); opacity: 0.1; } } @keyframes sea5 { 100% { transform: scale(8); -webkit-transform: scale(8); -moz-transform: scale(8); -ms-transform: scale(8); -o-transform: scale(8); opacity: 0; } } /* aft */ .aft01 {padding: 120px 0 100px; background: url(../images/casbg.jpg);background-size: cover;position: relative;overflow: hidden;display: flex;justify-content: center;align-items: center;flex-direction: column;background-position: bottom center;} .aft01 h4,.aft01 .h4 { font-size: 24px; color: #333333; margin: 16px 0 28px; font-weight: normal;max-width: 45%;text-align: center;} .aft01 .box {display: flex; margin-bottom: 60px;} .aft01 .box .min {width: 400px;height: 400px;border-radius: 50%;display: flex;justify-content: center;align-items: center;flex-direction: column;} .aft01 .box .min:nth-of-type(1) {transition: 0.5s; background-color: rgb(15 46 147 / 90%);position: relative;z-index: 1;left: 0px;} .aft01 .box .min:nth-of-type(2) {transition: 0.5s; background-color: rgb(211 19 29 / 90%); margin-left: -42px;position: relative;right: 0px;} /*.aft01 .box:hover .min:nth-of-type(1){left: 308px;} .aft01 .box:hover .min:nth-of-type(2){right: 308px;}*/ .aft01 .box .min h5,.aft01 .box .min .h5 {font-size: 24px;font-weight: bold;margin-bottom: 30px;} .aft01 .box .min h6,.aft01 .box .min .h6 {font-size: 16px; color: #fff; font-weight: normal; margin-bottom: 35px; text-align: center; width: 75%; height: 77px; } .aft01 .box .min h6::-webkit-scrollbar,.aft01 .box .min .h6::-webkit-scrollbar { height: 1px; width: 3px; } .aft01 .box .min h6::-webkit-scrollbar-thumb,.aft01 .box .min .h6::-webkit-scrollbar-thumb { border-radius: 2px; -webkit-box-shadow: inset 0 0 5px rgba(127,127,127,0.3); background: #ded8d8; } .aft01 .box .min h6::-webkit-scrollbar-track,.aft01 .box .min .h6::-webkit-scrollbar-track { /* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */ border-radius: 2px; background: rgba(164,164,164,0.1); } .aft01 .box .min img {width: 62px;} .aft01 p {font-size: 20px;color: #333333;font-weight: bold;max-width: 40%;text-align: center;} .aft02 {padding: 160px 0 60px;position: relative;overflow: hidden;} .aft02 .bg_fix {position: absolute;top: 0px;left: 0px;width: 100%;height: 690px;} .aft02 .bg_fix::after { content: ""; display: inline-block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); position: absolute; left: 0; top: 0; } .aft02 .bg_fix img {height: 100%;} .aft02 .top {display: flex;justify-content: center;align-items: center;flex-direction: column;margin-bottom: 47px; z-index: 1; position: relative;} .aft02 .top .hu_h3 {color: #fff;} .aft02 .top p {font-size: 18px;line-height: 28px;text-align: center;color: #fff;margin-top: 10px;width: 964px;} .aft02 .top .line {height: 75px;width: 1px;background-color: rgba(255,255,255,0.4);margin: 28px 0 ;position: relative;} .aft02 .top .line::after {content: ""; width: 7px; height: 7px; background-color: #fff; position: absolute; left: 50%; transform: translateX(-50%); top: 0px; animation: 2s linear 0.5s infinite hua2;} @keyframes hua2 { from { top: 0%; } to { top: 95%; } } .aft02 .top h4,.aft02 .top .h4 {font-size: 30px;color: #fff;} .aft02 .botF {padding: 0 90px;position: relative;} .aft02 .botF .fa { background-image: none; width: auto; height: auto; margin: 0; padding: 0; font-size: 74px; color: #cbcbcb; outline: none;} .aft02 .botF .fa:hover {color: #0f2e93;} .aft02 .bot {position: relative;overflow: hidden;margin: auto;} .aft02 .bot .box { background-color: #fff; padding: 50px 0 128px; border-radius: 12px; box-shadow: 0px 5px 15px rgb(102 102 102 / 30%); display: flex; justify-content: center; align-items: center; flex-direction: column;} .aft02 .bot .box .icon {border-radius: 50%; position: relative; height: 111px; display: flex;justify-content: center;align-items: center; width: 111px;} .aft02 .bot .box:hover .icon::before { animation: img01anime 10s 0s linear infinite; } .aft02 .bot .box:hover .icon::after{ animation: img02anime 10s 0s linear infinite;} .aft02 .bot .box .icon::before { content: ""; position: absolute; width: 120%; height: 120%; border-radius: 50%; border: 1.6px dashed #0f2e93;} .aft02 .bot .box .icon::after{ content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 1.6px dashed #0f2e93;} @keyframes img01anime{ 0%{transform: rotate(0deg);} 100%{transform: rotate(360deg);} } @keyframes img02anime{ 0%{transform: rotate(0deg);} 100%{transform: rotate(-360deg);} } .aft02 .bot .box .icon img {width: 56px;transition: 0s;} .aft02 .bot .box h4,.aft02 .bot .box .h4 {font-size: 20px;font-family: arial;font-weight: bold;color: #333333;margin-bottom: 5px; margin-top: 54px;} .aft02 .bot .box h5,.aft02 .bot .box .h5 { width: 85%; font-size: 22px; position: relative; color: #666666; text-align: center; line-height: 26px; height: 52px;padding-top: 15px;letter-spacing: 1px;} .aft02 .bot dd:last-child .box h5,.aft02 .bot dd:last-child .box .h5{font-size: 16px;line-height: 1.4;letter-spacing: 0;} .aft02 .bot .box h5::-webkit-scrollbar,.aft02 .bot .box .h5::-webkit-scrollbar { height: 1px; width: 3px; } .aft02 .bot .box h5::-webkit-scrollbar-thumb,.aft02 .bot .box .h5::-webkit-scrollbar-thumb { border-radius: 2px; -webkit-box-shadow: inset 0 0 5px rgba(127,127,127,0.3); background: #ded8d8; } .aft02 .bot .box h5::-webkit-scrollbar-track,.aft02 .bot .box .h5::-webkit-scrollbar-track { /* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */ border-radius: 2px; background: rgba(164,164,164,0.1); } .aft02 .bot .box h5::after,.aft02 .bot .box .h5::after {content: "";position: absolute;width: 20px;height: 4px;background-color: #0f2e93;left: 50%;transform: translateX(-50%);bottom: -75px;} .aft02 .bot .box:hover h5::after,.aft02 .bot .box:hover .h5::after {background-color: #fff;} .aft02 .bot .box:hover h4,.aft02 .bot .box:hover h5,.aft02 .bot .box:hover .h4,.aft02 .bot .box:hover .h5{color: #fff;} .aft02 .bot .box:hover .icon img {filter: grayscale(10) brightness(10);} .aft02 .bot .box:hover .icon,.aft02 .bot .box:hover .icon::before,.aft02 .bot .box:hover .icon::after {border-color: #fff;} .aft02 .bot .box:hover {background-color: #0f2e93;} .pb-0{padding-bottom: 0!important;} .aft02 .bot .aft02Swiper {width: 1200px;margin: auto;} .aft02 .bot {width: 1242px;margin: auto; padding: 22px 0;} .aft03 {padding:30px 0 200px;position: relative;overflow: hidden;} .aft03 .icenter2 {display: flex;justify-content: space-between;align-items:center;background: #f8f8f8;width: 1200px;} .aft03 .icenter2 .le {overflow: hidden;position: relative;width: 40%; height: 495px;} .aft03 .icenter2 .le::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,.5); content: ''; -webkit-transition: -webkit-transform .6s; transition: transform .6s; -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-110%,0); transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-110%,0); z-index: 1; } /*.aft03 .icenter2:hover .le::before { -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 115%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 115%, 0); }*/ .aft03 .icenter2 .le img{height: 100%;} /*.aft03 .icenter2 .le:hover img {transform: scale(1.1);}*/ .aft03 .icenter2 .ri {width: 50%;margin-right: 50px;} .aft03 .icenter2 .ri p{color: #444;font-size: 20px;font-weight: bold;font-family: 'Urbanist';padding-bottom: 20px;} .aft03 .icenter2 .ri p.ccx{color: #666;font-weight: 500;padding-top: 0;} .aft03 .icenter2 .ri p.ccf{color: #111;font-weight: 500;padding-top: 40px;font-weight: bold;} .aft03 .icenter2 .ri ul {margin: 20px 0 0px;} .aft03 .icenter2 .ri ul li {position: relative;padding-left: 15px;font-size: 18px;color: #666666;line-height: 30px;} .aft03 .icenter2 .ri ul li::before { width: 5px; height: 5px; border-radius: 50%; background-color: #666666; position: absolute; left: 0px; top: 13px; content: "";} .aft03 dl dd{ padding-top: 60px; display: flex;align-items: center;padding-bottom: 20px;border-bottom: 1px solid #d5d5d5;} .aft03 dl dd .icon {width: 86px;margin-right: 58px;} .aft03 dl dd .text {} .aft03 dl dd .text h4,.aft03 dl dd .text .h4 { position: relative; padding-bottom: 0px; font-size: 18px; font-family: alibb; color: #333333; width: fit-content; margin-bottom: 10px;} .aft03 dl dd .text h4 strong,.aft03 dl dd .text .h4 strong {font-size: 70px;font-weight: bold;} .aft03 dl dd .text h4::after,.aft03 dl dd .text .h4::after { position: absolute;content: "";left: 0px;bottom: 0px; width: 100%;height: 5px;background-color:#0f2e93;} .aft03 dl dd .text p {font-size: 18px;color: #666666;} .aft04 {background: url(../image/aft04_bg.jpg);background-size: cover;position: relative;overflow: hidden;background-attachment: fixed;padding: 130px 0 180px;} .aft04 .icenter2 {position: relative; z-index: 1;} .aft04::after { content: ""; display: inline-block; width: 100%; height: 100%; background-color: rgba(239, 241, 247, 0.65); position: absolute; left: 0; top: 0; } .aft04 .hu_h3 {padding-left: 42px;} .aft04 dl {margin-top: 50px; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2;} .aft04 dl dd {width: 48%;padding-left: 42px;padding-bottom: 42px;box-sizing: border-box;display: flex;align-items: center;position: relative; justify-content: space-between;} .aft04 dl dd .bg {position: absolute; width: 127px;left: 0px;bottom: 0px;transition: 0.5s;} .aft04 dl dd:hover .bg {left: 30px;bottom: 30px;} .aft04 dl dd .le {width: 38.5%;} .aft04 dl dd .ri {width: 51%;} .aft04 dl dd .ri .name {font-size: 16px;font-weight: bold;color: #333333;width: 156px;height: 43px;border: 1px solid #d3d3d4;display: flex;justify-content: center;align-items: center; background-color: #fff;} .aft04 dl dd:hover .ri .name {background-color: #0f2e93;color: #fff;} .aft04 dl dd .ri .number{margin-top: 78px;} .aft04 dl dd .ri .number .t {display: flex;align-items: center; margin-bottom: 17px; } .aft04 dl dd .ri .number .t .icon {width: 65px; margin-right: 12px;animation: bounce-up-data-v-7e3caf58 1.5s linear infinite;} .aft04 dl dd .ri .number .t a {font-size: 40px;font-family: arial;font-weight: bold;color: #0f2e93;position: relative;} .aft04 dl dd .ri .number .t a::after { content: ""; position: absolute; left: 5px; bottom: -7px; width: 50px; height: 3px; background-color: #0f2e93;} .aft04 dl dd .ri .number span {font-size: 18px;font-family: arial;color: #999999;} /* solu */ .solu01 { padding: 100px 0 156px; position: relative; overflow: hidden;} .solu01 .icenter2 {position: relative;} .solu01 .top {display: flex;justify-content: space-between;flex-direction: column;align-items: center; margin-bottom: 90px;} .solu01 .top p {font-size: 18px;color: #666666;padding: 0 56px;margin-top: 18px;text-align: center;line-height: 30px;} .solu01 dl { width: 41%; height: 502px;} .solu01 dl dd { transition: 0.5s; margin-bottom: 25px; padding: 0 47px;} .solu01 dl dd:nth-of-type(6){margin-bottom: 0px;} .solu01 dl dd a{display: flex;align-items: center;} .solu01 dl dd a:hover h4,.solu01 dl dd a:hover .h4 {color: #0f2e93;} .solu01 dl dd a:hover .icon {opacity: 1;} .solu01 dl dd.active {width: 100%;box-shadow: 0 0 17px #ddd;padding: 38px 47px;border-radius: 10px; background-color: #fff;} .solu01 dl dd.active a {align-items: unset;} .solu01 dl dd .icon {width: 29px;margin-right: 24px;opacity: 0.5;} .solu01 dl dd.active .icon {opacity: 1;} .solu01 dl dd .text {} .solu01 dl dd .text h4,.solu01 dl dd .text .h4 {font-size: 22px;color: #333333;} .solu01 dl dd.active .text h4,.solu01 dl dd.active .text .h4 {color: #0f2e93;font-weight: bold;} .solu01 dl dd .text p {font-size: 18px;color: #666666;line-height: 30px;margin-bottom: 20px;display: none;margin-top: 18px; width: 383px;} .solu01 dl dd .text .cha {font-size: 16px;color: #0f2e93;display: none;} .solu01 dl dd.active .text p,.solu01 dl dd.active .text .cha {display: block;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;} .solu01 .ri_bg {position: absolute;overflow: hidden;width: 49.6%;right: 0px;top: 290px; border-bottom-left-radius: 20px; border-top-left-radius: 20px; overflow: hidden;height: 576px;} .solu01 .ri_bg .solu01Swiper,.solu01 .ri_bg .solu01Swiper .imgbox,.solu01 .ri_bg .solu01Swiper .imgbox img{height: 100%;} .solu01 .ho01_bg { position: absolute; width: 100%; top: 11%; left: 30px; } .solu02 {padding: 122px 0 234px;position: relative;overflow: hidden;background: url(../image/solu02_bg.jpg);background-attachment: fixed;} .solu02 .hu_h3 {text-align: center;margin-bottom: 26px; color: #fff;} .solu02 .bot {padding-left: 3.5%;overflow: hidden;position: relative;} .solu02 .bot .solu02Swiper {overflow: hidden;} .solu02 .bot .box:hover .imgbox img {transform: scale(1.1);} .solu02 .bot .box {border-radius: 12px;overflow: hidden;} .solu02 .bot .box .imgbox .tip{position: absolute;width: 107px;height: 32px;border-top-left-radius:12px ;border-bottom-right-radius: 12px;background-color: #0f2e93;left: 0px;top: 0px;color: #fff;display: flex;justify-content: center;align-items: center;} .solu02 .bot .box .b {padding: 36px 24px 40px 34px; background-color: #fff;} .solu02 .bot .box .b h4,.solu02 .bot .box .b .h4 {font-size: 20px;font-weight: bold;color: #333333;margin-bottom: 18px; height: 52px;} .solu02 .bot .box:hover .b h4,.solu02 .bot .box:hover .b .h4 {color: #0f2e93;} .solu02 .bot .box .b p { font-size: 16px; color: #666666; padding-bottom: 0px; margin-bottom: 20px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; display: none;} .solu02 .bot .box .b .cc .bo { font-size: 16px; width: 40px;height: 40px;color: #fff;background-color: #0f2e93;border-radius: 50%;display: flex;justify-content: center;align-items: center;} .solu02 .bot .box .b .cc{ padding-top: 30px; border-top: 1px solid #ddd;} .solu02 .op { position: absolute; bottom: 12%; display: flex; align-items: center; justify-content: space-between; left: calc((100% - 1400px)/2); width: 1400px;} .solu02 .op .solu02Swiper-pagination { position: unset; width: 90%; height: 3px;} .solu02 .op .fa {position: unset;margin: 0px;padding: 0px;width: 37px;height: auto;background-image: none;} .solu02 .op .fa-left {transform: rotateY(180deg);} .solu02 .op .fa-right {} .solu02 .op .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #0f2e93;} .solu02 .op .swiper-pagination-progressbar { background: rgba(62, 62, 62,0.9); } .solu03 {padding: 128px 0 90px;position: relative;overflow: hidden;} .solu03 .wen1 { position: absolute; font-size: 240px; font-family: arial; color: rgba(240, 240, 240); font-weight: bold; right: 2%; top: 40%;} .solu03 .wen2 { font-family: arial; position: absolute; font-size: 240px; color: rgba(240, 240, 240); font-weight: bold; right: 2%; top: 68%; width: fit-content; height: 98px; line-height: 212px;} .solu03 .top {display: flex;justify-content: space-between;align-items: center;height: 250px;} .solu03 .top .le {width: 69%;padding-bottom: 65px;height: 100%;display: flex;justify-content: center;flex-direction: column;} .solu03 .top .le p { width: 810px; font-size: 18px; color: #666666; line-height: 30px; position: relative; margin-top: 40px;} .solu03 .top .le p::before { position: absolute; left: 0px; top: -20px; width: 90px; height: 3px; background-color: #0f2e93; content: "";} .solu03 .top .imgbox {width: 31%;border-radius: 20px;border-bottom-left-radius: 0px; height: 100%;} .solu03 .top .imgbox::after { content: ""; display: inline-block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.15); position: absolute; left: 0; top: 0; } .solu03 .top .imgbox img {height: 100%;} .solu03 .top .imgbox:hover img {transform: scale(1.1);} .solu03 .bot {height: 490px;display: flex;} .solu03 .bot .imgbox:hover img{transform: scale(1.1);} .solu03 .bot .imgbox{border-radius: 20px;border-top-right-radius: 0px;width: 69%; height: 100%;} .solu03 .bot .imgbox::after { content: ""; display: inline-block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.15); position: absolute; left: 0; top: 0; } .solu03 .bot .imgbox img {height: 100%;} .solu03 .bot .ri {height: 100%;width: 31%;padding: 347px 0 0 90px;} .solu03 .bot .ri p {font-size: 24px;color: #333333;font-weight: bold;line-height: 36px;position: relative;} .solu03 .bot .ri p::before {position: absolute;top: -30px;width: 65px;height: 2px;background-color: #0f2e93;content: "";} .solu04 {padding-bottom: 240px;position: relative;} .solu04 .hu_h3 {margin-bottom: 38px;text-align: center;} .solu04 .bg { position: absolute; left: -14%; top: -48%; width: 50%; height: 100%;} .solu04 .bot {position: relative; padding: 69px 0 100px; background-color: #fff; box-shadow: 0 0 18px #ddd; border-radius: 20px;} .solu04 .bot .s04_textSwiper-pagination {bottom: -45px; left: 50%; transform: translateX(-50%);} .solu04 .bot .swiper-pagination-bullet { margin: 0 7px; width: 25px; height: 3px; border-radius: 0%; background: #cacaca; opacity: 1; } .solu04 .bot .swiper-pagination-bullet-active { background: #0f2e93; } .solu04 .nav {padding: 0 122px 16px;border-bottom: 1px solid #dedede;display: flex;justify-content: space-between;} .solu04 .nav .box {width: 108px;display: flex;flex-direction: column;justify-content: center;align-items: center;position: relative;cursor: pointer;} .solu04 .nav .box img { width: 59px; margin-bottom: 18px;} .solu04 .nav .box:hover img {transform: rotateY(180deg);} .solu04 .nav .box::after {display: none; position: absolute;content: "";left: 0px;bottom: -17px;width: 100%;height:3px;background-color: #0f2e93;} .solu04 .nav .box.active::after {display: block;} .solu04 .nav .box.active span {color: #0f2e93;} .solu04 .nav .box:hover::after {display: block;} .solu04 .nav .box:hover span {color: #0f2e93;} .solu04 .nav .box img {width: 68px;} .solu04 .nav .box span { color: #333333; font-size: 16px; text-align: center; height: 42px;} .solu04 .content { padding: 50px 122px 0;} .solu04 .content .swiper {overflow: hidden;} .solu04 .content .min h4,.solu04 .content .min .h4 { font-size: 30px; color: #333333; margin-bottom: 8px; font-weight: bold;} .solu04 .content .min h5,.solu04 .content .min .h5 {font-size: 18px;color: #666666;line-height: 30px;width: 840px;} .solu04 .swiper-slide .min {opacity: 0;transition: 0.4s;} .solu04 .swiper-slide-active .min {opacity: 1;} /* s_list */ .s_list01 {padding: 197px 0 15px; position: relative; z-index: 10;} .s_list01 .top { width: 1400px; padding: 75px 0 53px 95px; box-shadow: 10px 5px 20px rgb(102 102 102 / 30%); border-radius: 12px; position: absolute; top: -28%; left: 50%; transform: translateX(-50%); background-color: #fff;} .s_list01.str .top{top: -60%;} .s_list01.str .top h3,.s_list01.str .top .h3{font-size: 40px;text-transform: capitalize;} .s_list01 .top:hover .icon img{transform: rotateY(180deg);} .s_list01 .top h3,.s_list01 .top .h3 {font-size: 54px;color: #333333;font-weight: bold;position: relative;margin-bottom: 30px;} .s_list01 .top h3::before,.s_list01 .top .h3::before { position: absolute; content: ""; left: -95px; top: 57%; transform: translateY(-50%); height: 50px; width: 3px; background-color: #0f2e93;} .s_list01 .top p {font-size: 18px;line-height: 30px;color: #666666;margin-bottom: 40px; width: 76%;} .s_list01 .top .amore { display: flex; align-items: center; border-color: #0f2e93; justify-content: center;} .s_list01 .top .amore::after {padding-left: 30px;} .s_list01 .top .amore span {color: #0f2e93;} .s_list01 .top .amore img {width: 22px;margin-right: 10px;transition: 0s;} .s_list01 .top .amore:hover img {filter: grayscale(10) brightness(10);} .s_list01 .top .icon { position: absolute; right: 30px; bottom: 30px; width: 140px;} .s_list01 .top .icon img{opacity: 0.3;} .s_list01 .icenter2 .imgbox {width: 1200px;margin: auto;margin-bottom: 52px;} .s_list01 .icenter2 .hu_h3{text-align: center; position: relative;} .s_list01 .bg { width: 100%; height: 121%; position: absolute; left: 50%; top: -12%; transform: translateX(-50%);} .s_list01 .bg img {height: 100%; object-fit: fill;} .s_list02 {background: url(../image/s_list02_bg.jpg);padding: 102px 0 106px;position: relative;overflow: hidden;background-size: cover;} .s_list02 .hu_h3 {text-align: center;} .s_list02 dl {margin-top: 30px;display: flex;flex-flow: wrap;} .s_list02 dl dd { transition: 0.4s; position: relative;top: 0px; flex-direction: column; background-color: #fff; width: 23.5%; margin-right: 2%; margin-bottom: 2%; padding: 33px 0 29px; box-shadow: 0 0 17px #ddd; display: flex; justify-content: center; align-items: center; border-radius: 20px;} .s_list02 dl dd img {width: 59px;margin-bottom: 24px;} .s_list02 dl dd h4,.s_list02 dl dd .h4 { position: relative; font-size: 22px;font-weight: bold;color: #333333;margin-bottom: 21px;} .s_list02 dl dd h4::before,.s_list02 dl dd .h4::before {content: ""; position: absolute;left: 50%;top: -10px;transform: translateX(-50%);width: 30px;height: 2px;background-color: #0f2e93;} .s_list02 dl dd p { font-size: 18px; color: #666666; line-height: 30px; text-align: center; width: 85%; height: 60px; display: none;} .s_list02 dl dd:nth-of-type(4n){margin-right: 0px;} .s_list02 dl dd:hover img{transform: rotateY(180deg);} .s_list02 dl dd:hover h4,.s_list02 dl dd:hover .h4 {color: #0f2e93;} .s_list02 dl dd:hover {top: -15px;} .s_list02 .content {overflow: hidden;padding-bottom: 23px;} .s_list02 .content .box h4,.s_list02 .content .box .h4 { font-size: 30px; font-weight: bold; color: #333; text-align: center; margin: 20px 0 30px;} .s_list02 .content .swiper {position: relative;} .s_list02 .content .box img {width: auto;height: auto;max-width: 100%;} .s_list02 .content .swiper-pagination { bottom: -32px;left: 50%;transform: translate(-50%,-50%);} .s_list02 .content .swiper-pagination-bullet { margin: 0 5px; width: 8px; height: 8px; border-radius: 0px; border-radius: 50%;} .s_list02 .content .swiper-pagination-bullet-active { opacity: 1; background: #0f2e93; } .s_list03 {padding: 100px 0 118px;position: relative;overflow: hidden;} .s_list03 .amore { margin: auto; margin-top: 40px;} .s_list03 .hu_h3 {text-align: center;margin-bottom: 24px;} .s_list03 .bot { position: relative; width: fit-content; margin: auto;} .s_list03 .bot::after {position: absolute;content: "";width: 100%;height: 280px;border-radius: 180px;background-color: #eeeef1;right: -76%;top: 44%;transform: translateY(-50%);} .s_list03 .bot::before {position: absolute; content: ""; width: 100%; height: 280px; border-radius: 180px; background-color: #eeeef1; left: -76%; top: 44%; transform: translateY(-50%);} .s_list03 .bot .cc {overflow: hidden;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%); width: 100%;height: 100%; z-index: 1;} .s_list03 .bot .box h4,.s_list03 .bot .box .h4{ border-bottom: 1px solid #d0d0d0; position: relative; font-size: 40px;font-family: arial;font-weight: bold;color: #333333;margin-bottom: 12px;text-align: center;margin-top: 13px;padding-bottom: 12px;} .s_list03 .bot .box h4::after,.s_list03 .bot .box .h4::after {position: absolute;content: "";bottom: -3px;width: 37px;height: 5px;background-color: #0f2e93;left: 50%;transform: translateX(-50%);} .s_list03 .bot .box:hover h4,.s_list03 .bot .box:hover .h4 {color: #0f2e93;} .s_list03 .bot .box h5,.s_list03 .bot .box .h5{ opacity: 0; font-size: 16px;color: #666666;line-height: 26px;text-align: center; width: 566px;position: relative;} .s_list03 .more {border-width: 1px;} .s_list03 .swiper-slide .box img{ height: 138px; margin: auto;width: auto;} .s_list03 .swiper-slide ,.s_list03 .icenter2 {height: 535px;position: relative;} .s_list03 .swiper-slide .box {position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);display: flex;flex-direction: column;justify-content: center;align-items: center;} .s_list03 .swiper-slide .box h4,.s_list03 .swiper-slide .box .h4 {font-size: 20px;padding-bottom: 0px;margin-bottom: 0px;border-bottom: none; width: 200px;} .s_list03 .swiper-slide .box h4::after,.s_list03 .swiper-slide .box .h4::after { display: none; } .s_list03 .swiper-slide-active .box img{height: 370px;} .s_list03 .swiper-slide-active .box h4,.s_list03 .swiper-slide-active .box .h4 {font-size: 30px;margin-bottom: 12px;padding-bottom: 12px;border-bottom: 1px solid #d0d0d0; width: auto;} .s_list03 .swiper-slide-active .box h4::after,.s_list03 .swiper-slide-active .box .h4::after {display: block;} .s_list03 .bot .swiper-slide-active .box h5,.s_list03 .bot .swiper-slide-active .box .h5 {opacity: 1;} .s_list03 .bot .fa img {filter: grayscale(10) brightness(10);transition: 0s;width: 28px;} .s_list03 .bot .fa:hover img {filter: none;} .s_list03 .bot .fa {border: 1px solid #0f2e93; background-image: none;width: 58px;height: 58px;display: flex;justify-content: center;align-items: center;background-color: #0f2e93;color: #fff; border-radius: 50%; top: 43%;outline: none;} .s_list03 .bot .fa:hover {background-color:transparent;} .s_list03 .bot .fa-left {transform: rotateY(180deg); left: -22px;} .s_list03 .bot .fa-right {right: -22px;} .s_list04 {padding: 130px 0 198px;position: relative;overflow: hidden;background-color: #f5f5f5;} .s_list04 .icenter2 {position: relative;} .s_list04 .bg { position: absolute; left: 50%; transform: translateX(-50%); width: 100%; height: auto; top: -170%; opacity: 0.7;} .s_list04 .hu_h3 {text-align: center;margin-bottom: 10px;} .s_list04 .bot {position: relative;overflow: hidden;width: 1440px;margin: auto;padding: 20px 0;} .s_list04 .botF {position: relative;width: fit-content;margin: auto;margin-bottom: 30px;} .s_list04 .botF .fa_cc { outline: none; border-radius: 50%; background-image: none; margin: 0px; padding: 0px; width: 48px; height: 48px; font-size: 28px; color: #cbcbcb; border: 1px solid #cbcbcb; display: flex; justify-content: center; align-items: center;} .s_list04 .botF .fa_cc:hover {color: #fff;background-color: #0f2e93;border-color: #0f2e93;} .s_list04 .botF .fa-angle-left {left: -86px;} .s_list04 .botF .fa-angle-right {right: -86px;} .s_list04 .box {border-radius: 20px;box-shadow: 0 0 17px #ddd;overflow: hidden;} .s_list04 .box .imgbox::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,.5); content: ''; -webkit-transition: -webkit-transform .6s; transition: transform .6s; -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-110%,0); transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-110%,0); z-index: 1; } .s_list04 .box:hover .imgbox::before { -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 115%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 115%, 0); } .s_list04 .box .imgbox img {height: 267px;} .s_list04 .box:hover .imgbox img{transform: scale(1.1);} .s_list04 .box .text { padding: 35px; padding-bottom: 62px; position: relative; background-color: #fff;} .s_list04 .box .text h4,.s_list04 .box .text .h4 {font-size: 24px;color: #333333;font-weight: bold;margin-bottom: 8px;} .s_list04 .box .text h5,.s_list04 .box .text .h5 {font-size: 18px;color: #666666;} .s_list04 .box .text .bo {width: 44px;height: 44px;border: 1px solid #0f2e93; position: absolute;right: 30px;bottom: 51px;border-radius: 50%;display: flex;justify-content: center;align-items: center;color: #cdcdcd;border: 1px solid #0f2e93;font-size: 20px;color: #0f2e93;} .s_list04 .box .text .bo:before {position: relative;left: 2px;} .s_list04 .amore {margin: auto;background-color: #0f2e93;} .s_list04 .amore span {color: #fff;} .s_list04 .amore::after {color: #0f2e93;} .s_list04 .amore:hover {background-color: transparent;} .s_list04 .amore:hover span {color: #0f2e93;} .s_list04 .box:hover .text h4,.s_list04 .box:hover .text .h4 {color: #0f2e93;} /* product */ .pro {display:flex;justify-content: space-between;} /*.pro_fix{ transition: 0.5s; position: fixed; top: 180px; height: calc(100% - 90px); overflow-y: scroll; width: calc(21% - 30px); }*/ .pro_fix.active1 { transition: 0.5s; position: fixed; top: 180px; height: calc(100% - 90px ); overflow-y: scroll; width: calc(21% - 30px);} .pro_fix.active2 { position: relative; top: 90px; height: calc(100% - 90px ); overflow-y: scroll; width: calc(21% - 30px);} .pro_fix::-webkit-scrollbar { height: 1px; width: 1px; } .pro_fix::-webkit-scrollbar-thumb { border-radius: 2px; -webkit-box-shadow: inset 0 0 5px rgba(127,127,127,0.3); background: #ded8d8; } .pro_fix::-webkit-scrollbar-track { /* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */ border-radius: 2px; background: rgba(164,164,164,0.1); } .pro .left {width: 21%;padding-top: 100px;padding-left: 30px;border-right: 1px solid #e5e5e5;} .pro .left .seg {padding-top: 0;} .pro .left .seg:last-of-type {padding-bottom: 162px;} .pro .left .seg .title {margin-bottom: 20px;font-size: 20px;color: #333333;font-weight: normal;cursor: pointer; padding: 16px; position: relative;border-bottom: 1px solid #eee; transition: all .1s; font-weight: 600;} .pro .left .seg.on .title {color: #0f2e93; border-bottom: 1px solid #0f2e93;} .pro .left .seg .title:after{content:""; position: absolute; width: 8px; height: 8px; background: #ccc; border-radius: 50%; top: 50%; left: 0; margin-top: -4px;} .pro .left .seg .title:hover{color: #0f2e93; } .pro .left .seg .min a{border-bottom: 1px solid #e5e5e5;position: relative;z-index: 1;transition: 0.3s;} .pro .left .seg .min a span {transition: 0.3s; font-size: 16px;color: #666666;padding: 15px 0;position: relative;display: flex;justify-content: space-between;align-items: center; padding-right: 20px;} .pro .left .seg .min a span i {color: #0f2e93;opacity: 0;transition: 0.3s;} .pro .left .seg .min a span:hover { color: #0f2e93; padding-left: 20px; } .pro .left .seg .min a span:hover i {opacity: 1;} .pro .left .seg .min a:nth-of-type(1){border-top: 1px solid #e5e5e5;} .pro .right {width: 79%;padding: 100px 68px 74px;} .pro .right .seg {margin-bottom: 100px;} .pro .right .seg .title {margin-bottom: 0;padding-left: 30px;} .pro .right .seg .title h3,.pro .right .seg .title .h3 {position: relative; font-size: 44px;color: #333333;font-weight:bold;margin-bottom: 3px;} .pro .right .seg .title h3::before,.pro .right .seg .title .h3::before {content: ""; position: absolute;width: 15px;height: 15px;border-radius: 50%;background-color: #0f2e93;top: 50%;transform: translateY(-50%);left: -30px;} .pro .right .seg .title h4,.pro .right .seg .title .h4 {font-size: 20px;color: #666666;font-family: arial;} .pro .right .seg dl {display: flex;flex-flow: wrap;width: 100%;} .pro .right .seg dl dd {width: 32%;margin-right: 2%;margin-bottom: 2%;position: relative;border-radius: 10px;overflow: hidden; height: 486px; } .pro.ioi .right .seg dl dd{height: auto;} .pro .right .seg dl dd:hover img{transition: .3s ease;} .pro .right .seg dl dd:hover img{transform: scale(1.12);} .pro .right .seg dl dd .bg {position: relative;overflow: hidden;height: 100%;} .pro .right .seg dl dd .bg::after { content: ""; display: inline-block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.35); position: absolute; left: 0; top: 0; } .pro .right .seg dl dd:hover .bg::after { background-color: rgba(0, 0, 0, 0.6);} .pro .right .seg dl dd .bg img {height: 100%;} .pro .right .seg dl dd:hover .bg img {transform: scale(1.1);} .pro .right .seg dl dd:nth-of-type(3n){margin-right: 0px;} .pro .right .seg dl dd .content {z-index: 3;transition: 0.5s; position: absolute; width: 79%; transform: translate(-50%,-50%); top: 84%; left: 50%;} .pro .right .seg dl dd:hover .content {top: 18%;} .pro .right .seg dl dd .content .icon {width: 66px;margin-bottom: 260px;} .pro .right .seg dl dd .content .t{font-size: 26px;font-weight: bold;color: #fff;margin-bottom: 94px;} .pro .right .seg dl dd .content .b {height: 248px; display: flex; flex-direction: column; justify-content: flex-end;} .pro .right .seg dl dd .content .b a {position: relative; font-size: 18px; color: #fff; display: flex; justify-content: space-between; align-items: center; position: relative; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.4); margin-bottom: 8px;} .pro .right .seg dl dd .content .b a::after {transition: 0.5s;position: absolute;left: 0px;bottom: 0px;width: 0%;background-color: #fff;height: 1px;content: "";} .pro .right .seg dl dd .content .b a:hover::after{width: 100%;} .pro .right .seg dl dd .content .b a:hover { color: #ff0009; font-weight: bold;} /* pro-info */ .icenter3 {width: 1400px;margin: auto;} .proinfo_banner { position: relative; margin-top: 90px; padding: 150px 0 190px; background: #fff; background-size: cover; } .proinfo_banner::after { content: ""; display: inline-block; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); position: absolute; left: 0; top: 0; } .proinfo_banner .vi { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px;} .proinfo_banner .vi video {width: 100%;height: 100%;object-fit: cover;} .proinfo_banner .icenter3 {display: flex;justify-content: space-between;align-items: center;position: relative; z-index: 1;padding: 0 5%;} .proinfo_banner .left {width: 57.5%;display: flex;justify-content: space-between;} .proinfo_banner .left .tab {width: 112px;} .proinfo_banner .left .tab .icon img{width: 65%;margin: auto;} .proinfo_banner .left .tab .icon.active {border: 1px solid #0f2e93;} .proinfo_banner .left .tab .icon {padding: 10px 0;background-color: #fff;margin-bottom: 10px;cursor: pointer;box-sizing: border-box;border: 1px solid #ddd;} .proinfo_banner .left .main .icon{display: none;} .proinfo_banner .left .main .icon.active{display:block;} .proinfo_banner .left .main .icon img { height: 500px; width: auto;} .proinfo_banner .right { padding-right: 0px; box-sizing: border-box; width: 34%;} .proinfo_banner .right h3,.proinfo_banner .right .h3{font-size: 32px; font-weight: bold; color: #333333; margin-bottom: 22px;} .proinfo_banner .right h4,.proinfo_banner .right .h4{font-size: 20px; position:relative;font-weight: bold;color: #333333;display: flex;align-items: center;justify-content: space-between;} .proinfo_banner .right h4::after,.proinfo_banner .right .h4::after {display: block;content: "";width: 50%;height: 1px;background-color: #a9a9a9;} .proinfo_banner .right p{ font-size: 16px; color: #666666; margin: 29px 0 40px; line-height: 26px;} .proinfo_banner .right dl { display: flex; margin-bottom: 40px; margin-top: 20px;} .proinfo_banner .right dl dd {margin-right: 20px;} .proinfo_banner .right dl dd .icon {width: 78px;height: 78px;border-radius: 8px;border: 1px solid #0f2e93;display: flex;justify-content: center;align-items: center;} .proinfo_banner .right dl dd .icon img{width: 50px;} .proinfo_banner .right dl dd:hover .icon img {transform: rotateY(180deg);} .proinfo_banner .right dl dd:hover span {color: #0f2e93;} .proinfo_banner .right dl dd span {font-size: 16px;color: #666666;margin-top: 8px;text-align: center;width: 70px;word-break: break-all;} .proinfo_banner .right a{ background-color: #0f2e93; border-color: #0f2e93; width: 212px; height: 44px; display: flex; justify-content: center; align-items: center; font-size: 16px;} .proinfo_banner .right a img {width: 19px;margin-right: 10px;filter: grayscale(10) brightness(10);} .proinfo_banner .right a span {font-size: 16px;color: #fff;} .proinfo_banner .right a::after { position: absolute; width: 115%;color: #0f2e93; } .proinfo_banner .right a:hover {background-color: transparent;color: #0f2e93;} .proinfo_banner .right a:hover span {color: #0f2e93;} .proinfo_banner .right a:hover img {filter: none;} .proinfo_banner .right a video { display: none; } .proinfo_banner .waves { position: absolute; width: 100%; height: 80px; margin-top: 0; margin-bottom: -8px; left: 0; bottom: 0; width: 100%; z-index: 3; margin-top: -80px; } /* vi_box */ .vi_box { top: 0px; left: 0px; display: none; position: fixed;width: 100%;height: 100%;z-index: 999;background-color: rgba(0,0,0,0.8);} .vi_box .box {height: 100%;width: 100%; display: flex;justify-content: center;align-items: center;} .vi_box .box video{ width: 100%;height: 100%; position: relative; object-fit: cover; display: block;} .vi_box .box .video {position: relative;width: 70%; height: 68%;} /* .vi_box .box .video .close {position: absolute; font-size: 50px; right: -34px; top: -51px; color: #0068b6; transition: 0.3s; cursor: pointer;} */ .vi_box .box .video img.close{ cursor: pointer;width: auto;position: absolute;right: -40px;top: -40px;transition: all .3s;pointer-events: painted;} .vi_box .box .video .close:hover {transform: rotate(135deg);} .proinfo01 h3,.proinfo01 .h3 { font-weight: bold; font-size: 40px; color: #333; margin-bottom: 50px; position: relative; z-index: 1;} .proinfo01 .top { background: url(../image/pro_i1_bg.jpg); background-size: cover; padding: 110px 0;overflow: hidden;} .proinfo01 .top .icenter3 {align-items: center; display: flex;justify-content: space-between;position: relative;} .proinfo01 .top .le {width: 30%;position: relative;} .proinfo01 .top .le .swiper {overflow: hidden;} .proinfo01 .top .le .swiper-pagination { bottom: 10px;left: 50%;transform: translate(-50%,-50%);} .proinfo01 .top .le .swiper-pagination-bullet {margin: 0 5px;background: #fff;opacity: .8;width: 12px;height: 12px;} .proinfo01 .top .le .swiper-pagination-bullet-active { opacity: 1; background: #0f2e93; } .proinfo01 .top .ri {width: 60%;position: relative;} .proinfo01 .top .ri ul { display: flex; flex-flow: wrap; width: 100%; margin-left: 0%} .proinfo01 .top .ri .swiper {position: relative; overflow: hidden; padding-top: 20px;} .proinfo01 .top .ri .fa {outline: none; top: auto;bottom: 0px;background-image: none;margin: 0px;padding: 0px;width: 40px;height: 40px;font-size: 28px;color: #0f2e93;border: 1px solid #0f2e93;border-radius: 50%;display: flex;justify-content: center;align-items: center;} .proinfo01 .top .ri .fa-angle-left {left: 0px;} .proinfo01 .top .ri .fa-angle-right { left: 63px; right: auto;} .proinfo01 .top .ri .fa:hover {background-color: #fff;} .proinfo01 .top .ri ul li { width: 31%; margin-right: 3.5%; margin-bottom: 100px;} .proinfo01 .top .ri ul li:nth-of-type(3n) {margin-right: 0px;} .proinfo01 .top .ri ul li h4,.proinfo01 .top .ri ul li .h4 { white-space: normal; width: fit-content; font-size: 22px; color: #333; margin-bottom: 6px; position: relative; font-weight: bold; line-height: 23px;} .proinfo01 .top .ri ul li:hover h4,.proinfo01 .top .ri ul li:hover .h4 {color: #0f2e93;} .proinfo01 .top .ri ul li h4::before,.proinfo01 .top .ri ul li .h4::before {transition: 0.3s; position: absolute;content: "";left: 0px;top: -11px;width: 30px;height: 3px;background-color: #0f2e93;} .proinfo01 .top .ri ul li:hover h4::before,.proinfo01 .top .ri ul li:hover .h4::before {width: 100%;} .proinfo01 .top .ri ul li h5,.proinfo01 .top .ri ul li .h5 { font-size: 16px; color: #666;} .proinfo01 dl {position: relative; display: flex;justify-content: space-between; margin: 110px 0;} .proinfo01 dl dd { transition: 0.3s; box-shadow: 0 0 10px #efefef; background-color: #fff; border-radius: 15px; width: 24%; padding: 70px 30px 70px; display: flex; justify-content: center; align-items: center; flex-direction: column;} .proinfo01 dl dd .icon {position: relative; display: flex;justify-content: center;align-items: center; width: 83px;height: 83px;border-radius: 50%;background-color: #fff;box-shadow: 0 0 10px #ddd;} .proinfo01 dl dd .icon::after { border-radius: 50%; width: 122%; height: 122%; position: absolute; left: -9px; content: ""; top: -9px; border: 2px dashed #d7d7d7;} .proinfo01 dl dd:hover .icon::after { animation: img01anime 10s 0s linear infinite;} .proinfo01 dl dd .icon img {width: 50px;} .proinfo01 dl dd h4,.proinfo01 dl dd .h4{ font-size: 16px; color: #333333; font-weight: bold; margin: 20px 0; position: relative;} .proinfo01 dl dd h4::after,.proinfo01 dl dd .h4::after {content: ""; position: absolute;bottom: -12px;left: 50%;transform: translateX(-50%);width: 30px;height: 2px;background-color: #0f2e93;} .proinfo01 dl dd p { text-align: center; font-size: 16px;color: #666666;line-height: 26px; display: none;} .proinfo01 dl dd:hover {transform: scale(1.2);z-index: 2;} .proinfo01 dl dd:hover {background-color: #0f2e93;} .proinfo01 dl dd:hover .icon {box-shadow: 0px;} .proinfo01 dl dd:hover .icon::after {border-color: #fff;} .proinfo01 dl dd:hover .icon img {transform: rotateY(180deg);} .proinfo01 dl dd:hover h4,.proinfo01 dl dd:hover .h4 {color: #fff;} .proinfo01 dl dd:hover h4::after,.proinfo01 dl dd:hover .h4::after {background-color: #fff;} .proinfo01 dl dd:hover p {color: #fff;} .proinfo02 { background: url(../image/proinfo02_bg.jpg); background-size: 155% auto; padding: 105px 0; position: relative; overflow: hidden; animation: bg_move 10s linear infinite; background-position: -400px center;} @keyframes bg_move { 100%{ background-position: 0px; } } .proinfo02 h3,.proinfo02 .h3 { font-size: 44px; color: #fff; font-weight: bold; margin-bottom: 44px; text-align: center;} .proinfo02 ul { margin-bottom: 58px; display: flex; justify-content: space-between; padding: 77px 65px; border-radius: 15px; background-color: rgba(69, 69, 69, 0.5); backdrop-filter: blur(10px);} .proinfo02 ul li {width: 100%;} .proinfo02 a{ margin: auto; background-color: #0f2e93; border-color: #0f2e93; width: 212px; height: 44px; display: flex; justify-content: center; align-items: center; font-size: 16px;} .proinfo02 a img {width: 19px;margin-right: 10px;filter: grayscale(10) brightness(10);} .proinfo02 a span {font-size: 16px;color: #fff;} .proinfo02 a::after { position: absolute; width: 115%;color: #0f2e93; } .proinfo02 a:hover {background-color: #fff; color: #0f2e93;} .proinfo02 a:hover span {color: #0f2e93;} .proinfo02 a:hover img {filter: none;} .proinfo03 { padding: 120px 0 180px; position: relative;overflow: hidden;background-color: #f5f5f5;} .proinfo03 .icenter3 {display: flex;flex-direction: column;justify-content: center;align-items: center;} .proinfo03 h3,.proinfo03 .h3 {font-size: 44px;color: #333333;font-weight:bold;margin-bottom: 15px;} .proinfo03 h4,.proinfo03 .h4 {font-size: 20px;color: #666666;margin-bottom: 30px;} .proinfo03 .min {display: flex;justify-content: center;} .proinfo03 .min a {width: 211px;height: 45px;} .proinfo03 .min a:nth-of-type(1) {margin-right: 12px; background-color: #0f2e93;color: #0f2e93;} .proinfo03 .min a:nth-of-type(1)::after {color: #0f2e93;} .proinfo03 .min a:nth-of-type(1):hover {background-color: transparent;} .proinfo03 .min a:nth-of-type(1) span {color: #fff;} .proinfo03 .min a:nth-of-type(2) {} .proinfo03 .share {display: flex; justify-content: center; margin-top: 54px; align-items: center;} .proinfo03 .share span {font-size: 20px;color: #666666;margin-right: 12px;} .proinfo03 .share .s {display: flex;} .proinfo03 .share .s a { width: 43px; height: 43px; background-color: #b0b0b0; display: flex; justify-content: center; align-items: center; font-size: 20px; color: #fff; margin-right: 10px; border-radius: 50%;} .proinfo03 .share .s a:last-child {margin-right: 0px;} .proinfo03 .share .s a:hover {background-color: #0f2e93;} .solution{padding: 80px 0; margin: 0; width: 100%; height: auto; display: inline-block; position: relative;} .solution .left{padding: 0; margin: 0; width: 50%; height: auto; float: left;} .solution .right{padding: 0; margin: 0; width: 50%; height: auto;float: right;} .solution-txt{ margin: 0 auto; padding: 10px 0; width: 100%; height: auto;} .solution-txt .title{ margin: 0 auto; padding: 10px 0; width: 100%; height: auto; color: #000; font-size:36px; } .solution-txt .title2{ margin: 0 auto; padding: 10px 0; width: 100%; height: auto; color: #000; font-size:18px; line-height: 30px; } .solution-txt ul{ margin: 0 auto; padding: 10px 0; width: 100%; height: auto;} .solution-txt ul li{margin: 0; padding:5px 0; width: 100%; height: auto; padding-left: 30px; font-size: 18px; line-height: 25px; color: #666; position: relative;} .solution-txt ul li::before{position: absolute; top: 5px; left: 0; content: "\f058";; font-family: "FontAwesome"; color: #c24033;} .bghui{background: #f3f3f3;} .solution-txt table{ margin:0 auto; padding:10px 0; width: 100%; height: auto; border: 0;} .solution-txt table td{ border:1px solid #909090; text-align: center;} .solution-txt table td{ border:1px solid #909090; text-align: center; padding: 5px 10px; color: #909090; font-size: 16px;line-height: 20px;} .solution-txt table tr:nth-child(odd){background:;} .solution-txt table tr:nth-child(even){background:#;} .solution-txt table tr:nth-child(1){background:#b5bbcd;color:#000;font-weight: bold;} .solution-txt table tr:nth-child(1) td{background:#b5bbcd; color: #000; font-weight: bold;} .text-center{text-align: center;} .solution-tab{ margin:0 auto; padding:10px 0; width: 100%; height: auto; border: 0;display: grid; grid-template-columns: repeat(8, 1fr); gap: 20px;} .solution-tab .txt{background: #fff; margin: 0; padding: 20px; width: 100%; height: auto;} .solution-tab .txt .t1{margin: 0; padding:10px 0; width: 100%; height: auto; font-size: 30px; color: #000; line-height: 30px;} .solution-tab .txt .t2{margin: 0; padding:10px 0; width: 100%; height: auto; font-size: 20px; color: #666; line-height: 30px;} .solution-tab .txt .img{margin: 0; padding:10px 0; width: 100%; height: auto;} .solution-tab .txt .img img{margin: 0; padding:0; width: 100%; height: auto;} @media (max-width: 1320px) { .solution-tab{ grid-template-columns: repeat(5, 1fr);gap: 20px;} .solution-txt .title{ margin: 0 auto; padding: 10px 0; width: 100%; height: auto; color: #000; font-size:30px; } } @media (max-width: 991px) { .solution-tab{ grid-template-columns: repeat(4, 1fr);gap: 20px;} .solution-txt table{display:block;width:100%; border: 0; overflow-x:auto;-webkit-overflow-scrolling:touch} .solution-txt table td{ font-size:14px; padding: 0 15px;} } @media (max-width: 640px) { .solution-tab{ grid-template-columns: repeat(3, 1fr);gap: 20px;} .solution .left{padding: 0; margin: 0; width: 100%; height: auto; float: left;} .solution .right{padding: 0; margin: 0; width: 100%; height: auto;float: right;} .solution-txt .title{ margin: 0 auto; padding: 10px 0; width: 100%; height: auto; color: #000; font-size:24px; } } .faq-container {width: 100%;height: auto; margin: 0; padding: 15px 0;} .faq-list { display: flex; flex-direction: column; gap: 20px; } .faq-item { background: #ffffff; border-bottom: 1px solid #e9edf4; transition: border-color 0.2s, box-shadow 0.2s; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.02); } .faq-item:hover { border-color: #cbd5e1; } .faq-question { display: flex; align-items: center; justify-content: space-between; width: 100%; padding:0 20px; background: transparent; border: none; font-size: 16px; font-weight: 500; color: #0f172a; cursor: pointer; text-align: left; transition: background 0.15s ease; gap: 20px; line-height: 1.4; } .faq-question:focus-visible { outline: 2px solid #4f46e5; outline-offset: -4px; border-radius: 120px; } .faq-question .question-text { flex: 1; padding:15px 0;color: #000; font-size: 24px; font-weight: 600; } .faq-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 40px; background: #768edc; display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.25s ease; color: #fff; font-size: 18px; font-weight: 300; line-height: 1; } .faq-item.active .faq-icon { background: #0f2e93; color: #fff; transform: rotate(180deg); } /* 答案面板 — 折叠/展开 */ .faq-answer { max-height: 0;margin: 0; opacity: 0; overflow: hidden; padding: 0 20px; transition: max-height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.25s ease, padding 0.3s ease; background: #ffffff; border-top: 0px solid transparent; color: #1e293b;transition: 0.6s } .faq-item.active .faq-answer { max-height: 400px; /* 足够容纳大部分答案，可随内容扩展 */ opacity: 1;transition: 0.6s; padding: 0 20px; border-top: 0; } .faq-answer p { margin: 10px 0; font-size: 16px; line-height: 1.6; color: #334155; } .faq-answer p:last-child { margin-bottom: 20px; } /* 辅助装饰 */ .faq-divider { width: 60px; height: 3px; background: linear-gradient(90deg, #4f46e5, #a5b4fc); border-radius: 40px; margin: 25px auto 50px auto; } /* 移动端微调 */ @media (max-width: 480px) { .faq-container { padding: 1.5rem 1rem; border-radius: 1.5rem; } .faq-question { padding: 0.9rem 1rem; font-size: 0.95rem; } .faq-answer { padding: 0 1rem; } .faq-item.active .faq-answer { padding: 0 1rem 1.2rem 1rem; } .faq-question .question-text { padding:15px 0;color: #000; font-size: 18px; font-weight: 600; } } @media screen and (max-width:1600px) { .head .icenter .right .tools a:first-child{font-size: 14px;} .index06 .title{left: 0;} .icenter {width: 1100px;} .icenter1 {width: 1160px;} .icenter2{width: 1100px;} .head {height: 80px;} .head .icenter .right ul li .a {height: 80px;line-height: 80px;} .pro_fix.active1 { height: calc(100% - 80px ); width: calc(21% - 26px); } .head .icenter .right ul li .slide2 {top: 80px;} .head .icenter .logo { width: 150px;} .head .icenter .right ul li {margin: 0px 12px; font-size: 14px; } .head .icenter .right .tools a { font-size: 16px; } .head .tools .lang img { width: 19px; margin-right: 6px; } .head .icenter .right .tools a { font-size: 14px; } .head .icenter .right .tools a:nth-of-type(2) { padding: 0 12px; margin: 0px 12px;} .head .icenter .right .tools .lang { font-size: 14px; } .head .icenter .right ul li:hover .slide { height: 208px; padding: 15px 11%; } .head .icenter .right ul li .slide { top: 80px;} .head .icenter .right ul li .slide .min a {margin-right: 0px; font-size: 14px; height: 50px;} .head .icenter .right ul li .slide .min a img { width: 35px; margin-right: 16px; } .head .icenter .right ul li .slide .imgbox {height: 142px;} .head .icenter .right ul li .slide2 .le .min span { font-size: 16px; } .head .icenter .right ul li .slide2 .le .min img { width: 40px; margin-right: 20px; } .head .icenter .right ul li .slide2 .le .min { width: 270px;} .head .icenter .right ul li .slide2 .ri { padding: 40px 58px;} .head .icenter .right ul li .slide2 .ri dl dd img { width: 160px; } .head .icenter .right ul li .slide2 .ri dl dd h4,.head .icenter .right ul li .slide2 .ri dl dd .h4 { font-size: 14px; margin-top: 8px;} .head .icenter .right ul li .slide2 .ri dl.active { width: 647px; } .head .icenter .right ul li .slide2 .ri dl dd { margin-bottom: 40px;} .head .icenter .right ul li:hover .slide2 { height: 684px; padding: 0px 11% 0px 0%; top: 80px; } .side_btn a::after { width: 55px; height: 55px;} .side_btn a img { width: 20px; margin-top: -8px; margin-left: -10px; } .side_btn a { width: 68px; height: 68px;} .side_btn { bottom: 40px; width: 85px; height: 85px;} .index_banner .box .text h3, .index_banner .box .text .h3 { font-size: 66px; margin-bottom:0;} .index_banner .box .text h4, .index_banner .box .text .h4 {font-size: 18px; margin-bottom: 47px; width: 829px; } .index_banner .box .text .line { width: 57px; height: 2px; margin-bottom: 20px; } .amore { width: 140px; font-size: 12px; height: 38px; line-height: 34px; border-radius: 30px; } .amore2 { line-height: 36px; } .amore span {font-size: 12px;} .index_banner .scroll { height: 33px; width: 13px;} .index_banner .scroll span { font-size: 12px;} .index_banner .scroll .dot { width: 5px; height: 5px;} .index_banner .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 13px 0px; } .index_banner .swiper-pagination-bullet { width: 5px; height: 5px;} .index_banner .indexSwiper-pagination .swiper-pagination-bullet::after { width: 22px; height: 22px;} .index01 .content { min-height: 90vh; top: 80px; height: calc(100vh - 80px); } .index01 .short h4,.index01 .short .h4 { font-size: 18px; margin: 10px 0; } .com_h3 { font-size: 38px; } .index01 .short p { font-size: 14px; line-height: 24px;} .index01 .short {top: 60px; left: 50%; width: 696px; } .index01 .text_cc h4,.index01 .text_cc .h4 {font-size: 18px; margin: 13px 0; } .index01 .text_cc p {text-align: center; font-size: 16px; line-height: 26px;} .index01 .text_cc{width: 696px;} .index01 .text_cc img { margin-top: 36px; width: 247px; } .index02 .icenter { padding: 20px; } .index02 { padding: 100px 0 80px; } .index02 .top h3,.index02 .top .h3 { font-size: 42px; margin-bottom: 24px;} .index02 .top h4,.index02 .top .h4 { font-size: 18px; padding-left: 383px; } .index02 .top h4::after,.index02 .top .h4::after { right: -35px; height: 56px; width: 2px;} .index02 ul li h4 strong,.index02 ul li .h4 strong { font-size: 50px; margin-right: 8px; line-height: 46px; } .index02 ul li h4,.index02 ul li .h4 { font-size: 20px; } .index02 ul li:nth-of-type(2) h4,.index02 ul li:nth-of-type(2) .h4 { margin-bottom: 14px; } .index02 .top { margin-bottom: 55px; } .index02 ul li h5,.index02 ul li .h5 { font-size: 14px; line-height: 24px;} .index02 ul li:nth-of-type(2) { padding: 70px 0; } .index02 ul li:nth-of-type(3) { padding: 63px 0; } .index02 ul li:nth-of-type(4) { padding: 32px 0; } .index02 ul li:nth-of-type(1) { padding: 30px 0; } .index02 ul li:nth-of-type(5) { padding: 50px 0; } .index02 .bg {left: 50%; top: 48%; width: 1260px; height: 56%;} .index02 .bg img { width: 100%; height: auto; } .index03 .cc_img { height: calc(100vh - 80px); } .index03 .text .icon { width: 56px; margin-bottom: 13px; } .index03 .text h4,.index03 .text .h4 { font-size: 31px; margin-bottom: 15px; width: 42%; } .index03 .text h5,.index03 .text .h5 { font-size: 38px; margin-bottom: 24px; } .index03 .text h6,.index03 .text .h6 { font-size: 16px; margin-bottom: 52px; } .index03Swiper::before { width: 4%; } .index03 .tab .tab_cc { padding: 0px 20px 0 33px;} .index03 .tab .tab_cc h4,.index03 .tab .tab_cc .h4 { font-size: 20px; margin-bottom: 3px; line-height: 23px; } .index03 .tab .tab_cc h5,.index03 .tab .tab_cc .h5 { font-size: 12px; } .index03 .tab .tab_cc .icon { width: 32px; margin-bottom: 10px; } .index03 .tab .tab_cc .bt_hide { width: 38px; } .index04 { padding: 95px 0 100px; } .index04 .top .title span { font-size: 16px; margin-bottom: 4px; } .index04 .top { margin-bottom: 26px; } .index04 .bot { height: 450px; } .index04 .bot dd .icon { width: 36px; bottom: 27px;} .index04 .bot dd .icon::before { height: 60px; width: 1px; top: -80px; } .index04 .bot dd .content .con_img { width: 52px; margin-bottom: 14px; } .index04 .bot dd .content h4,.index04 .bot dd .content .h4 { font-size: 28px; } .jian .cc { border: 6px solid transparent; border-left: 6px solid #fff; } .jian { padding: 14px; width: 63px; height: 10px; margin: 7px 0; } .index04 .bot dd .content { left: 55px; } .index04 .bot dd:hover .content { top: 50px; left: 55px; } .index04 .bot dd p { font-size: 14px; line-height: 22px; margin-bottom: 91px; width: 347px; } .index04 .bot dd .tips { width: 38px; height: 38px; font-size: 14px; right: 22px;} .index04 .bot dd .tips::before { height: 160px; top: -160px; } .index04 .bot dd .tips::after { height: 160px; top: 37px; } .index04 .bot dd .ti-text { font-size: 14px; top: 67%;} .index01 .com_h3 { font-size: 38px; } .index01 .text_cc h6,.index01 .text_cc .h6 { font-size: 24px; margin-top: 16px;} .index05 .icenter1 .left h3,.index05 .icenter1 .left .h3 { font-size: 32px; line-height: 33px; margin-bottom: 28px; } .index05 .icenter1 .left h4..index05 .icenter1 .left .h4 { font-size: 32px; margin-bottom: 10px; line-height: 30px; } .index05 .icenter1 .left p { font-size: 14px; line-height: 24px; margin-bottom: 52px; } .index05 .bg {height: 465px;} .index05 .icenter1 .right .ph img {height: 100%;width: auto;} .index05 .icenter1 .right .ph { left: -12px; top: -42px; height: 431px; } .index05 .icenter1 .right .pei img { width: 122px; margin-bottom: 10px; } .index05 .icenter1 .right .pei h4,.index05 .icenter1 .right .pei .h4 { font-size: 28px; margin-bottom: 12px; } .index05 .icenter1 .right .pei h5,.index05 .icenter1 .right .pei .h5 { font-size: 12px; line-height: 20px; margin-bottom: 20px;width: 256px; } .index05 .th_box {width: 74px;} .index05 {margin-bottom: 115px;} .index06 { padding: 95px 0 86px;} .index06 .title h4,.index06 .title .h4 { font-size: 24px; } .index06 .title .com_h3 { margin-bottom: 5px; } .index06 .title { top: 30px; } .index06 .map { height: 455px;} .index06 .title { top: 6px; } .index06 .num h5,.index06 .num .h5 { font-size: 20px; margin-bottom: 6px; } .index06 .num h6,.index06 .num .h6 { font-size: 14px; } .index06 .num h4 strong,.index06 .num .h4 strong { font-size: 60px; margin-right: 4px; } .index06 .num h4,.index06 .num .h4 { font-size: 22px; margin-bottom: 19px; line-height: 52px; } .index06 .num { position: absolute; bottom: 13px; left: 0px; } .index06 .map .hide1 { width: 109px; height: 104px; right: 88px; bottom: 46px; } .index06 .map .hide6 { width: 261px; height: 237px; top: 6%; left: 3%; } .index06 .map .hide9 { width: 164px; height: 112px; top: -1%; left: 27%; } .index06 .map .hide7 { width: 137px; height: 196px; left: 23%; top: 58%; } .index06 .map .hide5 { height: 212px; width: 189px; top: 40%; left: 42%; } .index06 .map .hide5 { height: 175px; width: 189px; top: 45%; left: 42%; } .index06 .map .hide4 { width: 172px; height: 136px; top: 15%; left: 45%; } .index06 .map .hide8 { width: 55px; height: 111px; top: 28%; left: 62.5%; } .index06 .map .hide3 { width: 330px; height: 86px; top: 11%; left: 61%; } .index06 .map .hide2 { width: 171px; height: 131px; top: 30%; left: 68%; } .mapicon img {width: 12px; height: auto; } .mapicon .map_cc { width: 18px; } .mapicon .detail .text h4,.mapicon .detail .text .h4 { font-size: 16px; margin-bottom: 8px; } .mapicon .detail .text p { font-size: 14px; line-height: 24px; } .index07 { padding: 90px 0 150px; } .index07 dl dd h4,.index07 dl dd .h4 { font-size: 18px; line-height: 28px; margin: 20px 0; height: 54px;} .index07 dl dd p { font-size: 14px; padding-bottom: 0px; } .index07 dl dd .date { margin-top: 12px; font-size: 14px; padding-top: 22px; } .index07 .top { margin-bottom: 26px; } .index07 dl dd .date strong { font-size: 30px; margin-right: 6px; font-weight: 100; } footer .icenter .icon { width: 100px; margin-bottom: 25px; } footer .icenter .top dl dd h3 a,footer .icenter .top dl dd .h3 a { font-size: 16px; } footer .icenter .top dl dd h3,footer .icenter .top dl dd .h3 { margin-bottom: 23px; } footer .icenter .top dl dd h3::after,footer .icenter .top dl dd .h3::after { bottom: -8px; width: 17px; height: 1px; } footer .icenter .top dl dd .min a { font-size: 13px; margin-bottom: 10px; } footer .icenter .top dl dd .box1 { margin-top: 48px; } footer .icenter .top .right p { width: 283px; font-size: 14px; line-height: 24px; } footer .icenter .top .right h3,footer .icenter .top .right .h3 { font-size: 25px; margin: 3px 0 6px; } footer .icenter .top .right .ewm span { font-size: 12px; margin-top: 4px; } footer .icenter .top .right .ewm { margin-top: 30px; } footer .icenter .bot .left span { line-height: 20px; font-size: 12px; padding-right: 5px; margin-right: 5px; } footer .icenter .bot .left a { line-height: 20px; font-size: 12px;} footer .icenter .bot .left { width: 382px;} footer .icenter .bot .left a::after { height: 12px;} footer .icenter .bot .left span::after { height: 12px; } footer .icenter .bot .share a { width: 30px; height: 30px; font-size: 14px; opacity: 0.5; border-radius: 50%; margin-right: 8px; } footer .icenter .bot { margin-top: 50px; } footer { padding: 44px 0 60px; } footer .icenter .top dl dd { max-width: 129px; } footer .icenter .top .right .ewm img { margin: auto; width: 76px; } /* page */ .page a { width: 40px; height: 40px; font-size: 16px; margin-right: 16px; } /* contact */ .con01 .icenter2 .icon { margin-bottom: 36px; padding: 12px; } .con01 .icenter2 .icon img { width: 38px;} .con01 .icenter2 .tel .num a { font-size: 40px; padding-bottom: 5px; } .con01 .icenter2 .tel .num a::after { width: 56px;height: 1px;} .con01 .icenter2 .tel .num a:hover::after { width: 129px; } .con01 .icenter2 .tel .num h4,.con01 .icenter2 .tel .num .h4 { font-size: 16px; margin-top: 16px;} .con01 .icenter2 .tel { margin-bottom: 65px; } .con01 .icenter2 .bot .box .imgbox img { height: 230px; } .con01 .icenter2 .bot .bottom .title h3,.con01 .icenter2 .bot .bottom .title .h3 { font-size: 17px; } .con01 .icenter2 .bot .bottom .title h4,.con01 .icenter2 .bot .bottom .title .h4 { font-size: 14px; line-height: 13px;} .con01 .icenter2 .bot dl dd .a { font-size: 15px; } .con01 .icenter2 .bot dl dd img { width: 16px; margin-right: 14px; } .con01 .icenter2 .bot .bottom .title { margin-bottom: 16px; } .con01 .icenter2 .bot dl dd { margin-bottom: 12px;} .con01 .icenter2 { top: -328px; } .con01 .icenter2 .bot .fa { width: 40px; height: 40px;} .con01 .icenter2 .bot .fa img { width: 22px; } .con01 .icenter2 .bot { padding-bottom: 78px; } .con01 { padding: 190px 0; position: relative; } .con02 { padding: 68px 0 140px; } .con02 .top h3,.con02 .top .h3 { font-size: 36px; margin-bottom: 10px; } .con02 .top h4,.con02 .top .h4 { font-size: 14px; } .con02 form label span { font-size: 14px; } .con02 form .label3 {font-size: 14px;} .con02 form label span input { padding-left: 14px; font-size: 14px; margin-top: 8px; height: 38px; } .con02 form label textarea { padding: 8px 14px; font-size: 14px; height: 120px; width: 100%; margin-top: 8px;} .con02 form h5,.con02 form .h5 { font-size: 14px; margin: 6px 0 50px; } .con02 form button { width: 128px; height: 38px; font-size: 12px; } .con02 .top { margin-bottom: 32px; } .con02 form label { margin-bottom: 18px; } .con02 form .label3 { margin-bottom: 18px;} .con_banner img {height: 470px;} .inner_banner img {height: 470px;} .fx { margin-top: 470px; } .inner_banner .text h3,.inner_banner .text .h3 { font-size: 50px; margin-bottom: 8px; line-height: 44px; } .inner_banner .text h4,.inner_banner .text .h4 { font-size: 22px;} .pagenews dl { padding: 56px 0; } .pagenews dl a dd strong,.pagenews dl a dd h2,.pagenews dl a dd h3,.pagenews dl a dd .h2,.pagenews dl a dd .h3 { font-size: 26px; margin-bottom: 15px; } .pagenews dl a dd font { font-size: 15px; line-height: 24px; } .pagenews dl a .dates span { font-size: 32px; } .pagenews dl a .dates font { font-size: 16px; line-height: 1em; margin-top: 8px; } .pagenews { padding: 0px 0 65px; } .page { padding-bottom: 160px;} .newsinfo_banner .news_text .bt { font-size: 30px; } .newsinfo_banner h4,.newsinfo_banner .h4 { margin-bottom: 8px; } .newsinfo_banner h5 span:nth-of-type(1),.newsinfo_banner .h5 span:nth-of-type(1) { margin-right: 14px; } .newsinfo_banner h5,.newsinfo_banner .h5 { font-size: 13px; } .newshowtxt p { font-size: 16px; line-height: 26px; margin-bottom: 16px; } .newshowtxt { width: 900px; margin: 80px auto 145px; } .sxy a { padding: 14px 0; font-size: 16px; } .bottomfx dd span { font-size: 14px; line-height: 28px; margin-right: 14px; } .bottomfx dd .fx1 a { width: 28px; height: 28px; line-height: 28px; margin-right: 8px; font-size: 14px; } .bottomfx dt a { width: 105px; height: 36px; font-size: 14px; } .bottomfx { margin-top: 32px; } .culture01 { position: sticky; top: 80px; margin-top: 470px; padding: 80px 0;} .emission { width: 450px; height: 450px; top: 2%; left: 50%; margin-left: -224px; z-index: -1; opacity: 0.8; } .hu_h3 { font-size: 36px; } .culture01 .icenter2 h4,.culture01 .icenter2 .h4 { font-size: 16px; margin: 8px 0 24px; } .culture01 .icenter2 p { font-size: 16px; line-height: 26px; margin-bottom: 61px; width: 820px;} .culture01 .icenter2 img { width: 52px; } .culture02.bn .icenter2 h4,.culture02.bn .icenter2 .h4 { font-size: 16px; margin: 8px 0 24px; } .culture02.bn .icenter2 p { font-size: 16px; line-height: 26px; margin-bottom: 61px; width: 820px;} .culture02.bn .icenter2 img { width: 52px; } .culture02 dl dd .icon { width: 112px; height: 112px;} .culture02 dl dd .icon img { width: 43px; } .culture02 dl dd { padding: 78px 30px 35px; } .culture02 dl dd h5,.culture02 dl dd .h5 { font-size: 26px; margin-bottom: 9px; } .culture02 dl dd p { font-size: 14px; line-height: 26px; margin-bottom: 24px; height: 80px; } .culture02 dl dd span { font-size: 26px; } .culture02 dl dd::after { height: 6px;} .culture02 { padding: 122px 0; } .culture02,.culture03,.culture04{position: sticky; top: 80px; } .culture03, .culture04 { height: 530px;} .culture03 .bg { left: calc(50% + 14px); } .culture03 .right .text .seg p { font-size: 14px; line-height: 26px; width: 350px; } .culture03 .right .text .seg h4,.culture03 .right .text .seg .h4 { font-size: 26px; margin-bottom: 24px; } .culture03 .right .text .seg h4::after,.culture03 .right .text .seg .h4::after { width: 26px; height: 2px; left: 2px; bottom: -13px; } .culture03 .right .text .seg { margin-bottom: 44px; } .culture03 .bg .tips img { width: 30px; } .culture03 .bg .tips h4,.culture03 .bg .tips .h4 {font-size: 16px; margin: 12px 0;} .culture03 .bg .tips h5,.culture03 .bg .tips .h5 { font-size: 16px;} .culture03 .bg .cir { width: 296px; } .culture04 .left .wen { font-size: 104px; left: -20%; } .culture04 .icenter2 .box { padding: 79px 65px; } .culture04 .icenter2 .box .icon img { width: 487px; } .culture04 .icenter2 .box .seg h4,.culture04 .icenter2 .box .seg .h4 { font-size: 26px; margin-bottom: 24px; } .culture04 .icenter2 .box .seg h4::after,.culture04 .icenter2 .box .seg .h4::after { width: 26px; height: 2px; left: 2px; bottom: -14px; } .culture04 .icenter2 .box .seg p { font-size: 14px; line-height: 24px; } .culture04 .icenter2 .box .seg { margin-bottom: 38px; z-index: 1; } .culture05 { padding: 100px 0 240px; } .culture05 dl dd .bot .icon img { width: 70px; } .culture05 dl dd .bot { padding: 28px 28px 83px; } .culture05 dl dd .bot h4,.culture05 dl dd .bot .h4 { font-size: 15px; margin-bottom: 22px; } .culture05 dl dd .bot h4::after,.culture05 dl dd .bot .h4::after { left: 1px; bottom: -11px; width: 20px; height: 1px; } .culture05 dl dd .bot h5,.culture05 dl dd .bot .h5 { font-size: 17px; line-height: 28px; height: 79px;} .culture05 dl dd .imgbox img {height: 220px;} .culture05 dl { margin-top: 16px; } /* human */ .human04 { padding: 130px 0 170px; } .human04 .icenter2 h4,.human04 .icenter2 .h4 { font-size: 24px; margin-bottom: 18px; } .human04 .icenter2 .hu_h3 { margin: 0px 0 10px; } .human04 .icenter2 p { margin-bottom: 53px; width: 840px; } .hu_p { font-size: 16px; line-height: 26px; } .human04 .icenter2 .icon { width: 90px; height: 90px; font-size: 14px; } .human04 .icenter2 .icon::before { width: 280px; left: -358px; } .human04 .icenter2 .icon::after { width: 280px; right: -358px; } .human03 { padding: 100px 0 90px; } .human03 dl dd .icon { margin-bottom: 12px; height: 100px; width: 100px;} .human03 dl dd .icon img { width: 36px; } .human03 dl dd h4,.human03 dl dd .h4 { font-size: 14px; margin-bottom: 6px; } .human03 dl dd h5,.human03 dl dd .h5 { font-size: 18px;} .human02 { padding: 110px 0 210px;} .human02 dl dd h4,.human02 dl dd .h4 { font-size: 14px; margin-top: 12px; } .human02 dl dd img { width: 80px; } .human02 dd .box { width: 52px; height: 38px; left: 133px; top: 28px; } .human02 dd .box1 { width: 52px; height: 38px; left: -68px; top: -9px; } .human02 dl dd h5,.human02 dl dd .h5 { font-size: 14px; line-height: 20px;} .human02 dl dd:nth-of-type(1) h5,.human02 dl dd:nth-of-type(1) .h5 { bottom: -75px; left: 43%; } .human02 dl dd:nth-of-type(2) h5,.human02 dl dd:nth-of-type(2) .h5 { width: 497px; left: 0px; bottom: -124px;} .human02 dd .box2 { width: 52px; height: 38px; left: -35px; top: 153px; } .human02 dl {margin-top: 50px;} .human01 .segment1 .left .hu_h3 {margin-bottom: 15px; font-size: 35px; } .human01 .segment2 dl dd {padding: 32px 28px; font-size: 14px; line-height: 24px; } .human01 .segment2 .title .content { font-size: 20px;} .human01 .segment2 .title img { width: 612px; } .human01 .segment2 .svg img { width: 52px;} .human01 .segment2 dl { margin-top: 34px; } .human01 .segment2 { margin: 90px 0; } .human01 .segment2 .svg .icon1 p svg {width: 235px;height: 95px;} .human01 .segment2 .svg .icon1 p path{stroke-width: 8px; d:path("M10 95 L 10 36 L225 36 L 225 0");} .human01 .segment2 .svg .icon1 p {left: 16px; top: -90px; } .human01 .segment2 .svg .icon3 p { right: 16px; top: -90px; } .human01 .segment2 .svg .icon3 p svg {width: 235px;height: 95px;} .human01 .segment2 .svg .icon3 p path{stroke-width: 8px; d:path("M225 95 L 225 36 L10 36 L 10 0");} .human01 .segment2 .svg .icon2 p path {stroke-width: 8px;} .human01 .segment2 .svg .icon2 p { left: 16px; top: -90px; } .human01 .bg2 { right: -25%; bottom: 12%; z-index: -1; width: 440px; } .human01 .bg1 { left: -19%; top: 20%; width: 440px; } .human_banner .text p , .human01 .text p{ font-size: 20px; line-height: 30px; width: 900px;} .human_banner .text { top: 91%; height: 500px; } .human01 .text { top: -48px; height: 500px; } .human01 { padding: 258px 0 100px; } .human_banner img {height: 538px;} .honor03 { padding: 100px 0 158px; } .honor03 .swiper-wrapper .swiper-slide img { width: 133px; max-height: 189px; transition: 0s; } .honor03 .swiper-wrapper .swiper-slide-active img { width: 318px; max-height: 451px; } .honor03 .swiper-wrapper .swiper-slide-active { margin-right: 64px !important; } .honor03 .com_cc .text h4,.honor03 .com_cc .text .h4 { font-size: 14px; } .honor03 .com_cc .text h5,.honor03 .com_cc .text .h5 { font-size: 18px; } .honor03 .fa {width: 18px;height: 39px;} .honor03 .soft_h4 {margin-bottom: 34px;} .honor03Swiper { height: 470px; } .honor03 .com_cc .text h5,.honor03 .com_cc .text .h5 { width: 326px; } .honor04 .imgbox .con { width: 129px;} .imgshow p img { max-width: 344px; } .s_list04 .bot { width: 1140px;} .s_list04 {padding: 90px 0 150px;} .s_list04 .box .text { padding: 30px; padding-bottom: 51px;} .s_list04 .box .text h4,.s_list04 .box .text .h4 { font-size: 20px; margin-bottom: 6px; } .s_list04 .box .text h5,.s_list04 .box .text .h5 { font-size: 15px; } .s_list04 .box .text .bo { width: 38px; height: 38px; right: 28px; bottom: 41px; font-size: 16px; } .s_list04 .box .imgbox img { height: 222px; } .s_list04 .botF { margin-bottom: 24px; } .s_list04 .hu_h3 { margin-bottom: 4px; } .s_list04 .botF .fa-angle-left { left: -53px; } .s_list04 .botF .fa-angle-right{ right: -53px; } .s_list04 .botF .fa_cc { width: 40px; height: 40px; font-size: 26px; } .s_list03 .swiper-slide .box img { height: 108px; } .s_list03 .swiper-slide-active .box img { height: 286px; } .s_list03 .swiper-slide .box h4,.s_list03 .swiper-slide .box .h4 { font-size: 15px;} .s_list03 .swiper-slide-active .box h4,.s_list03 .swiper-slide-active .box .h4 { font-size: 20px; margin-bottom: 10px; padding-bottom: 10px;} .s_list03 .bot .box h5,.s_list03 .bot .box .h5 { opacity: 0; font-size: 14px; color: #666666; line-height: 24px; text-align: center; width: 438px;} .s_list03 .bot .box h4::after,.s_list03 .bot .box .h4::after { position: absolute; content: ""; bottom: -2px; width: 29px; height: 3px;} .s_list03 .swiper-slide, .s_list03 .icenter2 { height: 404px; } .s_list03 .amore { margin-top: 32px; } .s_list03 .bot::before,.s_list03 .bot::after { height: 225px;} .s_list03 .bot .fa { width: 45px; height: 45px;} .s_list03 .bot .fa img { width: 22px; } .s_list03 { padding: 90px 0 90px; } .s_list02 dl dd h4,.s_list02 dl dd .h4 { font-size: 16px; margin-bottom: 14px; } .s_list02 dl dd p { font-size: 15px; line-height: 24px; width: 85%; height: 49px; } .s_list02 dl dd img { width: 48px; margin-bottom: 18px; } .s_list02 dl dd h4::before,.s_list02 dl dd .h4::before { top: -8px; width: 25px; height: 2px; } .s_list02 dl { margin-top: 24px;} .s_list02 { padding: 134px 0 100px;} .s_list01 .top { width: 1100px; padding: 58px 0 50px 83px;} .s_list01 .top h3,.s_list01 .top .h3 { font-size: 42px; margin-bottom: 14px; } .s_list01 .top p { font-size: 15px; line-height: 26px; margin-bottom: 41px; } .s_list01 .top .icon { width: 100px; } .s_list01 .top .amore img { width: 16px; margin-right: 8px; } .s_list01 .top .amore::after { padding-left: 23px; } .s_list01 .top h3::before,.s_list01 .top .h3::before { left: -83px; height: 44px;} .s_list01 .icenter2 .imgbox { width: 890px; margin-bottom: 28px; } .s_list01 { padding: 197px 0 0px;} .solu01 { padding: 90px 0; } .solu01 .top p { font-size: 12px; padding: 0 0px; margin-top: 14px; text-align: center; line-height: 19px;} .solu01 dl dd .icon { width: 20px; margin-right: 20px; } .solu01 dl dd .text h4,.solu01 dl dd .text .h4 { font-size: 17px; } .solu01 dl dd { margin-bottom: 20px; padding: 0 30px; } .solu01 dl dd.active { padding: 33px 36px; } .solu01 dl dd .text p { font-size: 14px; line-height: 22px; margin-bottom: 16px; margin-top: 15px; width: 296px; } .solu01 dl dd .text .cha { font-size: 13px; } .solu01 .top { margin-bottom: 55px; } .solu01 dl { height: 421px; } .solu01 .le_bg { position: absolute; left: -9%; top: -24%; z-index: -1; font-size: 944px; color: rgba(253, 245, 246); height: 500px; line-height: 500px; } .solu01 .ri_bg {top: 230px; height: 448px; } .solu02 { padding: 100px 0 162px; } .solu02 .bot .box .b { padding: 26px 18px 26px 29px; } .solu02 .bot .box .imgbox .tip { width: 102px; height: 28px; font-size: 12px;} .solu02 .bot .box .b h4,.solu02 .bot .box .b .h4 { font-size: 15px; margin-bottom: 8px; } .solu02 .bot .box .b .cc { padding-top: 20px; border-top: 1px solid #ddd; } .solu02 .bot .box .b .cc .bo { font-size: 14px; width: 34px; height: 34px;} .solu02 .bot .box .b p { font-size: 12px; padding-bottom: 0px; margin-bottom: 16px; } .solu02 .op { bottom: 12%; left: calc((100% - 1100px)/2); width: 1100px; } .solu02 .op .fa { width: 26px; } .solu03 { padding: 90px 0 80px;} .solu03 .top .le p { width: 685px; font-size: 15px; line-height: 26px; margin-top: 36px; } .solu03 .top .le p::before { top: -20px; width: 72px; height: 2px; } .solu03 .top { height: 200px; } .solu03 .bot { height: 398px; } .solu03 .bot .ri p { font-size: 18px; line-height: 28px; } .solu03 .bot .ri { width: 31%; padding: 291px 0 0 66px; } .solu03 .bot .ri p::before { top: -27px; width: 50px; height: 2px; } .solu03 .wen1 { font-size: 144px;} .solu03 .wen2 { font-size: 144px; right: 2%; top: 60%; height: 65px; line-height: 136px; } .solu04 .bot { padding: 56px 0 70px; border-radius: 20px; } .solu04 .hu_h3 { margin-bottom: 32px; } .solu04 { padding-bottom: 208px; } .solu04 .nav .box img { width: 50px; margin-bottom: 14px; } .solu04 .nav .box span {font-size: 12px; height: 33px;} .solu04 .nav .box { width: 85px;} .solu04 .content { padding: 42px 105px 0; } .solu04 .nav { padding: 0px 105px 16px;} .solu04 .content .min h4,.solu04 .content .min .h4 { font-size: 24px; margin-bottom: 6px; } .solu04 .content .min h5,.solu04 .content .min .h5 { font-size: 15px; line-height: 26px; width: 83%; } .solu04 .bg { left: -14%; top: -24%;} .acc .top { padding: 80px 0 30px; position: relative; } .acc .top .box .icon { width: 169px; margin-bottom: 19px; padding: 8px; } .acc .top .box span { font-size: 16px; margin-bottom: 16px; } .acc .top .box h4,.acc .top .box .h4 { font-size: 18px; margin-bottom: 40px; width: 600px; } .acc .top .bg1 { left: -38%; top: -18%; } .acc .bot { padding: 70px 0 150px; } .acc .bot dl dd h4,.acc .bot dl dd .h4 { margin-bottom: 9px; font-size: 16px; } .acc .bot dl dd h5,.acc .bot dl dd .h5 { font-size: 12px; margin-bottom: 36px; } .acc .bot dl dd .i .icon2 { width: 72px; } .acc .bot dl dd .i .icon1 { width: 26px; margin-right: 3px; } .acc .bot dl dd { width: 167px; margin-right: 72px;} .acc .bot dl dd .content {padding: 30px 12px 12px 26px; } .acc .bot dl { margin-left: 36px; } .acc .bot dl dd .aft_jian { width: 30px; right: -52px;} .acc .bot .phone img { height: 100%; width: 100%; object-fit: contain;} .acc .bot .phone { height: 536px; right: 53px; bottom: 53px; } .honor01 { padding: 80px 0; } .honor01 .left .hu_h3 { margin-bottom: 12px; } .honor01 .left dl dd .text h5,.honor01 .left dl dd .text .h5 { font-size: 15px; } .honor01 .left dl dd .text h4,.honor01 .left dl dd .text .h4 { font-size: 14px; margin-bottom: 3px; } .honor01 .left dl dd .icon { width: 26px;} .honor01 .left dl dd { padding-bottom: 16px; padding-top: 26px; width: 265px; } .honor01 .right dl dd{width: 22.8%;} .honor01 .ho01_bg { top: 15%; left: 30px; } .honor01 .left .icenter2 { top: 45px; } .honor01 .right { right: 0px; top: 10px; height: auto; } .honor01 .right .h01thumbs { bottom: -58px; } .honor01 .right .h01thumbs .text { padding: 46px; width: 449px; height: 251px;} .honor01 .right .text h4,.honor01 .right .text .h4 { font-size: 25px; margin-bottom: 30px; } .honor01 .right .text p { font-size: 15px; line-height: 26px; height: 76px;} .honor02 { padding: 100px 0;} .honor02 dl dd { padding: 32px 24px 28px 35px;} .honor02 dl dd .text h4 strong,.honor02 dl dd .text .h4 strong { font-size: 58px; margin-right: 3px; line-height: 56px; } .honor02 dl dd .text h4,.honor02 dl dd .text .h4 { font-size: 30px; margin-bottom: 8px; } .honor02 dl dd .text h5,.honor02 dl dd .text .h5 { font-size: 15px; margin-top: 4px; } .honor02 dl dd .bg { width: 183px; } .honor02 dl dd .bot .icon { width: 58px; } .honor02 dl dd .bot span { font-size: 13px;} .honor02 dl dd .text { margin-bottom: 14px; } .honor04 { padding: 115px 0 100px} .honor04 .box h4,.honor04 .box .h4 { font-size: 16px; margin-top: 18px; } .honor04 .bot { width: 1140px; } .fa-dr { top: 40%!important; width: 40px!important; height: 40px!important; font-size: 32px!important;} .honor04 .swiper-button-prev { left: -55px; } .honor04 .swiper-button-next { right: -55px; } .honor05 { padding: 60px 0; } .honor05 .box h4,.honor05 .box .h4 { font-size: 17px; margin-top: 18px; } .honor05 .swiper-button-prev { left: -55px; } .honor05 .swiper-button-next { right: -55px; } .honor05 .bg1 { left: -36%;} .honor05 .bg2 { right: -40%; } .honor04 .hu_h3 { margin-bottom: 12px; } .honor05 .hu_h3 { margin-bottom: 30px;} .com01 .top .le .text h4,.com01 .top .le .text .h4 { font-size: 22px; line-height: 33px; margin-bottom: 56px; height: 100px; } .com01 .top .le .text h5,.com01 .top .le .text .h5 { font-size: 16px; line-height: 30px; height: 117px;} .com01 .top .le .com01Swiper { width: 354px; height: 277px; } .com01 .top .le .op .control { width: 48px; height: 48px; margin-bottom: 20px;} .com01 .top .le .op .control .icon img { width: 15px; } .com01 .top .le .swiper-pagination-bullet { width: 11px; height: 11px; margin: 9px 0;} .com01 .top .ri .bo img { width: 50px; } .com01 .top .ri video { height: 320px;} .com01 { padding: 90px 0;} .com01 dl dd img { height: 60px; } .com01 dl dd h4,.com01 dl dd .h4 { font-size: 48px; margin: 20px 0 14px; } .com01 dl dd strong { font-size: 48px; line-height: 46px; } .com01 dl dd span { font-size: 14px; } .com02 .icenter2 .content { margin-top: 32px;} .aft01 {padding: 100px 0 90px;} .aft01 h4,.aft01 .h4 { font-size: 20px; margin: 10px 0 22px; } .aft01 .box .min { width: 420px; height: 420px;} /*.aft01 .box:hover .min:nth-of-type(1) { left: 278px; } .aft01 .box:hover .min:nth-of-type(2) { right: 278px; }*/ .aft01 .box .min h5,.aft01 .box .min .h5 { font-size: 17px; margin-bottom: 26px; } .aft01 .box .min h6,.aft01 .box .min .h6 { font-size: 18px; margin-bottom: 30px; height: 71px; width: 295px;} .aft01 .box .min img { width: 52px; } .aft01 .box { margin-bottom: 38px; } .aft02 .top p {font-size: 15px; line-height: 25px; margin-top: 8px; width: 800px;} .aft02 .top { margin-bottom: 30px;} .aft02 .top h4,.aft02 .top .h4 { font-size: 24px; } .aft02 .top .line { height: 55px; margin: 20px 0; } .aft02 .bot .aft02Swiper { width: 1000px; } .aft02 .bot { width: 1032px; padding: 22px 0; } .aft02 .botF { padding: 0 13px;} .aft02 .botF .fa { font-size: 65px; } .aft02 .bot .box { padding: 43px 0 105px; box-shadow: 0 0 11px #d8d8d8;} .aft02 .bot .box .icon { height: 60px; width: 60px;} .aft02 .bot .box .icon img { width: 36px; } .aft02 .bot .box h4,.aft02 .bot .box .h4 { font-size: 26px; margin-bottom: 5px; margin-top: 44px; } .aft02 .bot .box h5,.aft02 .bot .box .h5 { width: 85%; font-size: 15px; line-height: 24px; height: 48px; } .aft02 .bot .box h5::after,.aft02 .bot .box .h5::after { width: 17px; height: 3px; bottom: -60px; } .aft02 .botF .fa-angle-left {left: -18px;} .aft02 .botF .fa-angle-right {right: -18px;} .aft02 { padding: 115px 0 90px; } .aft02 .bg_fix { height: 555px; } .aft03 .icenter2 .ri ul li { padding-left: 15px; font-size: 14px; line-height: 24px; } .aft03 .icenter2 .ri ul { margin: 16px 0 0px; } .aft03 dl dd { padding-top: 34px; padding-bottom: 12px; } .aft03 dl dd .icon { width: 74px; margin-right: 50px; } .aft03 dl dd .text h4,.aft03 dl dd .text .h4 { font-size: 16px; margin-bottom: 8px; } .aft03 dl dd .text h4 strong,.aft03 dl dd .text .h4 strong { font-size: 58px; } .aft03 dl dd .text h4::after,.aft03 dl dd .text .h4::after { height: 4px;} .aft03 dl dd .text p { font-size: 15px; } .aft03 .icenter2 .le { height: 529px; } .aft04 { padding: 100px 0 155px; } .aft04 dl dd { padding-left: 36px; padding-bottom: 36px;} .aft04 .hu_h3 { padding-left: 36px; } .aft04 dl { margin-top: 38px;} .aft04 dl dd .ri .number .t .icon { width: 48px; margin-right: 10px;} .aft04 dl dd .ri .number .t a { font-size: 30px; } .aft04 dl dd .ri .number .t a::after { width: 41px;} .aft04 dl dd .ri .number span { font-size: 16px; } .aft04 dl dd .ri .name { font-size: 14px; width: 133px; height: 38px;} .aft04 dl dd .bg { width: 115px; } .aft04 dl dd .ri .number { margin-top: 70px; } .com03 { padding: 100px 0;} .com_top p { font-size: 16px; line-height: 26px; margin-top: 12px; } .com03 dl dd img { height: 50px; } .com03 dl dd h4,.com03 dl dd .h4 { font-size: 18px; margin: 22px 0 45px; } .com03 dl dd p { font-size: 14px; line-height: 26px; height: 78px; } .com03 dl dd h4::after,.com03 dl dd .h4::after { width: 48px;} .com04 { padding: 100px 0 140px; } .com_top { margin-bottom: 40px;} .com04 dl dd .text h4,.com04 dl dd .text .h4 { margin-bottom: 20px; font-size: 20px;width: fit-content;} .com04 dl dd .text h4::after,.com04 dl dd .text .h4::after { width: 100%;} .com04 dl dd .text h5,.com04 dl dd .text .h5 { font-size: 18px; } .com04 dl dd .icon img { width: 49px; } .com04 dl dd .icon { margin-right: 18px; width: 100px; height: 100px;} .com02 .icenter2 .content .text h4,.com02 .icenter2 .content .text .h4 { font-size: 22px; margin: 21px 0 14px; } .com02 .icenter2 .content .text p { font-size: 14px; line-height: 26px; width: 311px; height: 101px;} .com02 .icenter2 .content .text .icon { width: 52px; height: 52px;} .com02 .icenter2 .content .text .icon img { width: 28px; } .com02 .circle svg{width: 52px; height: 52px;} .com02 .circle .arc {r: 24px; cx: 26px; cy: 26px; } .com02 .icenter2 .content .text { right: 16%;top: 24%; } .com02 .circle { left: 54%; top: 50%;} .com02 .icenter2 .content img { width: 801px; } .com02 .icenter2 .content .box { height: 414px; } .com02 .icenter2 .fix_icon { width: 179px; height: 54px; border-radius: 30px; bottom: 68px; left: 31%; } .com02 .icenter2 .fix_icon span { font-size: 14px; } .com02 .icenter2 .fix_icon .dot { margin-right: 16px; width: 42px; height: 42px;} .com02 .com02Swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; margin: 8px 0px!important;} .com02 .bg { height: 402px;} .com02 { padding-top: 176px;} /* .pro */ .pro .right { width: 79%; padding: 80px 42px 70px; } .pro .left { padding-top: 80px; padding-left: 26px; } .pro .right .seg .title h3,.pro .right .seg .title .h3 { font-size: 36px; margin-bottom: 2px; } .pro .right .seg .title h4,.pro .right .seg .title .h4 { font-size: 16px; } .pro .right .seg .title { margin-bottom: 0; padding-left: 26px; } .pro .right .seg .title h3::before,.pro .right .seg .title .h3::before { width: 12px; height: 12px; left: -26px; } .pro .left .seg .title { margin-bottom: 0; font-size: 16px;} .pro .left .seg { padding-top: 0; } .pro .left .seg .min a span { font-size: 13px; padding: 13px 0; padding-right: 15px;} .pro .right .seg dl dd { height: 370px;} .pro .right .seg dl dd .content .icon { width: 46px; margin-bottom: 192px; } .pro .right .seg dl dd .content .t { font-size: 20px; margin-bottom: 66px;} .pro .right .seg dl dd .content .b a { font-size: 15px; padding-bottom: 5px; margin-bottom: 5px; } .pro .right .seg dl dd .content .b { height: 194px; } .pro .right .seg { margin-bottom: 80px; } .icenter3{width: 1100px;} .proinfo03 { padding: 100px 0 160px;} .proinfo03 h3,.proinfo03 .h3 { font-size: 36px; margin-bottom: 12px; } .proinfo03 h4,.proinfo03 .h4 { font-size: 16px; margin-bottom: 26px; } .proinfo03 .min a { width: 185px; height: 38px; line-height: 38px; } .proinfo03 .share span { font-size: 16px; margin-right: 12px; } .proinfo03 .share .s a { width: 38px; height: 38px; font-size: 17px; margin-right: 8px; border-radius: 50%; } .proinfo03 .share { margin-top: 35px;} .proinfo02 { padding: 90px 0; } .proinfo02 ul { margin-bottom: 48px; padding: 60px 56px;} .proinfo02 ul li p { height: 46px; padding: 8px 0; line-height: 46px; font-size: 16px; } .proinfo02 a { width: 200px; height: 42px; font-size: 14px; } .proinfo02 a span { font-size: 14px; } .proinfo02 a::after { width: 113%; } .proinfo02 a img { width: 16px; margin-right: 8px; } .proinfo02 h3,.proinfo02 .h3 { font-size: 36px; margin-bottom: 36px; } .proinfo_banner { position: relative; margin-top: 80px; padding: 55px 0 74px;} .proinfo_banner .left .tab { width: 100px; } .proinfo_banner .left .main .icon img { height: 352px; } .proinfo_banner .right h3,.proinfo_banner .right .h3 { font-size: 26px; margin-bottom: 17px; } .proinfo_banner .right h4,.proinfo_banner .right .h4 { font-size: 15px;} .proinfo_banner .right h4::after,.proinfo_banner .right .h4::after { width: 52%;} .proinfo_banner .right p { font-size: 13px; margin: 12px 0 23px; line-height: 22px;} .proinfo_banner .right dl dd .icon { width: 70px; height: 70px; border-radius: 5px;} .proinfo_banner .right dl dd .icon img { width: 44px; } .proinfo_banner .right dl { margin-bottom: 34px;} .proinfo_banner .right a { background-color: #0f2e93; border-color: #0f2e93; width: 200px; height: 42px;} .proinfo_banner .right a { width: 177px; height: 40px; font-size: 13px;} .proinfo_banner .right a span { font-size: 14px; } .proinfo_banner .right a::after { width: 113%; } .proinfo_banner .right a img { width: 16px; margin-right: 8px; } .proinfo01 .content p { font-size: 16px; line-height: 36px;} .proinfo01Swiper { height: 222px; } .proinfo01Swiper .swiper-pagination-progressbar { width: 230px!important;} .proinfo01 .top h3,.proinfo01 .top .h3 { font-size: 32px; margin-bottom: 24px;} .proinfo01 dl {margin: 100px 0; } .proinfo01 dl dd { border-radius: 15px; padding: 55px 15px 60px; } .proinfo01 dl dd .icon { width: 72px; height: 72px;} .proinfo01 dl dd .icon img { width: 38px; } .proinfo01 dl dd .icon::after { width: 122%; height: 122%; left: -8px; top: -8px;} .proinfo01 dl dd h4,.proinfo01 dl dd .h4 { font-size: 12px; margin: 17px 0;} .proinfo01 dl dd p { font-size: 14px; line-height: 24px; } .head .icenter .right ul li .slide .min{margin-top: -39px;} .head .icenter .right ul li .slide .min { width: 580px; display: flex; justify-content: flex-start; margin-top: -39px; flex-flow: wrap; height: 109px; } .proinfo01 .top .ri ul li h4,.proinfo01 .top .ri ul li .h4 { font-size: 18px; margin-bottom: 4px; } .proinfo01 .top .ri ul li h5,.proinfo01 .top .ri ul li .h5 { font-size: 12px; } .proinfo01 .top .ri ul li h4::before,.proinfo01 .top .ri ul li .h4::before { top: -8px; height: 2px;} .proinfo01 .top .ri ul li{ margin-bottom: 68px;} .proinfo01 .top .ri .fa { width: 36px; height: 36px; font-size: 26px;} .proinfo01 .top .ri .fa-angle-right { left: 54px; right: auto; } .proinfo01 .top { padding: 100px 0;} .bd-mask .tcbox .contwarp { padding: 27px;} .bd-mask .tcbox .contwarp h3,.bd-mask .tcbox .contwarp .h3 { font-size: 28px; margin-bottom: 20px; } .bd-mask .tcbox .contwarp form input, .bd-mask .tcbox .contwarp form select, .bd-mask .tcbox .contwarp form textarea { width: 100%; border-radius: 5px; margin-bottom: 16px; height: 34px; padding-left: 10px; font-size: 12px; } .bd-mask .tcbox .contwarp form textarea { height: 95px; resize: none; padding: 10px; } .bd-mask .tcbox .contwarp .close { right: -34px; top: -34px; width: 25px; } .bd-mask .tcbox .contwarp form button { width: 138px; height: 34px; font-size: 12px; margin-top: 16px; } .bd-mask .tcbox .contwarp form input::-webkit-input-placeholder,.bd-mask .tcbox .contwarp form textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-size: 12px; } .bd-mask .tcbox .contwarp form input::-moz-placeholder,.bd-mask .tcbox .contwarp form textarea::-moz-placeholder { /* Firefox 19+ */ font-size: 12px; } .bd-mask .tcbox .contwarp form input:-ms-input-placeholder,.bd-mask .tcbox .contwarp form textarea:-ms-input-placeholder { /* IE 10+ */ font-size: 12px; } .bd-mask .tcbox .contwarp form input:-moz-placeholder,.bd-mask .tcbox .contwarp form textarea:-moz-placeholder { /* Firefox 18- */ font-size: 12px; } .bd-mask select::-webkit-input-placeholder {font-size: 12px;} .bd-mask .tcbox .contwarp form select { padding-left: 5px; } .bd-mask input::-webkit-input-placeholder {font-size: 12px;} .proinfo02 { background-size: 200% auto;} .proinfo_banner .left { width: 54.5%;} .proinfo_banner .right { width: 38%; } .head .icenter .right ul li .slide2 .le { padding-left: 16.5%;} .head .icenter .right .tools a:nth-of-type(2) .p_body { top: 62px; font-size: 18px; width: 190px; height: 50px; } .s_list02 .content .box h4,.s_list02 .content .box h4 { font-size: 21px; margin: 17px 0 27px; } } @media screen and (max-width:768px) { .aft02 .bot .box h5,.aft02 .bot .box .h5{font-size: 22px;font-weight: bold;} }