@charset "UTF-8"; body.show a, body.show .transition, body.show .p-lines2 div, .p-lines2 body.show div, body.show .p-more div, .p-more body.show div, body.show a.p-back div, a.p-back body.show div, body.show .news-nav a div, .news-nav a body.show div, body.show .p-more, body.show a.p-back, body.show .news-nav a, .news-nav body.show a, body.show .p-layer, body.show .p-submit input, .p-submit body.show input, body.show .side-bar li .layer, .side-bar li body.show .layer, body.show .indexFlash, body.show .indexFlash .dots span, .indexFlash .dots body.show span, body.show .index-product .list li .name, .index-product .list li body.show .name, body.show .index-product .list li .img, .index-product .list li body.show .img, body.show .index-news .row .list a, .index-news .row .list body.show a, body.show .index-news .row .list a .col p, .index-news .row .list a .col body.show p, body.show .product .list a .name h5, .product .list a .name body.show h5, body.show .contact-form .form li .p-lines2, .contact-form .form li body.show .p-lines2, body.show .down-form-layer .form li .p-lines2, .down-form-layer .form li body.show .p-lines2, body.show .contact-form .form li .input, .contact-form .form li body.show .input, body.show .down-form-layer .form li .input, .down-form-layer .form li body.show .input, body.show .application a .img .p-lines2 div, .application a .img .p-lines2 body.show div, body.show .application-show .tab-btn li, .application-show .tab-btn body.show li, body.show .about-4 .row .tab-btn li .name, .about-4 .row .tab-btn li body.show .name, body.show .news li .time, .news li body.show .time, body.show .job li .name, .job li body.show .name, body.show .job li .name dl dd, .job li .name dl body.show dd, body.show .job li .name .p-lines2, .job li .name body.show .p-lines2, body.show .video-layer, body.show :before, body.show :after, body.show img, body.show .g-nav { transition: All 0.5s ease; -webkit-transition: All 0.5s ease; -moz-transition: All 0.5s ease; -o-transition: All 0.5s ease; } .ellipsis, .index-news .row .list a .col .name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .flex, .p-more, a.p-back, .news-nav a, .p-title, .p-num, .p-num2, .p-num2 a, .g-nav ul, .indexFlash .dots, .index-application .hd, .index-news .hd, .index-news .tab-btn ul, .index-news .row .list a, .product-show-1 .hd, .product-show-4 .list li, .application-show .hd, .application-show .tab-btn ul, .about-4 .title, .news-nav ul, .news-show .hd, .job li .name, .job li .name dl, .video-layer { display: flex; display: -webkit-flex; display: -ms-flex; } .flexColumn, .p-layer, .index-product .list li, .index-news .row .big-img .name, .p-banner .wal, .product .list a, .product .list .msg, .product-show-2 li, .down-ok-layer .container, .about-2 li, .about-4 .row .tab-btn li { display: flex; display: -webkit-flex; display: -ms-flex; flex-direction: column; -webkit-flex-direction: column; -ms-flex-direction: column; } .itemsCenter, .p-more, a.p-back, .news-nav a, .p-title, .p-layer, .p-num, .p-num2 a, .indexFlash li .wal, .index-product .list li, .index-news .row .list a, .product .list a, .product .list .msg, .product-show-1, .product-show-1 .hd, .product-show-4 .list li, .down-ok-layer .container, .application-show .hd, .about-2 li, .about-4 .title, .about-4 .row .tab-btn li, .news li, .news-show .hd, .job li .name, .video-layer { align-items: center; -webkit-align-items: center; } .justifyCenter, .p-more, a.p-back, .news-nav a, .p-layer, .p-num, .index-news .row .big-img .name, .p-banner .wal, .product .list a, .product .list .msg, .product-show-2 li, .down-ok-layer .container, .about-2 li, .about-4 .row .tab-btn li, .video-layer { justify-content: center; -webkit-justify-content: center; } .flexAround { justify-content: space-around; -webkit-justify-content: space-around; } .flexBetween, .g-nav ul, .g-foot .nav ul, .g-foot .msg, .indexFlash li .wal, .index-application .hd, .index-news .hd, .index-news .row, .index-news .row .list a, .product-show-1, .product-show-1 .hd, .product-show-2 ul, .product-show-4 .row, .contact-form .form ul, .down-form-layer .form ul, .application-show .hd, .about-4 .row, .about-4 .row .tab-btn ul, .news li, .news-show .hd, .contact, .contact-form .wal { justify-content: space-between; -webkit-justify-content: space-between; } .flexWrap, .g-foot .nav ul, .g-foot .msg, .indexFlash li .wal, .index-news .row, .product .list ul, .product-show-1, .product-show-2 ul, .product-show-3 .list-wrapper dl, .product-show-4 .row, .contact-form .form ul, .down-form-layer .form ul, .application ul, .about-2 ul, .about-4 .row, .about-4 .row .tab-btn ul, .about-4 .img-list ul, .news li, .contact, .contact-form .wal { display: flex; display: -webkit-flex; display: -ms-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; } .p-lines { position: absolute; z-index: 1; left: 0; right: 0; top: 0; bottom: 0; border: rgba(255, 255, 255, 0.5) solid 1px; } .p-lines div { width: .22rem; height: .22rem; border: #fff solid 3px; position: absolute; } .p-lines .line-l-t { left: -2px; top: -2px; border-right: 0; border-bottom: 0; } .p-lines .line-r-t { right: -2px; top: -2px; border-left: 0; border-bottom: 0; } .p-lines .line-l-b { left: -2px; bottom: -2px; border-top: 0; border-right: 0; } .p-lines .line-r-b { right: -2px; bottom: -2px; border-top: 0; border-left: 0; } .p-lines2 div, .p-more div, a.p-back div, .news-nav a div { width: .1rem; height: .1rem; border: #01478B solid 2px; position: absolute; } .p-lines2 .line-l-t, .p-more .line-l-t, a.p-back .line-l-t, .news-nav a .line-l-t { left: -1px; top: -1px; border-right: 0; border-bottom: 0; } .p-lines2 .line-r-t, .p-more .line-r-t, a.p-back .line-r-t, .news-nav a .line-r-t { right: -1px; top: -1px; border-left: 0; border-bottom: 0; } .p-lines2 .line-l-b, .p-more .line-l-b, a.p-back .line-l-b, .news-nav a .line-l-b { left: -1px; bottom: -1px; border-top: 0; border-right: 0; } .p-lines2 .line-r-b, .p-more .line-r-b, a.p-back .line-r-b, .news-nav a .line-r-b { right: -1px; bottom: -1px; border-top: 0; border-left: 0; } .p-lines2 { position: absolute; z-index: 1; left: 0; right: 0; top: 0; bottom: 0; border: rgba(1, 71, 139, 0.5) solid 1px; } .p-more, a.p-back, .news-nav a { width: 1.6rem; height: .54rem; position: relative; border: rgba(1, 71, 139, 0.5) solid 1px; font-size: .18rem; color: #01478B; } .p-more:before, a.p-back:before, .news-nav a:before { content: ""; display: block; position: absolute; left: .05rem; top: .05rem; right: .05rem; bottom: .05rem; background: #01478B; opacity: 0; } .p-more:after, a.p-back:after, .news-nav a:after { content: ""; display: block; position: absolute; position: relative; width: .24rem; height: .3rem; background: url("../image/arrow24.png") center no-repeat; background-size: 100%; margin-left: .1rem; } .p-more em, a.p-back em, .news-nav a em { position: relative; line-height: 1em; } .p-more:hover, a.p-back:hover, .news-nav a:hover, .p-more.on, a.on.p-back, .news-nav a.on { color: #fff; } .p-more:hover:before, a.p-back:hover:before, .news-nav a:hover:before, .p-more.on:before, a.on.p-back:before, .news-nav a.on:before { opacity: 1; } .p-more:hover:after, a.p-back:hover:after, .news-nav a:hover:after, .p-more.on:after, a.on.p-back:after, .news-nav a.on:after { background-image: url("../image/arrow24on.png"); } a.p-back { font-size: .16rem; width: 1.3rem; height: .48rem; } a.p-back:after { background-image: url("../image/arrow7.png"); width: .07rem; } a.p-back:hover:after { background-image: url("../image/arrow7on.png"); } .p-title img { width: .4rem; margin-right: .15rem; } .p-title h3 { font-size: .36rem; line-height: 1em; color: #1F2933; } .p-content { color: #5C6166; font-size: .16rem; line-height: 2em; text-align: justify; } .p-layer { position: fixed; z-index: 100; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; } .p-layer.show { opacity: 1; visibility: visible; } .p-layer .container { width: 10rem; min-height: 2rem; background: #fff; position: relative; } .p-layer a.close { display: block; width: .25rem; height: .25rem; background: url("../image/close2.png") center no-repeat; background-size: 100%; position: absolute; z-index: 1; left: auto; right: 0.3rem; top: 0.3rem; bottom: auto; } .p-layer a.close:hover { background-image: url("../image/close2on.png"); } .p-submit { position: relative; padding: .06rem; } .p-submit input { width: 100%; font-size: .18rem; color: #fff; cursor: pointer; background: #1a5996; height: .58rem; position: relative; z-index: 2; } .p-submit:hover input { background: #01478B; } .p-num { padding: .8rem 0 1.2rem 0; font-size: .28rem; color: #999; font-family: 'DINPro-Medium'; } .p-num em { color: #01478B; font-size: .6rem; display: inline-block; line-height: 1em; } .p-num a { width: .5rem; height: .4rem; background: center no-repeat; background-size: 100%; position: relative; top: .1rem; margin: 0 .2rem; } .p-num a.prev { background-image: url("../image/prev50.png"); } .p-num a.prev:hover { background-image: url("../image/prev50on.png"); } .p-num a.next { background-image: url("../image/next50.png"); } .p-num a.next:hover { background-image: url("../image/next50on.png"); } .p-num2 { margin-bottom: 1.2rem; border-bottom: rgba(0, 0, 0, 0.15) solid 1px; border-top: rgba(0, 0, 0, 0.15) solid 1px; position: relative; } .p-num2:before { content: ""; display: block; position: absolute; left: 50%; top: 50%; width: 1px; height: .2rem; margin-top: -.1rem; background: rgba(0, 0, 0, 0.2); } .p-num2 a { width: 50%; height: .7rem; text-transform: uppercase; color: #999; font-size: .2rem; padding: 0 .3rem; } .p-num2 a:hover { color: #01478B; } .p-num2 a.prev { justify-content: flex-end; -webkit-justify-content: flex-end; } .p-num2 a.prev:before { content: ""; display: block; position: absolute; position: static; background: url("../image/prev50.png") center no-repeat; background-size: 100%; width: .5rem; height: .2rem; margin-right: .2rem; } .p-num2 a.prev:hover:before { background-image: url("../image/prev50on.png"); } .p-num2 a.next:after { content: ""; display: block; position: absolute; position: static; background: url("../image/next50.png") center no-repeat; background-size: 100%; width: .5rem; height: .2rem; margin-left: .2rem; } .p-num2 a.next:hover:after { background-image: url("../image/next50on.png"); } * { margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } html { font-size: 100px; } body { font-size: 12px; font-family: Arial, "微软雅黑"; color: #1F2933; -webkit-text-size-adjust: none; } a { color: #1F2933; text-decoration: none; outline: none; } a:active { star: expression(this.onFocus=this.blur()); } a:link { text-decoration: none; outline: none; } a:visited { text-decoration: none; outline: none; } a:hover { text-decoration: none; color: #01478B; outline: none; } li { list-style: outside none; } h1 { font-size: 16px; } h2, h3, h4, h5 { font-size: 14px; } h5 { font-size: 12px; } textarea, input { background: transparent; font-size: 12px; font-family: Arial, "微软雅黑"; color: #888; outline: none; border: 0; } em { font-style: normal; } img { vertical-align: middle; max-width: 100%; border: 0; } .fl { float: left; } .fr { float: right; } .clear { clear: both; height: 0; display: block; _display: inherit; } .h10 { height: 0.1rem; overflow: hidden; clear: both; } .h50 { height: 0.5rem; overflow: hidden; clear: both; } .wal { max-width: 15.6rem; margin: 0 auto; } @font-face { font-family: "DINPro-Medium"; src: url("fonts/DINPro-Medium.woff2") format("woff2"), url("fonts/DINPro-Medium.woff") format("woff"), url("fonts/DINPro-Medium.ttf") format("truetype"), url("fonts/DINPro-Medium.eot") format("embedded-opentype"), url("fonts/DINPro-Medium.svg") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "DINPro-Bold"; src: url("fonts/DINPro-Bold.woff2") format("woff2"), url("fonts/DINPro-Bold.woff") format("woff"), url("fonts/DINPro-Bold.ttf") format("truetype"), url("fonts/DINPro-Bold.eot") format("embedded-opentype"), url("fonts/DINPro-Bold.svg") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "Monoton-Regular"; src: url("fonts/Monoton-Regular.woff2") format("woff2"), url("fonts/Monoton-Regular.woff") format("woff"), url("fonts/Monoton-Regular.ttf") format("truetype"), url("fonts/Monoton-Regular.eot") format("embedded-opentype"), url("fonts/Monoton-Regular.svg") format("svg"); font-weight: normal; font-style: normal; } @keyframes upDown2 { from { transform: translateY(0); } to { transform: translateY(0.3rem); } } @-webkit-keyframes upDown2 { from { -webkit-transform: translateY(0); } to { -webkit-transform: translateY(0.3rem); } } @keyframes upDown { from { top: 100%; margin-top: -.6rem; } to { top: 0; margin-top: .3rem; } } @-webkit-keyframes upDown { from { top: 100%; margin-top: -.6rem; } to { top: 0; margin-top: .3rem; } } @keyframes scaleAnim { 0% { transform: scale(0); opacity: 1; } 50% { transform: scale(0.7); opacity: .5; } 100% { transform: scale(1); opacity: 0; } } @-webkit-keyframes scaleAnim { 0% { -webkit-transform: scale(0); opacity: 1; } 50% { -webkit-transform: scale(0.7); opacity: .5; } 100% { -webkit-transform: scale(1); opacity: 0; } } @keyframes rotateAnim { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes rotateAnim { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes rotateAnim2 { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @-webkit-keyframes rotateAnim2 { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); } } /*-------------------------*/ .g-headD { height: 0.9rem; } .g-head { position: fixed; z-index: 50; left: 0; top: 0; width: 100%; box-shadow: 0 0.1rem 0.2rem 0 rgba(0, 13, 25, 0.07); -webkit-box-shadow: 0 0.1rem 0.2rem 0 rgba(0, 13, 25, 0.07); -moz-box-shadow: 0 0.1rem 0.2rem 0 rgba(0, 13, 25, 0.07); background: #fff; } .g-head .wal { min-height: 0.9rem; position: relative; max-width: 100%; margin: 0 .4rem; } .g-head .language { position: absolute; z-index: 1; left: auto; right: 0; top: 0; bottom: auto; line-height: 0.9rem; font-size: .2rem; color: #8A9199; } .g-head .language a { color: #8A9199; padding: 0 .08rem; } .g-head .language a:hover, .g-head .language a.on { color: #01478B; } .g-head .language a.on { font-size: .3rem; } .g-head a.logo { display: block; background: url("../image/logo.png") center no-repeat; background-size: 100%; width: 3rem; height: 100%; position: absolute; z-index: 1; left: 0; right: auto; top: 0; bottom: auto; } .g-nav { position: absolute; z-index: 1; left: 4.6rem; right: 2.3rem; top: 0; bottom: auto; } .g-nav li { position: relative; } .g-nav a.name { display: block; height: 0.9rem; line-height: 0.9rem; font-size: .24rem; color: #5C6166; position: relative; } .g-nav a.name:before { content: ""; display: block; position: absolute; left: 50%; bottom: .12rem; right: 50%; height: .03rem; background: #01478B; opacity: 0; } .g-nav a.name.on { color: #01478B; } .g-nav a.name.on:before { left: 0; right: 0; opacity: 1; } @media screen and (max-width: 1800px) { .g-nav { right: 1.8rem; left: 3.6rem; } } @media screen and (min-width: 800px) { .g-nav .list { position: absolute; z-index: 1; left: 50%; right: auto; top: -100vh; bottom: auto; width: 2rem; margin-left: -1rem; background: rgba(26, 26, 26, 0.5); padding: .1rem 0; opacity: 0; visibility: hidden; } .g-nav .list a { display: block; text-align: center; color: #fff; font-size: .16rem; line-height: .5rem; } .g-nav .list a sup { font-size: .12rem; } .g-nav .list a:hover { background: #01478B; } .g-nav .list dd { position: relative; } .g-nav .list dd dl { position: absolute; left: 100%; top: 0; width: 2rem; background: rgba(26, 26, 26, 0.5); display: none; } .g-nav .list dd:hover a { /*background: #01478B; */ } .g-nav .list dd:hover dl { display: block; } .g-nav .list dd:hover dl a:hover { background: #0b5ca1; } .g-nav li:hover a.name { color: #01478B; } .g-nav li:hover a.name:before { left: 0; right: 0; opacity: 1; } .g-nav li:hover .list { opacity: 1; visibility: visible; top: 100%; transition: opacity 0.5s ease; -webkit-transition: opacity 0.5s ease; -moz-transition: opacity 0.5s ease; -o-transition: opacity 0.5s ease; } } .g-foot { background: #45494d url("../image/foot.jpg") center bottom no-repeat; background-size: auto 4.82rem; position: relative; font-size: .16rem; color: #fff; } .g-foot:before { content: ""; display: block; position: absolute; left: 0; right: 0; bottom: .6rem; height: 1px; background: rgba(255, 255, 255, 0.1); } .g-foot .wal { min-height: 4.82rem; position: relative; } .g-foot .list { padding: .6rem 0 0 0; } .g-foot .list li { position: relative; min-height: 1.05rem; padding: 0 0 .3rem .64rem; font-size: .18rem; } .g-foot .list li .ico { width: .46rem; position: absolute; z-index: 1; left: 0; right: auto; top: 0; bottom: auto; } .g-foot .list li p { font-size: .27rem; letter-spacing: .02rem; font-family: 'DINPro-Medium'; line-height: 1em; padding-top: .12rem; } .g-foot .content { line-height: .3rem; } .g-foot .nav { position: absolute; z-index: 1; left: 4.34rem; right: 2.47rem; top: 0.6rem; bottom: auto; } .g-foot .nav .name { padding-bottom: .12rem; } .g-foot .nav .name a { display: block; font-size: .18rem; color: #fff; } .g-foot .nav dd a { display: block; font-size: .16rem; line-height: .4rem; color: rgba(255, 255, 255, 0.5); } .g-foot .nav dd a sup { font-size: .12rem; } .g-foot .nav dd a:hover { color: #50A9FB; } .g-foot .ewm { width: 1.3rem; position: absolute; z-index: 1; left: auto; right: 0; top: 0.6rem; bottom: auto; } .g-foot .ewm .name { text-align: center; padding-top: .12rem; } .g-foot .msg { position: absolute; z-index: 1; left: 0; right: 0; top: auto; bottom: 0; line-height: .6rem; opacity: .5; } .side-bar { width: .6rem; position: fixed; z-index: 30; right: 0; top: 50%; margin-top: -.9rem; } .side-bar li { position: relative; } .side-bar li a.name { height: .6rem; background: rgba(1, 71, 139, 0.7); display: block; } .side-bar li .layer { position: absolute; z-index: 1; left: auto; right: 0; top: 0; bottom: auto; opacity: 0; visibility: hidden; } .side-bar li .tel { height: .6rem; line-height: .6rem; background: #01478B; color: #fff; text-align: center; font-family: 'DINPro-Medium'; font-size: .2rem; width: 1.6rem; letter-spacing: .02rem; } .side-bar li:hover a.name { background: #01478B; } .side-bar li:hover .layer { opacity: 1; visibility: visible; right: 100%; } /*index*/ .indexFlash { width: 100%; overflow: hidden; position: relative; } .indexFlash li { background: center no-repeat; background-size: cover; } .indexFlash li .wal { height: 8.6rem; } .indexFlash li .col { width: 7.9rem; color: #fff; } .indexFlash li .col h3 { font-size: .54rem; line-height: .84rem; padding-bottom: .4rem; letter-spacing: .02rem; } .indexFlash li .col .en { font-size: .18rem; line-height: .44rem; text-transform: uppercase; font-family: 'DINPro-Medium'; letter-spacing: .03rem; } .indexFlash li .video { width: 6rem; background: rgba(255, 255, 255, 0.1); padding: .3rem; position: relative; } .indexFlash li .video:after { content: ""; display: block; position: absolute; z-index: 5; left: 0; top: 0; right: 0; bottom: 0; background: url("../image/video-btn80.png") center no-repeat; background-size: .8rem; cursor: pointer; } .indexFlash .ico { position: absolute; z-index: 1; left: 50%; right: auto; top: auto; bottom: 0.3rem; margin-left: -7.8rem; width: .26rem; height: .66rem; animation: upDown2 1s infinite linear alternate; -webkit-animation: upDown2 1s infinite linear alternate; } .indexFlash .ico:before { content: ""; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url("../image/img26.png") center no-repeat; background-size: 100%; } .indexFlash .ico.hide { opacity: 0; visibility: hidden; } .indexFlash .dots { position: absolute; z-index: 1; left: auto; right: 50%; top: auto; bottom: 0.4rem; margin-right: -7.8rem; } .indexFlash .dots span { width: .3rem; height: 3px; margin-left: .1rem; background: rgba(255, 255, 255, 0.5); position: relative; } .indexFlash .dots span:before { content: ""; display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; } .indexFlash .dots span.on { width: .7rem; } .indexFlash .dots span.on:before { width: 100%; transition-duration: 4.5s; -webkit-transition-duration: 4.5s; transition-timing-function: linear; -webkit-transition-timing-function: linear; transition-delay: .3s; -webkit-transition-delay: .3s; } .index-title h3 { text-transform: uppercase; font-size: .72rem; line-height: .8rem; color: #8A9199; font-family: 'DINPro-Bold'; } .index-title h3 em { color: #D30F1A; } .index-title h3 span { color: #01478B; } .index-title h2 { font-size: .36rem; line-height: 1em; padding-top: .2rem; } .index-product { background: url("../image/index-product.jpg") center no-repeat; background-size: cover; position: relative; } .index-product .wal { min-height: 9.8rem; padding-top: 1.3rem; } .index-product .list { height: 7.47rem; position: absolute; z-index: 1; left: 0; right: 0; top: auto; bottom: 0; overflow: hidden; } .index-product .list:before, .index-product .list:after { content: ""; display: block; position: absolute; left: 50%; top: 0; background: url("../image/img1760_1.png") center no-repeat; background-size: 100% 100%; width: 17.6rem; height: 17.6rem; margin-left: -8.8rem; } .index-product .list:before { animation: rotateAnim2 80s infinite linear; -webkit-animation: rotateAnim2 80s infinite linear; } .index-product .list:after { background-image: url("../image/img1760_2.png"); animation: rotateAnim 40s infinite linear; -webkit-animation: rotateAnim 40s infinite linear; } .index-product .list li { position: absolute; z-index: 5; text-align: center; cursor: pointer; } .index-product .list li .name { white-space: nowrap; font-size: .18rem; color: #5C6166; padding-bottom: .18rem; line-height: 1em; letter-spacing: 1px; } .index-product .list li .name sup { font-size: .13rem; } .index-product .list li .img { width: 1.4rem; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; box-shadow: 0 0.16rem 0.4rem 0 rgba(1, 71, 139, 0.1); -webkit-box-shadow: 0 0.16rem 0.4rem 0 rgba(1, 71, 139, 0.1); -moz-box-shadow: 0 0.16rem 0.4rem 0 rgba(1, 71, 139, 0.1); padding: .25rem; background: #fff; position: relative; } .index-product .list li .img:before { content: ""; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background: linear-gradient(0deg, #01478B 0%, #148FCC 100%); opacity: 0; } .index-product .list li .img img { position: relative; } .index-product .list li.li_01 { top: .55rem; left: 50%; transform: translateX(-50%); } .index-product .list li.li_02 { top: 1.68rem; left: 50%; margin-left: -3.8rem; transform: translateX(-50%); } .index-product .list li.li_03 { top: 1.68rem; right: 50%; margin-right: -3.8rem; transform: translateX(50%); } .index-product .list li.li_04 { top: 4.56rem; left: 50%; margin-left: -6.38rem; transform: translateX(-50%); } .index-product .list li.li_05 { top: 4.56rem; right: 50%; margin-right: -6.38rem; transform: translateX(50%); } .index-product .list li.on .name { color: #01478B; } .index-product .list li.on .img { box-shadow: 0 0.2rem 0.4rem 0 rgba(0, 89, 179, 0.4); -webkit-box-shadow: 0 0.2rem 0.4rem 0 rgba(0, 89, 179, 0.4); -moz-box-shadow: 0 0.2rem 0.4rem 0 rgba(0, 89, 179, 0.4); } .index-product .list li.on .img:before { opacity: 1; } .index-product .big-img li { position: absolute; z-index: 1; left: 50%; right: auto; top: 100%; bottom: auto; width: 4.33rem; margin-left: -2.165rem; margin-top: -4.33rem; } .index-product .big-img li a { display: block; text-align: center; } .index-product .big-img li a .name h3 { font-size: .4rem; line-height: 1em; } .index-product .big-img li a .name h3 sup { font-size: .2rem; } .index-product .big-img li a .name .en { font-size: .18rem; color: #5C6166; padding: .15rem 0 .3rem 0; } .index-application { background: url("../image/index-application.png") center no-repeat; background-size: cover; min-height: 9.2rem; padding: 0 .56rem; } .index-application .hd { padding: 2.1rem 0 .65rem 0; align-items: flex-end; -webkit-align-items: flex-end; } .index-application .hd .index-title { color: #fff; } .index-application .hd .index-title h3 { color: #fff; } .index-application .hd .index-title h3 span { color: #fff; } .index-application .hd a.p-more, .index-application .hd a.p-back, .index-application .hd .news-nav a, .news-nav .index-application .hd a { color: #fff; border-color: rgba(255, 255, 255, 0.5); } .index-application .hd a.p-more div, .index-application .hd a.p-back div, .index-application .hd .news-nav a div, .news-nav .index-application .hd a div { border-color: #fff; } .index-application .hd a.p-more:before, .index-application .hd a.p-back:before, .index-application .hd .news-nav a:before, .news-nav .index-application .hd a:before { background: #fff; } .index-application .hd a.p-more:after, .index-application .hd a.p-back:after, .index-application .hd .news-nav a:after, .news-nav .index-application .hd a:after { background-image: url("../image/arrow24on.png"); } .index-application .hd a.p-more:hover, .index-application .hd a.p-back:hover, .index-application .hd .news-nav a:hover, .news-nav .index-application .hd a:hover { color: #01478B; } .index-application .hd a.p-more:hover:after, .index-application .hd a.p-back:hover:after, .index-application .hd .news-nav a:hover:after, .news-nav .index-application .hd a:hover:after { background-image: url("../image/arrow24.png"); } .index-application .list { position: relative; margin-left: -.46rem; margin-right: -.46rem; } .index-application .list .arrow a { display: block; width: .22rem; height: .4rem; position: absolute; z-index: 1; left: auto; right: auto; top: 50%; bottom: auto; margin-top: -.5rem; background: center no-repeat; background-size: 100%; } .index-application .list .arrow a.prev { background-image: url("../image/prev22.png"); left: 0; } .index-application .list .arrow a.prev:hover { background-image: url("../image/prev22on.png"); } .index-application .list .arrow a.next { background-image: url("../image/next22.png"); right: 0; } .index-application .list .arrow a.next:hover { background-image: url("../image/next22on.png"); } .index-application .list-wrapper { width: 100%; overflow: hidden; position: relative; } .index-application .list-wrapper li { padding: 2px .46rem; } .index-application .list-wrapper a { display: block; text-align: center; color: #fff; } .index-application .list-wrapper a .img { padding: .42rem; background: url("../image/img475.png") center no-repeat; background-size: 100% 100%; position: relative; } .index-application .list-wrapper a .img:after { content: ""; display: block; position: absolute; left: 0; top: 100%; right: 0; background: url("../image/img394.png") center no-repeat; height: 1.12rem; background-size: auto 100%; opacity: 0; transition-duration: 0s; -webkit-transition-duration: 0s; } .index-application .list-wrapper a .img img { width: 100%; } .index-application .list-wrapper a .img .p-lines { border-color: #7feaff; } .index-application .list-wrapper a .img .p-lines div { border-color: #7feaff; width: .26rem; height: .26rem; } .index-application .list-wrapper a .name { line-height: .66rem; font-size: .2rem; } .index-application .list-wrapper a:hover { color: #66E6FF; } .index-application .list-wrapper a:hover .img:after { opacity: 1; animation: upDown 1s infinite linear alternate; -webkit-animation: upDown 1s infinite linear alternate; } .index-application .list-wrapper a:hover .name { font-weight: 600; } .index-about { position: relative; width: 100%; overflow: hidden; } .index-about .bg { position: absolute; left: 0; bottom: 0; right: 0; top: 0; overflow: hidden; } .index-about .bg div { position: absolute; left: 0; bottom: -3rem; right: 0; top: 3rem; } .index-about .bg canvas { width: 100%; } .index-about .wal { position: relative; min-height: 9rem; padding: 2.55rem 0 0 0; } .index-about .p-content { min-height: 2.85rem; width: 5.9rem; padding: .5rem 0; } .index-about a.p-more, .index-about a.p-back, .index-about .news-nav a, .news-nav .index-about a { background: #fff; } .index-about .big-img { width: 7.43rem; position: absolute; z-index: 1; left: auto; right: 0; top: auto; bottom: 0; } .index-news { background: #f2f6fa; } .index-news .wal { min-height: 9.9rem; position: relative; } .index-news .hd { padding: 1.1rem 0 .5rem 0; align-items: flex-end; -webkit-align-items: flex-end; } .index-news .tab-btn li { cursor: pointer; margin-left: .2rem; } .index-news .tab-btn li:after { order: -1; margin-left: 0; margin-right: .1rem; width: .24rem; } .index-news .tab-btn li:nth-child(1):after { background-image: url("../image/img24_1.png"); } .index-news .tab-btn li:nth-child(1):hover:after, .index-news .tab-btn li:nth-child(1).on:after { background-image: url("../image/img24_1on.png"); } .index-news .tab-btn li:nth-child(2):after { background-image: url("../image/img24_2.png"); } .index-news .tab-btn li:nth-child(2):hover:after, .index-news .tab-btn li:nth-child(2).on:after { background-image: url("../image/img24_2on.png"); } .index-news .row .big-img { width: 7.4rem; position: relative; background: #fff; } .index-news .row .big-img .name { height: 1.4rem; padding: 0 .39rem; font-size: .22rem; line-height: .4rem; } .index-news .row .big-img a.more { display: block; width: .6rem; height: .6rem; border: #01478B solid 1px; background: url("../image/arrow14.png") center no-repeat; background-size: .14rem; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; z-index: 1; left: auto; right: 0.4rem; top: auto; bottom: 0.4rem; } .index-news .row .big-img a.more:hover { background-color: #01478B; background-image: url("../image/arrow14on.png"); } .index-news .row .list { width: 7.4rem; border-top: rgba(10, 22, 51, 0.15) solid 1px; } .index-news .row .list a { border-bottom: rgba(10, 22, 51, 0.15) solid 1px; height: 1.94rem; } .index-news .row .list a .col { flex-shrink: 1; } .index-news .row .list a .col .name { font-size: .22rem; height: 1.2em; line-height: 1.2em; margin-bottom: .15rem; } .index-news .row .list a .col p { font-size: .16rem; line-height: .3rem; color: #5C6166; height: .6rem; overflow: hidden; } .index-news .row .list a .img { width: 1.53rem; flex-shrink: 0; margin-left: .5rem; } .index-news .row .list a:hover .col p { color: rgba(1, 71, 139, 0.7); } /*page*/ .p-banner { background: center no-repeat; background-size: cover; } .p-banner .wal { height: 6rem; position: relative; color: #fff; } .p-banner .title h3 { font-size: .6rem; letter-spacing: .02rem; line-height: 1em; } .p-banner .title .en { font-size: .24rem; padding-top: .35rem; text-transform: uppercase; letter-spacing: .06rem; } .p-banner .video { position: absolute; z-index: 1; left: auto; right: 0; top: 50%; bottom: auto; transform: translateY(-50%); width: 7.3rem; background: rgba(255, 255, 255, 0.1); padding: .2rem; } .p-banner .video:after { content: ""; display: block; position: absolute; z-index: 5; left: 0; top: 0; right: 0; bottom: 0; background: url("../image/video-btn80.png") center no-repeat; background-size: .8rem; cursor: pointer; } .p-banner2 .wal { height: 5rem; } .p-banner2 .title { text-align: center; } .product { padding: 1.2rem 0; } .product .list { position: relative; } .product .list .p-lines { border-color: rgba(0, 0, 0, 0); } .product .list .p-lines div { border-color: #01478B; } .product .list ul { border-right: #80A3C5 solid 1px; border-bottom: #80A3C5 solid 1px; } .product .list li { width: 33.333%; border-left: #80A3C5 solid 1px; border-top: #80A3C5 solid 1px; padding: .15rem; } .product .list a { height: 6.3rem; text-align: center; position: relative; z-index: 10; } .product .list a:before { content: ""; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url("../image/img488.jpg") center no-repeat; background-size: cover; opacity: 0; } .product .list a .img, .product .list a .name { position: relative; } .product .list a .img { width: 3.6rem; } .product .list a .name { padding: .3rem 0 .38rem 0; } .product .list a .name .en { font-size: .24rem; line-height: 1em; } .product .list a .name .en sup { font-size: .16rem; } .product .list a .name h5 { font-size: .16rem; font-weight: 400; color: #8A9199; padding-top: .15rem; } .product .list a:hover { color: #fff; } .product .list a:hover:before { opacity: 1; } .product .list a:hover .name h5 { color: #fff; } .product .list a:hover .p-more, .product .list a:hover a.p-back, .product .list a:hover .news-nav a, .news-nav .product .list a:hover a { color: #fff; border-color: rgba(255, 255, 255, 0.5); } .product .list a:hover .p-more:before, .product .list a:hover a.p-back:before, .product .list a:hover .news-nav a:before, .news-nav .product .list a:hover a:before { opacity: .5; } .product .list a:hover .p-more:after, .product .list a:hover a.p-back:after, .product .list a:hover .news-nav a:after, .news-nav .product .list a:hover a:after { background-image: url("../image/arrow24on.png"); } .product .list a:hover .p-more div, .product .list a:hover a.p-back div, .product .list a:hover .news-nav a div, .news-nav .product .list a:hover a div { border-color: #fff; } .product .list .msg { height: 6.3rem; } .product .list .msg img { width: 3.35rem; } .product-show-1 { padding-bottom: 1.2rem; } .product-show-1 .hd { padding: 1.2rem 0 .36rem 0; border-bottom: rgba(41, 66, 102, 0.15) solid 1px; width: 100%; margin-bottom: .6rem; } .product-show-1 .hd h3 { font-size: .42rem; color: #1F2933; } .product-show-1 .hd h3 sup { font-size: .3rem; } .product-show-1 .imgs { position: relative; width: 7.3rem; background: #F2F6FA; overflow: hidden; } .product-show-1 .imgs li { text-align: center; padding: .53rem; } .product-show-1 .imgs .arrow a { display: block; width: .16rem; height: .4rem; position: absolute; z-index: 1; left: auto; right: auto; top: 50%; bottom: auto; margin-top: -.2rem; background: center no-repeat; background-size: 100%; } .product-show-1 .imgs .arrow a.prev { background-image: url("../image/prev16.png"); left: .3rem; } .product-show-1 .imgs .arrow a.prev:hover { background-image: url("../image/prev16on.png"); } .product-show-1 .imgs .arrow a.next { background-image: url("../image/next16.png"); right: .3rem; } .product-show-1 .imgs .arrow a.next:hover { background-image: url("../image/next16on.png"); } .product-show-1 .col { width: 7.22rem; } .product-show-1 .col .p-content { padding: .45rem 0; } .product-show-1 .col .btn { width: 1.7rem; font-size: .16rem; } .product-show-1 .col .btn:after { order: -1; margin-left: 0; margin-right: .1rem; background-image: url("../image/img18.png"); width: .18rem; } .product-show-1 .col .btn:hover:after { background-image: url("../image/img18on.png"); } .product-show-2 { background: url("../image/img1920_1.png") center no-repeat; background-size: cover; min-height: 5.6rem; padding: 1rem 0 .8rem 0; } .product-show-2 .p-title { padding-bottom: .4rem; } .product-show-2 li { position: relative; margin-bottom: .2rem; width: 7.5rem; height: .8rem; background: rgba(255, 255, 255, 0.6); font-size: .16rem; color: #5C6166; line-height: 2em; padding: .1rem .24rem; } .product-show-3 { padding: 0 .7rem; margin-bottom: -.5rem; } .product-show-3 .p-title { padding: 1rem 0 .4rem 0; } .product-show-3 .list { position: relative; margin-left: -.3rem; margin-right: -.3rem; } .product-show-3 .list .arrow a { display: block; width: .18rem; height: .4rem; position: absolute; z-index: 1; left: auto; right: auto; top: 50%; bottom: auto; margin-top: -.6rem; background: center no-repeat; background-size: 100%; } .product-show-3 .list .arrow a.prev { background-image: url("../image/prev18.png"); left: -.3rem; } .product-show-3 .list .arrow a.next { background-image: url("../image/next18.png"); right: -.3rem; } .product-show-3 .list-wrapper { width: 100%; overflow: hidden; position: relative; } .product-show-3 .list-wrapper dd { width: 25%; padding: 0 .3rem .5rem .3rem; } .product-show-3 .list-wrapper a { display: block; } .product-show-3 .list-wrapper a .name { font-size: .2rem; padding: .27rem 0 .12rem 0; } .product-show-3 .list-wrapper a p { font-size: .16rem; line-height: .3rem; height: .9rem; overflow: hidden; color: #8A9199; } .product-show-4 { padding: 1.2rem 0; } .product-show-4 .p-title { padding-bottom: .4rem; } .product-show-4 .col-l, .product-show-4 .col-r { width: 7.5rem; } .product-show-4 .list { position: relative; margin-bottom: .3rem; } .product-show-4 .list .p-lines2 div { border-color: #4d7eae; width: .16rem; height: .16rem; } .product-show-4 .list .title { background: #4d7eae; color: #fff; line-height: .7rem; padding-left: .3rem; font-size: .24rem; letter-spacing: .02rem; } .product-show-4 .list li { height: .7rem; background: #F2F6FA; font-size: .16rem; } .product-show-4 .list li .name { flex-shrink: 0; width: 1.5rem; padding-left: .3rem; } .product-show-4 .list li p { color: #5C6166; } .product-show-4 .list li:nth-child(even) { background: #e1ebf5; } .product-show-4 .col-l.list li { height: .866rem; } .contact-form .form li, .down-form-layer .form li { position: relative; width: 3.8rem; margin-bottom: .4rem; } .contact-form .form li .ico, .down-form-layer .form li .ico { width: .26rem; position: absolute; z-index: 3; left: 0.33rem; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); } .contact-form .form li .p-lines2, .down-form-layer .form li .p-lines2 { opacity: .5; } .contact-form .form li .input, .down-form-layer .form li .input { position: relative; z-index: 2; } .contact-form .form li .input input::-webkit-input-placeholder, .down-form-layer .form li .input input::-webkit-input-placeholder { color: #8A9199; } .contact-form .form li .input input::-moz-placeholder, .down-form-layer .form li .input input::-moz-placeholder { color: #8A9199; } .contact-form .form li .input input:-moz-placeholder, .down-form-layer .form li .input input:-moz-placeholder { color: #8A9199; } .contact-form .form li .input input:-ms-input-placeholder, .down-form-layer .form li .input input:-ms-input-placeholder { color: #8A9199; } .contact-form .form li .input textarea::-webkit-input-placeholder, .down-form-layer .form li .input textarea::-webkit-input-placeholder { color: #8A9199; } .contact-form .form li .input textarea::-moz-placeholder, .down-form-layer .form li .input textarea::-moz-placeholder { color: #8A9199; } .contact-form .form li .input textarea:-moz-placeholder, .down-form-layer .form li .input textarea:-moz-placeholder { color: #8A9199; } .contact-form .form li .input textarea:-ms-input-placeholder, .down-form-layer .form li .input textarea:-ms-input-placeholder { color: #8A9199; } .contact-form .form li .input input, .contact-form .form li .input textarea, .down-form-layer .form li .input input, .down-form-layer .form li .input textarea { width: 100%; height: .72rem; line-height: .72rem; font-size: .18rem; color: #01478B; padding-left: .7rem; } .contact-form .form li .input textarea, .down-form-layer .form li .input textarea { height: 2.4rem; line-height: .32rem; padding: .2rem .2rem .2rem .7rem; } .contact-form .form li.li_01 .ico, .down-form-layer .form li.li_01 .ico { transform: translateY(0); top: .24rem; } .contact-form .form li.on .p-lines2, .down-form-layer .form li.on .p-lines2 { opacity: 1; background: #e5ecf3; } .down-form-layer .container .title, .down-ok-layer .container .title { text-align: center; padding: .8rem 0 .5rem 0; } .down-form-layer .container .title h3, .down-ok-layer .container .title h3 { font-size: .36rem; line-height: 1em; color: #292E33; padding-bottom: .18rem; } .down-form-layer .container .title p, .down-ok-layer .container .title p { font-size: .18rem; color: #8A9199; line-height: 1em; } .down-form-layer .container { padding: 0 1rem; } .down-form-layer .container .msg { text-align: center; font-size: .16rem; padding: .3rem 0 .8rem 0; color: #8A9199; } .down-ok-layer .container { width: 5rem; height: 6rem; text-align: center; } .down-ok-layer .container .ico { width: 1.69rem; } .down-ok-layer .container .title { padding: .6rem 0 .4rem 0; } .down-ok-layer .container .p-submit { width: 1.6rem; } .application { padding: 1.2rem 0 .4rem 0; } .application ul { margin-left: -.95rem; } .application li { width: 33.333%; padding: 0 0 .8rem .95rem; } .application a { display: block; font-size: .18rem; color: #5C6166; text-align: center; border-bottom: rgba(41, 46, 51, 0.15) solid 1px; } .application a .img { position: relative; padding: .4rem; background: url("../image/img456.jpg") center no-repeat; background-size: cover; width: 100%; overflow: hidden; } .application a .img:after { content: ""; display: block; position: absolute; left: 0; top: 100%; right: 0; background: url("../image/img394.png") center no-repeat; height: 1.12rem; background-size: auto 100%; opacity: 0; } .application a .img .p-lines2 { border-color: #C3D4E6; } .application a .img .p-lines2 div { width: .22rem; height: .22rem; border-width: 3px; opacity: 0; } .application a .name { padding: .2rem 0 .25rem 0; line-height: 1em; } .application a:hover { border-color: #01478B; } .application a:hover .img:after { opacity: 1; animation: upDown 1s infinite linear alternate; -webkit-animation: upDown 1s infinite linear alternate; } .application a:hover .img .p-lines2 div { opacity: 1; } .application-show { padding-bottom: 1.2rem; } .application-show .hd { padding: 1.2rem 0 .4rem 0; } .application-show .hd h3 { font-size: .42rem; color: #1F2933; } .application-show .hd h3 sup { font-size: .3rem; } .application-show .tab-btn li { width: 50%; position: relative; text-align: center; background: #F0F5F9; line-height: .8rem; font-size: .22rem; color: #5C6166; cursor: pointer; } .application-show .tab-btn li:before { content: ""; display: block; position: absolute; left: 0; bottom: 0; right: 0; height: .02rem; background: #01478B; opacity: 0; } .application-show .tab-btn li:hover, .application-show .tab-btn li.on { color: #01478B; } .application-show .tab-btn li.on:before { opacity: 1; } .application-show .tab-box .p-title { padding: .6rem 0 .3rem 0; } .application-show .tab-box .img { padding-top: .6rem; max-width: 7.3rem; } .application-show .tab-box .img .name { text-align: center; line-height: .6rem; border-bottom: rgba(41, 66, 102, 0.15) solid 1px; font-size: .16rem; color: #5C6166; } .about-title { text-align: center; } .about-title h3 { color: #292E33; font-size: .6rem; line-height: 1em; letter-spacing: .02rem; } .about-title .en { font-size: .24rem; color: #8A9199; text-transform: uppercase; font-family: 'DINPro-Medium'; letter-spacing: .06rem; padding-left: .06rem; padding-top: .25rem; } .about-1 { background: url("../image/about-1.png") center no-repeat; background-size: cover; color: #fff; width: 100%; overflow: hidden; position: relative; } .about-1 .wal { min-height: 10.58rem; position: relative; } .about-1 .about-title { padding: 1.4rem 0; } .about-1 .about-title h3, .about-1 .about-title .en { color: #fff; } .about-1 .title { position: relative; margin-bottom: .4rem; padding-bottom: .07rem; } .about-1 .title .en { font-family: 'Monoton-Regular'; text-transform: uppercase; font-size: .9rem; height: .8rem; line-height: .8rem; opacity: .2; } .about-1 .title h3 { position: absolute; z-index: 1; left: 0; right: auto; top: auto; bottom: 0; font-size: .36rem; line-height: 1em; } .about-1 .p-content { color: #fff; width: 6.9rem; letter-spacing: .01rem; } .about-1 .p-content p { padding-bottom: .16rem; } .about-1 .img { width: 9.3rem; position: absolute; z-index: 1; left: auto; right: 50%; top: auto; bottom: 0; margin-right: -9.6rem; } .about-2 { position: relative; } .about-2 .about-title { position: absolute; z-index: 1; left: 0; right: 0; top: 1.2rem; bottom: auto; } .about-2 li { width: 50%; background: center bottom no-repeat; background-size: 100%; height: 8.74rem; color: #292E33; text-align: center; padding-top: 1.65rem; } .about-2 li .ico { width: 1.22rem; margin-bottom: .5rem; } .about-2 li p { font-size: .24rem; letter-spacing: .12rem; padding-left: .12rem; line-height: .42rem; } .about-2 li h3 { font-size: .36rem; font-weight: 400; padding-top: .1rem; } .about-3 { background: url("../image/about-3.png") center no-repeat; background-size: cover; color: #fff; padding: 1.2rem .7rem; min-height: 9rem; } .about-3 .about-title { padding-bottom: .6rem; } .about-3 .about-title h3, .about-3 .about-title .en { color: #fff; } .about-3 .list { position: relative; margin-left: -.3rem; margin-right: -.3rem; } .about-3 .list .arrow a { display: block; width: .22rem; height: .4rem; position: absolute; z-index: 1; left: auto; right: auto; top: 50%; bottom: auto; margin-top: -.2rem; background: center no-repeat; background-size: 100%; } .about-3 .list .arrow a.prev { background-image: url("../image/prev22.png"); left: -.3rem; } .about-3 .list .arrow a.prev:hover { background-image: url("../image/prev22on.png"); } .about-3 .list .arrow a.next { background-image: url("../image/next22.png"); right: -.3rem; } .about-3 .list .arrow a.next:hover { background-image: url("../image/next22on.png"); } .about-3 .list-wrapper { width: 100%; overflow: hidden; position: relative; } .about-3 .list-wrapper li { padding: 0 .3rem; } .about-3 .list-wrapper li .img { position: relative; padding: .12rem; background: rgba(255, 255, 255, 0.2); } .about-3 .list-wrapper li .p-lines2 { border-color: rgba(255, 255, 255, 0.5); } .about-3 .list-wrapper li .p-lines2 div { width: .16rem; height: .16rem; border-color: #fff; } .about-4 { padding: 1.2rem 0; } .about-4 .title { padding: .6rem 0 .3rem 0; } .about-4 .title h3 { font-size: .36rem; color: #292E33; line-height: 1em; flex-shrink: 0; margin-right: .25rem; } .about-4 .title:after { content: ""; display: block; position: absolute; position: static; width: 100%; height: 1px; background: rgba(41, 46, 51, 0.15); } .about-4 .row { padding: .2rem 0 .4rem 0; } .about-4 .row .map { width: 7.65rem; position: relative; height: 8.63rem; } .about-4 .row .map:before { content: ""; display: block; position: absolute; top: 0; right: 0; background: url("../image/map1166.png") center no-repeat; background-size: 100%; width: 11.66rem; bottom: 0; } .about-4 .row .map li { position: absolute; z-index: 1; left: auto; right: auto; top: auto; bottom: auto; width: .3rem; height: .3rem; cursor: pointer; } .about-4 .row .map li .name { font-size: .18rem; color: #5c6166; white-space: nowrap; position: absolute; z-index: 1; left: 50%; right: auto; top: -0.26rem; bottom: auto; transform: translateX(-50%); line-height: .26rem; } .about-4 .row .map li:before, .about-4 .row .map li:after { content: ""; display: block; position: absolute; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; left: 50%; top: 50%; width: .4rem; height: .4rem; margin-left: -.2rem; margin-top: -.2rem; background: #01478B; animation: scaleAnim 1.6s infinite linear; -webkit-animation: scaleAnim 1.6s infinite linear; } .about-4 .row .map li:before { animation-delay: -.8s; -webkit-animation-delay: -.8s; } .about-4 .row .map li:nth-child(1) { top: 5.12rem; right: 2.85rem; } .about-4 .row .map li:nth-child(2) { top: 5.41rem; right: 4.24rem; } .about-4 .row .map li:nth-child(3) { top: 7.09rem; right: 4.12rem; } .about-4 .row .map li:nth-child(4) { top: 3.08rem; right: 3.94rem; } .about-4 .row .col { width: 7.3rem; } .about-4 .row h3 { font-size: .26rem; color: #01478B; padding-bottom: .15rem; } .about-4 .row .tab-btn { border-bottom: rgba(41, 46, 51, 0.15) solid 1px; } .about-4 .row .tab-btn li { position: relative; height: 2.08rem; cursor: pointer; } .about-4 .row .tab-btn li:before { content: ""; display: block; position: absolute; left: 0; bottom: -1px; right: 0; height: 2px; background: #01478B; opacity: 0; } .about-4 .row .tab-btn li .ico { width: .66rem; height: .66rem; position: relative; } .about-4 .row .tab-btn li .ico img:nth-child(2) { position: absolute; z-index: 1; left: 0; right: auto; top: 0; bottom: auto; opacity: 0; } .about-4 .row .tab-btn li .name { text-align: center; font-size: .16rem; color: #5C6166; padding-top: .12rem; } .about-4 .row .tab-btn li.on:before { opacity: 1; } .about-4 .row .tab-btn li.on .ico img:nth-child(1) { opacity: 0; } .about-4 .row .tab-btn li.on .ico img:nth-child(2) { opacity: 1; } .about-4 .row .tab-btn li.on .name { color: #01478B; } .about-4 .row .tab-box { position: relative; } .about-4 .row .tab-box:after { content: ""; display: block; position: absolute; position: relative; clear: bottom; } .about-4 .row .tab-box h5 { font-size: .2rem; color: #292E33; padding: .45rem 0 .15rem 0; } .about-4 .row .tab-box .p-content { padding-bottom: .35rem; } .about-4 .row .tab-box .imgs { float: left; width: 5rem; position: relative; } .about-4 .row .tab-box .imgs .list-wrapper { width: 100%; overflow: hidden; position: relative; } .about-4 .row .tab-box .imgs .arrow a { display: block; width: .14rem; height: .4rem; position: absolute; z-index: 1; left: auto; right: auto; top: 50%; bottom: auto; margin-top: -.2rem; background: center no-repeat; background-size: 100%; } .about-4 .row .tab-box .imgs .arrow a.prev { background-image: url("../image/prev22.png"); left: .1rem; } .about-4 .row .tab-box .imgs .arrow a.prev:hover { background-image: url("../image/prev22on.png"); } .about-4 .row .tab-box .imgs .arrow a.next { background-image: url("../image/next22.png"); right: .1rem; } .about-4 .row .tab-box .imgs .arrow a.next:hover { background-image: url("../image/next22on.png"); } .about-4 .row .tab-box dl { float: right; width: 1.9rem; font-size: .16rem; color: #5C6166; line-height: .3rem; } .about-4 .row .tab-box dl dd { padding: 0 0 .2rem .14rem; position: relative; } .about-4 .row .tab-box dl dd:before { content: ""; display: block; position: absolute; left: 0; top: .12rem; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; width: .06rem; height: .06rem; background: #8a9199; } .about-4 .img-list ul { margin-left: -.99rem; } .about-4 .img-list li { width: 50%; padding: .4rem 0 0 .99rem; } .news-nav { padding: 1.2rem 0 .3rem 0; } .news-nav ul { margin-left: -.24rem; } .news-nav li { width: 50%; padding-left: .24rem; } .news-nav a { width: 100%; height: .84rem; color: #01478B; } .news-nav a:before { background: #d9e4ee; } .news-nav a:after { display: none; } .news-nav a img { width: .3rem; position: relative; z-index: 2; } .news-nav a h3 { font-weight: 400; font-size: .2rem; padding: 0 .11rem 0 .14rem; position: relative; z-index: 2; } .news-nav a span { font-size: .14rem; text-transform: uppercase; opacity: .5; } .news-nav a:hover, .news-nav a.on { color: #01478B; } .news li { padding: .5rem 0; border-bottom: rgba(31, 41, 51, 0.15) solid 1px; } .news li .time { font-family: 'DINPro-Medium'; text-align: center; font-size: .17rem; color: #8A9199; } .news li .time div { font-size: .6rem; line-height: 1em; padding-bottom: .08rem; } .news li .img { width: 3.6rem; overflow: hidden; position: relative; } .news li .col { width: 9.9rem; } .news li .col .name { font-size: .22rem; } .news li .col p { padding: .2rem 0; min-height: 1.15rem; } .news li .col .p-more, .news li .col a.p-back, .news li .col .news-nav a, .news-nav .news li .col a { width: 1.3rem; height: .48rem; font-size: .16rem; } .news li .col .p-more:after, .news li .col a.p-back:after, .news li .col .news-nav a:after, .news-nav .news li .col a:after { background-image: url("../image/arrow7.png"); width: .07rem; } .news li .col .p-more:hover:after, .news li .col a.p-back:hover:after, .news li .col .news-nav a:hover:after, .news-nav .news li .col a:hover:after { background-image: url("../image/arrow7on.png"); } .news li:hover .time, .news li:hover .name a { color: #01478B; } .news li:hover .img img { transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); } .news-show .hd { border-bottom: rgba(0, 0, 0, 0.15) solid 1px; padding: 1.2rem 0 .05rem 0; } .news-show .hd h3 { font-weight: 400; font-size: .3rem; } .news-show .hd .time { line-height: .52rem; font-size: .14rem; color: #999; padding-left: .22rem; background: url("../image/time14.png") left center no-repeat; background-size: .14rem; } .news-show .hd .p-back { flex-shrink: 0; } .news-show .p-content { padding: .6rem 0 .7rem 0; } .news-show .p-content .img { text-align: center; padding-top: .6rem; } .news-show .p-content .img .name { color: #999; padding-top: .16rem; font-size: .16rem; } .job { padding: 1.2rem 0 1rem 0; } .job .msg { font-size: .18rem; padding-bottom: .4rem; color: #5C6166; } .job li { padding-bottom: .2rem; } .job li .name { position: relative; height: .9rem; background: #f0f5fa; padding-left: .5rem; cursor: pointer; } .job li .name:before { content: ""; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url("../image/job.jpg") right center no-repeat; background-size: cover; opacity: 0; } .job li .name h3 { font-weight: 400; font-size: .24rem; width: 6.73rem; position: relative; } .job li .name dl { position: relative; } .job li .name dl dd { padding: 0 .39rem; width: 2rem; line-height: .4rem; font-size: .16rem; color: #666; background: left center no-repeat; background-size: .28rem; } .job li .name dl dd.dd_01 { background-image: url("../image/img28_1.png"); } .job li .name dl dd.dd_02 { background-image: url("../image/img28_2.png"); } .job li .name:after { content: ""; display: block; position: absolute; top: 0; right: .5rem; bottom: 0; width: .3rem; background: url("../image/arrow30.png") center no-repeat; background-size: 100%; } .job li .name .p-lines2 { border-color: rgba(1, 71, 139, 0.3); } .job li .name .p-lines2 div { border-color: #4d7eae; width: .14rem; height: .14rem; } .job li .box { display: none; background: #f0f5fa; padding: .5rem .5rem 0; border: rgba(1, 71, 139, 0.3) solid 1px; border-top: 0; } .job li .box h3 { font-size: .22rem; } .job li .box .p-content { font-size: .16rem; line-height: .36rem; padding: .1rem 0 .5rem 0; } .job li.on .name { background: #01478B; color: #fff; box-shadow: 0 0.12rem 0.3rem 0 rgba(46, 99, 153, 0.3); -webkit-box-shadow: 0 0.12rem 0.3rem 0 rgba(46, 99, 153, 0.3); -moz-box-shadow: 0 0.12rem 0.3rem 0 rgba(46, 99, 153, 0.3); } .job li.on .name:before { opacity: 1; } .job li.on .name dl dd { color: #fff; } .job li.on .name dl dd.dd_01 { background-image: url("../image/img28_1on.png"); } .job li.on .name dl dd.dd_02 { background-image: url("../image/img28_2on.png"); } .job li.on .name:after { background-image: url("../image/arrow30on.png"); } .job li.on .name .p-lines2 { border-color: rgba(255, 255, 255, 0.3); left: .05rem; top: .05rem; right: .05rem; bottom: .05rem; } .job li.on .name .p-lines2 div { border-color: #fff; } .contact { border-bottom: rgba(41, 46, 51, 0.15) solid 1px; padding: 1.2rem 0 .8rem 0; } .contact .col { width: 4.6rem; } .contact .col .title { font-size: .42rem; line-height: .64rem; font-weight: bold; border-bottom: rgba(41, 46, 51, 0.15) solid 1px; position: relative; padding-bottom: .45rem; } .contact .col .title:before { content: ""; display: block; position: absolute; left: 0; bottom: -1px; width: .34rem; height: .03rem; background: #01478B; } .contact .col .title em { color: #01478B; } .contact .col .list { padding-top: .5rem; } .contact .col .list li { position: relative; min-height: 1rem; padding: 0 0 .3rem .6rem; } .contact .col .list li .ico { width: .4rem; position: absolute; z-index: 1; left: 0; right: auto; top: 0; bottom: auto; } .contact .col .list li h3 { font-size: .22rem; line-height: 1em; } .contact .col .list li p { font-size: .18rem; color: #5C6166; padding-top: .16rem; } .contact .map { width: 9.7rem; height: 5.26rem; } .contact-form { background: url("../image/img914.jpg") left bottom no-repeat; background-size: 9.14rem; min-height: 10.34rem; } .contact-form .wal { padding: 1rem 0; } .contact-form .title h3 { text-transform: uppercase; font-size: .72rem; line-height: .8rem; color: #8A9199; font-family: 'DINPro-Bold'; } .contact-form .title h3 em { color: #D30F1A; } .contact-form .title h3 span { color: #01478B; } .contact-form .title h2 { font-size: .36rem; line-height: 1em; padding-top: .2rem; } .contact-form .form { width: 9.7rem; } .contact-form .form li { width: 100%; } .contact-form .form li .input input { height: .8rem; line-height: .8rem; } .contact-form .form .p-submit { width: 7.4rem; margin-left: auto; } .video-layer { position: fixed; z-index: 100; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); opacity: 0; visibility: hidden; } .video-layer.show { opacity: 1; visibility: visible; } .video-layer .container { background: #fff; width: 12rem; min-height: 2rem; box-shadow: 0 0.14rem 0.46rem rgba(177, 177, 177, 0.39); -webkit-box-shadow: 0 0.14rem 0.46rem rgba(177, 177, 177, 0.39); -moz-box-shadow: 0 0.14rem 0.46rem rgba(177, 177, 177, 0.39); position: relative; } .video-layer a.close { display: block; width: .8rem; height: .8rem; background: url("../image/close-white.png") center no-repeat; background-size: .3rem; position: absolute; z-index: 1; left: auto; right: 0; top: 0; bottom: auto; } .video-layer a.close:hover { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); } .video-layer video { width: 100%; display: block; } /*# sourceMappingURL=index.css.map */