@charset "UTF-8"; @font-face { font-family: "BROWN-BOLD_1"; src: url("../fonts/BROWN-BOLD_1.woff2") format("woff2"), url("../fonts/BROWN-BOLD_1.woff") format("woff"), url("../fonts/BROWN-BOLD_1.ttf") format("truetype"), url("../fonts/BROWN-BOLD_1.eot") format("embedded-opentype"), url("../fonts/BROWN-BOLD_1.svg") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "DIN-MEDIUMITALIC"; src: url("../fonts/DIN-MEDIUMITALIC.woff2") format("woff2"), url("../fonts/DIN-MEDIUMITALIC.woff") format("woff"), url("../fonts/DIN-MEDIUMITALIC.ttf") format("truetype"), url("../fonts/DIN-MEDIUMITALIC.eot") format("embedded-opentype"), url("../fonts/DIN-MEDIUMITALIC.svg") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'BEBAS'; src: url('../fonts/BEBAS.eot'); src: url('../fonts/BEBAS.eot') format('embedded-opentype'), url('../fonts/BEBAS.woff2') format('woff2'), url('../fonts/BEBAS.woff') format('woff'), url('../fonts/BEBAS.ttf') format('truetype'), url('../fonts/BEBAS.svg#BEBAS') format('svg'); } @font-face { font-family: "BEBASNEUE REGULAR"; src: url("../fonts/BEBASNEUE REGULAR.woff2") format("woff2"), url("../fonts/BEBASNEUE REGULAR.woff") format("woff"), url("../fonts/BEBASNEUE REGULAR.ttf") format("truetype"), url("../fonts/BEBASNEUE REGULAR.eot") format("embedded-opentype"), url("../fonts/BEBASNEUE REGULAR.svg") format("svg"); font-weight: normal; font-style: normal; } body { -webkit-font-smoothing: antialiased; overflow: hidden; } @media (min-width: 768px) { html { font-size: 28px !important; } } @media (min-width: 1025px) { ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #fff; } ::-webkit-scrollbar-thumb { background: rgb(0, 175, 98); /*border-radius: 4px;*/ } ::-webkit-scrollbar-thumb:window-inactive { background: rgb(0, 175, 98); } ::-webkit-scrollbar-thumb:vertical:hover { background: rgb(0, 175, 98); } html { font-size: 30px !important; } body { -ms-overflow-style: scrollbar; } } @media (min-width: 1440px) { html { font-size: 34px !important; } } @media (min-width: 1680px) { html { font-size: 40px !important; } } /* 閲嶇疆琛ㄥ崟鏍峰紡 */ select::-ms-expand { display: none; } input, select, textarea { box-shadow: none; outline: none; border: none; border-radius: 0; -ms-appearance: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; padding: 0; } textarea { resize: none; } select::-ms-expand { display: none; } /* 鏇存敼placeholder棰滆壊 */ input::-webkit-input-placeholder { color: #888; } input:-moz-placeholder { color: #888; } input::-moz-placeholder { color: #888; } input:-ms-input-placeholder { color: #888; } textarea::-webkit-input-placeholder { color: #888; } textarea:-moz-placeholder { color: #888; } textarea::-moz-placeholder { color: #888; } textarea:-ms-input-placeholder { color: #888; } header { position: fixed; top: 0; width: 100%; /*height: 2.75rem;*/ height: 70px; border-bottom: 1px solid rgba(0, 175, 98, .3); z-index: 30; transition: background-color .3s; background-color: rgba(34, 52, 59, .7); } .header-view { padding: 0 3.125%; } header .logo { position: absolute; /*left: 3.125%;*/ left: 0; /*top: .9rem;*/ /*top: 50%;*/ top: 0; /*transform:translateY(-50%);*/ /*width: 4.375rem;*/ height: 70px; } header .logo img { /*width: 100%;*/ height: 70px; display: block; } .m-nav { display: none; } .pc-nav { font-size: 0; text-align: center; } .pc-nav li { display: inline-block; *display: inline; zoom: 1; vertical-align: top; margin: 0 .8rem; } .pc-nav li .tit { display: block; font-size: .425rem; /*line-height: 2.75rem;*/ line-height: 70px; color: rgb(0, 175, 98); position: relative; } .pc-nav li .tit:before { content: ""; position: absolute; left: 50%; bottom: -1px; width: 0; height: 2px; background-color: rgb(0, 175, 98); transform: translateX(-50%); transition: all .3s; } .pc-nav li.cur .tit:before { width: 100%; } .pc-nav li .navson { display: none; position: absolute; left: 0; /*top: calc(2.75rem + 1px);*/ top: 71px; width: 100%; font-size: 0; padding: .75rem 0 1rem; /*background-color: rgba(46,46,46,.85);*/ background-color: rgba(34, 52, 59, .7); } .pc-nav li .navson a { display: inline-block; *display: inline; zoom: 1; width: 5.5rem; margin: 0 .5rem; } .pc-nav li .navson img { width: 100%; } .pc-nav li .navson .txt { font-size: .45rem; line-height: .55rem; color: #fff; text-align: left; } .pc-nav li .navson .img { margin-top: .4rem; } .header-right { position: absolute; right: 3.125%; top: 0; /*height: 2.75rem;*/ /*line-height: 2.75rem;*/ height: 70px; line-height: 70px; font-size: 0; } .header-right>div, .header-right>span, .header-right>a { display: inline-block; *display: inline; zoom: 1; vertical-align: top; } .search-wrap .search-btn { display: none; } .search-dialog { border: 1px solid rgba(0, 175, 98, .2); /*height: .9rem;*/ padding: 0 .3rem; /*margin-top: .9rem;*/ height: 30px; margin-top: 20px; border-radius: 3px; width: 4.25rem; } .search-dialog input[type=text] { float: left; background-color: transparent; color: #fff; width: 80%; line-height: 30px; height: 30px; /*height: .9rem;*/ /*line-height: .9rem;*/ font-size: .35rem; } .search-dialog input[type=text]::-webkit-input-placeholder { color: rgb(0, 175, 98); opacity: .5; filter: alpha(opacity=50); } .search-dialog input[type=text]:-moz-placeholder { color: rgb(0, 175, 98); opacity: .5; filter: alpha(opacity=50); } .search-dialog input[type=text]::-moz-placeholder { color: rgb(0, 175, 98); opacity: .5; filter: alpha(opacity=50); } .search-dialog input[type=text]:-ms-input-placeholder { color: rgb(0, 175, 98); opacity: .5; filter: alpha(opacity=50); } .search-dialog input[type=submit] { float: right; width: .375rem; height: .375rem; background-repeat: no-repeat; background-position: center; background-size: 100%; background-color: transparent; background-image: url('../img/search-btn.png'); margin-top: .25rem; } header .lang { font-size: .375rem; color: rgb(0, 175, 98); margin-left: .6rem; } header .divide { width: 1px; height: .3rem; background-color: #fff; opacity: .1; filter: alpha(opacity=10); vertical-align: middle; margin: 0 .25rem; } header .tel-wrap { position: relative; } header .tel-btn { display: inline-block; *display: inline; zoom: 1; width: .375rem; height: .375rem; background-repeat: no-repeat; background-position: center; background-image: url('../img/tel-btn.png'); vertical-align: middle; background-size: 100%; } header .tel-dialog { position: absolute; transform: translateX(-50%); width: 3.5rem; box-sizing: border-box; font-size: .4rem; line-height: .6rem; background: #fff; left: 50%; top: 2rem; text-align: center; border-radius: 6px; color: #666; font-family: arial; display: none; padding: .15rem 0; } header .tel-dialog:before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 12px; height: 7px; top: -7px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url('../img/dialog-sj.png'); box-shadow: 0 0 10px rgba(230, 0, 18, .1); } header .query-btn { line-height: 1; margin-top: 10px; text-align: center; margin-left: .6rem; } header .query-btn .txt { font-size: .35rem; line-height: .4rem; color: rgb(0, 175, 98); margin-top: 6px; } header.on { background-color: rgba(34, 52, 59, .7); } .clearfixed { height: 2.75rem; display: none; } /* header end */ footer { padding: 1.4rem 0 3.75rem; background-color: rgb(0, 175, 98); } .footer-view { width: 84.8958%; margin: 0 auto; } .f-top { padding-bottom: 1.25rem; border-bottom: 2px solid #fff; } .f-logo { width: 4.375rem; } .f-logo img { width: 100%; } .f-bottom { margin-top: .75rem; } .f-left { float: left; width: 59.5%; } .f-link .tit { font-size: .4rem; line-height: .5rem; color: #fff; float: left; } .f-link .list { float: right; width: 88.66%; } .f-link .list .row { margin: 0 -.45rem; } .f-link .list .item { float: left; width: 20%; box-sizing: border-box; padding: 0 .45rem; margin-bottom: .75rem; } .f-link .list .item img { width: 100%; display: block; } .f-bottom .copy { margin-top: .6rem; } .f-bottom .copy, .f-bottom .copy a { /*font-size: .35rem;*/ font-size: 13px; line-height: 1.5; /*line-height: .4rem;*/ color: #fff; } .f-right { float: right; text-align: right; } .f-right .tit { font-size: .425rem; line-height: .5rem; color: #fff; } .f-right .tel { font-size: .925rem; line-height: 1rem; color: #fff; margin-top: .25rem; font-family: "DIN-MEDIUMITALIC"; } .f-right .share-box { margin-top: 1rem; font-size: 0; } .f-right .share-box .item { display: inline-block; *display: inline; zoom: 1; vertical-align: middle; margin-left: .5rem; position: relative; } .f-right .share-box .icon { display: block; width: 1.275rem; height: .5rem; background-repeat: no-repeat; background-position: center; background-size: 100%; } .f-right .share-box .item:nth-child(1) .icon { background-image: url('../img/tm.png'); } .f-right .share-box .item:nth-child(2) .icon { background-image: url('../img/jd.png'); } .f-right .share-box .item:nth-child(3) .icon { background-image: url('../img/wechat.png'); width: .8rem; height: .8rem; } .f-right .share-box .item:nth-child(5) .icon { background-image: url('../img/douyin.png'); width: .8rem; height: .8rem; } .share-box .img-box { position: absolute; right: 0; top: 1.4rem; padding-top: .45rem; visibility: hidden; opacity: 0; filter: alpha(opacity=0); transition: all .3s; } .share-box .img { padding-top: 4px; position: relative; width: 3rem; padding: 4px; background-color: #fff; } .share-box .img:before { content: ""; position: absolute; right: .4rem; top: -4px; width: 7px; height: 4px; background-image: url('../img/qrcode-sj.png'); } .share-box .img img { width: 100%; } .share-box .item.cur { z-index: 40; } .share-box .item.cur .img-box { opacity: 1; filter: alpha(opacity=100); top: 1.1rem; visibility: visible; } .m-copy { display: none; } /* footer end */ .index-page .clearfixed { display: none; } .index-wrap { position: fixed; top: 0; width: 100%; height: 100%; overflow: hidden; } .banner { position: relative; height: 100%; } .banner img { width: 100%; } .banner .m-img { display: none; } .banner .pc-box, .banner .m-box { overflow: hidden; } .banner .pc-box { height: 100vh; } .banner .m-box { display: none; } .banner .swiper-slide { height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; } .banner .ban-slide { background: #000; } .banner .swiper-slide video { position: absolute; left: 0; top: 50%; width: 115%; transform: translateY(-50%); background-color: #000; } .banner .text-box { position: absolute; left: 0; top: 34.73%; width: 100%; } .banner .text-box .en { font-size: 1.45rem; line-height: 1.5rem; color: #fff; font-family: "BROWN-BOLD_1"; } .banner .text-box .cn { font-size: 1.2rem; line-height: 1.3rem; color: #fff; margin-top: .4rem; } .banner .text-box .ban-btn { margin-top: 1rem; font-size: 0; } .banner .text-box .ban-btn a { display: inline-block; *display: inline; zoom: 1; padding: 0 2.5rem; height: 1.4rem; line-height: 1.4rem; border: 1px solid rgba(255, 255, 255, .3); border-radius: 3px; } .banner .text-box .ban-btn span { display: inline-block; *display: inline; zoom: 1; font-size: .4rem; line-height: 1.4rem; color: #fff; padding-right: .3rem; background-repeat: no-repeat; background-position: right center; background-image: url('../img/ban-arrow.png'); background-size: 6px; vertical-align: top; } .ban-view { padding: 0 6.25%; } .banner .ban-video { background-color: #000; } .banner .ban-video .text-box { text-align: center; } .banner .buttons { position: absolute; left: 0; bottom: 9%; width: 100%; z-index: 3; font-size: 0; } .banner .buttons .prev, .banner .buttons .next, .banner .buttons .btns { display: inline-block; *display: inline; zoom: 1; vertical-align: middle; } .banner .buttons .prev, .banner .buttons .next { width: 6px; height: 11px; background-repeat: no-repeat; background-position: center; background-size: 100%; } .banner .buttons .prev { background-image: url('../img/ban-prev.png'); margin-right: .75rem; } .banner .buttons .next { background-image: url('../img/ban-next.png'); margin-left: .75rem; } .banner .buttons .btns .swiper-pagination-bullet { width: .5rem; height: .5rem; border: 2px solid transparent; border-radius: 100%; position: relative; margin: 0 1px; transition: all .3s; } .banner .buttons .btns .swiper-pagination-bullet:before { content: ""; position: absolute; left: 50%; top: 50%; width: .2rem; height: .2rem; border-radius: 100%; background-color: #fff; opacity: .3; filter: alpha(opacity=30); margin: -.1rem 0 0 -.1rem; transition: all .3s; } .banner .buttons .btns .swiper-pagination-bullet-active { border-color: #fff; background-color: transparent; } .banner .buttons .btns .swiper-pagination-bullet-active:before { opacity: 1; filter: alpha(opacity=100); } .index-btns { position: absolute; right: 3.125%; top: 50%; transform: translateY(-50%); z-index: 3; } .index-btns a { display: block; width: 8px; height: 8px; border-radius: 100%; background-color: #fff; opacity: .3; filter: alpha(opacity=30); margin: .15rem 0; transition: all .3s; } .index-btns a.cur { opacity: 1; filter: alpha(opacity=100); } .i-solution-box { height: 100%; /* transform: skewX(-10deg); */ overflow: hidden; } .i-solution-box .row { /* width: 140%; */ } .i-solution-box .pc-box { height: 100%; } .i-solution-box .pc-box img { display: none; } .i-solution-box .m-box { display: none; } .i-solution-box .row { height: 100%; /* margin-left: -6%; */ } .i-solution-box .item { float: left; height: 100%; position: relative; /* margin-left: -11.5vw; */ overflow: hidden; z-index: 1; } /* .i-solution-box .item:first-child{ margin-left: -5.75vw; } */ .i-solution-box .bg { display: block; height: 100%; position: relative; transition: all .3s; background-repeat: no-repeat; background-position: center; background-size: cover; /* clip-path: polygon(11.5vw 0, 100% 0%, calc(100% - 11vw) 100%, 0 100%); */ } .i-solution-box .text { position: absolute; left: 0; bottom: 12.63%; width: 100%; text-align: center; /* padding-right: 7.75vw; */ box-sizing: border-box; transition: all .3s; } .i-solution-box .mask { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; opacity: .35; filter: alpha(opacity=35); /* clip-path: polygon(11.5vw 0, 100% 0%, calc(100% - 11vw) 100%, 0 100%); */ transition: all .3s; } .i-solution-box .text .tit { font-size: .9rem; line-height: 1rem; color: #fff; } .i-solution-box .text .arrow { display: inline-block; *display: inline; zoom: 1; width: .25rem; height: .45rem; background-repeat: no-repeat; background-position: center; background-size: 100%; background-image: url('../img/i-solution-arrow.png'); margin-top: .75rem; } .i-solution-box .text-box { position: absolute; left: 0; bottom: 6.3%; width: 100%; box-sizing: border-box; padding: 0 6.87%; opacity: 0; filter: alpha(opacity=0); transition: all .3s; visibility: hidden; } .i-solution-box .text-box .left { float: left; width: 70%; } .i-solution-box .item.cur .text-box { transition-delay: .3s; } .i-solution-box .text-box .tit { font-size: 1.2rem; line-height: 1.3rem; color: #fff; } .i-solution-box .text-box .con { font-size: .45rem; line-height: .7rem; color: #fff; margin-top: .7rem; } .i-solution-box .text-box .solution-more { float: right; width: 4.625rem; height: 1.65rem; border: 2px solid rgba(255, 255, 255, .1); transform: skew(-10deg); right: 25%; top: 25%; text-align: center; font-size: 0; display: block; } .i-solution-box .text-box .solution-more span { display: inline-block; *display: inline; zoom: 1; transform: skew(10deg); color: #fff; line-height: 1.65rem; font-size: .4rem; padding-right: .3rem; background-repeat: no-repeat; background-position: right center; background-size: .2rem; background-image: url('../img/i-solution-arrow.png'); } .i-solution-box .item.cur { z-index: 3; } .i-solution-box .item.cur .text { opacity: 0; filter: alpha(opacity=0); } .i-solution-box .item.cur .text-box { opacity: 1; filter: alpha(opacity=100); visibility: visible; } .i-solution-box .item.cur .mask { opacity: 0; filter: alpha(opacity=0); } .i-solution-box .item:first-child .text { padding-right: 0; } .i-pub-bg { height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; } .bg-box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .bg-box .bg { width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; } .bg-box .m-bg { display: none; } .bg-box .mask { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; } .i-about-box .mask { opacity: .5; filter: alpha(opacity=50); } .i-about { position: absolute; top: 50%; width: 100%; left: 0; transform: translateY(calc(-50% + 1.375rem)); z-index: 3; } .i-about h3 { font-size: 1.2rem; line-height: 1.3rem; color: #fff; text-align: center; } .i-about .con { font-size: .45rem; line-height: 1rem; color: #fff; margin: 1.25rem auto 0; width: 72.2%; text-align: center; } .i-about .icon-box { margin-top: 2.5rem; text-align: center; font-size: 0; } .i-about .icon-box .item { display: inline-block; *display: inline; zoom: 1; margin: 0 .8rem; vertical-align: top; } .i-about .icon-box .icon { width: 3rem; margin: 0 auto; } .i-about .icon-box .icon img { width: 100%; } .i-about .icon-box .txt { font-size: .4rem; line-height: .5rem; color: #fff; margin-top: .9rem; } .i-news-box { height: 100%; } .i-news-box .mask { opacity: .75; filter: alpha(opacity=75); } .i-news { position: absolute; left: 0; top: 21%; width: 100%; box-sizing: border-box; padding-left: 7.29%; z-index: 3; } .i-news h3 { font-size: 1.4rem; line-height: 1.5rem; color: #fff; position: relative; z-index: 3; } .i-news-tab { margin-top: 2rem; } .i-news-tab .swiper-slide { width: 24.7191%; margin-right: 3.93%; } .i-news-tab .swiper-slide:last-child { margin-right: 0; } .i-news-tab .swiper-slide img { width: 100%; } .i-news-tab .text { margin-top: .6rem; } .i-news-tab .time { font-size: .35rem; line-height: .45rem; color: #fff; opacity: .44; filter: alpha(opacity=44); } .i-news-tab .tit { font-size: .6rem; line-height: .85rem; height: 1.7rem; overflow: hidden; color: #fff; margin-top: .5rem; } .i-news-tab .scrollbar { height: 3px; background-color: rgba(255, 255, 255, .1); margin-top: 1.5rem; } .i-news-tab .scrollbar .swiper-scrollbar-drag { background-color: #fff; } .foot-slide { height: auto; } .view { width: 72.9%; margin: 0 auto; } .gray-bg { background-color: #fcfcfc; } .sub-banner { overflow: hidden; } .sub-banner img { width: 100%; } .sub-nav-box { border-bottom: 1px solid #ececec; } .sub-nav .swiper-wrapper { justify-content: center; } .sub-nav .swiper-slide { width: auto; margin: 0 1rem; } .sub-nav .swiper-slide:before { content: ""; position: absolute; right: -1rem; top: 50%; width: 1px; height: .25rem; background-color: #e6e6e6; margin-top: -.125rem; } .sub-nav a { display: block; height: 2.2rem; line-height: 2.2rem; font-size: .375rem; color: #666; position: relative; } .sub-nav a:before { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background-color: rgb(0, 175, 98); } .sub-nav .swiper-slide:last-child:before { display: none; } .sub-nav .swiper-slide.cur a { font-size: .45rem; color: rgb(0, 175, 98); } .sub-nav .swiper-slide.cur a:before { width: 100%; } .news-box { padding: 2.5rem 0 2rem; } .news-list .item { display: block; position: relative; margin-bottom: .9rem; transition: all .3s; } .news-list .item:last-child { margin-bottom: 0; } .news-list .time { position: absolute; top: 50%; left: 0; transform: translateY(-50%); font-family: 'BEBAS'; color: #555; text-align: center; } .news-list .time .day { font-size: 1.5rem; line-height: 1.5rem; } .news-list .time .line { width: 2.4rem; height: 2px; background-color: #acacac; margin: .4rem 0; } .news-list .time .ym { font-size: .65rem; line-height: .65rem; font-family: "BEBASNEUE REGULAR"; } .news-list .news-right { float: right; width: 88.57%; background-color: #f4f4f4; transition: all .3s; } .news-list .news-right .img { float: left; width: 33.87%; } .news-list .news-right .img img { width: 100%; } .news-list .news-right .text { float: right; width: 66.13%; padding: .6rem 1rem; box-sizing: border-box; font-size: 0; } .news-list .news-right .tit { font-size: .75rem; color: #444; line-height: .85rem; padding-bottom: .4rem; border-bottom: 1px solid #e4e4e4; transition: all .3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .news-list .news-right .con { font-size: .4rem; line-height: .75rem; color: #888; height: 1.5rem; overflow: hidden; margin-top: .4rem; } .news-list .news-right .detail { font-size: .4rem; line-height: .5rem; color: #555; margin-top: 1rem; padding: 0 2px 2px; border-bottom: 2px solid #787878; display: inline-block; *display: inline; zoom: 1; } .news-box .page { margin-top: .9rem; } .page { font-size: 0; text-align: center; } .page a { display: inline-block; *display: inline; zoom: 1; width: 1.25rem; height: 1.25rem; border: 1px solid #dedede; font-size: .45rem; line-height: 1.25rem; color: #666; vertical-align: top; border-radius: 100%; text-align: center; margin: 0 .125rem; transition: all .3s; } .page a.prev, .page a.next { background-repeat: no-repeat; background-position: center; background-size: 7px; } .page a.prev { background-image: url('../img/page-prev.png'); } .page a.next { background-image: url('../img/page-next.png'); } .page a.active { background-color: rgb(0, 175, 98); border-color: rgb(0, 175, 98); color: #fff; } .contact-box { padding: 2.5rem 0 0; position: relative; z-index: 3; } .contact-box .map { float: right; width: 65%; height: 15.5rem; margin-top: 1.25rem; } .contact-box .text-box { float: left; width: 30%; } .pub-tit { font-size: 1rem; line-height: 1.1rem; } .contact-box .text-box .con-box { margin-top: 1.5rem; } .contact-box .text-box .item { padding: .6rem 0; border-bottom: 1px solid #f8f8f8; } .contact-box .text-box .item .tit { font-size: .4rem; line-height: .5rem; background-repeat: no-repeat; background-position: left center; background-size: .45rem; padding-left: .75rem; } .contact-box .text-box .item:nth-child(1) .tit { background-image: url('../img/contact-icon1.png'); } .contact-box .text-box .item:nth-child(2) .tit { background-image: url('../img/contact-icon2.png'); } .contact-box .text-box .item:nth-child(3) .tit { background-image: url('../img/contact-icon3.png'); } .contact-box .text-box .item:nth-child(4) .tit { background-image: url('../img/contact-icon4.png'); } .contact-box .text-box .item:nth-child(5) .tit { background-image: url('../img/contact-icon5.png'); } .contact-box .text-box .item .con { font-size: .55rem; line-height: .7rem; color: #333; margin-top: .25rem; } .message-box { padding: 2.5rem 0 2rem; } .message-form { margin-top: .9rem; } .message-form .row { margin: 0 -.75rem; } .message-form .message-item { box-sizing: border-box; padding: 0 .75rem; } .message-form .inp { border-bottom: 1px solid #e8e8e8; padding-bottom: .6rem; } .message-tit { font-size: .45rem; line-height: 1rem; color: #606060; } .message-tit .red { color: #f31c1c; } .message-form .inp { margin-bottom: .75rem; } .message-form .inp .message-tit { float: left; font-size: .45rem; line-height: 1rem; } .message-form .inp input[type=text] { float: right; width: 80.9%; height: 1rem; line-height: 1rem; color: #606060; font-size: .45rem; } .message-form textarea { display: block; height: 4.5rem; padding: .25rem .5rem; background-color: #f8f8f8; width: 100%; border: 1px solid #e8e8e8; font-size: .4rem; line-height: .5rem; box-sizing: border-box; } .message-form .check { margin-top: 1rem; } .message-form .check .message-tit { float: left; margin-top: .2rem; } .message-form .check input { float: left; height: 1.4rem; line-height: 1.4rem; padding: 0 .5rem; width: 6.5rem; font-size: .4rem; color: #606060; background-color: #f8f8f8; border: 1px solid #e8e8e8; margin-left: .3rem; } .message-form .check img { float: left; width: 3.75rem; margin-top: 5px; margin-left: .6rem; cursor: pointer; } .message-form .submit-box { padding-top: 1.25rem; margin-top: 1rem; text-align: center; border-top: 1px solid #e8e8e8; } .message-form .submit-box input[type=submit] { width: 6.625rem; height: 1.5rem; text-align: center; border: 1px solid #e8e8e8; background-color: transparent; font-size: .4rem; color: #606060; transition: all .3s; } .about-box { padding: 2.5rem 0; } .about-box .img-box { float: left; width: 42.857%; overflow: hidden; } .about-box .img-box img { width: 100%; } .about-box .img { position: absolute; bottom: 0; left: 0; width: 86.67%; z-index: 3; } .about-box .cover { right: 0; top: 0; position: absolute; width: 81.67%; height: 83.72%; background-color: rgb(0, 175, 98); border-radius: 0 0 1.75rem 0; } .about-box .cover .txt { position: absolute; right: 4.5%; bottom: 16.8%; height: 100%; writing-mode: vertical-rl; writing-mode: tb-rl; font-size: .75rem; font-family: arial; /*color: #e7c1a8;*/ color: rgb(102, 207, 161); letter-spacing: 2px; line-height: .75rem; text-align: right; } .about-box .text { float: right; width: 45%; } .about-con { font-size: .4rem; line-height: .9rem; color: #888; } .about-box .text .about-con { margin-top: 1rem; text-align: justify; } .about-icon-box { background-repeat: no-repeat; background-position: center; background-size: cover; padding: 2rem 0 2.75rem; text-align: center; } .about-icon-box .pub-tit { color: #fff; } .about-line { width: 1.25rem; height: 3px; margin: .9rem auto; background-color: rgb(0, 175, 98); } .about-icon-box .about-line { background-color: #fff; } .about-icon-box .about-con { color: #fff; /* margin-top: .75rem; */ } .about-icon-box .icon-box { font-size: 0; margin-top: 2.5rem; } .about-icon-box .icon-box .item { display: inline-block; *display: inline; zoom: 1; width: 4.75rem; height: 4.75rem; background-color: #fff; border-radius: 100%; box-sizing: border-box; padding-top: 1rem; margin: 0 1.375rem; transition: all .3s; } .about-icon-box .icon { width: 1.35rem; margin: 0 auto; position: relative; } .about-icon-box .icon img { width: 100%; } .about-icon-box .init { transition: all .3s; } .about-icon-box .hover { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; filter: alpha(opacity=0); transition: all .3s; } .about-icon-box .cn { font-size: .5rem; line-height: .6rem; color: rgb(0, 175, 98); margin-top: .3rem; transition: all .3s; } .about-icon-box .en { font-size: .3rem; color: #d1c9c4; text-transform: uppercase; transition: all .3s; } .network-box { text-align: center; padding: 2.25rem 0; } .network-box .about-line { background-color: rgb(0, 175, 98); } .network-box .network { margin-top: 1.75rem; } .network .m-box { display: none; } .network-box .img img { width: 100%; } .network { position: relative; } .point-list .pos-item { position: absolute; width: 2%; padding-top: 2%; z-index: 3; } .point-list .pos-item:nth-child(1) { left: 3.165%; top: 26%; } .point-list .pos-item:nth-child(2) { left: 38.85%; top: 43.478%; } .point-list .pos-item:nth-child(3) { left: 47.482%; top: 77.5%; } .point-list .pos-item:nth-child(4) { left: 74.1%; top: 32.1361%; } .point-list .pos-item .circle { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 100%; background-color: rgb(0, 175, 98); opacity: .2; filter: alpha(opacity=20); } .point-list .pos-item .icon { position: absolute; width: 20px; left: 50%; transform: translateX(-50%); bottom: 50%; } .point-list .pos-item .icon img { width: 100%; } .point-list .pos-item .txt { position: absolute; width: 2.5rem; height: 1.125rem; background-color: rgb(0, 175, 98); box-shadow: 0 5px 6px rgba(0, 0, 0, .1); line-height: 1.125rem; color: #fff; font-size: .4rem; border-radius: 4px; } .point-list .pos-item:nth-child(1) .txt { right: 5px; bottom: 1.25rem; } .point-list .pos-item:nth-child(2) .txt { right: -5px; bottom: 1.25rem; } .point-list .pos-item:nth-child(3) .txt { right: -10px; top: 1rem; } .point-list .pos-item:nth-child(4) .txt { left: -3rem; top: .2rem; } .shot-list .point { position: absolute; width: 5px; padding-top: 5px; border-radius: 100%; background-color: rgb(0, 175, 98); } .shot-list .point:nth-child(1) { left: 11.51%; top: 17.77%; } .shot-list .point:nth-child(2) { left: 14.388%; top: 20.79%; } .shot-list .point:nth-child(3) { left: 14.964%; top: 26%; } .shot-list .point:nth-child(4) { left: 22%; top: 21.739%; } .shot-list .point:nth-child(5) { left: 10.79%; top: 37.8%; } .shot-list .point:nth-child(6) { left: 10.43%; top: 58.6%; } .shot-list .point:nth-child(7) { left: 6.6%; top: 53.875%; } .shot-list .point:nth-child(8) { left: 6.6%; top: 53.875%; } .shot-list .point:nth-child(9) { left: 4.17%; top: 40.45%; } .shot-list .point:nth-child(10) { left: 2.877%; top: 45.36862%; } .shot-list .point:nth-child(11) { left: 35.1%; top: 41.5879%; } .shot-list .point:nth-child(12) { left: 30.2%; top: 48.77%; } .shot-list .point:nth-child(13) { left: 34.53%; top: 52.55%; } .shot-list .point:nth-child(14) { left: 38.4892%; top: 48.2%; } .shot-list .point:nth-child(15) { left: 39.928%; top: 53.875%; } .shot-list .point:nth-child(16) { left: 46%; top: 36.862%; } .shot-list .point:nth-child(17) { left: 37.77%; top: 64.65%; } .shot-list .point:nth-child(18) { left: 42.8%; top: 71.46%; } .shot-list .point:nth-child(19) { left: 46.4%; top: 65.784499%; } .shot-list .point:nth-child(20) { left: 55.54%; top: 86.9565%; } .shot-list .point:nth-child(21) { left: 69.784%; top: 22.1172%; } .shot-list .point:nth-child(22) { left: 74.1%; top: 22.68431%; } .shot-list .point:nth-child(23) { left: 80.1%; top: 20.2%; } .shot-list .point:nth-child(24) { left: 74.2446%; top: 40.83%; } .shot-list .point:nth-child(25) { left: 76.9784%; top: 48.2%; } .shot-list .point:nth-child(26) { left: 77.7%; top: 43.5%; } .shot-list .point:nth-child(27) { left: 82.89%; top: 42.533%; } .shot-list .point:nth-child(28) { left: 92.3741%; top: 61.44%; } .line-list .line { position: absolute; } .line-list .line .bg { position: absolute; height: 100%; width: 100%; background-position: left center; background-size: cover; background-repeat: no-repeat; } .line-list .line:nth-child(10) .bg, .line-list .line:nth-child(11) .bg, .line-list .line:nth-child(12) .bg, .line-list .line:nth-child(16) .bg, .line-list .line:nth-child(17) .bg, .line-list .line:nth-child(18) .bg, .line-list .line:nth-child(20) .bg { right: 0; top: 0; background-position: right top; } .line-list .line:nth-child(21) .bg { bottom: 0; left: 0; } .line-list .line:nth-child(1) { left: 4.3165%; top: 17.9584%; width: 7.388%; height: 9.83%; } .line-list .line:nth-child(1) .bg { background-image: url('../img/e-line1.png'); } .line-list .line:nth-child(2) { left: 3.956%; top: 20.8%; width: 10.935%; height: 8.5%; } .line-list .line:nth-child(2) .bg { background-image: url('../img/e-line2.png'); } .line-list .line:nth-child(3) { left: 4.3%; top: 24.2%; width: 10.86%; height: 4.16%; } .line-list .line:nth-child(3) .bg { background-image: url('../img/e-line3.png'); } .line-list .line:nth-child(4) { left: 4.17%; top: 22.6843%; width: 17.55%; height: 7.9%; } .line-list .line:nth-child(4) .bg { background-image: url('../img/e-line4.png'); } .line-list .line:nth-child(5) { left: 4.6%; top: 29.1%; width: 6.55%; height: 9.26%; } .line-list .line:nth-child(5) .bg { background-image: url('../img/e-line5.png'); } .line-list .line:nth-child(6) { left: 4.7482%; top: 29.87%; width: 6.043%; height: 28.73%; } .line-list .line:nth-child(6) .bg { background-image: url('../img/e-line6.png'); } .line-list .line:nth-child(7) { left: 4.3%; top: 28.73%; width: 2.59%; height: 25.33%; } .line-list .line:nth-child(7) .bg { background-image: url('../img/e-line7.png'); } .line-list .line:nth-child(8) { left: 4.28%; top: 29.11%; width: .65%; height: 10.964%; } .line-list .line:nth-child(8) .bg { background-image: url('../img/e-line8.png'); background-position: top center; } .line-list .line:nth-child(9) { left: 2.5%; top: 28.355%; width: 1.582%; height: 17.2%; } .line-list .line:nth-child(9) .bg { background-image: url('../img/e-line9.png'); background-position: top center; } .line-list .line:nth-child(10) { left: 35.1%; top: 41.5879%; width: 3.78%; height: 4.53%; } .line-list .line:nth-child(10) .bg { background-image: url('../img/z-line1.png'); } .line-list .line:nth-child(11) { left: 30.43%; top: 43.856%; width: 9.42%; height: 5.3%; } .line-list .line:nth-child(11) .bg { background-image: url('../img/z-line2.png'); } .line-list .line:nth-child(12) { left: 34.676%; top: 46.12%; width: 4.46%; height: 7.18%; } .line-list .line:nth-child(12) .bg { background-image: url('../img/z-line3.png'); } .line-list .line:nth-child(13) { left: 38.7%; top: 45.9%; width: 1.15%; height: 2.2684%; } .line-list .line:nth-child(13) .bg { background-image: url('../img/z-line4.png'); } .line-list .line:nth-child(14) { left: 39.568%; top: 45.36862%; width: .72%; height: 9.26%; } .line-list .line:nth-child(14) .bg { background-image: url('../img/z-line5.png'); } .line-list .line:nth-child(15) { left: 40.1%; top: 37%; width: 6%; height: 8.5%; } .line-list .line:nth-child(15) .bg { background-image: url('../img/z-line6.png'); } .line-list .line:nth-child(16) { left: 37.76%; top: 65%; width: 11.37%; height: 15.69%; } .line-list .line:nth-child(16) .bg { background-image: url('../img/a-line1.png'); } .line-list .line:nth-child(17) { left: 43.17%; top: 71.83%; width: 5.6%; height: 8.3%; } .line-list .line:nth-child(17) .bg { background-image: url('../img/a-line2.png'); } .line-list .line:nth-child(18) { left: 46.4%; top: 65.784499%; width: 1.94%; height: 13.4%; } .line-list .line:nth-child(18) .bg { background-image: url('../img/a-line3.png'); } .line-list .line:nth-child(19) { left: 48.92%; top: 81.3%; width: 6.9784%; height: 6.6%; } .line-list .line:nth-child(19) .bg { background-image: url('../img/a-line4.png'); } .line-list .line:nth-child(20) { left: 69.784%; top: 23%; width: 5.3%; height: 12.854%; } .line-list .line:nth-child(20) .bg { background-image: url('../img/m-line1.png'); } .line-list .line:nth-child(21) { left: 74.2446%; top: 23%; width: 1%; height: 12.287%; } .line-list .line:nth-child(21) .bg { background-image: url('../img/m-line2.png'); } .line-list .line:nth-child(22) { left: 75.1%; top: 20.8%; width: 5.1%; height: 14%; } .line-list .line:nth-child(22) .bg { background-image: url('../img/m-line3.png'); } .line-list .line:nth-child(23) { left: 74.388%; top: 34%; width: 1.3%; height: 5.671%; } .line-list .line:nth-child(23) .bg { background-image: url('../img/m-line4.png'); } .line-list .line:nth-child(24) { left: 75.25%; top: 34%; width: 2%; height: 14.37%; } .line-list .line:nth-child(24) .bg { background-image: url('../img/m-line5.png'); } .line-list .line:nth-child(25) { left: 74.676%; top: 35.16%; width: 3.38%; height: 8.885%; } .line-list .line:nth-child(25) .bg { background-image: url('../img/m-line6.png'); } .line-list .line:nth-child(26) { left: 75.3%; top: 34.9%; width: 7.4%; height: 7.93%; } .line-list .line:nth-child(26) .bg { background-image: url('../img/m-line7.png'); } .line-list .line:nth-child(27) { left: 75.25%; top: 34%; width: 17.338%; height: 27.9773%; } .line-list .line:nth-child(27) .bg { background-image: url('../img/m-line8.png'); } .tech-box { position: relative; } .tech-box .circle { position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: 28.25rem; z-index: 3; } .tech-box .circle img { width: 100%; } .tech-top { position: absolute; left: 0; top: 8%; width: 100%; text-align: center; z-index: 3; } .tech-top .about-line { background-color: rgb(0, 175, 98); } .tab-btns { margin-top: 1rem; text-align: center; font-size: 0; } .tab-btns a { display: inline-block; *display: inline; zoom: 1; width: 6.125rem; height: 1.7rem; line-height: 1.7rem; /* border: 1px solid rgba(255,255,255,.5); color: #fff; */ font-size: .5rem; margin: 0 .45rem; transition: all .3s; color: #333; border: 1px solid rgba(64, 64, 64, .3); } .tab-btns a.cur { background-color: rgb(0, 175, 98); border-color: rgb(0, 175, 98); color: #fff; } .tech-box .item { display: none; } .tech-tab .swiper-slide { height: 22rem; background-repeat: no-repeat; background-position: center; background-size: cover; } .tech-tab .con-box { position: absolute; left: 0; top: 39.77%; width: 100%; text-align: center; } .tech-tab .con-box .tit { font-size: .5rem; line-height: .6rem; color: #fff; } .tech-tab .con-box .about-con { width: 44.8%; margin: 0 auto; color: #fff; margin-top: .5rem; } .tech-tab .buttons { position: absolute; left: 0; bottom: 33%; width: 100%; text-align: center; z-index: 3; font-size: 0; } .tech-tab .buttons .prev, .tech-tab .buttons .next, .tech-tab .buttons .btns { display: inline-block; *display: inline; zoom: 1; vertical-align: middle; } .tech-tab .buttons .prev, .tech-tab .buttons .next { width: 6px; height: 11px; background-repeat: no-repeat; background-position: center; background-size: 100%; } .tech-tab .buttons .prev { background-image: url('../img/ban-prev.png'); margin-right: .75rem; } .tech-tab .buttons .next { background-image: url('../img/ban-next.png'); margin-left: .75rem; } .tech-tab .buttons .btns .swiper-pagination-bullet { display: inline-block; *display: inline; zoom: 1; width: .5rem; height: .5rem; border: 2px solid transparent; border-radius: 100%; position: relative; margin: 0 1px; vertical-align: middle; transition: all .3s; } .tech-tab .buttons .btns .swiper-pagination-bullet:before { content: ""; position: absolute; left: 50%; top: 50%; width: .2rem; height: .2rem; border-radius: 100%; background-color: #fff; opacity: .3; filter: alpha(opacity=30); margin: -.1rem 0 0 -.1rem; transition: all .3s; } .tech-tab .buttons .btns .swiper-pagination-bullet-active { border-color: #fff; background-color: transparent; } .tech-tab .buttons .btns .swiper-pagination-bullet-active:before { opacity: 1; filter: alpha(opacity=100); } .tech-icon-box { position: absolute; left: 0; bottom: 6.8%; width: 100%; z-index: 4; } .tech-icon-tab { width: 79.17%; margin: 0 auto; overflow: hidden; background-color: #fff; } .tech-icon-tab .swiper-slide { width: 20%; height: 5rem; } .tech-icon-tab .tech-con { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 100%; box-sizing: border-box; padding-top: 1.4rem; } .tech-icon-tab .tech-con .icon { width: 1.2rem; position: relative; margin: 0 auto; } .tech-icon-tab .tech-con .icon img { width: 100%; display: block; } .tech-icon-tab .tech-con .icon .init { transition: all .3s; } .tech-icon-tab .tech-con .icon .hover { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; filter: alpha(opacity=0); transition: all .3s; } .tech-icon-tab .tech-con .txt { font-size: .5rem; text-align: center; color: #888; margin-top: .5rem; transition: all .3s; } .tech-icon-tab .tech-con:before, .tech-icon-tab .tech-con:after { content: ""; position: absolute; } .tech-icon-tab .tech-con:before { width: 1px; height: 2.1rem; background-color: #f2f2f2; top: 50%; right: 0; transform: translateY(-50%); } .tech-icon-tab .swiper-slide:last-child .tech-con:before { display: none; } .tech-icon-tab .tech-con:after { width: 0; height: 3px; background-color: rgb(0, 175, 98); bottom: 0; left: 0; transition: all .3s; } .tech-icon-tab .swiper-slide.cur .tech-con .init { opacity: 0; filter: alpha(opacity=0); } .tech-icon-tab .swiper-slide.cur .tech-con .hover { opacity: 1; filter: alpha(opacity=100); } .tech-icon-tab .swiper-slide.cur .txt { color: #444; } .tech-icon-tab .swiper-slide.cur .tech-con:after { width: 100%; } .tech-box.on .pub-tit { color: #fff; } .tech-box.on .about-line { background-color: #fff; } .tech-box.on .tab-btns a { color: #fff; border-color: #fff; } .tech-box.on .tab-btns a.cur { color: rgb(0, 175, 98); background-color: #fff; } .ppf-box { height: 22rem; background-repeat: no-repeat; background-position: center; background-size: cover; box-sizing: border-box; padding-top: 17.1875%; } .ppf-box .img { float: right; width: 54.5%; margin-top: .75rem; } .ppf-box .img img { width: 100%; } .ppf-box .text-box { float: left; width: 40.7%; overflow: hidden; } .ppf-box .text-box .tit { font-size: .5rem; line-height: .6rem; color: #666; } .ppf-box .text-box .con { font-size: .4rem; line-height: .75rem; color: #888; margin-top: .75rem; } .honor-box { padding: 1.75rem 0 2.5rem; } .honor-box .pub-tit { text-align: center; } .honor-box .honor-tab { margin-top: 2.5rem; overflow: hidden; } .honor-box .honor-tab .con-box { display: block; } .honor-box .honor-tab .img { border: 1px solid rgba(0, 0, 0, .2); padding: .6rem 1.1rem; } .honor-box .honor-tab img { width: 100%; } .honor-box .honor-tab .txt { font-size: .4rem; line-height: .5rem; color: #888; margin-top: .9rem; text-align: center; } .pub-prev, .pub-next { position: absolute; top: 50%; width: 1.5rem; height: 1.5rem; border: 1px solid rgba(0, 175, 98, .2); background-repeat: no-repeat; background-position: center; background-size: .25rem; border-radius: 100%; transition: all .3s; transform: translateY(-50%); } .pub-prev { left: -3rem; background-image: url('../img/pub-prev.png'); } .pub-next { right: -3rem; background-image: url('../img/pub-next.png'); } .honor-tab-box .pub-prev, .honor-tab-box .pub-next { transform: translateY(calc(-50% - .65rem)); } .solution-btns { padding: 2rem 0; margin: 0; } .page-img img { width: 100%; } .zhizun-page header, .newsinfo-page header { /*background-color: #333;*/ background-color: rgb(34,52,59); } .zhizun-page .clearfixed { display: block; } @media (max-width: 1680px) {} @media (max-width: 1366px) { .pc-nav { padding-right: 10%; } .pc-nav li { margin: 0 1rem 0 0; } .about-icon-box .icon-box .item { margin: 0 .5rem; } .ppf-box { padding-top: 25%; } .contact-box .text-box .item .con { font-size: .5rem; } .message-form .inp input[type=text] { width: 76%; } } .circle li.move:first-child { animation-delay: 1.1s; } .circle li.move { animation-duration: 2.2s; animation-name: circleMotion; animation-iteration-count: infinite; animation-direction: normal; } .circle li { position: absolute; top: 50%; left: 50%; width: 28.5rem; margin: -3.3rem 0 0 -14.25rem; } @keyframes circleMotion { 0% { transform: scale3d(1, 1, 1) rotate(0.1deg); -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); } 21% { opacity: 1; visibility: visible; } 95% { transform: scale3d(1.14, 1.14, 1.14) rotate(0.1deg); -webkit-transform: scale3d(1.14, 1.14, 1.14); -moz-transform: scale3d(1.14, 1.14, 1.14); -o-transform: scale3d(1.14, 1.14, 1.14); } 100% { opacity: 0; visibility: hidden; transform: scale3d(1, 1, 1) rotate(0.1deg); -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); } } .wewe-s { text-align: center; margin-top: .8rem; } /* 瑙嗛 */ .videos { width: 29.5rem; height: auto; position: fixed; z-index: 999; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; } .videos_mask { width: 100%; height: 100%; position: fixed; z-index: 998; top: 0; left: 0; background: #000; display: none; opacity: 0.6; } .videos video { display: block; width: 100%; } .videos .vclose { position: absolute; cursor: pointer; width: 1.25rem; height: 1.25rem; border-radius: 50%; top: 0.375rem; right: 0.375rem; } /* 瑙嗛 */ @media (max-width: 1024px) { .pc-img { display: none; } .mb-img { display: block; } .head-nav { display: none; } .menu { display: block; } .videos { width: 90%; } .langu { margin-right: 0.5rem; } } @media (max-width: 1024px) { .videos { width: 90%; } .videos .vclose { width: 30px; height: 30px; } }