@charset "utf-8"; /** * @Author zcool * @Date 2017-11-20 */ body, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, li, pre, form, fieldset, legend, button, input, textarea, th, td, ol { margin: 0; padding: 0; } *, ::after, ::before { box-sizing: border-box; font-family: "PingFang HK", "Microsoft YaHei", "Arial"; } .pure:before, .pure:after { content: " "; display: table; } .pure:after { clear: both; } p{ word-break: break-all; text-align: justify; } body { font: 12px "PingFang HK", "Microsoft YaHei", "Arial"; color: #333; line-height: 1.5; overflow-x: hidden; } ol, ul, li { list-style-type: none; vertical-align: middle; } img { vertical-align: top; border: 0; } input, select, textarea, button { vertical-align: middle; } textarea, input { /*text-indent: 10px;*/ } /*琛ㄥ崟鍏冪礌榛樿鏈?0鍍忕礌鐨勭缉杩?/ input[type='submit'], input[type='button'], button { text-indent: 0; text-align: center; cursor: pointer; } label, button, a { cursor: pointer; } ins, em, b, i { text-decoration: none; font-style: normal; } /* 鍘绘帀娴忚鍣ㄦ縺娲绘牱寮 */ select:focus, textarea:focus, input:focus, button { outline: none; } /* 鎻愮ず鏂囧瓧鐨勫垵濮嬫牱寮 */ input::-webkit-input-placeholder, input::-moz-input-placeholder, textarea::-webkit-textarea-placeholder, textarea::-moz-textarea-placeholder { color: #999; transition: color .5s; } /* 鎻愮ず鏂囧瓧鐨勬縺娲绘牱寮 */ input:focus::-webkit-input-placeholder, input:focus::-moz-input-placeholder, input:hover::-webkit-input-placeholder, input:hover::-moz-input-placeholder, textarea:focus::-webkit-input-placeholder, textarea:focus::-moz-input-placeholder, textarea:hover::-webkit-input-placeholder, textarea:hover::-moz-input-placeholder { color: #c2c2c2; } /* table */ table { border-collapse: collapse; border-spacing: 0; font: inherit; } /* a_link */ a { color: inherit; text-decoration: none; } a[href] { cursor: pointer; } a:hover { text-decoration: none; cursor: pointer; } a:focus { background-color: transparent; } h1, h2, h3, h4, h5, h6, em { font-weight: normal; } a, span, li, b, i, label, p, strong, div, h1, h2, h3, h4, h5, h6, font, small, em, li, pre, form, fieldset, legend, button, input, textarea, th, td { /*font-size: 14px;*/ } p { line-height: 2; } font { font-size: inherit; font-style: inherit; color: inherit; font-weight: inherit; text-transform: inherit; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } /*鐢ㄦ潵瑙e喅鍦ㄥ畨鍗撲笂鐨勭偣鍑诲嚭鐜扮妗嗛棶棰?/ body { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /*瑙e喅ios涓婂幓闄ゅ井淇$偣鍑昏摑鑹茶竟妗 */ a:focus, input:focus, p:focus, div:focus { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } body, html { height: 100%; width: 100%; } body::-webkit-scrollbar, html::-webkit-scrollbar { width: 3px; border-radius: 1.5px; } body::-webkit-scrollbar-button, html::-webkit-scrollbar-button { display: none; } body::-webkit-scrollbar-track, html::-webkit-scrollbar-track { background-color: #eee; } body::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb { background-color: #eee; } /*婊氬姩鍔ㄧ敾鐨勬牱寮?/ /*.disable-hover {*/ /*pointer-events: none;*/ /*}*/ .scroll-animate.animated { visibility: hidden; } .font-fadeIn font { display: inline-block; min-width: 12px; } .scrolly { transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; } /* 娴姩涓庢竻娴姩 */ .fl { float: left; } .fr { float: right; } .cl::after { content: '\20'; display: block; height: 0; line-height: 0; font-size: 0; clear: both; visibility: hidden; } .hide { display: none; } .show { display: block; } .text_overflow { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-ahref] { cursor: pointer; } html { font-size: 100px; } /* 鍒濆瀹氫箟 */ @font-face { font-family: 'word'; src: url('../css/font/ITCAvantGardePro-Demi.otf'); src: url('../css/font/ITCAvantGardePro-Demi.eot?#iefix') format('embedded-opentype'), url('../css/font/ITCAvantGardePro-Demi.woff') format('woff'), url('../css/font/ITCAvantGardePro-Demi.ttf') format('truetype'), url('../css/font/ITCAvantGardePro-Demi.svg#YourWebFontName') format('svg'); } .word { font-family: word; } .wc { color: #fff; } .mc { color: #00653b; } .fc { color: #a2bccc; } .gc { color: #d7dee4; } .d-gc { color: #7f8c94; } .rc { color: #fe0000; } .grc { color: #69b22a; } h1 { font-size: 0.36rem; font-weight: bold; } h3 { font-size: 0.18rem; font-weight: bold; } h4 { font-size: 0.16rem; font-weight: bold; } .transi { transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; } .color-linear { background: linear-gradient(45deg, #79bd28 0%, #00653b 100%); } .full { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .max-wid { width: 84%; max-width: 1600px; margin: auto; } .layout-play { width: 64px; height: 64px; border-radius: 50%; line-height: 64px; text-align: center; background-color: rgba(255, 255, 255, 0.6); color: #00653b; font-size: 72px; text-indent: -18px; position: relative; } .layout-play:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; background-color: transparent; border-style: solid; border-width: 2px; border-color: rgba(255, 255, 255, 0.5); border-radius: 50%; opacity: 0; transition: opacity 0.3s,transform 0.5s; } .layout-play:hover:after { opacity: 1; transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); } .layout-flex { display: flex; justify-content: center; align-items: center; text-align: center; overflow: hidden; } .layout-flex .list { display: inline-block; float: left; } .layout-row { width: 100%; } .layout-row .layout-rowMain { max-width: 1200px; margin: auto; width: 80%; } .layout-pa-box { position: relative; } .layout-pa-box .layout-pa-right { position: absolute; right: 0; } .layout-pa-box .layout-pa-left { position: absolute; left: 0; } /* 鏂伴椈鏂囩珷鍒楄〃 */ .layout-articles { border-bottom: 1px solid #eee; } .layout-articles .layout-top { display: inline-block; } .layout-articles .layout-top h4.layout-title { text-align: left; font-weight: bold; font-size: 0.18rem; color: #333; } .layout-articles .layout-top > small { display: block; font-weight: 500; color: #6a6a6a; font-size: 0.13rem; margin: 0.15rem 0 0.2rem 0; } .layout-articles p { line-height: 150%; font-size: 14px; } .layout-articles .layout-btm { clear: both; height: 0.45rem; line-height: 0.45rem; padding: 0.3rem 0; position: relative; box-sizing: content-box; } .layout-articles .layout-btm > .btn { background-color: #f0f4f7; color: #6a6a6a; width: 1.25rem; height: 0.45rem; line-height: 0.45rem; text-align: center; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; font-size: 0.13rem; } .layout-articles:not(:last-child) { margin-bottom: 0.7rem; } /*box1:鍥剧墖锛堜笂锛?鏂囧瓧锛堜笅锛?/ .layout-box1 { width: 100%; } .layout-box1 .photo { width: 100%; background-size: cover; background-position: center; margin-bottom: 16px; } .layout-box1 .photo > img { visibility: hidden; } .layout-box1 .txt h4 { height: 30px; line-height: 30px; margin: 30px 0; } .layout-box1 .txt p { height: 60px; line-height: 160%; overflow: hidden; color: #cacaca; } .layout-box1 .txt small { display: inline-block; margin: 18px 0; } /*box2:鍥剧墖锛堝乏锛?鏂囧瓧锛堝彸锛?/ .layout-box2 { position: relative; padding: 20px; box-sizing: content-box; text-align: right; } .layout-box2 .pic { max-width: 50%; display: inline-block; background-size: contain; background-position: center; background-repeat: no-repeat; vertical-align: top; height: 80%; left: 20px; top: 0; bottom: 0; margin: auto; position: absolute; } .layout-box2 .pic > img { opacity: 0; max-width: 100%; } .layout-box2 .txt { display: inline-block; text-align: left; width: 50%; } .layout-box2 .txt h4 { margin-bottom: 12px; } .layout-box2 .txt small { display: block; color: #8d8d8d; } /*鍒楄〃*/ .layout-ul > li { height: 0.32rem; line-height: 0.32rem; position: relative; padding-left: 0.5rem; } .layout-ul > li > i { position: absolute; top: 0; bottom: 0; margin: auto; left: 0; height: 0.3rem; } /*椤电爜*/ .layout-page { text-align: center; padding: 24px 0; } .layout-page > ol > a { display: inline-block; margin: 0 10px; width: 40px; height: 40px; border-radius: 50%; line-height: 40px; text-align: center; background-color: #f5f5f5; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; } .layout-page > ol > a:hover { background-color: #00653b; color: #fff; } .layout-page > ol li { display: inline-block; height: 40px; line-height: 40px; color: #cfced3; margin: 0 12px; cursor: pointer; } .layout-page > ol li.on { color: #00653b; } /* 鎸夐挳 */ .layout-btn { border-radius: 50px; display: inline-block; min-width: 160px; text-align: center; color: #fff; height: 0.5rem; line-height: 0.5rem; position: relative; padding: 0 30px; box-shadow: 0 16px 43px -8px rgba(0, 101, 59, 0.6); } .layout-btn > span { color: inherit; position: relative; z-index: 3; } .layout-btn > i { color: inherit; position: relative; z-index: 3; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; display: inline-block; } .layout-btn:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 50px; background: linear-gradient(45deg, #79bd28 0%, #00653b 100%); z-index: 2; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; pointer-events: none; } .layout-btn:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 50px; z-index: 1; border-style: solid; border-width: 3px; border-color: #78bc28; background: transparent; pointer-events: none; } .layout-btn:hover:after { opacity: 1; } .layout-btn:hover:before { transform: scaleX(1.2); -webkit-transform: scaleX(1.2); -moz-transform: scaleX(1.2); -o-transform: scaleX(1.2); -ms-transform: scaleX(1.2); opacity: 0; transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; } .layout-btn:hover > i { transform: translateX(4px); -webkit-transform: translateX(4px); -moz-transform: translateX(4px); -o-transform: translateX(4px); -ms-transform: translateX(4px); } /* tab閫夐」 */ .layout-tabBox ul.layout-part { overflow: hidden; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .layout-tabBox ul.layout-part > li { width: calc(100%/4); float: left; height: 0.5rem; line-height: 0.5rem; text-align: center; } .layout-partList { width: 100%; height: 400px; padding: 6px; } /*杈撳叆妗?/ .layout-inputBox { display: inline-block; } .layout-inputBox > h5 { height: 0.32rem; line-height: 0.32rem; } .layout-inputBox .input-text { height: 40px; margin-bottom: 20px; position: relative; width: 100%; } .layout-inputBox .input-text > input { width: 100%; height: 100%; background-color: white; border: solid 1px #d4d4d4; font-weight: 400; padding: 0 10px; position: relative; z-index: 10; } .layout-inputBox .input-text > input:focus { background-color: transparent; border-color: transparent; } .layout-inputBox .input-text > input:focus ~ .input-border { background-color: white; } .layout-inputBox .input-text > input:focus ~ .input-border:first-of-type:before { -webkit-transition: 0.15s ease-in-out all; transition: 0.15s ease-in-out all; -webkit-transition-delay: 0s; transition-delay: 0s; width: 100%; } .layout-inputBox .input-text > input:focus ~ .input-border:first-of-type:after { height: 100%; -webkit-transition: 0.15s ease-in-out all; transition: 0.15s ease-in-out all; -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } .layout-inputBox .input-text > input:focus ~ .input-border:last-of-type { background: transparent; } .layout-inputBox .input-text > input:focus ~ .input-border:last-of-type:before { -webkit-transition: 0.15s ease-in-out all; transition: 0.15s ease-in-out all; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; width: 100%; } .layout-inputBox .input-text > input:focus ~ .input-border:last-of-type:after { height: 100%; -webkit-transition: 0.15s ease-in-out all; transition: 0.15s ease-in-out all; -webkit-transition-delay: 0.45s; transition-delay: 0.45s; top: 0; } .layout-inputBox .input-text .input-border { bottom: 0; display: block; left: 0; position: absolute; top: 0; width: 100%; height: 100%; } .layout-inputBox .input-text .input-border:before, .layout-inputBox .input-text .input-border:after { bottom: 0; content: ''; display: block; position: absolute; top: 0; width: 0; background-color: #5b4c5c; -webkit-transition: 0.3s ease-in-out all; transition: 0.3s ease-in-out all; } .layout-inputBox .input-text .input-border:first-of-type:before { height: 2px; left: 0; top: 0; width: 0; } .layout-inputBox .input-text .input-border:first-of-type:after { height: 0; right: 0; top: 0; width: 2px; } .layout-inputBox .input-text .input-border:last-of-type:before { background-color: #01afd1; height: 2px; top: calc(100% - 2px); right: 0; width: 0; } .layout-inputBox .input-text .input-border:last-of-type:after { background-color: #01afd1; height: 0; top: calc(100% - 2px); left: 0; width: 2px; } /*涓嬫媺妗嗙粨鏋?/ .layout-down { display: inline-block; padding-right: 0.4rem; position: relative; background-color: rgba(0, 0, 0, 0.5); height: 0.4rem; line-height: 0.4rem; cursor: pointer; } .layout-down span.downTxt { display: inline-block; width: 100px; display: flex; align-items: center; position: relative; color: #fff; border: none; background-color: transparent; box-sizing: border-box; padding: 0.04rem 0.08rem; height: 100%; vertical-align: top; } .layout-down span.downTxt:after { content: ''; width: 1px; height: 50%; top: 0; bottom: 0; background-color: #ddd; right: 0; position: absolute; margin: auto; } .layout-down span.downIcon { position: absolute; right: 0; width: 0.4rem; top: 0; height: 100%; text-align: center; box-sizing: border-box; transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; color: #fff; height: 0.4rem; line-height: 0.4rem; } .layout-down ul.down { position: absolute; top: 100%; left: 0%; width: 100%; z-index: 100; display: none; } .layout-down ul.down > li { display: inline-block; width: 100%; box-sizing: border-box; padding: 0 0.08rem; background-color: rgba(0, 0, 0, 0.5); float: left; transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; } .layout-down ul.down > li > span { color: #bcbcbc; transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; } .layout-down ul.down > li:hover { background-color: #00653b; } .layout-down ul.down > li:hover > span { color: #fff; } .layout-down.active span.downIcon { transform: scale(-1); -webkit-transform: scale(-1); -moz-transform: scale(-1); -o-transform: scale(-1); -ms-transform: scale(-1); } .picCut { position: relative; } .picCut > img.Tpic { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100%; z-index: 10; display: none; } .picCut .cutItem { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100%; height: 100%; z-index: 11; } .picCut .cutItem > .cut { position: absolute; top: 0; left: 0; z-index: 15; overflow: hidden; } .picCut .cutItem > .cut > img { position: absolute; top: 0; left: 0; } .component { margin: 0 auto; position: relative; margin-bottom: 0.4rem; max-width: 100%; } .component > ul { width: 100%; max-width: 100%; height: 100%; position: relative; list-style: none; padding: 0; margin: 0 auto; } .component > ul > li { width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none; opacity: 0; z-index: 9; background-position: center; background-repeat: no-repeat; background-size: cover; } .component > ul > li > img { display: block; max-width: 100%; opacity: 0; max-height: 100%; } .component > ul .current { opacity: 1; pointer-events: auto; z-index: 10; } .component nav > a { position: absolute; width: 50px; height: 50px; line-height: 50px; color: #5b4c5c; outline: none; overflow: visible; text-align: center; top: 50%; z-index: 1100; color: #fff; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .component nav .moveNext { right: 0; } .component .Tcon { position: absolute; width: 100%; height: 90%; top: 0; bottom: 0; margin: auto; left: 0; right: 0; z-index: 11; } .component .Tcon > small { color: #fff; position: absolute; left: 0; right: 0; margin: auto; top: 0; width: max-content; } .component .Tcon > small > .Tpage { color: #fff; font-size: 0.2rem; } .component .Tcon .txtChange { position: relative; height: 100%; width: 100%; } .component .Tcon .txtChange > [data-txt] { display: none; position: absolute; width: 80%; color: #fff; text-align: left; font-size: 0.24rem; pointer-events: none; transition: all 0.4s; -webkit-perspective: 1600px; perspective: 1600px; } .component .Tcon .txtChange > [data-txt].on { display: block; } .component .Tcon .txtChange > [data-txt].txtHide { -webkit-animation: fadeoOut 1.5s forwards cubic-bezier(0.7, 0, 0.3, 1); animation: fadeoOut 1.5s forwards cubic-bezier(0.7, 0, 0.3, 1); } .component .Tcon .txtChange > [data-txt].txtShow { -webkit-animation: fadeIn 1.5s forwards cubic-bezier(0.7, 0, 0.3, 1); animation: fadeIn 1.5s forwards cubic-bezier(0.7, 0, 0.3, 1); } .component .Tcon .pageChange a.movePrev { position: absolute; bottom: 100%; width: 36px; height: 36px; line-height: 36px; text-align: center; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); margin: 0; color: #fff; background-color: transparent; font-size: 24px; opacity: 0.6; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; } .component .Tcon .pageChange a.movePrev:hover { opacity: 1; } .component .Tcon .pageChange a.moveNext { position: absolute; top: 100%; width: 36px; height: 36px; line-height: 36px; text-align: center; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); margin: 0; color: #fff; background-color: transparent; font-size: 24px; opacity: 0.6; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; } .component .Tcon .pageChange a.moveNext:hover { opacity: 1; } /*.component .Tcon .pageChange {*/ /* position: absolute;*/ /* width: max-content;*/ /* bottom: 0;*/ /* left: 0;*/ /* right: 0;*/ /* margin: auto;*/ /* display: flex;*/ /* justify-content: center;*/ /* align-items: center;*/ /*}*/ /*.component .Tcon .pageChange > li {*/ /* background-color: #fff;*/ /* display: inline-block;*/ /* float: left;*/ /* width: 0.3rem;*/ /* height: 0.1rem;*/ /* line-height: 0.1rem;*/ /* margin: 0.2rem 0.2rem;*/ /* transition: all 0.3s ease-out;*/ /* -webkit-transition: all 0.3s ease-out;*/ /* -moz-transition: all 0.3s ease-out;*/ /* -o-transition: all 0.3s ease-out;*/ /* -ms-transition: all 0.3s ease-out;*/ /*}*/ /*.component .Tcon .pageChange > li.on {*/ /* background-color: #000;*/ /*}*/ .component-small { width: 650px; height: 290px; } .component-small > ul { width: 450px; } .component-fullwidth { width: 100%; height: 100%; margin-bottom: 0; background: transparent; } .component-fullwidth > ul { overflow: hidden; } .component-fullwidth > ul > li { overflow: hidden; } .component-fullwidth > ul > li > img { min-width: 100%; max-width: none; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .component-transparent { width: 900px; height: 500px; } .component-transparent > ul { width: 112px; } .webGL-slider { position: relative; display: flex; align-items: center; width: 100%; height: 100%; margin: 0 auto; z-index: 5; } .webGL-slider > img { width: 100%; max-width: 100%; position: relative; top: 0; left: 0; z-index: 0; opacity: 0; } .webGL-slider canvas { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 2; transform-origin: 50% 50%; } .webGL-slider .pagination { position: absolute; top: 50%; transform: translateY(-50%); right: 5vw; z-index: 6; } .webGL-slider .pagination:after { content: ""; position: absolute; top: 10px; left: 45px; width: 2px; height: calc(100% - 20px); background-color: #ffffff; } .webGL-slider .pagination > [data-slide] { display: block; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; width: 16px; height: 16px; background-color: transparent; text-align: center; color: rgba(255, 255, 255, 0.5); font-size: 16px; border-radius: 100%; padding: 0; cursor: pointer; position: relative; opacity: 1; transition: opacity 0.2s ease-in-out; outline: none; padding-bottom: 80px; } .webGL-slider .pagination > [data-slide] > span { position: absolute; top: 0; height: 2px; width: 15px; background-color: rgba(255, 255, 255, 0.3); left: 30px; } .webGL-slider .pagination > [data-slide] > span:nth-of-type(1) { width: 25px; top: 10px; left: 20px; } .webGL-slider .pagination > [data-slide] > span:nth-of-type(2) { top: 18px; } .webGL-slider .pagination > [data-slide] > span:nth-of-type(3) { top: 26px; } .webGL-slider .pagination > [data-slide] > span:nth-of-type(4) { top: 34px; } .webGL-slider .pagination > [data-slide] > span:nth-of-type(5) { top: 42px; } .webGL-slider .pagination > [data-slide] > span:nth-of-type(6) { top: 50px; width: 20px; left: 25px; } .webGL-slider .pagination > [data-slide] > span:nth-of-type(7) { top: 58px; } .webGL-slider .pagination > [data-slide] > span:nth-of-type(8) { top: 66px; } .webGL-slider .pagination > [data-slide] > span:nth-of-type(9) { top: 74px; } .webGL-slider .pagination > [data-slide] > span:nth-of-type(10) { top: 82px; } .webGL-slider .pagination > [data-slide].lat { padding-bottom: 22px; } .webGL-slider .pagination > [data-slide].lat > span { display: none; } .webGL-slider .pagination > [data-slide].lat > span:nth-of-type(1) { display: inline-block; width: 25px; top: 10px; left: 20px; } .webGL-slider .pagination > [data-slide].lat2 > span:after{ content: "";position: absolute; width: 100%;height: 100%;background-color: #fff; top: 0;left: 0; } .webGL-slider .pagination > [data-slide]:nth-of-type(2).go { color: #ffffff; } .webGL-slider .pagination > [data-slide]:nth-of-type(2).go > span { background-color: #ffffff; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; } .webGL-slider .pagination > [data-slide]:nth-of-type(2).go > span:nth-of-type(1) { transition-delay: 0s; } .webGL-slider .pagination > [data-slide]:nth-of-type(2).go > span:nth-of-type(2) { transition-delay: 0.4s; } .webGL-slider .pagination > [data-slide]:nth-of-type(2).go > span:nth-of-type(3) { transition-delay: 0.8s; } .webGL-slider .pagination > [data-slide]:nth-of-type(2).go > span:nth-of-type(4) { transition-delay: 1.2s; } .webGL-slider .pagination > [data-slide]:nth-of-type(2).go > span:nth-of-type(5) { transition-delay: 1.6s; } .webGL-slider .pagination > [data-slide]:nth-of-type(2).go > span:nth-of-type(6) { transition-delay: 2.0s; } .webGL-slider .pagination > [data-slide]:nth-of-type(2).go > span:nth-of-type(7) { transition-delay: 2.4s; } .webGL-slider .pagination > [data-slide]:nth-of-type(2).go > span:nth-of-type(8) { transition-delay: 2.8s; } .webGL-slider .pagination > [data-slide]:nth-of-type(2).go > span:nth-of-type(9) { transition-delay: 3.2s; } .webGL-slider .pagination > [data-slide]:nth-of-type(2).go > span:nth-of-type(10) { transition-delay: 3.6s; } .webGL-slider .pagination > [data-slide].on { color: #ffffff; } .webGL-slider .pagination > [data-slide].on > span { background-color: #ffffff; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; } .webGL-slider .pagination > [data-slide].on > span:nth-of-type(1) { transition-delay: 0s; } .webGL-slider .pagination > [data-slide].on > span:nth-of-type(2) { transition-delay: 0.4s; } .webGL-slider .pagination > [data-slide].on > span:nth-of-type(3) { transition-delay: 0.8s; } .webGL-slider .pagination > [data-slide].on > span:nth-of-type(4) { transition-delay: 1.2s; } .webGL-slider .pagination > [data-slide].on > span:nth-of-type(5) { transition-delay: 1.6s; } .webGL-slider .pagination > [data-slide].on > span:nth-of-type(6) { transition-delay: 2.0s; } .webGL-slider .pagination > [data-slide].on > span:nth-of-type(7) { transition-delay: 2.4s; } .webGL-slider .pagination > [data-slide].on > span:nth-of-type(8) { transition-delay: 2.8s; } .webGL-slider .pagination > [data-slide].on > span:nth-of-type(9) { transition-delay: 3.2s; } .webGL-slider .pagination > [data-slide].on > span:nth-of-type(10) { transition-delay: 3.6s; } .webGL-slider a.move-prev { position: absolute; bottom: 100%; width: 36px; height: 36px; line-height: 36px; text-align: center; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); margin: 0; color: #fff; background-color: transparent; font-size: 24px; opacity: 0.6; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; } .webGL-slider a.move-prev:hover { opacity: 1; } .webGL-slider a.move-next { position: absolute; top: 100%; width: 36px; height: 36px; line-height: 36px; text-align: center; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); margin: 0; color: #fff; background-color: transparent; font-size: 24px; opacity: 0.6; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; } .webGL-slider a.move-next:hover { opacity: 1; } /*寮圭獥*/ .dialog { position: fixed; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; pointer-events: none; visibility: hidden; width: 100%; height: 100%; top: 0; left: 0; z-index: 1000; } .dialog .dialog_mask { width: 100%; height: 100%; top: 0; left: 0; position: absolute; z-index: 1001; background: rgba(55, 58, 71, 0.6); opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; -webkit-backface-visibility: hidden; } .dialog .dialog_content { width: 50%; max-width: 560px; min-width: 290px; background: #fff; padding: 4em; text-align: center; position: relative; z-index: 1005; opacity: 0; } .dialog.dialog--open, .dialog.dialog--close { visibility: visible; } .dialog.dialog--open .dialog_mask, .dialog.dialog--close .dialog_mask { opacity: 1; pointer-events: auto; } .dialog.dialog--open .dialog_content, .dialog.dialog--close .dialog_content { opacity: 1; pointer-events: auto; } .dialog.dialog--close .dialog_mask { opacity: 0; } .fullMenu { position: fixed; z-index: 100; display: flex; justify-content: center; align-items: center; min-height: 100vh; width: 100%; top: 0; left: 0; margin: 0 auto; pointer-events: none; } .fullMenu .menu-box { width: 100vw; height: 90vh; display: flex; justify-content: center; align-items: center; position: fixed; top: 10vh; left: 0; /*pointer-events: none;*/ z-index: 100; } .fullMenu .menu-box .menu-item { display: none; } .fullMenu .menu-box .menu-item .menu-list { color: #000; font-family: word; font-size: 24px; opacity: 1; display: block; margin: 0.25em 0; pointer-events: auto; } .menu-list a{ color: #fff; display: block; line-height: 2; } .menu-list > a >i{ font-size: 24px; } .menu-list > a{ font-size: 24px; } .menu-list > div{ display: none; } .menu-list > div >a{ font-size: 18px; line-height: 2; } .fullMenu .menu-box .menu-item.is-opened { display: block; text-align: center; width: 100%; } .fullMenu .shape-overlays { width: 100vw; height: 100vh; pointer-events: none; position: fixed; top: 0; left: 0; } .fullMenu .shape-overlays .shape-overlays__path:nth-of-type(1) { fill: #000; } .fullMenu .shape-overlays .shape-overlays__path:nth-of-type(2) { fill: #1d1d1f; } .fullMenu .shape-overlays .shape-overlays__path:nth-of-type(3) { fill: #00653b; } /*animate琛ュ厖鍔ㄧ敾*/ @keyframes fadeInLeftSmall { from { opacity: 0; transform: translate3d(-10px, 0, 0); } to { opacity: 1; transform: none; } } .fadeInLeftSmall { animation-name: fadeInLeftSmall; } @keyframes fadeInRightSmall { from { opacity: 0; transform: translate3d(10px, 0, 0); } to { opacity: 1; transform: none; } } .fadeInRightSmall { animation-name: fadeInRightSmall; } @keyframes fadeInDownSmall { from { opacity: 0; transform: translate3d(0%, -10px, 0); } to { opacity: 1; transform: none; } } .fadeInDownSmall { animation-name: fadeInDownSmall; } @keyframes fadeOutDownSmall { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(0%, 10px, 0); } } .fadeOutDownSmall { animation-name: fadeOutDownSmall; } @keyframes fadeInUpSmall { from { opacity: 0; transform: translate3d(0%, 10px, 0); } to { opacity: 1; transform: none; } } .fadeInUpSmall { animation-name: fadeInUpSmall; } @keyframes scaleIn { 0% { opacity: 0; transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); } } .scaleIn { animation-name: scaleIn; } .fadeIn { animation-delay: 0.3s; animation-timing-function: linear; } .f-160 { font-size: 160px; } .f-60 { font-size: 60px; } .f-50 { font-size: 50px; } .f-48 { font-size: 48px; } .f-46 { font-size: 46px; } .f-44 { font-size: 44px; } .f-42 { font-size: 42px; } .f-40 { font-size: 40px; } .f-38 { font-size: 38px; } .f-36 { font-size: 36px; } .f-34 { font-size: 34px; } .f-32 { font-size: 32px; } .f-30 { font-size: 30px; } .f-28 { font-size: 28px; } .f-26 { font-size: 26px; } .f-24 { font-size: 24px; } .f-22 { font-size: 22px; } .f-20 { font-size: 20px; } .f-18 { font-size: 18px; } .f-16 { font-size: 16px; } .f-14 { font-size: 14px; } .f-12 { font-size: 12px; } .f-light { font-weight: lighter; } .f-bold { font-weight: bold; } .f-500 { font-weight: 500; } .f-i { font-style: italic; } .f-left { text-align: left; } .f-center { text-align: center; } .f-right { text-align: right; } .up-word { text-transform: uppercase; } .v-show { visibility: visible; } .v-hide { visibility: hidden; } .pr { position: relative; } .pa { position: absolute; } .back-cover { background-size: cover; } .back-contain { background-size: contain; } .wid-10 { width: 10%; } .wid-20 { width: 20%; } .wid-30 { width: 30%; } .wid-40 { width: 40%; } .wid-50 { width: 50%; } .wid-60 { width: 60%; } .wid-70 { width: 70%; } .wid-80 { width: 80%; } .wid-90 { width: 90%; } .wid-100 { width: 100%; } .op-0 { opacity: 0; } .op-1 { opacity: 0.1; } .op-2 { opacity: 0.2; } .op-3 { opacity: 0.3; } .op-4 { opacity: 0.4; } .op-5 { opacity: 0.5; } .op-6 { opacity: 0.6; } .op-7 { opacity: 0.7; } .op-8 { opacity: 0.8; } .op-9 { opacity: 0.9; } .op-10 { opacity: 1; } .layout-middle { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .layout-v-middle { position: absolute; top: 0; bottom: 0; margin: auto; } .layout-h-middle { position: absolute; left: 0; right: 0; margin: auto; } .layout-tab { display: table; } .layout-tab > .cell { display: table-cell; vertical-align: middle; } .mt-1 { margin-top: 1px; } .mt-3 { margin-top: 3px; } .mt-4 { margin-top: 4px; } .mt-5 { margin-top: 5px; } .mt-6 { margin-top: 6px; } .mt-7 { margin-top: 7px; } .mt-8 { margin-top: 8px; } .mt-9 { margin-top: 9px; } .mt-10 { margin-top: 10px; } .mt-12 { margin-top: 12px; } .mt-14 { margin-top: 14px; } .mt-16 { margin-top: 16px; } .mt-18 { margin-top: 18px; } .mt-20 { margin-top: 20px; } .mt-22 { margin-top: 22px; } .mt-24 { margin-top: 24px; } .mt-26 { margin-top: 26px; } .mt-28 { margin-top: 28px; } .mt-30 { margin-top: 30px; } .mt-32 { margin-top: 32px; } .mt-34 { margin-top: 34px; } .mt-36 { margin-top: 36px; } .mt-38 { margin-top: 38px; } .mt-40 { margin-top: 40px; } .mt-42 { margin-top: 42px; } .mt-44 { margin-top: 44px; } .mt-46 { margin-top: 46px; } .mt-48 { margin-top: 48px; } .mt-50 { margin-top: 50px; } .mt-60 { margin-top: 60px; } .mt-70 { margin-top: 70px; } .mt-80 { margin-top: 80px; } .mt-90 { margin-top: 90px; } .mt-100 { margin-top: 100px; } .mb-1 { margin-bottom: 1px; } .mb-3 { margin-bottom: 3px; } .mb-4 { margin-bottom: 4px; } .mb-5 { margin-bottom: 5px; } .mb-6 { margin-bottom: 6px; } .mb-7 { margin-bottom: 7px; } .mb-8 { margin-bottom: 8px; } .mb-9 { margin-bottom: 9px; } .mb-10 { margin-bottom: 10px; } .mb-12 { margin-bottom: 12px; } .mb-14 { margin-bottom: 14px; } .mb-16 { margin-bottom: 16px; } .mb-18 { margin-bottom: 18px; } .mb-20 { margin-bottom: 20px; } .mb-22 { margin-bottom: 22px; } .mb-24 { margin-bottom: 24px; } .mb-26 { margin-bottom: 26px; } .mb-28 { margin-bottom: 28px; } .mb-30 { margin-bottom: 30px; } .mb-32 { margin-bottom: 32px; } .mb-34 { margin-bottom: 34px; } .mb-36 { margin-bottom: 36px; } .mb-38 { margin-bottom: 38px; } .mb-40 { margin-bottom: 40px; } .mb-42 { margin-bottom: 42px; } .mb-44 { margin-bottom: 44px; } .mb-46 { margin-bottom: 46px; } .mb-48 { margin-bottom: 48px; } .mb-50 { margin-bottom: 50px; } .mb-60 { margin-bottom: 60px; } .mb-70 { margin-bottom: 70px; } .mb-80 { margin-bottom: 80px; } .mb-90 { margin-bottom: 90px; } .mb-100 { margin-bottom: 100px; } .ml-1 { margin-left: 1px; } .ml-3 { margin-left: 3px; } .ml-4 { margin-left: 4px; } .ml-5 { margin-left: 5px; } .ml-6 { margin-left: 6px; } .ml-7 { margin-left: 7px; } .ml-8 { margin-left: 8px; } .ml-9 { margin-left: 9px; } .ml-10 { margin-left: 10px; } .ml-12 { margin-left: 12px; } .ml-14 { margin-left: 14px; } .ml-16 { margin-left: 16px; } .ml-18 { margin-left: 18px; } .ml-20 { margin-left: 20px; } .ml-22 { margin-left: 22px; } .ml-24 { margin-left: 24px; } .ml-26 { margin-left: 26px; } .ml-28 { margin-left: 28px; } .ml-30 { margin-left: 30px; } .ml-32 { margin-left: 32px; } .ml-34 { margin-left: 34px; } .ml-36 { margin-left: 36px; } .ml-38 { margin-left: 38px; } .ml-40 { margin-left: 40px; } .ml-42 { margin-left: 42px; } .ml-44 { margin-left: 44px; } .ml-46 { margin-left: 46px; } .ml-48 { margin-left: 48px; } .ml-50 { margin-left: 50px; } .ml-60 { margin-left: 60px; } .ml-70 { margin-left: 70px; } .ml-80 { margin-left: 80px; } .ml-90 { margin-left: 90px; } .ml-100 { margin-left: 100px; } .mr-1 { margin-right: 1px; } .mr-3 { margin-right: 3px; } .mr-4 { margin-right: 4px; } .mr-5 { margin-right: 5px; } .mr-6 { margin-right: 6px; } .mr-7 { margin-right: 7px; } .mr-8 { margin-right: 8px; } .mr-9 { margin-right: 9px; } .mr-10 { margin-right: 10px; } .mr-12 { margin-right: 12px; } .mr-14 { margin-right: 14px; } .mr-16 { margin-right: 16px; } .mr-18 { margin-right: 18px; } .mr-20 { margin-right: 20px; } .mr-22 { margin-right: 22px; } .mr-24 { margin-right: 24px; } .mr-26 { margin-right: 26px; } .mr-28 { margin-right: 28px; } .mr-30 { margin-right: 30px; } .mr-32 { margin-right: 32px; } .mr-34 { margin-right: 34px; } .mr-36 { margin-right: 36px; } .mr-38 { margin-right: 38px; } .mr-40 { margin-right: 40px; } .mr-42 { margin-right: 42px; } .mr-44 { margin-right: 44px; } .mr-46 { margin-right: 46px; } .mr-48 { margin-right: 48px; } .mr-50 { margin-right: 50px; } .mr-60 { margin-right: 60px; } .mr-70 { margin-right: 70px; } .mr-80 { margin-right: 80px; } .mr-90 { margin-right: 90px; } .mr-100 { margin-right: 100px; } .pt-1 { padding-top: 1px; } .pt-3 { padding-top: 3px; } .pt-4 { padding-top: 4px; } .pt-5 { padding-top: 5px; } .pt-6 { padding-top: 6px; } .pt-7 { padding-top: 7px; } .pt-8 { padding-top: 8px; } .pt-9 { padding-top: 9px; } .pt-10 { padding-top: 10px; } .pt-12 { padding-top: 12px; } .pt-14 { padding-top: 14px; } .pt-16 { padding-top: 16px; } .pt-18 { padding-top: 18px; } .pt-20 { padding-top: 20px; } .pt-22 { padding-top: 22px; } .pt-24 { padding-top: 24px; } .pt-26 { padding-top: 26px; } .pt-28 { padding-top: 28px; } .pt-30 { padding-top: 30px; } .pt-32 { padding-top: 32px; } .pt-34 { padding-top: 34px; } .pt-36 { padding-top: 36px; } .pt-38 { padding-top: 38px; } .pt-40 { padding-top: 40px; } .pt-42 { padding-top: 42px; } .pt-44 { padding-top: 44px; } .pt-46 { padding-top: 46px; } .pt-48 { padding-top: 48px; } .pt-50 { padding-top: 50px; } .pt-60 { padding-top: 60px; } .pt-70 { padding-top: 70px; } .pt-80 { padding-top: 80px; } .pt-90 { padding-top: 90px; } .pt-100 { padding-top: 100px; } .pb-1 { padding-bottom: 1px; } .pb-3 { padding-bottom: 3px; } .pb-4 { padding-bottom: 4px; } .pb-5 { padding-bottom: 5px; } .pb-6 { padding-bottom: 6px; } .pb-7 { padding-bottom: 7px; } .pb-8 { padding-bottom: 8px; } .pb-9 { padding-bottom: 9px; } .pb-10 { padding-bottom: 10px; } .pb-12 { padding-bottom: 12px; } .pb-14 { padding-bottom: 14px; } .pb-16 { padding-bottom: 16px; } .pb-18 { padding-bottom: 18px; } .pb-20 { padding-bottom: 20px; } .pb-22 { padding-bottom: 22px; } .pb-24 { padding-bottom: 24px; } .pb-26 { padding-bottom: 26px; } .pb-28 { padding-bottom: 28px; } .pb-30 { padding-bottom: 30px; } .pb-32 { padding-bottom: 32px; } .pb-34 { padding-bottom: 34px; } .pb-36 { padding-bottom: 36px; } .pb-38 { padding-bottom: 38px; } .pb-40 { padding-bottom: 40px; } .pb-42 { padding-bottom: 42px; } .pb-44 { padding-bottom: 44px; } .pb-46 { padding-bottom: 46px; } .pb-48 { padding-bottom: 48px; } .pb-50 { padding-bottom: 50px; } .pb-60 { padding-bottom: 60px; } .pb-70 { padding-bottom: 70px; } .pb-80 { padding-bottom: 80px; } .pb-90 { padding-bottom: 90px; } .pb-100 { padding-bottom: 100px; } .pl-1 { padding-left: 1px; } .pl-3 { padding-left: 3px; } .pl-4 { padding-left: 4px; } .pl-5 { padding-left: 5px; } .pl-6 { padding-left: 6px; } .pl-7 { padding-left: 7px; } .pl-8 { padding-left: 8px; } .pl-9 { padding-left: 9px; } .pl-10 { padding-left: 10px; } .pl-12 { padding-left: 12px; } .pl-14 { padding-left: 14px; } .pl-16 { padding-left: 16px; } .pl-18 { padding-left: 18px; } .pl-20 { padding-left: 20px; } .pl-22 { padding-left: 22px; } .pl-24 { padding-left: 24px; } .pl-26 { padding-left: 26px; } .pl-28 { padding-left: 28px; } .pl-30 { padding-left: 30px; } .pl-32 { padding-left: 32px; } .pl-34 { padding-left: 34px; } .pl-36 { padding-left: 36px; } .pl-38 { padding-left: 38px; } .pl-40 { padding-left: 40px; } .pl-42 { padding-left: 42px; } .pl-44 { padding-left: 44px; } .pl-46 { padding-left: 46px; } .pl-48 { padding-left: 48px; } .pl-50 { padding-left: 50px; } .pl-60 { padding-left: 60px; } .pl-70 { padding-left: 70px; } .pl-80 { padding-left: 80px; } .pl-90 { padding-left: 90px; } .pl-100 { padding-left: 100px; } .pr-1 { padding-right: 1px; } .pr-3 { padding-right: 3px; } .pr-4 { padding-right: 4px; } .pr-5 { padding-right: 5px; } .pr-6 { padding-right: 6px; } .pr-7 { padding-right: 7px; } .pr-8 { padding-right: 8px; } .pr-9 { padding-right: 9px; } .pr-10 { padding-right: 10px; } .pr-12 { padding-right: 12px; } .pr-14 { padding-right: 14px; } .pr-16 { padding-right: 16px; } .pr-18 { padding-right: 18px; } .pr-20 { padding-right: 20px; } .pr-22 { padding-right: 22px; } .pr-24 { padding-right: 24px; } .pr-26 { padding-right: 26px; } .pr-28 { padding-right: 28px; } .pr-30 { padding-right: 30px; } .pr-32 { padding-right: 32px; } .pr-34 { padding-right: 34px; } .pr-36 { padding-right: 36px; } .pr-38 { padding-right: 38px; } .pr-40 { padding-right: 40px; } .pr-42 { padding-right: 42px; } .pr-44 { padding-right: 44px; } .pr-46 { padding-right: 46px; } .pr-48 { padding-right: 48px; } .pr-50 { padding-right: 50px; } .pr-60 { padding-right: 60px; } .pr-70 { padding-right: 70px; } .pr-80 { padding-right: 80px; } .pr-90 { padding-right: 90px; } .pr-100 { padding-right: 100px; } /* input:range鏍峰紡 */ input[type=range] { -webkit-appearance: none; width: 300px; background: -webkit-linear-gradient(#059cfa, #059cfa) no-repeat; background-size: 0% 100%; border-radius: 10px; /*杩欎釜灞炴€ц缃娇濉厖杩涘害鏉℃椂鐨勫浘褰负鍦嗚*/ } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; } input[type=range]::-webkit-slider-runnable-track { height: 2px; border-radius: 0px; /*灏嗚建閬撹涓哄渾瑙掔殑*/ box-shadow: 0 1px 1px #def3f8, inset 0 12px 12px #0d1112; /*杞ㄩ亾鍐呯疆闃村奖鏁堟灉*/ } input[type=range]:focus { outline: none; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 25px; width: 25px; margin-top: -12px; /*浣挎粦鍧楄秴鍑鸿建閬撻儴鍒嗙殑鍋忕Щ閲忕浉绛?/ background: #69adff; border-radius: 50%; /*澶栬璁剧疆涓哄渾褰?/ border: solid 0.125em rgba(205, 224, 230, 0.5); /*璁剧疆杈规*/ box-shadow: 0 .125em .125em #3b4547; /*娣诲姞搴曢儴闃村奖*/ } input[type=range]::-moz-range-progress { background: linear-gradient(to right, #059cfa, #ffffff 100%, #ffffff); height: 13px; border-radius: 10px; } input[type=range]::-ms-track { height: 25px; border-radius: 10px; box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; border-color: transparent; /*鍘婚櫎鍘熸湁杈规*/ color: transparent; /*鍘婚櫎杞ㄩ亾鍐呯殑绔栫嚎*/ } input[type=range]::-ms-thumb { border: solid 0.125em rgba(205, 224, 230, 0.5); height: 25px; width: 25px; border-radius: 50%; background: #ffffff; margin-top: -5px; box-shadow: 0 .125em .125em #3b4547; } input[type=range]::-ms-fill-lower { /*杩涘害鏉″凡濉厖鐨勯儴鍒?/ height: 22px; border-radius: 10px; background: linear-gradient(to right, #059cfa, #ffffff 100%, #ffffff); } input[type=range]::-ms-fill-upper { /*杩涘害鏉℃湭濉厖鐨勯儴鍒?/ height: 22px; border-radius: 10px; background: #ffffff; } input[type=range]:focus::-ms-fill-lower { background: linear-gradient(to right, #059cfa, #ffffff 100%, #ffffff); } input[type=range]:focus::-ms-fill-upper { background: #ffffff; } /*鍩虹缁撴瀯*/ #bloc { position: relative; min-height: 100%; } #bloc #loader { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 10000; background-color: #34495e; } #bloc #loader #loading { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } header { position: fixed; width: 100%; height: 1.6rem; line-height: 1.6rem; top: 0; z-index: 1005; background-color: transparent; pointer-events: none; } header .pul_logo { position: absolute; height: 54px; left: 5vw; top: 4vh; pointer-events: auto; display: block; transition: all .5s ease; } .pul_logo img{ height: 100%; display: block; } header .nav_con .pul_logo{ top: 23px; left: 3vw; pointer-events: auto; } header .nav { position: absolute; top: 0; height: 100%; right: 5vw; transition: all .5s ease; } .full-menu { width: 64px; height: 64px; display: block; cursor: pointer; position: absolute; top: 4vh; right: 0; z-index: 110; border-radius: 50%; background-color: #fff; pointer-events: auto; color: #00653b; text-align: center; line-height: 64px; font-size: 32px; text-indent: 2px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } header .nav .full-menu:after { width: 64px; height: 64px; box-sizing: border-box; content: ''; display: block; position: absolute; top: 0; left: 0; pointer-events: none; border: 4px solid #a2bccc; border-radius: 50%; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-name: menu_circle; animation-name: menu_circle; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @keyframes menu_circle { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 80% { -webkit-transform: scale(1.6); transform: scale(1.6); } 100% { opacity: 0; -webkit-transform: scale(1.6); transform: scale(1.6); } } #bloc footer #toTop { position: fixed; right: 0; bottom: 0; width: 0.5rem; height: 0.5rem; border-radius: 50%; line-height: 0.5rem; text-align: center; background-color: #00653b; } #bloc footer .f-main { background-repeat: no-repeat; background-size: cover; background-position: center; } #bloc footer .f-main .max-wid { padding: 1rem 0 0.5rem 0; } #bloc footer .f-main .max-wid > ul { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; } #bloc footer .f-main .max-wid > ul > li span { display: inline-block; } #bloc footer .f-main .max-wid > ul > li h3 { color: #cbcdd2; } #bloc footer .f-main .max-wid > ul > li p { color: #a5aab3; } #bloc footer .f-main .max-wid > ul > li i { vertical-align: sub; text-align: center; color: #a5aab3; } #bloc footer .web-msg { padding: 0.3rem 0; background-color: #3c434c; overflow: hidden; } #bloc footer .web-msg span { color: #818690; } #bloc footer .web-msg span a{margin: 0 0.05rem;} #medio_dialog { z-index: 2000; } #medio_dialog .dialog_content { width: auto; max-width: inherit; min-width: inherit; padding: 2em; } #medio_dialog .dialog_content video { width: 70vw; object-fit: cover; } #medio_dialog .dialog_content [data-dialog-close] { position: absolute; width: 0.38rem; height: 0.38rem; border-radius: 50%; line-height: 0.38rem; text-align: center; right: 0rem; top: 0rem; } /*椤甸潰缁撴瀯*/ img.classGo, .pic.classGo { transition: all 1.2s ease-out; -webkit-transition: all 1.2s ease-out; -moz-transition: all 1.2s ease-out; -o-transition: all 1.2s ease-out; -ms-transition: all 1.2s ease-out; transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); filter: blur(30px); visibility: visible!important; } img.classGo.go, .pic.classGo.go { opacity: 1; transform: none; -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; filter: blur(0); } #index .row { padding: 0.8rem 0; } #index .row .title { display: block; } #index .row .title > small { display: inline-block; } #top { width: 100vw; height: 100vh; overflow: hidden; position: relative; } #top .indexBanner { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 5; } #top .indexBanner .webGL-slider { position: absolute; } .bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 3; background: url(../img/banner-bg.png) center repeat rgba(0, 0, 0, 0.15); } .dis_bg { position: absolute; width: 100%; top: 0; left: 0; z-index: 3; pointer-events: none; } .dis_bg img{ width: 100%; display: block; } #water { position: absolute; width: 23vw; top: 0; left: 0; margin: 0; height: 100%; z-index: 4; transform: none; -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; opacity: 0.8; } #top .indexBanner .webGL-slider .txt-item { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 5; } .indexBanner .webGL-slider .txt-item > li { position: absolute; top: 50%; left: 10vw; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); } .indexBanner .webGL-slider .txt-item > li > a { position: absolute; display: inline-block; top: 30vh; left: 0; } .indexBanner .webGL-slider .txt-item > li > a > i { font-size: 32px; opacity: 0; vertical-align: middle; display: inline-block; animation: fadeInLeftSmall 1.5s ease forwards; animation-delay: 1s; } #index #top .indexBanner #component #water { position: absolute; width: 20vw; top: 0; left: 0; margin: 0; height: 100%; z-index: 11; transform: none; -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; opacity: 0.8; } #index #top .indexBanner #component .Tcon .txtChange { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 5; } #index #top .indexBanner #component .Tcon .txtChange > li { position: absolute; top: 50%; left: 10vw; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); } #index #top .indexBanner #component .Tcon .txtChange > li > a { position: absolute; display: inline-block; top: 30vh; left: 0; } #index #top .indexBanner #component .Tcon .txtChange > li > a > i { font-size: 32px; opacity: 0; vertical-align: middle; display: inline-block; animation: fadeInLeftSmall 1.5s ease forwards; animation-delay: 1s; } #index #top .indexBanner #component .Tcon .pageChange { position: absolute; top: 50%; transform: translateY(-50%); right: 5vw; z-index: 6; } #index #top .indexBanner #component .Tcon .pageChange > [data-change].on { opacity: 1; } #index #top .indexBanner #component .Tcon .pageChange:after { content: ""; position: absolute; top: 10px; left: 45px; width: 2px; height: calc(100% - 20px); background-color: #ffffff; } #index #top .indexBanner #component .Tcon .pageChange > [data-change] { display: block; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; width: 16px; height: 16px; background-color: transparent; text-align: center; color: rgba(255, 255, 255, 0.5); font-size: 16px; border-radius: 100%; padding: 0; cursor: pointer; position: relative; opacity: 1; transition: opacity 0.2s ease-in-out; outline: none; padding-bottom: 80px; } #index #top .indexBanner #component .Tcon .pageChange > [data-change] > span { position: absolute; top: 0; height: 2px; width: 15px; background-color: rgba(255, 255, 255, 0.3); left: 30px; } #index #top .indexBanner #component .Tcon .pageChange > [data-change] > span:nth-of-type(1) { width: 25px; top: 10px; left: 20px; } #index #top .indexBanner #component .Tcon .pageChange > [data-change] > span:nth-of-type(2) { top: 18px; } #index #top .indexBanner #component .Tcon .pageChange > [data-change] > span:nth-of-type(3) { top: 26px; } #index #top .indexBanner #component .Tcon .pageChange > [data-change] > span:nth-of-type(4) { top: 34px; } #index #top .indexBanner #component .Tcon .pageChange > [data-change] > span:nth-of-type(5) { top: 42px; } #index #top .indexBanner #component .Tcon .pageChange > [data-change] > span:nth-of-type(6) { top: 50px; width: 20px; left: 25px; } #index #top .indexBanner #component .Tcon .pageChange > [data-change] > span:nth-of-type(7) { top: 58px; } #index #top .indexBanner #component .Tcon .pageChange > [data-change] > span:nth-of-type(8) { top: 66px; } #index #top .indexBanner #component .Tcon .pageChange > [data-change] > span:nth-of-type(9) { top: 74px; } #index #top .indexBanner #component .Tcon .pageChange > [data-change] > span:nth-of-type(10) { top: 82px; } #index #top .indexBanner #component .Tcon .pageChange > [data-change].lat { padding-bottom: 22px; } #index #top .indexBanner #component .Tcon .pageChange > [data-change].lat > span { display: none; } #index #top .indexBanner #component .Tcon .pageChange > [data-change].lat > span:nth-of-type(1) { display: inline-block; width: 25px; top: 10px; left: 20px; } #index #top .indexBanner #component .Tcon .pageChange > [data-change].lat2 > span:after{ content: "";position: absolute; width: 100%;height: 100%;background-color: #fff; top: 0;left: 0; } #index #top .indexBanner #component .Tcon .pageChange > [data-change]:nth-of-type(2).go { color: #ffffff; } #index #top .indexBanner #component .Tcon .pageChange > [data-change]:nth-of-type(2).go > span { background-color: #ffffff; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; } #index #top .indexBanner #component .Tcon .pageChange > [data-change]:nth-of-type(2).go > span:nth-of-type(1) { transition-delay: 0s; } #index #top .indexBanner #component .Tcon .pageChange > [data-change]:nth-of-type(2).go > span:nth-of-type(2) { transition-delay: 0.4s; } #index #top .indexBanner #component .Tcon .pageChange > [data-change]:nth-of-type(2).go > span:nth-of-type(3) { transition-delay: 0.8s; } #index #top .indexBanner #component .Tcon .pageChange > [data-change]:nth-of-type(2).go > span:nth-of-type(4) { transition-delay: 1.2s; } #index #top .indexBanner #component .Tcon .pageChange > [data-change]:nth-of-type(2).go > span:nth-of-type(5) { transition-delay: 1.6s; } #index #top .indexBanner #component .Tcon .pageChange > [data-change]:nth-of-type(2).go > span:nth-of-type(6) { transition-delay: 2.0s; } #index #top .indexBanner #component .Tcon .pageChange > [data-change]:nth-of-type(2).go > span:nth-of-type(7) { transition-delay: 2.4s; } #index #top .indexBanner #component .Tcon .pageChange > [data-change]:nth-of-type(2).go > span:nth-of-type(8) { transition-delay: 2.8s; } #index #top .indexBanner #component .Tcon .pageChange > [data-change]:nth-of-type(2).go > span:nth-of-type(9) { transition-delay: 3.2s; } #index #top .indexBanner #component .Tcon .pageChange > [data-change]:nth-of-type(2).go > span:nth-of-type(10) { transition-delay: 3.6s; } #index #top .indexBanner #component .Tcon .pageChange > [data-change].on { color: #ffffff; } #index #top .indexBanner #component .Tcon .pageChange > [data-change].on > span { background-color: #ffffff; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; } #index #top .indexBanner #component .Tcon .pageChange > [data-change].on > span:nth-of-type(1) { transition-delay: 0s; } #index #top .indexBanner #component .Tcon .pageChange > [data-change].on > span:nth-of-type(2) { transition-delay: 0.4s; } #index #top .indexBanner #component .Tcon .pageChange > [data-change].on > span:nth-of-type(3) { transition-delay: 0.8s; } #index #top .indexBanner #component .Tcon .pageChange > [data-change].on > span:nth-of-type(4) { transition-delay: 1.2s; } #index #top .indexBanner #component .Tcon .pageChange > [data-change].on > span:nth-of-type(5) { transition-delay: 1.6s; } #index #top .indexBanner #component .Tcon .pageChange > [data-change].on > span:nth-of-type(6) { transition-delay: 2.0s; } #index #top .indexBanner #component .Tcon .pageChange > [data-change].on > span:nth-of-type(7) { transition-delay: 2.4s; } #index #top .indexBanner #component .Tcon .pageChange > [data-change].on > span:nth-of-type(8) { transition-delay: 2.8s; } #index #top .indexBanner #component .Tcon .pageChange > [data-change].on > span:nth-of-type(9) { transition-delay: 3.2s; } #index #top .indexBanner #component .Tcon .pageChange > [data-change].on > span:nth-of-type(10) { transition-delay: 3.6s; } .indexBanner .scr { position: absolute; z-index: 10; bottom: 4vh; right: 5vw; padding-top: 90px; cursor: pointer; } .indexBanner .scr > span { position: absolute; top: 0; left: 50%; text-align: center; width: 84px; height: 84px; line-height: 84px; display: block; letter-spacing: 7px; transform: translateX(-50%) rotate(90deg); -webkit-transform: translateX(-50%) rotate(90deg); -moz-transform: translateX(-50%) rotate(90deg); -o-transform: translateX(-50%) rotate(90deg); -ms-transform: translateX(-50%) rotate(90deg); } .indexBanner .scr #mouse { transform: scale(0.7); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); -ms-transform: scale(0.7); } .indexBanner .scr #mouse #mouse-move { animation: Tmouse 0.8s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate; } @keyframes Tmouse { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(8px); -moz-transform: translateY(8px); -ms-transform: translateY(8px); -o-transform: translateY(8px); transform: translateY(8px); } } #index #main .r1 { position: relative; } #index #main .r1 .r-main { position: relative; z-index: 10; } #index #main .r1 .r-main .wid-50 { margin-left: 50%; position: relative; z-index: 10; } #index #main .r1 .r-main .wid-50 .con { padding-left: 16%; padding-right: 10%; position: relative; } #index #main .r1 .r-main .wid-50 .con > a{ display: inline-block; height: 24px; line-height: 24px; float: right; margin-top: 16px; } #index #main .r1 .r-main .wid-50 .con > a > i{ display: inline-block; width: 24px; height: 24px; border-radius: 50%; line-height: 24px; background: linear-gradient(45deg, #79bd28 0%, #00653b 100%); font-size: 14px; color: #fff; text-indent: 6px; vertical-align: top; box-shadow: 0 2px 10px -2px rgba(0, 101, 59, 0.6) } #index #main .r1 .r-main .wid-50 .con .pic_child { position: absolute; width: 50%; right: 100%; bottom: 0; border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-left-radius: 30px; border-bottom-right-radius: 0px; overflow: hidden; box-shadow: 0 22px 68px -5px rgba(22, 56, 75, 0.36); } #index #main .r1 .r-main .wid-50 .con .pic_child > img { width: 100%; } #index #main .r1 .r-main .wid-50 .con .pic_child .layout-play { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; line-height: 69px; } #index #main .r1 .r-main .wid-50 .pic { position: relative; overflow: hidden; border-top-left-radius: 0px; border-top-right-radius: 30px; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; box-shadow: 0 22px 68px -5px rgba(22, 56, 75, 0.36); } #index #main .r1 .r-main .wid-50 .pic img { width: 100%; } #index #main .r1 .r-main .bg2 { z-index: 4; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-repeat: no-repeat; background-position-x: 0!important; background-size: 10%; } #index #main .r1 .r-main .more { position: absolute; padding-left: 16vw; z-index: 8; bottom: 0.4rem; } #index #main .r1 .r-main .more > a { letter-spacing: 8px; display: inline-block; height: 24px; line-height: 24px; } #index #main .r1 .r-main .more > a > i { display: inline-block; width: 24px; height: 24px; border-radius: 50%; line-height: 24px; line-height: 23px; background: linear-gradient(45deg, #79bd28 0%, #00653b 100%); font-size: 14px; color: #fff; text-align: center; text-indent: 6px; vertical-align: top; box-shadow: 0 2px 10px -2px rgba(0, 101, 59, 0.6); } #index #main .r1 .r-main .more:after { content: ""; position: absolute; height: 2px; width: 12vw; left: 0; top: 0; bottom: 0; margin: auto; background-color: #d7dee4; } #index #main .r1 .bg { z-index: 4; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-repeat: no-repeat; background-position: 0 50%; background-size: 60%; background-color: transparent; } #index #main .r2 { padding-bottom: 1rem; } #index .r2 .title{position: relative;} #index .r2 .title >a{ display: inline-block; height: 24px; line-height: 24px; position: absolute; right: 0;bottom: 14px; } #index .r2 .title >a > i{ display: inline-block; width: 24px; height: 24px; border-radius: 50%; line-height: 24px; background: linear-gradient(45deg, #79bd28 0%, #00653b 100%); font-size: 14px; color: #fff; text-indent: 6px; vertical-align: top; box-shadow: 0 2px 10px -2px rgba(0, 101, 59, 0.6) } #index #main .r2 .r-main .new-box { border-radius: 30px; background-color: #fff; position: relative; margin-top: 46px; box-shadow: 0 23px 90px -5px rgba(29, 56, 72, 0.17); } #index #main .r2 .r-main .new-box .new-list { position: relative; width: 100%; } #index #main .r2 .r-main .new-box .new-list .fl { position: absolute; left: 0; top: 0; height: 100%; border-top-left-radius: 30px; border-top-right-radius: 0px; border-bottom-left-radius: 30px; border-bottom-right-radius: 0px; overflow: hidden; } #index #main .r2 .r-main .new-box .new-list .fl .pic-list { position: absolute; width: 100%; height: 100%; opacity: 0; pointer-events: none; transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transition: opacity 0.5s ease-in-out, transform 1.6s ease-in-out; } #index #main .r2 .r-main .new-box .new-list .fl .pic-list .con { position: absolute; top: 0.4rem; width: 68%; left: 0.4rem; z-index: 5; } #index #main .r2 .r-main .new-box .new-list .fl .pic-list .con .date { display: inline-block; vertical-align: top; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; font-family: word; } #index #main .r2 .r-main .new-box .new-list .fl .pic-list .con .date > b { color: #fff; font-weight: 500; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; font-family: word; } #index #main .r2 .r-main .new-box .new-list .fl .pic-list .pic { background-size: cover; background-repeat: no-repeat; background-position: center; border-top-left-radius: 30px; border-top-right-radius: 0px; border-bottom-left-radius: 30px; border-bottom-right-radius: 0px; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; } #index #main .r2 .r-main .new-box .new-list .fl .pic-list.on { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); opacity: 1; pointer-events: auto; z-index: 2; } #index #main .r2 .r-main .new-box .new-list .fl .pic-list.moveIn { visibility: visible; opacity: 1; z-index: 6; animation: scaleIn 1s ease-in-out; } #index #main .r2 .r-main .new-box .new-list .fr { padding: 0.5rem 0.6rem; float: none; margin-left: 50%; border-top-left-radius: 0px; border-top-right-radius: 30px; border-bottom-left-radius: 0px; border-bottom-right-radius: 30px; } #index #main .r2 .r-main .new-box .new-list .fr > ul > li { height: 0.8rem; line-height: 0.8rem; padding-left: 8px; position: relative; border-bottom: 1px solid #eee; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; } #index #main .r2 .r-main .new-box .new-list .fr > ul > li span { display: inline-block; vertical-align: top; height: 0.8rem; line-height: 0.74rem; width: 110px; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; font-family: word; } #index #main .r2 .r-main .new-box .new-list .fr > ul > li span > b { color: #333; font-weight: 500; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; font-family: word; } #index #main .r2 .r-main .new-box .new-list .fr > ul > li a { height: 0.8rem; line-height: 0.8rem; vertical-align: top; display: inline-block; width: calc(100% - 120px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #000; font-weight: bold; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; } #index #main .r2 .r-main .new-box .new-list .fr > ul > li:last-of-type { border: none; } #index #main .r2 .r-main .new-box .new-list .fr > ul > li:after { content: ""; position: absolute; width: 0.6rem; height: 2px; background-color: #00653b; right: calc(100% + 0.2rem); top: 0; bottom: 0; margin: auto; opacity: 0; transform: translateX(10px); -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -o-transform: translateX(10px); -ms-transform: translateX(10px); transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; } #index #main .r2 .r-main .new-box .new-list .fr > ul > li:hover { padding-left: 0; } #index #main .r2 .r-main .new-box .new-list .fr > ul > li:hover span { color: #00653b; } #index #main .r2 .r-main .new-box .new-list .fr > ul > li:hover span b { color: #00653b; } #index #main .r2 .r-main .new-box .new-list .fr > ul > li:hover a { color: #00653b; } #index #main .r2 .r-main .new-box .new-list .fr > ul > li:hover:after { opacity: 1; transform: none; -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; } #index #main .r2 .r-main .new-box .new-list .new-more { position: absolute; bottom: -0.2rem; left: 0.4rem; z-index: 10; } #index #main .r2 .r-main .new-box .new-tab { position: absolute; right: 148px; bottom: calc(100% + 46px); display: flex; justify-content: center; } #index #main .r2 .r-main .new-box .new-tab > a { height: 50px; line-height: 50px; margin: 0 26px; color: #a2bccc; font-size: 22px; } #index #main .r2 .r-main .new-box .new-tab > li { display: inline-block; width: 50px; height: 50px; border-radius: 50%; line-height: 50px; text-align: center; position: relative; margin: 0 12px; cursor: pointer; } #index #main .r2 .r-main .new-box .new-tab > li span { position: relative; z-index: 3; color: #a2bccc; transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; } #index #main .r2 .r-main .new-box .new-tab > li:after { content: ""; opacity: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; background: linear-gradient(45deg, #79bd28 0%, #00653b 100%); border-radius: 50%; transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transition: opacity 0.3s, transform 0.8s; } #index #main .r2 .r-main .new-box .new-tab > li.on span { color: #fff; } #index #main .r2 .r-main .new-box .new-tab > li.on:after { opacity: 1; transform: none; -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; filter: blur(0px); box-shadow: 0 18px 43px -6px rgba(0, 101, 59, 0.6); } #index #main .r2 .r-main .new-box .new-tab > li:hover span { color: #fff; } #index #main .r2 .r-main .new-box .new-tab > li:hover:after { opacity: 1; transform: none; -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; filter: blur(0px); } #index #main .r3 { position: relative; padding-bottom: 0; } #index #main .r3 .r-main { position: relative; z-index: 10; } #index #main .r3 .r-main .home-pro { text-align: right; position: relative; margin-top: 1rem; z-index: 10; min-height: 560px; } #index #main .r3 .r-main .home-pro > li{ position: absolute; width: 100%; z-index: 1; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(30px); transition: all 0.8s ease-in-out; } #index #main .r3 .r-main .home-pro > li.on{ z-index: 3; opacity: 1; transform: none; visibility: visible; pointer-events: auto; } #index #main .r3 .r-main .home-pro > li .r-left { position: absolute; height: 100%; width: calc(100%/3); top: 0; left: 0; text-align: left; } #index #main .r3 .r-main .home-pro > li .r-left .msg-box { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } #index #main .r3 .r-main .home-pro > li .r-left .msg-box > ul { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } #index #main .r3 .r-main .home-pro > li .r-left .msg-box > ul > li { padding: 0.1rem 0 20% 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.5s ease-out; transform: translateY(-30px); -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -o-transform: translateY(-30px); -ms-transform: translateY(-30px); } #index #main .r3 .r-main .home-pro > li .r-left .msg-box > ul > li > a { position: absolute; bottom: 6%; left: 0; } #index #main .r3 .r-main .home-pro > li .r-left .msg-box > ul > li.on { opacity: 1; visibility: visible; pointer-events: auto; transform: none; -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; } #index #main .r3 .r-main .home-pro > li .r-left .msg-box > ul > li.move { opacity: 1; visibility: visible; animation: fadeInUpSmall 1.2s ease-in-out forwards; } #index #main .r3 .r-main .home-pro > li .r-right { text-align: left; width: calc(200%/3); display: inline-block; position: relative; } #index #main .r3 .r-main .home-pro > li .r-right .pro-slider { width: calc(300%/4); margin: auto; position: relative; opacity: 0; transition: all 0.6s ease-out; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out; -o-transition: all 0.6s ease-out; -ms-transition: all 0.6s ease-out; transform: translateY(20px); -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -o-transform: translateY(20px); -ms-transform: translateY(20px); } #index #main .r3 .r-main .home-pro > li .r-right .pro-slider > ul { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 5; } #index #main .r3 .r-main .home-pro > li .r-right .pro-slider > ul > li { background: #ffffff; background-size: contain; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 30px; transform: scale(0.4) translateX(-90px); -webkit-transform: scale(0.4) translateX(-90px); -moz-transform: scale(0.4) translateX(-90px); -o-transform: scale(0.4) translateX(-90px); -ms-transform: scale(0.4) translateX(-90px); opacity: 0; pointer-events: none; z-index: 2; transition: all 0.7s cubic-bezier(0.18, 0.88, 0.23, 0.9); transform-origin: 0 50%; box-shadow: 0 23px 90px -10px rgba(29, 56, 75, 0.17); } #index #main .r3 .r-main .home-pro > li .r-right .pro-slider > ul > li .pic { width: calc(200%/3); position: relative; z-index: 10; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; opacity: 0; top: 10%; height: 70%; background-repeat: no-repeat; background-position: center; background-size: contain; } #index #main .r3 .r-main .home-pro > li .r-right .pro-slider > ul > li .type { letter-spacing: 30px; color: #eff3f6; z-index: 3; text-align: center; width: 90%; height: 90%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; line-height: 150px; } #index #main .r3 .r-main .home-pro > li .r-right .pro-slider > ul > li .note { position: absolute; z-index: 5; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform-origin: 100% 50%; bottom: 8%; left: 50%; white-space: nowrap; } #index #main .r3 .r-main .home-pro > li .r-right .pro-slider > ul > li .num { position: absolute; display: inline-block; width: calc(100%/6); text-align: center; bottom: 20px; right: 0; z-index: 5; opacity: 0; } #index #main .r3 .r-main .home-pro > li .r-right .pro-slider > ul > li.on { transform: scale(1) translateX(0px); -webkit-transform: scale(1) translateX(0px); -moz-transform: scale(1) translateX(0px); -o-transform: scale(1) translateX(0px); -ms-transform: scale(1) translateX(0px); pointer-events: auto; opacity: 1; z-index: 10; } #index #main .r3 .r-main .home-pro > li .r-right .pro-slider > ul > li.on .pic { opacity: 1; } #index #main .r3 .r-main .home-pro > li .r-right .pro-slider > ul > li.n1 { transform: scale(0.8) translateX(-30px); -webkit-transform: scale(0.8) translateX(-30px); -moz-transform: scale(0.8) translateX(-30px); -o-transform: scale(0.8) translateX(-30px); -ms-transform: scale(0.8) translateX(-30px); opacity: 0.8; z-index: 8; } #index #main .r3 .r-main .home-pro > li .r-right .pro-slider > ul > li.n2 { transform: scale(0.6) translateX(-70px); -webkit-transform: scale(0.6) translateX(-70px); -moz-transform: scale(0.6) translateX(-70px); -o-transform: scale(0.6) translateX(-70px); -ms-transform: scale(0.6) translateX(-70px); opacity: 0.6; z-index: 7; } #index #main .r3 .r-main .home-pro > li .r-right .pro-slider > ul > li.move { transform: scale(1) translateX(30px); -webkit-transform: scale(1) translateX(30px); -moz-transform: scale(1) translateX(30px); -o-transform: scale(1) translateX(30px); -ms-transform: scale(1) translateX(30px); pointer-events: none; opacity: 0; z-index: 7; } #index #main .r3 .r-main .home-pro > li .r-right .pro-slider > ul > li.cur_move { transform: scale(1) translateX(0px); -webkit-transform: scale(1) translateX(0px); -moz-transform: scale(1) translateX(0px); -o-transform: scale(1) translateX(0px); -ms-transform: scale(1) translateX(0px); pointer-events: none; opacity: 1; z-index: 10; } #index #main .r3 .r-main .home-pro > li .r-right .pro-slider.go { opacity: 1; transform: none; -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; } #index #main .r3 .r-main .home-pro > li .r-right .pro-slider.go > ul > li.on .pic { animation: fadeInDownSmall 0.8s ease; } #index #main .r3 .r-main .home-pro > li .r-right .pro-page { position: absolute; right: 0; bottom: 0; width: calc(100%/8); height: 100%; } #index #main .r3 .r-main .home-pro > li .r-right .pro-page > ol { position: absolute; background-color: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); border-radius: 50px; box-shadow: 0 22px 50px -8px rgba(29, 56, 75, 0.2); } #index #main .r3 .r-main .home-pro > li .r-right .pro-page > ol > li { display: block; margin-bottom: 30px; position: relative; } #index #main .r3 .r-main .home-pro > li .r-right .pro-page > ol > li:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 3; background: linear-gradient(45deg, #79bd28 0%, #00653b 100%); border-radius: 50%; opacity: 0; transition: opacity 0.3s, transform 0.6s; transform: scale(0.8); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); } #index #main .r3 .r-main .home-pro > li .r-right .pro-page > ol > li:last-of-type { margin-bottom: 0; } #index #main .r3 .r-main .home-pro > li .r-right .pro-page > ol > li > span { display: inline-block; position: relative; z-index: 5; color: #7f8c94; width: 0.5rem; height: 0.5rem; border-radius: 50%; line-height: 0.5rem; text-align: center; background-color: transparent; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; cursor: pointer; } #index #main .r3 .r-main .home-pro > li .r-right .pro-page > ol > li.on:after { opacity: 1; transform: none; -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; filter: blur(0px); box-shadow: 0 18px 43px -6px rgba(0, 101, 59, 0.6); } #index #main .r3 .r-main .home-pro > li .r-right .pro-page > ol > li.on > span { color: #fff; } #index #main .r3 .r-main .home-pro > li .r-right .pro-page > ol > li:hover:after { opacity: 1; transform: none; -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; filter: blur(0px); } #index #main .r3 .r-main .home-pro > li .r-right .pro-page > ol > li:hover > span { color: #fff; } #index .row.r3 .title{ opacity: 0;pointer-events: none; } #index #main .r3 .r-main .pro-tab { position: absolute; width: 100%; top: 0; left: 0; z-index: 10; display: flex; justify-content: flex-start; } #index #main .r3 .r-main .pro-tab > li { text-align: left; position: relative; width: 20%; overflow: hidden; } #index #main .r3 .r-main .pro-tab > li > i { display: block; position: relative; z-index: 10; width: 0.64rem; height: 0.64rem; border-radius: 50%; line-height: 0.64rem; text-align: center; background-color: transparent; } #index #main .r3 .r-main .pro-tab > li > i > img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; display: inline-block; height: 28px; } #index #main .r3 .r-main .pro-tab > li > i:after { content: ""; position: absolute; top: 0; bottom: 0; margin: auto; width: 300px; height: 1px; left: 120%; background-color: #b3bfc3; } #index #main .r3 .r-main .pro-tab > li > span { display: inline-block; height: 32px; line-height: 32px; width: 64px; text-align: center; transform: translateY(-14px); -webkit-transform: translateY(-14px); -moz-transform: translateY(-14px); -o-transform: translateY(-14px); -ms-transform: translateY(-14px); transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; font-weight: bold; } #index #main .r3 .r-main .pro-tab > li:after { content: ""; position: absolute; z-index: 3; width: 0.64rem; height: 0.64rem; border-radius: 50%; line-height: 0.64rem; text-align: center; background-color: #fff; top: 0; left: 0; opacity: 0; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; } #index #main .r3 .r-main .pro-tab > li.on:after, #index #main .r3 .r-main .pro-tab > li:hover:after { opacity: 1; transition-delay: 0.2s; } #index #main .r3 .r-main .pro-tab > li.on > span, #index #main .r3 .r-main .pro-tab > li:hover > span { transform: none; -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; } #index #main .r3 .r-main .pro-tab > div { position: relative; } #index #main .r3 .r-main .pro-tab > div .type-more { position: absolute; top: 8px; left: 10px; box-shadow: 0 23px 90px -10px rgba(29, 56, 72, 0.2); color: #333; } #index #main .r3 .r-main .pro-tab > div .type-more:after { background: #fff; } #index #main .r3 .r-main .pro-tab > div .type-more:before { border-color: #fff; } #index #main .r3 .bg { position: absolute; height: 88%; width: 100%; left: 0; top: 0; z-index: 3; background: url(../img/bg2.jpg) center no-repeat #ebf5fa; } #index #main .r4 { padding-bottom: 0; padding-top: 0; } #index #main .r4 .r-main .home-stock { width: 100%; border-radius: 30px; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; transform: translateY(0.4rem); -webkit-transform: translateY(0.4rem); -moz-transform: translateY(0.4rem); -o-transform: translateY(0.4rem); -ms-transform: translateY(0.4rem); box-shadow: 0 23px 90px -7px rgba(2, 27, 46, 0.3); } #index #main .r4 .r-main .home-stock > ul { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 10; display: flex; justify-content: center; align-items: center; } #index #main .r4 .r-main .home-stock > ul > li { display: inline-block; float: left; } #index #main .r4 .r-main .home-stock > ul > li:nth-of-type(1) { width: 25%; padding-left: 4%; } #index #main .r4 .r-main .home-stock > ul > li:nth-of-type(2) { width: 50%; } #index #main .r4 .r-main .home-stock > ul > li:nth-of-type(2) .stock-data { border-bottom: 1px solid rgba(255, 255, 255, 0.3); display: flex; justify-content: flex-start; align-items: center; } #index #main .r4 .r-main .home-stock > ul > li:nth-of-type(2) .stock-data > span { font-family: word; color: inherit; margin-right: 40px; } #index #main .r4 .r-main .home-stock > ul > li:nth-of-type(2) .stock-data > i { color: inherit; margin-right: 32px; } #index #main .r4 .r-main .home-stock > ul > li:nth-of-type(2) .stock-data.grc > i { transform: scale(-1); -webkit-transform: scale(-1); -moz-transform: scale(-1); -o-transform: scale(-1); -ms-transform: scale(-1); } #index #main .r4 .r-main .home-stock > ul > li:nth-of-type(2) .stock-msg { overflow: hidden; } #index #main .r4 .r-main .home-stock > ul > li:nth-of-type(2) .stock-msg span { display: inline-block; font-size: inherit; color: inherit; height: 46px; line-height: 46px; } #index #main .r4 .r-main .home-stock > ul > li:nth-of-type(2) .stock-msg span b { vertical-align: top; } #index #main .r4 .r-main .home-stock > ul > li:nth-of-type(3) { width: 25%; } #index #main .r4 .r-main .home-stock > ul > li:nth-of-type(3) > a { display: inline-block; text-align: center; } #index #main .r4 .r-main .home-stock > ul > li:nth-of-type(3) > a > i { vertical-align: unset; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; display: inline-block; } #index #main .r4 .r-main .home-stock > ul > li:nth-of-type(3) > a:hover > i { opacity: 1; transform: translateX(6px); -webkit-transform: translateX(6px); -moz-transform: translateX(6px); -o-transform: translateX(6px); -ms-transform: translateX(6px); } #index #main .r4 .r-main .home-stock .pic { width: 100%; height: 100%; position: relative; z-index: 6; border-radius: 30px; overflow: hidden; } /*瀵艰埅*/ .full-menu_m{ display: none; } .pul_now > div{ -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background-color: rgba(255,255,255,.8); margin: 20px 50px 0 50px; overflow: inherit; max-height: 100px; transition: all 1s ease; position: absolute; -webkit-box-shadow: 0px 0 90px rgba(19,53,80,.5); -moz-box-shadow: 0px 0 90px rgba(19,53,80,.5); box-shadow: 0px 0 90px rgba(19,53,80,.5); width: calc(100% - 100px); opacity: 0; } header.on .pul_now > div{ opacity: 1; } .nav_box,.search_box,.language_box{ float: right; line-height: 100px; font-size: 16px; } .language_box{ font-size: 0; text-align: center; position: relative; width: 16.15%; pointer-events: auto; } .language_box::after{ content: ''; display: block; position: absolute; height: 16px; width: 1px; background-color: #c1c2c4; left: 0; top: 50%; margin-top: -8px; } .language_box > a{ font-size: 16px; text-align: center; display: inline-block; vertical-align: middle; color: #7f7f7f; cursor: pointer; text-transform: uppercase; width: 30px; margin: 0 10px; opacity: 0.5; } .language_box > a img{ display: block; width: 100%; } .language_box > a.on{ opacity: 1; cursor: auto; } .menu-list > div >a img{ width: 30px; margin: 0 auto; opacity: 0.5; } .menu-list > div >a.on img{ opacity: 1; } .pul_initial .language_box{ font-size: 0; width: 16.15%; float: left; margin-top: 120px; line-height: 3; margin-left: 5vw; text-align: left; } .pul_initial .language_box > a{ font-size: 16px; text-align: left; display: inline-block; vertical-align: middle; color: rgba(255,255,255,.5); cursor: pointer; width: 47px; margin: 0 4px; } .pul_initial .language_box > a:first-child{ margin-left: 0; } .language_box > a.on{ color: #0d1c27; font-weight: 700; cursor: auto; } .pul_initial .language_box > a.on{ color: rgba(255,255,255,1); } .pul_initial .language_box::after{ display: none; } .search_box{ position: relative; margin: 0 3.78vw 0 1.5vw; font-size: 16px; font-weight: 700; color: #0d1c27; text-align: center; z-index: 2; pointer-events: auto; } .search_case{ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background-color: rgba(255,255,255,1); padding:.2rem .3rem; max-width: calc(100vw - 30px); width: 400px; min-height: 200px; position: absolute; right: -48px; top: 95px; opacity: 0; transform: translateY(50px); transition: all .5s ease; -webkit-box-shadow: 0 0 99px rgba(29,56,75,.4); -moz-box-shadow: 0 0 99px rgba(29,56,75,.4); box-shadow: 0 0 99px rgba(29,56,75,.4); pointer-events: none; } .pul_initial .search_case{ top: 64px; } .search_case::after{ content: ''; display: block; width: 18px; height: 18px; transform: rotate(45deg); top: -8px; right: 60px; background-color: #fff; position: absolute; } .sea_inp_box{ border-bottom: 1px solid #e1e1e1; font-size: 14px; } .sea_inp_box> input{ background-color: transparent; border: none; display: block; float: left; width: calc(100% - 30px); padding-right: 10px; line-height: 50px; height: 50px; box-shadow: 0 0 100px 46px #fff inset; } .sea_inp_box> span{ cursor: pointer; width: 30px; display: block; float: right; text-align: right; line-height: 50px; height: 50px; color: #e1e1e1; } .sea_inp_box> span button{ border: none; display: block; height: 100%; background-color: transparent; } .sea_inp_box> span i{ font-size: 18px; vertical-align: middle; } .sea_lab_box{ margin: 10px -5px; } .sea_lab_box a{ display: inline-block; float: left; margin: 5px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #e1e1e1; color: #999999; line-height: 1; padding:10px; font-weight: 400; transition: all .5s ease .3s; position: relative; overflow: hidden; display: none; } input::-ms-clear{display:none;} .search_box:hover .sea_lab_box a{ display: block; } .sea_lab_box a span{ position: relative; z-index: 1; } .sea_lab_box a:before{ content: ''; display: block; width: 0; transition: width .5s ease-out; height: 100%; background-color: #00653b; position: absolute; top: 0; left: 0; } .sea_lab_box a:hover{ color: #fff; /*background-color: #00653b;*/ } .sea_lab_box a:hover:before{ width: 100%; } .pul_initial .search_box:hover .btn_sea{ color: rgba(255,255,255,1); } .search_box:hover .search_case{ opacity: 1; transform: translateY(0); pointer-events: auto; } .pul_initial .search_box{ color: rgba(255,255,255,.5); margin-right: calc(5vw + 110px); line-height: 64px; margin-top: 4vh; padding: 0; z-index: 1; } .pul_initial .btn_sea i{ font-size: 24px; } .btn_sea{ cursor: pointer; } .btn_sea i{ font-size: 22px; vertical-align: middle; margin-right: -5px; } .nav_box{ width: 46.875vw; } .nav_case{ font-size: 0; position: relative; pointer-events: none; } header.on .nav_case{ pointer-events: auto; } .nav_case > a{ cursor: pointer; color: #74787c; font-weight: 700; display: inline-block; vertical-align: middle; font-size: 16px; width: 14%; padding-right: 5px; } .nav_case > a:nth-child(6),.nav_sed_box > div:nth-child(6){width: 15.4%;} .nav_case > a:hover,.nav_case > a.on{ color: #00653b; } .nav_sed_box{ border-top: 1px solid #dddede; padding-top: 28px; padding-bottom: .75rem; position: relative; opacity: 0; transition: opacity .5s ease; pointer-events: none; } .nav_sed_box>span{ display: block; position: absolute; top: -3px; left: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; width: 20px; height: 5px; background-color: #00653b; transition: all .5s ease; } .nav_sed_box > div{ float: left; width: 14%; padding-right: 5px; } .nav_sed_box > div a{ display: block; margin: 20px 0; line-height: 20px; color: #74787c; font-size: 14px; position: relative; } .nav_sed_box > div a::after{ content: ''; display: block; height: 0; width: 2px; position: absolute; left: -5px; top: 3px; background-color: #00653b; transition: height .5s ease; } .nav_sed_box > div a:hover,.nav_sed_box > div a.on{ color: #00653b; } .nav_sed_box > div a:hover::after{ height: 14px; } .nav_con{ position: relative; z-index: 2; pointer-events: none; } .bg_layer{ background-image: url("../img/dna-layer.png"); background-position: 0 -50px; background-repeat: no-repeat; position: absolute; right: 0; top: 0; height: 100%; width: 31%; background-size: 100%; transition: all .5s ease; } .bg_gb{ background-image: url("../img/dna-bg.png"); background-position: 0 bottom; background-repeat: no-repeat; position: absolute; left: 4%; bottom: -100%; height: 2.8rem; width: 15.6%; background-size: 100%; transition: all 1s ease; opacity: 0; pointer-events: none; } .pul_initial{ opacity: 1; transition: opacity .5s ease; } header.on .pul_initial{ opacity: 0; } .pul_now{ opacity: 0; transition: opacity .5s ease; } header.on .pul_initial .pul_logo { opacity: 0; } header.on .pul_initial .nav { opacity: 0; } header.on .pul_now{ opacity: 1; } .header_on .pul_now > div{ background-color: rgba(255,255,255,1); max-height: 9999px; height: auto; transition-timing-function: cubic-bezier(.5,0,1,0); overflow: hidden; } .header_on .bg_gb{ bottom: 0; transition: all 1s ease; opacity: 1; } .header_on .bg_layer{ background-position: 0 0; transition: all .5s ease .5s; } .header_on .nav_sed_box{ opacity: 1; pointer-events: auto; } /*棰嗗鍥㈤槦*/ .ins_banner { height: 70vh; position: relative; z-index: 2; } .pub_banner_box{ height: 100%; width: 100%; overflow: hidden; } .con_banner{ height: 100%; background-size: cover; position: relative; background-repeat: no-repeat; background-position: center; transform: scale(1.1); transition: all 3s ease; } .con_banner.on{ transform: scale(1); } .sen_link_box{ font-size: 0; width: 81.25vw; position: absolute; left: 9.375vw; bottom: 0; color: #fff; padding-bottom: .9rem; } .pre_box{ display: inline-block; vertical-align: middle; min-width: 260px; padding-right: 3.6vw; } .at_present{ line-height: 1.5; font-weight: 700; margin-top: 15px; } .at_present_en{ font-family: "word"; color: rgba(255,255,255,.4); text-transform: inherit; line-height: 1; } .sty_line{ display: inline-block; vertical-align: middle; height: 1px; background-color: rgba(255,255,255,.5); margin: 0 ; width: 0%; transition: width .5s ease .2s; } .sen_link_con{ display: inline-block; vertical-align: middle; text-align: center; min-width: 13.54vw; position: relative; line-height: 1rem; } .sen_link_con > a{ font-weight: 700; position: relative; display: block; padding: 0 .35rem; } .sen_link_con > a i{ position: absolute; top: 50%; right: 0; transform: translateY(-50%) rotate(0deg); transition: all .5s ease; } /*.sen_link_con:hover>a i{*/ /*transform: translateY(-50%) rotate(90deg);*/ /*}*/ .sen_link_con .search_case{ width: 280px; } .sen_link_con .search_case a{ text-align: left; display: block; color: #999999; line-height: 62px; border-bottom: 1px solid #e1e1e1; transition: all .5s ease; position: relative; } .sen_link_con .search_case a:hover,.sen_link_con .search_case a.on{ color: #00653b; border-bottom: 1px solid #e1e1e1; } .sen_link_con .search_case a::after{ content: ''; display: block; position: absolute; left: 0; bottom: -1px; background-color: #00653b; height: 1px; width: 0; transition: width .5s ease; } .sen_link_con .search_case a:hover,.sen_link_con .search_case a.on{ color: #00653b; } .sen_link_con .search_case a:hover::after,.sen_link_con .search_case a.on::after{ width: 100%; } .ab_on{ -webkit-animation: feIn .5s ease; animation: feIn .5s ease; } @keyframes feIn { 0%{ opacity: 0; transform: scale(.5) translateX(-50%); } 100%{ opacity: 1; transform: scale(1) translateX(-50%); } } .sen_link_con:hover .search_case{ opacity: 1; transform: translateY(0); pointer-events: auto; } .sen_link_con .search_case::after{ left: 50%; right: auto; transform: translateX(-50%) rotate(45deg); } .tea_con{ background:url("../img/about_aide/abo_t_bg.png") no-repeat center bottom, #f6f9fb; /*background-size: 100%;*/ } .tea_case{ padding: 1.5rem 0 2.7rem 0; width: 67.71%; margin: 0 auto; } .member_box{ position: relative; } .tea_mem_case{ margin-top: 1.6rem; } .member_box > div{ padding-left: 36.5%; } .member_title{ padding-top: .75rem; line-height: 1.5; vertical-align: middle; height: 1.6rem; color: #172315; font-weight: 700; position: absolute; width: 100%; left: 0; bottom: 100%; } .member_title span{ color: #72787f; margin-left: 0.15rem; font-weight: 400; } .member_info{ background-color: #fff; padding: .65rem 7.7% .7rem 36.5%; box-shadow: 0 0 68px rgba(29,56,75,.11); position: relative; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; } .member_info > img{ width: 34.23%; left: 0; bottom: 0; position: absolute; } .member_info > div{ color: #72787f; text-align: justify; line-height: 2.14; } .tea_mem_case{ overflow: inherit; } .swiper-container-fade .swiper-slide{ opacity: 0!important; } .swiper-container-fade .active{ opacity: 1 !important; } .swiper-container-fade .active .member_title{ animation: fadeInDownSmall .5s ease; } .swiper-container-fade .active .member_info > div{ animation: fadeInUpSmall .5s ease; } /*鎸夐挳鍏叡*/ .btn_style{ transition: all .5s ease; } .btn_style:hover{ background: linear-gradient(45deg, #79bd28 0%, #00653b 100%)!important; box-shadow: 0 2px 10px -2px rgba(0, 101, 59, 0.6) !important; color: #fff !important; } .tea_mem_case .swiper-button-next,.tea_mem_case .swiper-button-prev{ background-image: none; background-color: rgba(221,226,229,1); -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; height: 60px; width: 60px; line-height: 60px; color: #68757b; text-align: center; right: 0; left: auto; } .tea_mem_case .swiper-button-next{ top: 50%; transform: translate(50%,25%); margin-top: 0; } .tea_mem_case .swiper-button-prev{ top: 50%; transform: translate(50%,-105%); margin-top: 0; } .tea_mem_case .swiper-button-next i,.tea_mem_case .swiper-button-prev i{ font-size: 20px; } /*鍔犲叆鎴戜滑*/ .joi_con{ background:url("../img/join_us_bg.png") no-repeat center bottom, #f6f9fb; /*background-size: 100%;*/ } .joi_hint{ float: left; width: 20%; margin-left: 10%; color: #000; position: relative; } .joi_hint> span{ position: relative; z-index: 1; font-weight: 700; line-height: 3.5; display: block; } .joi_hint> span::after{ content: ''; display: block; position: absolute; left: 0; bottom: 0; background-color: #00653b; width: 1.6em; height: 5px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .joi_hint > img{ position: absolute; left: -130px; bottom: 20px; } .joi_text_box{ float: right; width: 70%; color: #000; line-height: 2; margin-top: 30px; } .post_condition{ line-height: 26px; } .post_box{ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background-color: rgba(255,255,255,1); padding: 0 60px; margin-bottom: .4rem; -webkit-box-shadow: 0 0 46px rgba(29, 56, 75, .17); -moz-box-shadow: 0 0 46px rgba(29, 56, 75, .17); box-shadow: 0 0 46px rgba(29, 56, 75, .17); } .post_title{ position: relative; line-height: .9rem; cursor: pointer; } .post_name{ font-weight: bold; color: #000000; } .post_name i{ margin-right: 28px; font-size: 20px; } .post_num{ position: absolute; top: 0; right: 0; vertical-align: bottom; } .post_num i{ position: relative; transition: all .5s ease; font-size: 20px; color: #d2d5d7; margin-left: 45px; display: inline-block; vertical-align: middle; transform: rotate(0deg); } .post_num i.on{ transform: rotate(-180deg); } .post_condition{ padding: .35rem 0 .45rem 0; border-top: 1px solid #e4e9ed; display: none; } .post_condition > div> div{ float: left; } .post_condition > div{ padding: .19rem 0; } .post_condition > div> div:first-child{ width: 166px; text-align: center; color: #000; font-weight: bold; } .post_condition > div> div:nth-child(2){ width: calc(100% - 166px); color: #4d5154; } .post_case{ padding-top: .8rem; } .page_num_box .on.btn_style:hover,.page_num_box .on.btn_style{ background: linear-gradient(45deg, #79bd28 0%, #00653b 100%)!important; box-shadow: 0 2px 10px -2px rgba(0, 101, 59, 0.6); color: #fff !important; } .page_num_box a{ float: left; margin: 0 10px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; background-color: #fff; color: #000; text-align: center; line-height: 60px; width: 60px; height: 60px; } .page_case{ padding-top: .85rem; text-align: center; font-size: 0; } .page_case > div{ display: inline-block; vertical-align: middle; } .page_case > div:first-child a,.page_case > div:last-child a{ color: #9da6b1; line-height: 60px; } .page_case > div:last-child a i{ margin-left: 20px; vertical-align: middle; } .page_case > div:first-child a i{ margin-right: 20px; vertical-align: middle; } .page_case > div:last-child{ margin-left: .7rem; } .page_case > div:first-child{ margin-right: .7rem; } .page_case > div:first-child a:hover,.page_case > div:last-child a:hover{ color: #00653b; } /*鍛樺伐椋庨噰*/ .sta_con{ background:url("../img/sta_bg.png") no-repeat center bottom, #f6f9fb; /*background-size: 100%;*/ overflow: hidden; } .sta_tab_box{ position: relative; border-bottom: 1px solid #c9cdcf; padding-bottom: 0.33rem; font-size: 0; } .sta_tab_mark{ position: absolute; left: 50%; margin-left: -25px; bottom: -2px; height: 5px; width: 50px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #00653b; transition: left .5s ease-out; } .sta_tab_box > span{ height: 30px; display: inline-block; line-height: 1; position: relative; bottom: 0; width: 166px; text-align: center; font-size: 18px; font-weight: 700; vertical-align: bottom; cursor: pointer; color: #99a2a8; } .sta_tab_box > span span{ transform: scale(1) translateZ(0); backface-visibility: hidden; transition: all .5s ease; padding-top: 12px; display: inline-block; transform-origin: 50% 100%; } .sta_tab_box >span.on span{ color: #000000; cursor: auto; transform: scale(1.7) translateZ(0); } .sta_tab_box > span::after{ content: '/'; display: block; position: absolute; left: 0; font-size: 18px; line-height: 1; bottom: 0; color: #99a2a8; transform: translateX(-50%); } .sta_tab_box > span:first-child::after{ display: none; } .sta_tab_con_box > div{ display: none; } .sta_tab_con_box > div:first-child{ display: block; } .carousel{ overflow: hidden; padding: 1px 10%; position: relative; } .carousel .swiper-button-next,.carousel .swiper-button-prev{ background-image: none; background-color: rgba(255,255,255,1); -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; height: 60px; width: 60px; line-height: 60px; color: #272636; text-align: center; } .carousel .swiper-button-next i,.carousel .swiper-button-prev i{ font-size: 20px; } .carousel .swiper-container{ width: 100%; margin: 0 auto; overflow: inherit; } .sta_tab_con_box .swiper-slide{ width: 75%; opacity: 0.7 !important; } .sta_tab_con_box .swiper-slide.active{ opacity: 1 !important; } .sta_tab_con_box .swiper-slide.active .sta_img_box > img{ -webkit-box-shadow: 0 0 84px rgba(40, 80, 104, .55); -moz-box-shadow: 0 0 84px rgba(40, 80, 104, .55); box-shadow: 0 0 84px rgba(40, 80, 104, .55); transition: all .5s ease; } .sta_img_box{ width: 100%; margin-bottom: 1.5rem; margin-top: 1.8rem; position: relative; } .sta_img_box > img{ display: block; width: 100%; border-radius: 10px; } .sta_img_num{ opacity: 0; font-size: 110px; line-height: 110px; text-align: center; color: rgba(216,224,230,.8); position: absolute; width: 100%; left: 0; top: 110%; } .sta_img_num > div{ position: absolute; left: 50%; top: 50%; line-height: 1; transform: translate(-50%, -50%); color: #000000; font-weight: 700; width: 100%; } .sta_tab_con_box .swiper-slide.active .sta_img_num{ opacity: 1; transition: all .5s ease; } /*浜烘墠鐞嗗康*/ .tal_title_box{ position: relative; } .tal_title_box > div{ font-size: 18px; font-weight: 700; color: #000; line-height: 2; position: relative; z-index: 1; width: 59%; } .tal_title_box > span{ position: absolute; font-size: 200px; color: #edf1f4; line-height: 1; top: 50%; margin-top: -100px; left: 30%; letter-spacing: 70px; text-transform: uppercase; } .tal_con_box{ padding-top: .9rem; } .tal_tab_box{ float: left; width: 50%; position: relative; } .tal_tab_name{ position: relative; padding: .4rem 10% .4rem 0; cursor: pointer; } .tal_tab_name.on{ cursor: auto; } .tal_tab_name::after{ content: ''; display: block; background-color: #00653b; width: 0; height: 1px; position: absolute; left: 0; bottom: 0; transition: width .5s ease-out; } .tal_tab_name.on::after{ width: 100%; } .tal_tex_title{ line-height: 32px; color: #000000; font-size: 16px; font-weight: 700; transition: all .5s ease-out; } .tal_tab_name.on .tal_tex_title{ color: #00653b; } .tal_tex_title i{ font-size: 24px; margin-right: 46px; vertical-align: middle; } .tal_tex_info{ /*display: none;*/ font-size: 14px; line-height: 2; color: #56575a; padding-left: 70px; } .tal_tab_box > div:first-child .tal_tex_info{ display: block; } .tal_info{ position: absolute; left: 0; /*top: 110%;*/ color: #000; font-size: 18px; line-height: 2; margin-top: .6rem; font-weight: 700; } .tal_img_box{ float: right; width: 40%; padding-bottom: 58%; position: relative; } .tal_img_box > div{ position: absolute; width: 100%; top: 50%; left: 0; transform: translateY(-50%); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; overflow: hidden; box-shadow: 0 0 84px rgba(30,46,63,.36); /*opacity: 0;*/ transition: all .5s ease; max-height: 0; } .tal_img_box > div.on{ /*opacity: 1;*/ max-height: 9999px; transition-timing-function: cubic-bezier(.5,0,1,0); } .tal_img_box > div > img{ width: 100%; display: block; } .tal_info_m{ display: none; } /*鍏徃姒傚喌*/ .com_con{ background:url("../img/com_bg.png") no-repeat left bottom; background-size: 100%; position: relative; } .sha_bias{ width: 16.1459%; position: absolute; top: 0; right: 0; height: 100%; background:url(../img/banner-bg2.png) center repeat; pointer-events: none; } .sen_manifesto{ color: #fff; font-size: 14px; line-height: 3; /*max-width: 450px;*/ position: absolute; left: 0; bottom: 115%; } .com_con .joi_hint> span::after{ display: none; } .com_con .joi_hint{ float: none; width: 90%; } .com_con .tea_case{ width: 81.25vw; } .com_img_case{ margin-top: 1rem; margin-bottom: 1rem; width: 83.33333%; margin-left: 8.33335%; padding-right: 19.871%; position: relative; -webkit-border-radius: 6px 0 0 6px; -moz-border-radius: 6px 0 0 6px; border-radius: 6px 0 0 6px; -webkit-box-shadow: 0 0 60px rgba(30, 46, 63, .36); -moz-box-shadow: 0 0 60px rgba(30, 46, 63, .36); box-shadow: 0 0 60px rgba(30, 46, 63, .36); overflow: hidden; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .sha_imgBox{ position: absolute; right: 0; top: 0; width: 19.23%; height: 100%; background-color: rgba(255,255,255,.8); /*-webkit-filter: blur(10px); !* Chrome, Opera *!*/ /*-moz-filter: blur(10px);*/ /*-ms-filter: blur(10px);*/ /*filter: blur(10px);*/ z-index: 1; } .com_img_case .swiper-container{ overflow: initial; } .com_img_case .swiper-slide > div img{ display: block; width: 100%; } .sha_imgBox > div{ font-size: 0; line-height: 30px; text-align: center; width: 100%; position: absolute; left: 20%; top: 50%; transform: translate3d(-50%,-50%,0) rotate(90deg); } .com_img_case .swiper-button-prev,.com_img_case .swiper-button-next{ background-image: none; left: 0; right: 0; position: relative; display: inline-block; vertical-align: middle; margin: 0; font-size: 18px; line-height: 44px; } .com_img_case .swiper-button-prev{ margin-right: 60px; } .com_img_case .swiper-button-next{ margin-left: 60px; } .com_img_case .swiper-pagination{ color: #959ba1; width: auto; left: 0; bottom: 0; font-size: 20px; vertical-align: middle; position: relative; display: inline-block; } .com_img_case .swiper-pagination .on{ color: #000; font-size: 30px; } .com_info_case{ margin-left:8.33335%; width: 75%; margin-bottom: -.5rem; position: relative; } .fw_b{ font-weight: 700; } .com_info_case p{ padding-top: 25px; line-height: 30px; font-size: 14px; color: #56575a; text-align: justify; } .com_info_case p.fw_b{ color: #000; } .com_title{ position: absolute; color: #dde0e2; line-height: 1; font-size: 40px; text-transform: uppercase; letter-spacing: 2px; left: 99.5%; top: 240px; white-space: nowrap; transform: rotate(90deg); } /*璧勮川鑽h獕*/ .hon_con{ background:url("../img/hon_bg.png") no-repeat center bottom, #e4e9ed; } .hon_con .tea_case{ width: 81.25vw; padding-bottom: 2.2rem; } .hon_tab_nav_box{ float: left; width: 15%; } .hon_tab_nav_box> div{ max-width: 130px; color: #d5dae0; transition: all .5s ease-out; padding-bottom: .5rem; cursor: pointer; } .hon_tab_nav_box> div:last-child{ padding-bottom: 0; } .hon_tab_num{ font-size: 40px; line-height: 1; } .hon_tab_name{ line-height: 56px; font-size: 16px; font-weight: 700; color: #72787f; transition: all .5s ease-out; position: relative; } .hon_tab_name::after{ content: ''; position: absolute; width: 0; height: 5px; background-color: #00653b; left: 0; bottom: 0; transition: all .5s ease-out; } .hon_tab_nav_box> div.on,.hon_tab_nav_box> div:hover{ color:#00653b; } .hon_tab_nav_box> div.on .hon_tab_name,.hon_tab_nav_box> div:hover .hon_tab_name{ color: #00653b; } .hon_tab_nav_box> div:hover .hon_tab_name::after,.hon_tab_nav_box> div.on .hon_tab_name::after{ width: 100%; } .hon_con_case{ float: right; width: 83.33%; position: relative; } .hon_con_case > div{ display: none; position: relative; } .hon_con_case > div:first-child{ display: block; } .hon_con_box{ float: left; width: 60%; padding-right: 10%; padding-left: 10%; overflow: hidden; position: relative; margin-top: 8px; } .hon_con_box .swiper-container{ overflow: initial; padding-bottom: 120px; } .sha_tra{ position: absolute; width: 100%; height: 100%; background: -moz-linear-gradient(left, rgba(228, 233, 237, 1) 0%, rgba(228, 233, 237, 0) 25%, rgba(228, 233, 237, 0) 75%, rgba(228, 233, 237, 1) 100%); background: -o-linear-gradient(left, rgba(228, 233, 237, 1) 0%, rgba(228, 233, 237, 0) 25%, rgba(228, 233, 237, 0) 75%, rgba(228, 233, 237, 1) 100%); background: -webkit-gradient(linear, right top, right bottom, color-stop(0,rgba(228, 233, 237, 1)),color-stop(0.25,rgba(228, 233, 237, 0)),color-stop(0.75,rgba(228, 233, 237, 0)), color-stop(1, rgba(228, 233, 237, 1))); background: -webkit-linear-gradient(left, rgba(228, 233, 237, 1) 0%, rgba(228, 233, 237, 0) 25%, rgba(228, 233, 237, 0) 75%, rgba(228, 233, 237, 1) 100%); z-index: 3; top: 0; left: 0; pointer-events: none; } .hon_con_box .swiper-slide{ opacity: 0.9; transition: all .5s ease-in; } .hon_con_box .swiper-slide.active{ opacity: 1; } .hon_con_box .swiper-slide> div{ width: 100%; position: relative; } .hon_con_box .swiper-slide> div > img{ display: block; max-width: 435px; max-height: 405px; margin: 0 auto; } .hon_name{ text-align: center; margin-top: 25px; font-weight: 700; color: #000; font-size: 24px; line-height: 1.5; opacity: 0; transition: all .5s ease-in; position: absolute; left: 0; top: 100%; width: 100%; } .hon_con_box .swiper-slide.active .hon_name{ opacity: 1; } .hon_name_box{ width: calc(29.23% + 50px); float: right; padding: 25px 0; position: absolute; right: 0; top: 0; z-index: 1; } .hon_name_text{ font-size: 16px; line-height: 60px; height: 60px; padding: 0 10px; text-align: center; opacity: .5; color: #000; transition: all .5s ease-in; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .hon_name_box .active-nav .hon_name_text{ font-size: 18px; font-weight: 700; background-color: rgba(255,255,255,1); box-shadow: 0 0 46px rgba(29,56,75,.17); -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .hon_name_box .swiper-container{ height: 370px; padding: 25px 25px 15px 25px; overflow: hidden; } .hon_name_box .swiper-slide{ cursor: pointer; } .hon_name_box .swiper-button-prev,.hon_name_box .swiper-button-next{ background-image: none; font-size: 18px; width: 100%; text-align: center; margin: 0; color: #000; } .hon_name_box .swiper-button-prev{ top: 0; left: 0; } .hon_name_box .swiper-button-next{ top: auto; right: 0; bottom: 0; } /*璧勮川鑽h獕*/ .inv_con{ background-image: url("../img/inv_bg.png"); background-color: #f6f9fb; background-position: left top; background-repeat: no-repeat; } .inv_left_box{ float: left; width: 23.077%; } .inv_title{ font-size: 26px; font-weight: bold; color: #000000; line-height: 78px; position: relative; } .inv_code{ line-height: 42px; font-size: 16px; margin-top: 20px; color: #000000; } .inv_stock_box{ border: 1px solid #d6dadd; border-left: none; border-right: none; padding: 35px 0; } .sto_at_time i{ display: none; } .sto_val{ position: relative; font-size: 30px; line-height: 1; margin-bottom: 15px; } .sto_val i{ font-size: 36px; vertical-align: middle; position: absolute; right: 0; top: 0; } .sto_contrast{ font-size: 14px; line-height: 1; margin-bottom: 40px; } .sto_contrast > span{ margin-right: 20px; } .sto_record > div{ width: 50%; float: left; } .sto_record > div > div:first-child{ font-size: 14px; line-height: 31px; color: #000; } .sto_record > div > div:nth-child(2){ font-size: 18px; line-height: 1.2; color: #999fa7; } .sot_time_box{ font-size: 14px; line-height: 3.28; color: #000; } .sto_at_time_up{ color: #fe0000; } .sto_at_time_down{ color: #00653b; } .sto_contrast > span:last-child{ margin-right: 0; } .sto_at_time i{ display: none; } .sto_at_time_down .down{ display: block; } .sto_at_time_up .up{ display: block; } .inv_right_box{ width: 70%; float: right; padding-left: 6.15%; position: relative; } .inv_right_box::after{ content: ''; display: block; position: absolute; left: 0; top: 26px; width: 1px; height: 100%; background-color: #d6dadd; } .inv_title > a{ position: absolute; right: 0; top: 0; font-size: 14px; color: #000; } .inv_title > a i{ color: #a1a3a4; font-size: 20px; vertical-align: middle; margin-left: 10px; text-align: right; } .sty_bottom_sty{ border-bottom: 1px solid #d6dadd; margin-bottom: .3rem; } .sty_bottom_sty::after{ content: ''; display: block; position: relative; left: 0; bottom: -3px; height: 5px; width: 2em; background-color: #00653b; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .ann_box > a{ display: block; border-bottom: 1px solid #d6dadd; padding: 30px 0; padding-right: 32px; position: relative; } .ann_title{ font-size: 16px; line-height: 1.5; color: #000; font-weight: 500; transition: all .5s ease; } .ann_time{ font-size: 12px; line-height: 1.8; color: #9fa2a5; transition: all .5s ease; } .ann_box > a > i{ font-size: 22px; position: absolute; right: 0; top: 50%; margin-top: -11px; color: #b3b8bc; transition: all .5s ease; } .ann_box > a:hover .ann_title,.ann_box > a:hover >i,.ann_box > a:hover .ann_time{ color: #00653b; } /*鍏憡鍙婇€氬嚱*/ .not_con{ background:url("../img/not_bg.png") no-repeat center bottom, #f6f9fb; } .showreel_box { width: 100%; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background-color: #fff; overflow: hidden; position: relative; height: 90px; line-height: 90px; padding: 0 90px; box-shadow: 0 0 90px rgba(29,56,75,.17); margin-bottom: 50px; } .showreel_box .btn_img_prev, .showreel_box .btn_img_next { display: block; z-index: 1; position: absolute; top: 0; width: 90px; height: 100%; text-align: center; /*background-color: rgba(0, 0, 0, 0.4);*/ color: #bebdc2; cursor: pointer; } .showreel_box .btn_img_prev:hover, .showreel_box .btn_img_next:hover{ color: #00653b; } .showreel_box .btn_img_prev i, .showreel_box .btn_img_next i { font-size: 18px; } .showreel_box .btn_img_prev { left: 0; } .showreel_box .btn_img_next { right: 0; } .view_box{ overflow: hidden; width: 100%; height: 100%; position: relative; } .showreel_box .list_u_img_box { font-size: 0; width: 99999999px; position: absolute; left: 0; top: 0; transition: left .5s ease; } .showreel_box .list_u_img_box > a { position: relative; width: 125px; display: inline-block; vertical-align: middle; font-size: 20px; text-align: center; color: #979ba0; cursor: pointer; transition: all .5s ease; } .showreel_box .list_u_img_box > a.on{ font-size: 24px; color: #00653b; position: relative; cursor: auto; } .showreel_box .list_u_img_box > a::after{ content: ''; display: block; position: absolute; left: 50%; top: 76.666%; margin-left: -.5em; width: 0; height: 5px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #00653b; transition: all .5s ease; } .showreel_box .list_u_img_box >a:hover{ color: #00653b; } .showreel_box .list_u_img_box > a.on::after,.showreel_box .list_u_img_box >a:hover::after{ width: 1em; } .showreel_box .list_u_img_box > img:last-child { margin-right: 0; } .disab{ pointer-events:none; opacity: 0; } .not_con .ann_box > a{ border-top: 1px solid #d6dadd; border-bottom: none; transition: all .5s ease; padding: 50px 72px 40px 0; } .not_con .ann_box > a:hover{ -webkit-box-shadow: 0 0 46px rgba(29,56,75,.17); -moz-box-shadow: 0 0 46px rgba(29,56,75,.17); box-shadow: 0 0 46px rgba(29,56,75,.17); background-color: #fff; border-top-color: transparent; margin: 0 -10px; padding-right: 82px; padding-left: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .not_con .ann_box > a:hover+a { border-top-color: transparent; } .not_con .ann_box > a:first-child{ border-top-color: transparent; } .not_con .ann_box > a > div{ float: left; } .not_time_box{ width: 10%; color: #010101; line-height: 1.1; } .not_time_box > div{ padding-left: 30.7%; } .time_year{ font-size: 20px; } .not_time{ font-size: 12px; } .not_con .ann_title{ width: 90%; padding-left: 39px; } .not_con .ann_box > a > i{ right: 40px; } /*浜у搧涓績*/ .pro_con{ background:url("../img/pro_bg1.png") no-repeat center bottom, #f6f9fb; } .pro_list_box > a{ float: left; margin-right: 4.23%; width: 30.5133%; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background-color: #fff; padding: 30px; position: relative; color: #000; transition: all .5s ease; -webkit-box-shadow: 0 0 70px rgba(29,56,75,.17); -moz-box-shadow: 0 0 70px rgba(29,56,75,.17); box-shadow: 0 0 70px rgba(29,56,75,.17); margin-bottom: 1.22rem; top: 0; } .pro_list_box > a:nth-child(3n){ margin-right: 0; } .pro_intersperse{ display: block; margin-bottom: 30px; line-height: 1; font-size: 14px; } .img_box img{ width: 70%; display: block; margin: 0 auto; } .pro_title{ font-size: 16px; font-weight: 700; line-height: 23px; height: 46px; text-align: center; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: .5rem 0 .8rem; } .btn_pro_det{ position: absolute; left: 50%; margin-left: -30px; bottom: -30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; line-height: 60px; width: 60px; color: #656b6f; text-align: center; cursor: pointer; background-color: #c0c6ca; font-size: 14px; transition: all .5s ease; } .btn_pro_det i{ vertical-align: middle; color: #fff; font-size: 16px; transition: all .5s ease; } .btn_pro_det .det_more{ display: block; width: 300%; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); transition: all .5s ease; } .btn_pro_det .hover_more{ width: 0; height: 0; overflow: hidden; color: #fff; bottom: 0; font-weight: 700; transform: translateX(-50%); display: inline-block; white-space:nowrap; text-overflow:ellipsis; left: 50%; } .pro_box:hover{ top: -10px; /*transform: translateY(-10px);*/ /*animation-fill-mode: none;*/ -webkit-box-shadow: 0 0 46px rgba(29,56,75,.4); -moz-box-shadow: 0 0 46px rgba(29,56,75,.4); box-shadow: 0 0 46px rgba(29,56,75,.4); } .pro_box:hover .btn_pro_det{ background: linear-gradient(45deg, #79bd28 0%, #00653b 100%)!important; box-shadow: 0 2px 10px -2px rgba(0, 101, 59, 0.6); color: #fff !important; width: 200px; margin-left: -100px; } .pro_box:hover .det_more{ opacity: 0; width: 100%; } .pro_box:hover .hover_more{ width: auto; height: auto; margin-right: 10px; padding-right: 30px; position: absolute; } .pro_box:hover .btn_pro_det i{ margin-left: 3.5em; } /*鍏憡鍙婇€氬嚱*/ .lit_con{ background:url("../img/lit_bg.png") no-repeat center bottom, #f6f9fb; } .lit_list_box > a{ border-top: 1px solid #c6ced3; display: block; position: relative; transition: all .5s ease; padding: 50px 0; padding-right: 120px; } .icon_bg{ width: 120px; position: absolute; right: 0; top: -1px; height: calc(100% + 1px); color: #b3b8bc; transition: all .5s ease; } .icon_bg i{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 30px; } .lit_list_case> img{ float: left; width: 82px; margin-left: 10px; } .lit_tex_box{ float: left; width: calc(100% - 92px); padding: 0 10px; line-height: 1.5; color: #000; } .lit_title{ font-size: 24px; font-weight: 700; } .lit_member{ font-size: 20px; } .lit_info{ margin-top: 30px; font-size: 14px; } .lit_provenance{ font-size: 14px; color: #8a9891; margin-top: 15px; } .lit_list_box > a:first-child{ border-top-color: transparent; } .lit_list_box > a:hover{ background-color: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; box-shadow: 0 0 70px rgba(29,56,75,.17); border-top-color: transparent; } .lit_list_box > a:hover+a{ border-top-color: transparent; } .lit_list_box > a:hover .icon_bg{ background: -moz-linear-gradient(left, rgba(240, 244, 247, 1) 0%, rgba(240, 244, 247, 0) 49%, rgba(240, 244, 247, 0) 51%, rgba(240, 244, 247, 0) 100%); background: -o-linear-gradient(left, rgba(240, 244, 247, 1) 0%, rgba(240, 244, 247, 0) 49%, rgba(240, 244, 247, 0) 51%, rgba(240, 244, 247, 0) 100%); background: -webkit-gradient(linear, right top, right bottom, color-stop(0,rgba(240, 244, 247, 1)),color-stop(0.49,rgba(240, 244, 247, 0)),color-stop(0.51,rgba(240, 244, 247, 0)), color-stop(1, rgba(240, 244, 247, 0))); background: -webkit-linear-gradient(left, rgba(240, 244, 247, 1) 0%, rgba(240, 244, 247, 0) 49%, rgba(240, 244, 247, 0) 51%, rgba(240, 244, 247, 0) 100%); color: #00653b; } /*濯掍綋*/ .med_con{ background:url("../img/med_bg.png") no-repeat center bottom,url("../img/med_bg1.png") no-repeat center top, #f6f9fb; } .med_list_box > a{ border-top: 1px solid #c6ced3; display: block; position: relative; transition: all .5s ease; padding: 70px 130px 80px 130px; } .med_time{ position: absolute; text-align: left; right: 0; line-height: 30px; font-size: 30px; top: 71px; color:rgba(0,0,0,.5); transition: all .5s ease; width: 64px; } .med_time span{ font-size: 18px; } .med_list_case> span{ position: absolute; left: 0; top: 53px; transition: all .5s ease; font-size: 20px; font-weight: 700; line-height: 52px; display: block; text-align: center; color: #00653b; } .med_tex_box{ width: calc(100% - 90px); padding-right: 10px; line-height: 1.5; color: #84898c; transition: margin-left .5s ease; } .med_title{ font-size: 20px; font-weight: 700; color: #000; } .med_info{ margin-top: 30px; font-size: 14px; } .med_list_box > a:first-child{ border-top-color: transparent; } .med_list_box > a:hover{ background-color: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; box-shadow: 0 0 70px rgba(29,56,75,.17); border-top-color: transparent; } .med_list_box > a:hover+a{ border-top-color: transparent; } .med_list_box > a:hover .med_title{ color: #00653b; } .med_list_box > a:hover>span{ -webkit-border-radius: 0 30px 30px 0; -moz-border-radius: 0 30px 30px 0; border-radius: 0 30px 30px 0; -webkit-box-shadow: 0 0 59px rgba(11, 109, 57, .36); -moz-box-shadow: 0 0 59px rgba(11, 109, 57, .36); box-shadow: 0 0 59px rgba(11, 109, 57, .36); background: linear-gradient(90deg, #79bd28 0%, #00653b 100%)!important; padding: 0 60px; color: #fff; } .med_list_box > a:hover .med_tex_box{ margin-left: 90px; } .med_list_box > a:hover .med_time{ width: 130px; } /*鍏徃鏂伴椈*/ .new_list_box > a{ display: block; margin-bottom: 20px; } .new_time{ float: left; width: 10%; margin-top: 53px; font-size: 30px; line-height: 30px; } .new_time > span{ font-size: 18px; } .new_tex_box{ float: right; padding: 35px 0; width: 79.6%; margin-right: -4.615%; transition: all .5s ease; padding-right: 4.615%; } .new_tex_box> img{ float: left; width: 40%; margin-left: -20.376%; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; transition: all .5s ease; } .new_tex_box > div{ float: right; width: 66.6666%; } .new_title{ font-size: 20px; font-weight: bold; line-height: 1.5; margin-top: 40px; transition: all .5s ease; } .new_info{ font-size: 14px; line-height: 2; color: rgba(0,0,0,.5); margin-top: 40px; transition: all .5s ease; text-align: justify; } .new_list_box > a:hover .new_tex_box{ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background-color: #fff; -webkit-box-shadow: 0 0 54px rgba(29, 56, 75, .26); -moz-box-shadow: 0 0 54px rgba(29, 56, 75, .26); box-shadow: 0 0 54px rgba(29, 56, 75, .26); } .new_list_box > a:hover .new_tex_box > img{ margin-left: -23.376%; } .new_list_box > a:hover .new_title{ color: #00653b; } .new_list_box > a:hover .new_info{ color: rgba(0,0,0,1); } /*甯傚満姒傚喌*/ .mar_con{ background:url("../img/mar_bg.png") no-repeat center bottom, #f6f9fb; } .mar_con .tea_case{ padding-top: 0; padding-bottom: 0; } .scr_box{ padding-top: 1.5rem; padding-bottom: 1.5rem; position: relative; } .scr_box.scr2_box{ padding-top: 1px; } .scr0_box::after{ content: ''; height: 100%; width: 200%; position: absolute; left: -50%; top: 0; background-color: #fff; } .scr0_box> div{ position: relative; z-index: 1; } .mar_title{ font-size: 40px; font-weight: 700; line-height: 1; margin-top: 80px; } .mar_data_box{ margin-top: 2.4rem; } .mar_data_box > div{ float: left; vertical-align: bottom; line-height: 1; margin-right: 90px; font-size: 60px; } .mar_data_box > div:last-child{ margin-right: 0; } .mar_data_box > div > span{ margin-left: 10px; font-size: 16px; } .mar_info{ font-size: 14px; line-height: 32px; color: #84898c; margin-top: 75px; text-align: justify; } .scr0_box .mar_map_box_in{ position: absolute; width: 57%; top: 1.6rem; right: 0; } .mar_map_box_in > img{ width: 100%; position: absolute; left: 0; top: 0; } .mar_map_box_in > img.map_di{ position: relative; } .scr2_box .mar_info{ margin-top: 50px; } .scr2_box .mar_map_box_in{ position: relative; width: 80%; float: right; top: 0; margin-top: 1.25rem; } .scr2_box .mar_data_box{ margin-top:1.6rem; width: 20%; float: left; } .dat_num{ position: relative; } .dat_num::after{ content: ' + '; font-size: 40px; line-height: 1; position: absolute; left: 100%; bottom: 80%; } .scr2_box .mar_data_box .dat_name{ font-size: 16px; line-height: 2; } /*鏂伴椈璇︽儏*/ .det_left_box { width: 70%; float: left; } .new_d_body .det_left_box{ width: 100%; } .new_d_title{ line-height: 1.5; font-size: 26px; text-align: center; color: #000; font-weight: 700; } .new_d_info{ color: #84898c; text-align: center; font-size: 14px; margin-top: 18px; line-height: 1.5; } .new_d_info > span{ margin: 0 13px; } .new_d_info > span:first-child{ margin-left: 0; } .new_d_info > span:last-child{ margin-right: 0; } .new_d_text_box{ -webkit-box-shadow: 0 0 54px rgba(29,56,75,.26); -moz-box-shadow: 0 0 54px rgba(29,56,75,.26); box-shadow: 0 0 54px rgba(29,56,75,.26); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; margin-top: 68px; padding:11.538% 14.285% ; } .new_d_text_box p{ font-size: 14px; line-height: 2; color: #84898c; padding-bottom: .15rem; } /*.new_d_text_box > img{*/ /*width: 100%;*/ /*display: block;*/ /*margin-bottom: .5rem;*/ /*}*/ .new_d_text_box .new_con_text_box> img{ width: 100%!important; height: auto!important; display: block; margin-bottom: .5rem; } .new_d_text_box p img{ margin: 0 auto; display: block; max-width: 100%; height: auto !important; } .det_text_at h2{ font-size: 26px; color: #000; text-align: center; line-height: 1.5; font-weight: 700; margin-bottom: .5rem; } .text_line{ height: 1px; width: 100%; background-color: #dfe4e7; margin-bottom: .5rem; } .det_text_at h4{ font-size: 18px; color: #00653b; line-height: 1.5; font-weight: 700; margin-bottom: .3rem; } .com_info_stock p{ color: #00653b; } .con_box{ padding-bottom: .5rem; font-size: 14px; line-height: 1.8; color: #00653b; font-weight: 700; } .con_box > div:first-child{ float: left; } .con_box > div:last-child{ float: right; } .text_tab_box{ line-height: 50px; } .text_tab_box > a{ -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; text-align: center; transition: all .5s ease; } .text_tab_box > a:hover{ padding: 0 20px; } .btn_prev{ float: left; color: #858d90; } .btn_prev i{ vertical-align: middle; margin-right: 20px; } .btn_next{ float: right; color: #858d90; } .btn_next i{ vertical-align: middle; margin-left: 20px; } .go_back{ position: relative; font-size: 14px; font-weight: 700; color: #000; text-align: center; margin-top: 80px; line-height: 1; display: block; } .go_back i{ vertical-align: middle; margin-right: 10px; } .go_back::before{ content: ''; display: inline-block; vertical-align: middle; width: 12.637%; height: 1px; background-color: #000; margin-right: 30px; } .go_back::after{ content: ''; display: inline-block; vertical-align: middle; width: 12.637%; height: 1px; background-color: #000; margin-left: 30px; } .det_right_box{ float: right; width: 26.15%; margin-top: 2.4rem; } .new_d_body .det_right_box{ display: none; } .det_hot_box{ font-size: 30px; font-weight: 700; line-height: 1.2; color: #000; padding-bottom: .4rem; border-bottom: 1px solid #a4a8b0; margin-bottom: 15px; } .det_hot_box> div{ color: rgba(0,0,0,.4); font-size: 15px; line-height: 1.5; text-transform: capitalize; font-weight: 400; } .det_recommend > a{ display: block; padding: 38px 0 ; position: relative; transition: all .5s ease; } .det_recommend > a::after{ content: ''; display: block; left: 0; bottom: 0; position: absolute; background-color: #ced1d7; transition: all .5s ease; width: 48px; height: 1px; } .rec_title{ width: calc(100% - 18px); font-size: 16px; line-height: 1.7; color: #000000; margin-left: 0; transition: all .5s ease; } .rec_time{ width: calc(100% - 18px); position: relative; font-size: 16px; line-height: 1.5; color: #000; margin-left: 0; transition: all .5s ease; } .rec_time span{ color: #bfc3c6; } .rec_time i{ position: absolute; right: 0; transition: all .5s ease; color: #00653b; top: 0; font-size: 20px; vertical-align: middle; opacity: 0; } .det_recommend > a:hover{ /*padding-left: 18px;*/ } .det_recommend > a:hover::after{ width: 100%; background-color: #00653b; } .det_recommend > a:hover .rec_title{ color: #00653b; } .det_recommend > a:hover .rec_time i{ opacity: 1; right: -10px; } .det_recommend > a:hover .rec_title,.det_recommend > a:hover .rec_time{ margin-left: 18px; } .go_top{ display: none; cursor: pointer; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background-color: #fff; -webkit-box-shadow: 0 0 27px rgba(29, 56, 75, .17); -moz-box-shadow: 0 0 27px rgba(29, 56, 75, .17); box-shadow: 0 0 27px rgba(29, 56, 75, .17); text-align: center; color: #8f999f; width: 130px; height: 60px; line-height: 60px; position: fixed; bottom: 70px; right: 20px; transform: rotate(90deg); font-weight: 700; z-index: 10; } .go_top i{ margin-right: 10px; vertical-align: middle; } /*鍝佺墝鏂囧寲*/ .cul_con{ background:url("../img/cul_bg.png") no-repeat center bottom, #f6f9fb; overflow: hidden; } .con_case_b{ width: 81.25vw; margin: 0 auto; padding-top: 1.5rem; padding-bottom: 1.6rem; position: relative; } .scr1_img_box{ position: relative; float: left; width: 44.23%; margin-top: -42px; margin-left: -42px; } .scr1_img_case{ display: block; width: 100%; } .scr1_img_face{ position: absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; display: block; width: 39%; } .scr1_text_box{ margin-top: -42px; float: right; width: 50%; } .cul_title{ font-size: 32px; font-weight: 700; line-height: 1.5rem; color: #000; } .cul_info{ font-size: 14px; color: #72787f; line-height: 2.57; } .case_bg{ position: relative; padding-top: 1.2rem; padding-bottom: 1.5rem; }.case_bg::after{ content: ''; display: block; background-color: #fff; width: 150%; height: 100%; position: absolute; left: -50%; top: 0; -webkit-border-radius: 0 10px 10px 0; -moz-border-radius: 0 10px 10px 0; border-radius: 0 10px 10px 0; -webkit-box-shadow: 0 0 90px rgba(29, 56, 75, .17); -moz-box-shadow: 0 0 90px rgba(29, 56, 75, .17); box-shadow: 0 0 90px rgba(29, 56, 75, .17); } .case_bg> div{ position: relative; z-index: 1; } .case_bg >.src2_img_box{ position: absolute; bottom: -64px; right: 16.666%; width: 25%; -webkit-box-shadow: 0 0 68px rgba(29, 56, 75, .36); -moz-box-shadow: 0 0 68px rgba(29, 56, 75, .36); box-shadow: 0 0 68px rgba(29, 56, 75, .36); -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; overflow: hidden; z-index: 2; } .src2_img_box > img{ width: 100%; display: block; } .sr2_con_box{ width: 50.769%; float: left; } .sr2_con_box > img{ width: 100%; display: block; } .cul_src2_line{ padding-top: 1.05rem; border-bottom: 1px solid #cccccc; margin-bottom: 30px; } .case_bg >.scr2_title_box{ position: absolute; width: 16.666%; top: -40px; right: 0; text-align: center; z-index: 2; font-size: 40px; color: #d5dae0; line-height: 1; } .scr2_title_box> img{ position: relative; left: 50%; top: -43px; transform: translateX(-50%); } .scr2_title { width: 350px; text-transform: uppercase; position: relative; left: 50%; margin-left: -175px; margin-top: 80px; transform: rotate(90deg); } .cul_info_case{ float: left; width: 50%; height: 435px; padding-left: 260px; position: relative; overflow: hidden; } .img_center_box{ position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; width: 230px; height: 230px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; overflow: hidden; background-color: #fff; } .cen_img_0{ width: 100%; display: block; } .cen_img_1{ position: absolute; top: 50%; left: 50%; width: 178px; margin-left: -89px; margin-top: -20px; } .cul_src3_con_box > .cul_info_case:nth-child(odd){ text-align: right; padding-right: 260px; padding-left: 0; } .scr3_title{ margin-top: 160px; font-size: 20px; color: #000; font-weight: 700; padding-bottom: 38px; line-height: 1; border-bottom: 1px solid #d2d6d9; transition: all .5s ease; margin-bottom: 35px; position: relative; } .scr3_title::after{ content: ''; display: block; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; height: 10px; width: 10px; background-color: #00653b; position: absolute; bottom: -5px; } .loop1 .scr3_title::after{ right: -20px; } .loop2 .scr3_title::after{ left: -20px; } .loop3 .scr3_title::after{ right: -20px; } .loop4 .scr3_title::after{ left: -20px; } .scr3_title::before{ content: ''; display: block; height: 1px; width: 200px; border-bottom: 1px #d2d6d9 dashed; position: absolute; top: calc(100% + 0px); transition: color .5s ease; } .loop1 .scr3_title::before{ right: -20px; transform: rotate(225deg); transform-origin: 100% 100%; } .loop2 .scr3_title::before{ left: -20px; transform: rotate(135deg); transform-origin: 0 0; } .loop3 .scr3_title::before{ right: -20px; transform: rotate(135deg); transform-origin: 100% 100%; } .loop4 .scr3_title::before{ left: -20px; transform: rotate(225deg); transform-origin: 0 0; } .cul_info_case:hover .scr3_title::before{ border-color: #00653b; } .cul_info_case:hover .scr3_title{ color: #00653b; border-color: #00653b; } .scr3_info{ font-size: 14px; line-height: 36px; color: #72787f; transition: all .5s ease; } .cul_info_case:hover .scr3_info{ color: #000; } .loop_box{ -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; width: 380px; height: 380px; position: absolute; overflow: hidden; transition: all .5s ease; transform: translate3d(0,0,0); } /*.cul_info_case:hover .loop_box{*/ /*width: 480px;*/ /*height: 480px;*/ /*}*/ .loop1 .loop_box{ right: 0; bottom: 0; transform: translate3d(50%,50%,0); background-color:#79bd28 ; } .loop2 .loop_box{ left: 0; bottom: 0; transform: translate3d(-50%,50%,0); background-color:#5aa62d ; } .loop3 .loop_box{ right: 0; top: 0; transform: translate3d(50%,-50%,0); background-color:#00653b ; } .loop4 .loop_box{ left:0; top: 0; background-color:#1a7937 ; transform: translate3d(-50%,-50%,0); } .loop1:hover .loop_box{ transform: translate3d(50%,50%,0) scale(1.2); } .loop2:hover .loop_box{ transform: translate3d(-50%,50%,0) scale(1.2); } .loop3:hover .loop_box{ transform: translate3d(50%,-50%,0) scale(1.2); } .loop4:hover .loop_box{ transform: translate3d(-50%,-50%,0) scale(1.2); } .loop_box> span{ display: block; width: 22px; height: 22px; background-color:rgba(255,255,255,.3); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; transition: opacity .5s ease; } .cul_info_case:hover .loop_box> span{ opacity: 0; } .loop_box> span::after{ content: ''; display: block; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin-top: -5px; margin-left: -5px; background-color: #f6f9fb; } .loop1 .loop_box> span{ left: 25%; margin-left: -22px; bottom: 75%; margin-bottom: 0; } .loop2 .loop_box> span{ right: 25%; margin-right: -22px; bottom: 75%; margin-bottom: 0; } .loop3 .loop_box> span{ left: 25%; margin-left: -22px; top: 75%; margin-top: 0; } .loop4 .loop_box> span{ right: 25%; margin-right: -22px; top: 75%; margin-top: -0; } .loop_box::after{ content: ''; display: block; height: 100%; left: 50%; width: 2px; top: 0; background-color: #fff; position: absolute; z-index: 1; } .loop_box::before{ content: ''; display: block; height: 2px; top: 50%; width: 100%; left: 0; background-color: #fff; position: absolute; z-index: 1; } .loop_box img{ width: 50%; position: absolute; opacity: 0; transition: all .5s ease; transform: translate3d(0,0,0); } .cul_info_case:hover .loop_box img { opacity: 1; transform: translate3d(0,0,0); } .loop1 .loop_box img{ left: 0; top: 0; } .loop2 .loop_box img{ right: 0; top: 0; } .loop3 .loop_box img{ left: 0; bottom: 0; } .loop4 .loop_box img{ right: 0; bottom: 0; } .padT0{ padding-top: 0 !important; } .src3_case{ position: relative; } .go1{ animation-name: go1; } @keyframes go1 { 0%{ opacity: 0; } 100%{ opacity: 1; } } /*鍙戝睍鍘嗙▼*/ .dev_con{ background-color: #f6f9fb; position: relative; } .dev_con .tea_case{ position: relative; z-index: 1; padding-bottom: .9rem; } .tab_time_bottom .showreel_box { width: 100%; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background-color: transparent; overflow: hidden; position: relative; height: 90px; line-height: 90px; padding: 0 90px; box-shadow: none; margin-bottom: 0; } .tab_time_bottom .showreel_box .list_u_img_box > a{ width: 100px; font-size: 16px; color: #979ba0; transition: all .5s ease; } .tab_time_bottom .showreel_box .list_u_img_box > a.on,.tab_time_bottom .showreel_box .list_u_img_box > a:hover { font-size: 16px; color: #00653b; } .tab_time_bottom .showreel_box .list_u_img_box > a::after { content: ''; display: block; position: absolute; left: 50%; top: 70%; margin-left: -1em; width: 0; height: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #00653b; transition: all .5s ease; } .tab_time_bottom .showreel_box .list_u_img_box > a:hover::after,.tab_time_bottom .showreel_box .list_u_img_box > a.on::after { width: 2em; } .tab_time_bottom .showreel_box .btn_img_prev,.tab_time_bottom .showreel_box .btn_img_next{ -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; height: 40px; width: 40px; line-height: 40px; color: #7a858a; text-align: center; -webkit-box-shadow: 0 0 27px rgba(29, 56, 75, .17); -moz-box-shadow: 0 0 27px rgba(29, 56, 75, .17); box-shadow: 0 0 27px rgba(29, 56, 75, .17); top: 50%; left: 25px; margin-top: -20px; } .tab_time_bottom .showreel_box .btn_img_next{ right: 25px; left: auto; } .dev_tex_box > div{ display: none; width: 57%; float: right; line-height: 45px; font-size: 14px; font-weight: bold; padding-bottom: .5rem; min-height: 2.6rem; } .time_title_case{ position: relative; padding-top: 1.15rem; padding-bottom: 1.15rem; overflow: hidden; } .at_time{ position: absolute; top: 0; left: 50%; transform: translateX(-50%); color: #e9eff2; font-size: 300px; line-height: 0.8; background: -ms-linear-gradient(180deg, rgba(233, 239, 242, 0), rgba(233, 239, 242, 0), rgba(233, 239, 242, 0)); background: -moz-linear-gradient(180deg, #f1f2f3, rgba(233, 239, 242, 0.7), rgba(233, 239, 242, 0)); background: -o-linear-gradient(180deg, #f1f2f3, rgba(233, 239, 242, 0.7), rgba(233, 239, 242, 0)); background: -webkit-gradient(linear, right top, right bottom, color-stop(0,rgba(246, 249, 251, 1)),color-stop(0.10,rgba(233, 239, 242, 1)),color-stop(0.7,rgba(233, 239, 242, 0.7)), color-stop(1, rgba(233, 239, 242, 0))); background: -webkit-linear-gradient(top, #f1f2f3, rgba(233, 239, 242, 0.7), rgba(233, 239, 242, 0)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .time_sha{ position: absolute; pointer-events: none; z-index: 2; width: 100%; height: 100%; background: -ms-linear-gradient(left, rgba(246, 249, 251, 1) 0%, rgba(246, 249, 251, 0) 10%, rgba(246, 249, 251, 0) 90%, rgba(246, 249, 251, 1) 100%); background: -moz-linear-gradient(left, rgba(246, 249, 251, 1) 0%, rgba(246, 249, 251, 0) 10%, rgba(246, 249, 251, 0) 90%, rgba(246, 249, 251, 1) 100%); background: -o-linear-gradient(left, rgba(246, 249, 251, 1) 0%, rgba(246, 249, 251, 0) 10%, rgba(246, 249, 251, 0) 90%, rgba(246, 249, 251, 1) 100%); background: -webkit-gradient(linear, right top, right bottom, color-stop(0,rgba(246, 249, 251, 1)),color-stop(0.10,rgba(246, 249, 251, 0)),color-stop(0.9,rgba(246, 249, 251, 0)), color-stop(1, rgba(246, 249, 251, 1))); background: -webkit-linear-gradient(left, rgba(246, 249, 251, 1) 0%, rgba(246, 249, 251, 0) 10%, rgba(246, 249, 251, 0) 90%, rgba(246, 249, 251, 1) 100%); } .time_line_case{ margin: 0 auto; width: 83.33333%; margin-top: .5rem; } .time_line_box{ width: 99999px; position: relative; top: 0; left: 0; transition: all .5s ease; } .time_line_box > div{ float: left; position: relative; width: 330px; height: 6px; background: -ms-linear-gradient(right, rgba(50, 131, 97, 1) 0%, rgba(204, 229, 180, 1) 100%); background: -moz-linear-gradient(right, rgba(50, 131, 97, 1) 0%, rgba(204, 229, 180, 1) 100%); background: -o-linear-gradient(right, rgba(50, 131, 97, 1) 0%, rgba(204, 229, 180, 1) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0,rgba(50, 131, 97, 1)), color-stop(1, rgba(204, 229, 180, 1))); background: -webkit-linear-gradient(right, rgba(50, 131, 97, 1) 0%, rgba(204, 229, 180, 1) 100%); font-size: 20px; line-height: 1; } .btn_time{ position: absolute; right: -10px; top: -7px; width: 20px; height: 20px; border-radius: 50%; background-color: #00653b; z-index: 1; cursor: pointer; } .btn_time > span{ position: absolute; left: 50%; margin-left: -23px; top: -50px; z-index: 2; transition: all .5s ease; } .time_line_box > div:nth-child(odd) .btn_time > span{ bottom: -50px; top:auto; } .btn_time::after{ content: ''; display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 36px; height: 36px; background-color: rgba(14,111,57,.15); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; animation:dot1 2s infinite ease; -webkit-animation:dot1 2s infinite ease; /* Safari 鍜 Chrome */} @keyframes dot1 { 0%{ width: 20px; height: 20px; } 50%{ width: 36px; height: 36px; } 100%{ width: 20px; height: 20px; } } .btn_time:hover::after{ display: block; } .time_line_box > div.bodes{ pointer-events: none; background: -ms-linear-gradient(right, rgba(145, 147, 149, 1) 0%, rgba(220, 224, 225, 1) 100%); background: -moz-linear-gradient(right, rgba(145, 147, 149, 1) 0%, rgba(220, 224, 225, 1) 100%); background: -o-linear-gradient(right, rgba(145, 147, 149, 1) 0%, rgba(220, 224, 225, 1) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0,rgba(145, 147, 149, 1)), color-stop(1, rgba(220, 224, 225, 1))); background: -webkit-linear-gradient(right, rgba(145, 147, 149, 1) 0%, rgba(220, 224, 225, 1) 100%); } .bodes .btn_time{ background-color: #959798; } .bodes .btn_time span{ color: #979ba0; } /*娉㈡氮鑳屾櫙*/ .wave_box{ width: 100%; height: 350px; position: absolute; left: 0; bottom: 0; overflow: hidden; } .wave { overflow: hidden; position: absolute; top: 129%; width: 140%; transform: translateY(-50%); color: #fff; margin-left: -20%; animation: 3s ease-in-out infinite alternate waveAnimateA; } @keyframes waveAnimateA { 0% { transform: translate(-80px,-52%); } 100% { transform: translate(80px,-50%); } } .wave svg { fill: rgba(233,239,242,1); width: 102%; margin-left: -1%; height: auto; } .st0{fill:#E9EFF2;opacity:0.5} .st1{opacity:0.5;fill:#E9EFF2;} .st3{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_1_);} .titie_box_bg{ width: 130px; position: absolute; left: 50%; top: 50%; margin: -65px 0 0 -65px; z-index: 1; transform: scale(0); transition: all .5s ease; } .titie_box_bg svg{ width: 100%; position: relative; z-index: 1; } .titie_box_bg #title_bg_down{ opacity: .3; transform: rotate(37deg) scale(1.02); position: absolute; left: 0; right: 0; z-index: 0; } .time_line_box .on .btn_time > span{ font-size: 40px; color: #fff; top: 50% !important; transform: translate(-50%,-50%); bottom: auto !important; margin-left: 0; } .time_line_box .on .btn_time .titie_box_bg{ transform: scale(1); } .time_line_box .on .btn_time .titie_box_bg > #title_bg_down{ animation: alpha 2.25s linear infinite forwards; } @keyframes alpha { 0% { transform: rotate(0); } 25% { } 50% { border-radius: 50%; } 75% { } 100% { transform: rotate(360deg); } } @media screen and (max-width:1600px){ .com_title{ font-size: 34px; } .hon_tab_nav_box> div{ padding-bottom: .3rem; } .new_tex_box > div { width: 70.6666%; } .new_title,.new_info{ margin-top: 25px; } .cul_title { line-height: 100px; } .pul_now > div{ max-height: 90px; } .nav_box, .search_box, .language_box{ line-height: 90px; } header .nav_con .pul_logo{ top: 18px; left: 3vw; } } @media screen and (max-width:1440px) { .pul_initial .language_box{ margin-top: 110px; } } @media screen and (max-width:1366px) { .f-60{ font-size: 48px; } .f-50{ font-size: 42px; } .f-48{ font-size: 40px; } .f-46{ font-size: 40px; } .f-44{ font-size: 38px; } .f-42{ font-size: 36px; } .f-40{ font-size: 34px; } .f-38{ font-size: 32px; } .f-36{ font-size: 30px; } .f-34{ font-size: 28px; } .f-32{ font-size: 26px; } .f-30{ font-size: 26px; } .f-28{ font-size: 26px; } .f-26{ font-size: 24px; } .f-24{ font-size: 22px; } .f-22{ font-size: 20px; } .f-20{ font-size: 18px; } .f-18{ font-size: 16px; } .f-16{ font-size: 14px; } .f-14{ font-size: 14px; } .f-12{ font-size: 12px; } .tea_mem_case { margin-top: 1rem; } .member_box > div { padding-left: 34%; } .member_info { padding: .35rem 6% .4rem 34%; } .tal_title_box > div{ width: 80%; } .tal_tab_name{ padding: 20px 8% 20px 0; } .tal_title_box > span{ letter-spacing: 30px; } .com_img_case .swiper-button-prev{ margin-right: 30px; } .com_img_case .swiper-button-next{ margin-left: 30px; } .com_title { font-size: 28px; } .hon_tab_nav_box> div{ padding-bottom: .4rem; } .hon_tab_num{ font-size: 30px; } .hon_tab_name{ line-height: 48px; } .new_title{ margin-top: 0; } .mar_data_box { margin-top: 1.8rem; } .scr1_img_box { width: 50%; margin-top: 0; } .pul_initial .language_box{ margin-top: 100px; } } @media screen and (max-width:1024px){ .full-menu_m{ display: block; } .full-menu_pc{ display: none; } .pul_now{ display: none; } .ins_banner{ height: 40vh; } .tea_case{ width: 100%; padding-left: 30px; padding-right: 30px; } .com_con .tea_case { width: 100%; } .pul_initial .language_box{ display: none; } header{ height: auto; } .com_img_case{ width: 76.2%; margin-left: 10%; padding-right: calc(13.8% + 30px); } .sha_imgBox{ width: calc(14.78% + 30px); } .com_img_case .swiper-button-prev{ margin-right: 20px; } .com_img_case .swiper-button-next{ margin-left: 20px; } .com_img_case .swiper-pagination .on { font-size: 20px; } .com_img_case .swiper-pagination{ font-size: 16px; } .com_title{ left: 88.5%; } .com_img_case{ margin-top: .6rem; margin-bottom: .6rem; } .hon_name{ font-size: 18px; } .hon_name_text{ font-size: 14px; } .hon_name_box .active-nav .hon_name_text{ font-size: 16px; box-shadow: 0 0 30px rgba(29,56,75,.17); } .new_tex_box { margin-right: 0; width: 75%; } .scr1_img_box{ width: 100%; float: none; margin-left: 0; } .scr1_text_box{ float: none; width: 100%; margin-top: 0; } .cul_src2_line { padding-top: .6rem; margin-bottom: 10px; } .cul_info_case{ padding-left: 50px; } .cul_src3_con_box > .cul_info_case:nth-child(odd) { padding-right: 50px; } .cen_img_0{ display: none; } .img_center_box{ background: transparent; top: 0; bottom: auto; } .loop_box{ display: none; } .scr3_title::before{ display: none; } .cul_info_case{ height: auto; } .src3_case{ padding-top: 1.5rem; } .scr3_title{ margin-top: 50px; } #bloc footer .web-msg > div{display: flex;flex-direction: column;align-items: center;justify-content: center;} #bloc footer .web-msg span a{display: block;} #bloc footer .f-main .max-wid > ul > li i{vertical-align: baseline;} } @media screen and (max-width: 768px){ .f-60{ font-size: 24px; } .f-50{ font-size: 22px; } .f-48{ font-size: 22px; } .f-46{ font-size: 20px; } .f-44{ font-size: 20px; } .f-42{ font-size: 20px; } .f-40{ font-size: 18px; } .f-38{ font-size: 18px; } .f-36{ font-size: 18px; } .f-34{ font-size: 16px; } .f-32{ font-size: 16px; } .f-30{ font-size: 16px; } .f-28{ font-size: 16px; } .f-26{ font-size: 14px; } .f-24{ font-size: 14px; } .f-22{ font-size: 14px; } .f-20{ font-size: 14px; } .f-18{ font-size: 12px; } .f-16{ font-size: 12px; } .f-14{ font-size: 12px; } .f-12{ font-size: 12px; } .pre_box{ min-width: 140px; } .sen_link_box{ padding-bottom: .35rem; } .post_case { padding-top: .6rem; } .page_case { padding-top: .45rem; } #bloc footer .f-main .max-wid{ padding: .6rem 0 .3rem 0; } .max-wid{ width: auto; margin: 0 15px; } .sta_img_box{ margin-top: .8rem; } .sta_tab_con_box{ margin-bottom: -.8rem; } .tal_info{ width: 200%; } .hon_con_box{ width: 100%; } .hon_con .tea_case{ width: 100%; } .hon_name_box{ width: 100%; top: -100px; padding: 0; } .hon_name_box .swiper-button-prev, .hon_name_box .swiper-button-next{ display: none; } .hon_name_box .swiper-container{ height: auto; } .pro_list_box > a{ padding: 15px; } .med_list_box > a { padding: 40px 65px 45px 65px; } .med_list_case> span { top: 33px; font-size: 14px; line-height: 42px; } .med_time { line-height: 20px; font-size: 20px; top: 41px; width: 43px; } .med_time span { font-size: 12px; } .med_list_box > a:hover>span { padding: 0 35px; } .med_list_box > a:hover .med_time { width: 65px; } .new_time{ line-height: 20px; font-size: 20px; } .new_time span { font-size: 12px; } .con_case_b { padding-top: .75rem; padding-bottom: .8rem; } .cul_title{ font-size: 20px; line-height: .7rem; } .cul_src2_line{ padding-top: .3rem; } .cul_info{ line-height: 2.5; } .scr3_info{ line-height: 2.5; } .scr2_title { margin-top: 0; } .case_bg >.scr2_title_box { font-size: 28px; } .scr3_title{ font-size: 18px; } .at_time{ font-size: 200px; } } @media screen and (max-width: 640px){ .tea_case{ padding: 60px 15px 70px 15px; } .tea_mem_case .swiper-button-next, .tea_mem_case .swiper-button-prev { height: 30px; width: 30px; line-height: 30px; } .carousel .swiper-button-next, .carousel .swiper-button-prev { height: 30px; width: 30px; line-height: 30px; } .member_info > img{ bottom: 100%; } .member_box > .member_info{ padding-left: 6%; } .sen_link_box { padding-bottom: .1rem; } .post_box{ margin-bottom: 15px; padding: 0 15px; } .joi_hint> span{ line-height: 1.5; padding: 20px 0; } .page_case > div:first-child{ margin-right: 0; width: 100%; } .page_case > div:last-child{ margin-left: 0; width: 100%; } .post_name i { margin-right: 10px; } .post_num i{ margin-left: 10px; } .full-menu { width: 40px; height: 40px; line-height: 40px; top: 2vh; font-size: 20px; } header .nav .full-menu:after { width: 40px; height: 40px; } .max-wid li{ display: block; margin-bottom: 30px; } #bloc footer .f-main .max-wid > ul{ display: block; } .sty_line,.sen_link_con{ display: none; } .pul_initial .search_box { margin-right: calc(5vw + 50px); margin-top: 2vh; line-height: 40px; } .menu-list > a { font-size: 18px;} .menu-list > div >a { font-size: 14px; } header .pul_logo{ top: 2vh; } .pul_initial .search_case { top: calc(2vh + 40px ); } .sta_tab_box > span{ width: 25%; font-size: 12px; } .sta_tab_box >span.on span { transform: scale(1.4) translateZ(0); } .sta_tab_box { padding-bottom: 0.15rem; } .sta_tab_con_box .swiper-slide.active .sta_img_box > img { -webkit-box-shadow: 0 0 50px rgba(40, 80, 104, .55); -moz-box-shadow: 0 0 50px rgba(40, 80, 104, .55); box-shadow: 0 0 50px rgba(40, 80, 104, .55); } .tal_tab_box { float: none; width: 100%; height: auto; } .tal_img_box{ float: none; width: 100%; padding-bottom: 145%; margin-top: .4rem; } .tal_con_box{ padding-top: .5rem; } .tal_info { width: 100%; } .tal_info_m{ display: block; position: relative; margin-top: .4rem; } .tal_info_pc{ display: none; } .tal_title_box > div { width: 100%; } .com_img_case{ -webkit-box-shadow: 0 0 30px rgba(30, 46, 63, .36); -moz-box-shadow: 0 0 30px rgba(30, 46, 63, .36); box-shadow: 0 0 30px rgba(30, 46, 63, .36); margin-top: .3rem; margin-bottom: .3rem; } .com_img_case .swiper-button-prev, .com_img_case .swiper-button-next{ display: none; } .com_info_case p{ padding-top: 15px; line-height: 1.8; } .com_info_case{ margin-bottom: 0; } .com_title { left: 60.5%; } .com_img_case { padding-right: calc(13.8% + 15px); } .sha_imgBox { width: calc(14.78% + 14px); } .sen_manifesto{ line-height: 1.5; bottom: 100%; } .hon_tab_nav_box{ float: none; width: 100%; } .hon_tab_nav_box> div { width: 25%; float: left; text-align: center; } .hon_con_case{ float: none; width: 100%; } .hon_name_box{ position: relative; top: 0; } .hon_name{ display: none; } .hon_con_box .swiper-container{ padding-bottom: 0; } .hon_con .tea_case{ padding: 60px 15px 70px 15px; } .hon_tab_num { font-size: 24px; } .hon_tab_name { line-height: 40px; font-size: 14px; } .hon_tab_name::after{ height: 3px; } .inv_left_box{ width: 100%; float: none; } .inv_right_box{ width: 100%; float: none; padding-left: 0; } .inv_right_box::after{ display: none; } .inv_title { font-size: 20px; line-height: 56px; } .inv_code{ margin-top: 0; } .inv_stock_box{ padding: 20px 0; } .sto_contrast{ margin-bottom: 20px; } .ann_box > a { padding: 20px 0; padding-right: 32px; } .sty_bottom_sty { margin-bottom: .15rem; } .showreel_box .btn_img_prev, .showreel_box .btn_img_next{ width: 40px; } .showreel_box{ padding: 0 40px; height: 60px; line-height: 60px; margin-bottom: 25px; } .showreel_box .list_u_img_box > a.on { font-size: 20px; } .showreel_box .list_u_img_box > a { width: 70px; font-size: 14px; } .not_con .ann_box > a { padding: 30px 32px 20px 0; } .not_con .ann_box > a > i{ right: 0; } .time_year{ font-size: 18px; } .ann_title{ font-size: 14px; } .pro_list_box > a{ width: 48%; margin-right: 4%; margin-bottom: .4rem; font-size: 12px; } .pro_list_box > a:nth-child(3n){ margin-right: 4%; } .pro_list_box > a:nth-child(2n){ margin-right: 0; } .pro_intersperse{ margin-bottom: 15px; } .pro_title{ margin:.25rem 0 .5rem 0; font-size: 14px; line-height: 20px; height: 40px; } .btn_pro_det{ line-height: 40px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; width: 40px; margin-left: -20px; bottom: -20px; } .pro_box:hover .btn_pro_det{ width: 100%; transform: translateX(-50%); margin-left: 0; } .lit_list_box > a{ padding: 20px 0; padding-right: 40px; } .lit_list_case> img { width: 40px; margin-left: 0; } .lit_tex_box { width: calc(100% - 40px); padding-right: 10px; padding-left: 0; } .lit_title { font-size: 16px; } .lit_member { font-size: 14px; } .lit_info { margin-top: 15px; font-size: 12px; } .lit_provenance { font-size: 12px; margin-top: 10px; } .icon_bg { width: 40px; } .med_list_box > a { padding: 34px 10px 45px 10px; } .med_list_box > a:hover .med_tex_box { margin-left: 0; } .med_tex_box{ width: 100%; margin-top: 55px; } .med_title { font-size: 16px; margin-top: 8px; } .new_title{ font-size: 16px; } .new_tex_box{ width: 90%; padding-left: 10px; padding-right: 10px; } .new_tex_box> img { float: none; margin: 0; margin-bottom: 10px; width: 100%; } .new_tex_box > div { width: 100%; } .new_list_box > a:hover .new_tex_box > img { margin-left: 0; } .new_time { position: relative; z-index: 1; } .new_info{ margin-top: 15px; } .new_list_box > a { margin-bottom: 0; } .scr_box{ padding-top: 60px; padding-bottom: 70px; } .mar_title{ margin-top: 0; font-size: 26px; text-align: center; } .scr0_box .mar_map_box_in{ position: relative; width: 100%; margin-top: 20px; top: 0; } .mar_data_box { margin-top: 0.5rem; } .mar_data_box > div { margin-right: 45px; font-size: 30px; } .mar_info{ margin-top: 35px; } .scr2_box .mar_data_box{ width: 100%; float: none; margin-top: 0.5rem; } .scr2_box .mar_map_box_in{ margin-top: 20px; width: 100%; float: none; } .det_left_box{ width: 100%; float: none; } .det_right_box{ float: none; width: 100%; margin-top: 50px; } .go_top { right: -33px; } .new_d_title { font-size: 18px; } .new_d_info { font-size: 12px; margin-top: 10px; } .new_d_text_box { margin-top: 30px; padding: 15px; } .new_d_text_box p,.new_d_text_box > img, .new_d_text_box h2,.con_box{ padding-bottom: .25rem; } .text_line{ margin-bottom: .25rem; } .go_back{ margin-top: 40px; } .con_box > div:last-child { float: left; } .det_hot_box { font-size: 18px; padding-bottom: 0.15rem; } .det_recommend > a { padding: 16px 0; } .rec_title { font-size: 14px; } .rec_time { font-size: 12px; } .cul_info_case{ float: none; width: 100%; padding-left: 15px; } .scr3_title { margin-top: 15px; padding-bottom: 20px; margin-bottom: 18px; } .cul_src3_con_box > .cul_info_case:nth-child(odd) { padding-right: 15px; } .con_case_b{ width: 100%; padding-left: 15px; padding-right: 15px; } .cul_info,.scr3_info{ line-height: 1.8; } .sr2_con_box{ width: 100%; margin-top: 30px; } .case_bg >.src2_img_box { position: relative; bottom: 0; right: 0; width: 80%; } .at_time { font-size: 100px; } .time_line_box > div{ font-size: 14px; } .btn_time > span{ margin-left: -16px; top: -35px; } .time_line_box > div:nth-child(odd) .btn_time > span { bottom: -35px; top: auto; } .titie_box_bg { width: 60px; margin: -30px 0 0 -30px; } .time_line_box .on .btn_time > span { font-size: 20px; } .time_line_case{ margin-top: -.2rem; } .time_title_case{ padding-bottom: .6rem; } .dev_tex_box > div{ width: 100%; float: none; } .wave { top: auto; bottom: -40%; } } @media screen and (max-width: 375px){ .wave { width: 160%; margin-left: -25%; } } @media screen and (max-width: 320px) { .com_title { left: 48%; } .sen_manifesto { font-size: 12px; bottom: 83%; } .hon_name_text { font-size: 14px; } .hon_name_text { line-height: 40px; } } /*浜у搧璇︽儏椤?/ .pro_det_crosswise{ background-color: #ffffff; overflow: hidden; position: relative; padding-top: 1.5rem; padding-bottom: .85rem; } .pro_cro_bg1{ width: 40.3125%; position: absolute; height: 100%; top: 0; left: 0; } .pro_cro_bg2{ width: 36.45833%; position: absolute; height: 100%; bottom: 0; left: 0; } .pro_det_into_box{ position: relative; z-index: 1; width: 67.71%; margin: 0 auto; } .pro_det_img{ width: 40%; float: left; margin-top: .1rem; } .pro_det_img img{ width: 100%; } .pro_det_text_box{ width: 50%; float: right; } .pro_det_title{ line-height: 1.2; font-size: .28rem; color: #000000; margin-bottom: .15rem; font-weight: 700; } .pro_det_info{ font-size: .18rem; line-height: 1.5; color: rgba(0,0,0,.7); } .pro_det_merit{ margin-top: .4rem; } .pro_det_merit img{ max-width: 100%; max-height: none; height: auto !important; } table{ max-width: 100%; } .pro_det_merit > div{ padding: .2rem 0; font-size: .16rem; line-height: 1.6875; color: #000; } .pro_det_merit > div > span{ font-size: .24rem; font-weight: 700; color: #00653b; vertical-align: bottom; line-height: 1.45; margin-right: .1rem; } .pro_det_classify{ position: relative; margin-top: .45rem; } .pro_det_cla_bg{ line-height: 0.75; font-size: .8rem; text-transform: uppercase; color: #eff3f6; letter-spacing: .9rem; margin-left: -.15rem; white-space : nowrap; } .pro_det_cla_con{ position: absolute; left: 0; top: 64.5%; width: 40%; font-size: .16rem; font-weight: 700; color: #000; } .pro_det_cla_con::after{ content: ''; display: block; width: 150%; left: 100%; top: 50%; position: absolute; height: 1px; background-color:#dadfe4; } .pro_det_cla_con i{ width: .24rem; margin-right: .24rem; display: inline-block; vertical-align: middle; } .pro_det_cla_con i img{ display: block; width: 100%; } .pro_det_con_case{ padding-top: 0 !important; } .det_proportion_box{ padding: .85rem 0 .62rem 0; border-bottom: 1px solid #cbd3d9; } .det_proportion_box > div{ width: 38%; float: left; padding: .25rem 0; margin-right: 12%; } .det_pro_box{ font-size: 0; } .det_pro_box > div{ display: inline-block; vertical-align: middle; } .det_proportion_box > div:nth-child(2n+1){ clear: left; } .det_pro_box.det_border{ border-radius: 45px; border: 8px solid #d5dbe0 ; padding: 0; margin-top: .25rem; margin-bottom: .25rem; } .det_pro_box.det_border .det_num{ line-height: 74px; width: 82px; text-align: center; } .circleChart{ width: 90px; position: relative; } .circleChart > div{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: .14rem; line-height: 1; color: #00653b; } .det_text_info{ width: calc(100% - 90px); padding-left: 6.76923%; } .det_num{ font-size: .3rem; line-height: 1.5; color: #00653b; } .det_pro_title{ font-size: .16rem; font-weight: 700; line-height: 1.5; color: #000000; } .det_con_box{ padding-top: .35rem; } .det_con_title{ font-size: .16rem; color: #b4bbc0; line-height: .52rem; padding: .5rem 0; } .det_con_title span{ margin-right: .2rem; font-weight: 700; color: #000000; font-size: .28rem; } .trait_box > div{ margin-right: 2.7%; margin-top: 2.7%; width: calc((100% - 2.7% * 4) / 5); float: left; background-color: #fff; border-radius: 10px; box-shadow: 23px 0 90px rgba(29,56,75,.17); padding: 1.53646%; position: relative; overflow: hidden; transition: all .5s ease; } .trait_box > div:hover{ background-color: #07933d; box-shadow: 17px 0 57px rgba(7,147,61,.4); } .trait_box > div:nth-child(5n){ margin-right: 0; } .det_con_l{ font-size: .2rem; line-height: 1.1; color: #000; transition: all .5s ease; position: relative; z-index: 1; } .trait_box > div:hover .det_con_l{ color: #fff; } .det_con_in{ font-size: .14rem; line-height: 1.5; color: #414446; min-height: .54rem; transition: all .5s ease; position: relative; z-index: 1; } .trait_box > div:hover .det_con_in{ color: #fff; } .det_pro_box_num{ color: #ecf0f4; font-size: 1rem; line-height: 1; position: absolute; right: .15rem; bottom: -.35rem; } .text_box{ border-radius: 10px; background-color: #fff; padding: .55rem 5%; margin-top: 2.7%; box-shadow: 23px 0 90px rgba(29,56,75,.17); } .text_box p{ margin-bottom: .3rem; font-size: .14rem; line-height: 2; color: #656b6f; } .text_box > p:last-child{ margin-bottom: 0; } .down_box{ margin-top: 2.7%; border-radius: 10px; background-color: #fff; padding: 1px 0; box-shadow: 23px 0 90px rgba(29,56,75,.17); } .down_box > a{ display: block; float: left; width: 20%; margin: 4.23% 0; border-right: 1px solid #e0e6ea; text-align: center; } .down_box > a:nth-child(5n){ border-right: transparent; } .down_box > a span{ color: #97a2aa; text-align: center; line-height: 1.5; transition: all .5s ease; } .down_box > a:hover span{ color: #07933d; } .down_box > a span i{ font-size: .35rem; } .down_box > a div{ color: #000000; font-size: .16rem; line-height: 3; position: relative; transition: all .5s ease; } .down_box > a:hover div{ color: #07933d; } .down_box > a div::after{ content: ''; display: block; height: 6px; width: 0; border-radius: 10px; bottom: 0; left: 50%; margin-left: -.5em; position: absolute; background-color: #07933d; transition: all .5s ease; } .down_box > a:hover div::after { width: 1em; } .flow_box{ margin-top: 2.7%; border-radius: 10px; background-color: #fff; padding: 6.53846% 6.1538% 1.538746% 6.1538%; box-shadow: 23px 0 90px rgba(29,56,75,.17); } .flow_box > img{ width: 100%; } .flow_box > div{ border-top:1px solid #cbd3d9; padding: 4.1666% 0; font-size: .16rem; font-weight: 700; color: #000000; margin-top: 5.4166%; } .flow_box > div span{ color: #07933d; } .pro_into_img{ box-shadow: 23px 0 90px rgba(29,56,75,.17); border-radius: 10px; background-color: #fff; width: calc((100% - 2.6% * 3) / 4); margin-right: 2.6%; margin-top: 2.7%; padding-top: 3.846% ; float: left; text-align: center; } .pro_into_box > .pro_into_img:nth-child(4n){ margin-right: 0; } .pro_into_img img{ display: block; width: 50%; margin: auto; margin-bottom: 16.666%; } .pro_into_img> div{ font-size: .16rem; line-height: 1.5; min-height: .533rem; color: #000000; font-weight: 700; } .amity_box{ box-shadow: 23px 0 90px rgba(29,56,75,.17); border-radius: 10px; background-color: #fff; position: relative; } .am_title{ width: 13.846%; padding: .3rem .2rem .3rem 0; text-align: center; color: #fff; float: left; font-weight: 700; font-size: .22rem; border-radius: 10px .6rem .6rem 10px; box-shadow: 17px 0 57px rgba(7,147,61,.4); line-height: .3rem; position: relative; background: linear-gradient(45deg, #79bd28 0%, #00653b 100%); } .am_re{ position: absolute; right: 3.84615%; top: 50%; transform: translateY(-50%); font-size: .12rem; font-weight: 700; color: #000000; } .am_con{ float: left; width: 55.3846%; } .am_con > a{ float: left; width: 33.33%; text-align: center; border-right: 1px solid #d4dbe0; display: block; margin: .3rem 0; height: .3rem; } .am_con > a:nth-child(3n),.am_con > a:last-child{ border-right: transparent; } .am_con > a img{ height: 100%; } .amity_box{ margin-top: 3.4615%; } /*publications(en)*/ .publ_tab_nav_box{ margin: 0 auto; margin-bottom: 1.2rem; font-size: 0; text-align: center; border-radius: 10px; background-color: #fff; box-shadow: 0 0 70px rgba(29,56,75,.17); padding: 4.4615% 5.3846% 0 5.3846%; } .publ_tab_nav_box a{ display: inline-block; vertical-align: middle; width: 25%; position: relative; } .publ_marks{ position: relative; } .publ_marks img{ max-width: 55px; position: relative; z-index: 1; } .publ_marks span{ text-transform: uppercase; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: .4rem; line-height: 1; color: #ecf2f3; } .publ_name{ padding: .13rem 0 .25rem 0; line-height: 1; font-size: .18rem; color: #000000; opacity: 0; transition: all .5s ease; } .publ_con_box > div{ display: none; } .publ_con_box > div:first-child{ display: block; } .publ_tab_nav_box a::after{ content: ''; display: block; position: absolute; left: 50%; transform: translateX(-50%); bottom: -5px; height: 10px; width: 0; border-radius: 5px; background: linear-gradient(90deg, #79bd28 0%, #00653b 100%)!important; transition: all .5s ease; } .publ_tab_nav_box a.on::after,.publ_tab_nav_box a:hover::after{ width: 100%; } .publ_tab_nav_box a.on{ cursor: auto; } .publ_tab_nav_box a:hover .publ_name,.publ_tab_nav_box a.on .publ_name{ opacity: 1; } .publ_body .lit_title{ font-weight: 400; line-height: 1; margin-bottom: .1rem; } /*瑙嗛鍒楄〃*/ .vid_body .pro_box{ position: relative; padding: 0; box-shadow: none; margin-bottom: .8rem; background-color: transparent; } .vie_img_box{ border-radius: 10px; overflow: hidden; position: relative; box-shadow: 0 0 70px rgba(29,56,75,.17); } .vie_img_box img{ width: 100%; display: block; } .vid_body .vie_img_box >span{ border-radius: 50px; border: 2px solid #fff; color: #fff; font-size: 72px; text-indent: -28px; text-align: center; line-height: .5rem; width: .5rem; height: .5rem; cursor: pointer; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .vid_body .vie_img_box >span:hover{ color: #00653b; } .vid_text_box{ margin-top: .4rem; } .vid_title{ font-size: .16rem; line-height: 1.5; margin-bottom: .3rem; color: #000000; } .vid_into{ font-size: .12rem; line-height: 1.5; color: #72787f; } .pro_list_box > a:nth-child(3n+1){ clear: left; } /*meetUs*/ .mee_body .pro_con { background: url(../img/mee_bg.png) no-repeat center bottom, #f6f9fb; } .mee_body .tea_case{ padding-top: 0; } .mee_con_box{ margin-top: -1rem; background-color: #fff; border-radius: 20px; position: relative; z-index: 11; padding: 1rem 18.46%; } .mee_body .sen_link_box{ padding-bottom: 1.7rem; } .mee_finish{ text-align: center; font-size: .16rem; line-height: 1.8; color: #000000; position: relative; margin-top: .4rem; } .mee_con_list > div{ position: relative; margin-bottom: .8rem; } .mee_logo, .mee_into{ width: 40.24%; } .mee_logo{ border-radius: 10px; border: 1px solid #e1e4e9; transition: all .5s ease; position: absolute; top: 50%; transform: translateY(-50%); overflow: hidden; } .mee_con_list > div:hover .mee_logo{ border-color: #07933d; box-shadow: 9px 0 46px rgba(184,195,188,.59) ; } .mee_con_list > div .mee_logo{ right: 0; } .mee_con_list > div:nth-child(odd) .mee_logo{ left: 0; } .mee_logo img{ width: 100%; } .mee_con_list > div .mee_into{ float: left; text-align: right; } .mee_con_list > div:nth-child(odd) .mee_into{ float: right; text-align: left; } .mee_num{ width: 19.52%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .mee_num::after{ content: ''; display: block; width: 2px; height: calc(50% + .4rem); background-color: #07933d; position: absolute; z-index: 1; left: 50%; margin-left: -1px; top: 50%; } .mee_num::before{ content: ''; display: block; width: 2px; height: calc(50% + .4rem); background-color: #07933d; position: absolute; z-index: 1; left: 50%; margin-left: -1px; bottom: 50%; } .mee_con_list > div:first-child .mee_num::before{ display: none; } .mee_num_bg{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 1.2rem; line-height: 1; color: #f6f9fb; opacity: 0; transition: all .5s ease; } .mee_con_list > div:hover .mee_num_bg{ opacity: 1; } .mee_dot{ border-radius: 100%; width: .14rem; height: .14rem; background-color: #07933d; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); transition: all .5s ease; } .mee_dot::after{ content: ''; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: .3rem; height: .3rem; border:.08rem solid #cde9d8; z-index: -1; border-radius: 100%; transition: all .5s ease; opacity: 0; } .mee_con_list > div:hover .mee_dot::after{ opacity: 1; } .mee_into{ color: #000000; transition: color .5s ease; line-height: 1.5; } .mee_con_list > div:hover .mee_into{ color: #07933d; } .mee_title{ font-size: .18rem; } .mee_link{ font-size: .14rem; margin-bottom: .08rem; margin-top: .08rem; word-wrap:break-word ; } .mee_time{ font-size: .12rem; } .mee_con_list{ overflow: hidden; position: relative; } .mee_con_list > div:last-child .mee_num::after{ height: calc(50% + .8rem); } .mee_con_list::after{ content: ''; display: block; width: 100%; height: .5rem; position: absolute; left: 0; bottom: 0; pointer-events: none; background: linear-gradient(to top, #ffffff, rgba(255, 255, 255, 0)); } /*faq*/ .faq_det_show{ cursor: pointer; position: relative; background: -moz-linear-gradient(bottom, rgba(240, 244, 247, 1) 0%, rgba(240, 244, 247, 0) 49%, rgba(240, 244, 247, 0) 51%, rgba(240, 244, 247, 0) 100%); background: -o-linear-gradient(bottom, rgba(240, 244, 247, 1) 0%, rgba(240, 244, 247, 0) 49%, rgba(240, 244, 247, 0) 51%, rgba(240, 244, 247, 0) 100%); background: -webkit-gradient(linear, right top, right bottom, color-stop(0,rgba(240, 244, 247, 1)),color-stop(0.49,rgba(240, 244, 247, 0)),color-stop(0.51,rgba(240, 244, 247, 0)), color-stop(1, rgba(240, 244, 247, 0))); background: -webkit-linear-gradient(bottom, rgba(240, 244, 247, 1) 0%, rgba(240, 244, 247, 0) 49%, rgba(240, 244, 247, 0) 51%, rgba(240, 244, 247, 0) 100%); } .faq_det_show,.faq_answer_box{ padding: .35rem 10%; line-height: 20px; color: #000000; font-size: .14rem; } .faq_answer_box{ padding-top: 0; padding-bottom: 0; max-height: 0; transition: all .5s ease; } .faq_list_box div.on .faq_answer_box{ max-height: 9999px; transition-timing-function: cubic-bezier(.5,0,1,0); transition-delay: 0s; } .faq_trouble,.faq_answer{ position: relative; padding-left: 7.69%; } .faq_answer{ padding-top: .35rem; padding-bottom: .35rem; } .faq_trouble{ transition: all .5s ease; } .faq_trouble::after{ content: 'Q:'; display: block; position: absolute; left: 0; top: 0; font-size: .2rem; line-height: 20px; } .faq_list_box div.on .faq_trouble{ color: #00653b; } .faq_answer::after{ content: 'A:'; display: block; position: absolute; left: 0; top: .35rem; font-size: .2rem; line-height: 20px; } .faq_list_box > div{ border-radius: 10px; overflow: hidden; background-color: #fff; margin-bottom: .4rem; box-shadow: 12px 0 46px rgba(29,56,75,.17); } .faq_num{ position: absolute; left: 0; top: 0; width: 10%; } .faq_num img{ max-width: 107px; } .faq_num > span{ font-size: .22rem; line-height: 1; position: absolute; left: 10px; top: 10px; color: rgba(255,255,255,.5); } .faq_list_box i{ font-size: .18rem; color: #9299a0; position: absolute; top: 50%; transform: translateY(-50%); right: 2.7%; transition: all .5s ease; } .faq_list_box div.on i{ transform: translateY(-50%) rotate(180deg); } .faq_body { background: url(../img/mee_bg.png) no-repeat center bottom, #f6f9fb; } /*applicationforEvaluation(en)*/ .app_body .pro_con { background: url(../img/mee_bg.png) no-repeat center bottom, #f6f9fb; } .app_body .tea_case{ padding-top: 0; } .alone_box{ height: 70vh; width: 100%; position: absolute; top: 0; left: 0; z-index: 12; } .app_con_box { margin-top: -.5rem; background-color: #fff; border-radius: 20px; position: relative; z-index: 11; padding: .6rem 10%; box-shadow: 0 23px 90px -5px rgba(29, 56, 72, 0.17); } .app_title{ text-align: center; font-size: .3rem; line-height: 1.5; margin-bottom: .4rem; color: #000000; } .form_box{ border-radius: 20px; border: 1px solid #e1e4e9; overflow: hidden; } .blo_con > div{ padding-left: 4.8076%; padding-right: 4.8076%; } .app_title_l{ padding-top: .4rem; padding-bottom: .3rem; background-color: #f7f9fb; font-size: .2rem; line-height: 1.1; border-bottom: 1px solid #eee; border-top: 1px solid #eee; } .blo_con > div:first-child{ border-top: none; } .app_entering_box{ padding-top: .3rem; } .app_entering_box > div{ float: left; margin-bottom: .4rem; } .form_input_box{ margin-right: 5.67%; width: 47.162%; position: relative; } .form_input_box label{ font-size: .14rem; line-height: 2; color: #000; padding-left: .2rem; } .form_input_box label i,.app_title_l i{ color: #ff0000; } .inp_style{ border-radius: 30px; padding-right: .2rem; padding-left: .2rem; background-color: #edf1f4; font-size: .14rem; color: #000000; line-height: 3.5714; height: .5rem; display: block; outline: none; border: none; width: 100%; } .app_entering_box > .form_input_box:nth-child(2n){ margin-right: 0; } .crosswise_box{ padding-top: .3rem; } .crosswise_box .form_input_box{ margin-bottom: 0; margin-right: 0; width: 100%; font-size: 0; } .meo_inp_box{ font-size: 0; margin-bottom: .2rem; } .meo_inp_box label{ display: none; }.crosswise_box > .meo_inp_box:first-child label{ display: block; } .meo_inp_box .form_input_box{ display: inline-block; vertical-align: bottom; width: calc((100% - .6rem) / 4); margin-right: .2rem; margin-bottom: 0; } .meo_inp_box .form_input_box:last-child{ margin-right: 0; } .input_box_cun{ margin-bottom: .2rem; } .input_box_cun .inp_style{ float: left; width: calc((100% - .6rem) / 4); margin-right: .2rem; } .input_box_cun .inp_style:last-child{ margin-right: 0; } .crosswise_box > div:last-child{ margin-bottom: .4rem; } .crosswise_box2 .form_input_box{ width: calc((100% - .8rem) / 5); } .crosswise_box2 .input_box_cun .inp_style{ width: calc((100% - .8rem) / 5); } .form_box_btn{ text-align: center; margin-top: .65rem; } .form_box_btn > a{ display: inline-block; border-radius: 30px; background: linear-gradient(90deg, #79bd28 0%, #00653b 100%)!important; box-shadow: 0 2px 10px -2px rgba(0, 101, 59, 0.6); color: #fff; font-size: .18rem; line-height: 2.777; padding: 0 .72rem; cursor: pointer; min-width: 168px; } /*technicalIssueFeedback(en)*/ .form_input_box2{ width: 96%; font-size: 0; padding: .3rem 0; border-bottom: 1px solid #eee; margin: 0 auto; position: relative; } .app_entering_box3 .form_input_box2:last-child{ border-bottom: none; margin-bottom: .2rem; } .zindex_1{ z-index: 1; } .form_input_box2 label{ display: inline-block; vertical-align: middle; width: 29.21%; padding-left: 0; padding-right: .3rem; } .form_input_box2 input,.form_input_box2 .sele_box{ width: 70.79%; display: inline-block; vertical-align: middle; } /*涓嬫媺*/ .sel_drop_down{ cursor: pointer; position: relative; } /*.sel_drop_down:after{*/ /*content: '';*/ /*height: 80%;*/ /*width: 1px;*/ /*!*background-color: #cfd6dc;*!*/ /*right: 0;*/ /*top: 10%;*/ /*position: absolute;*/ /*}*/ .sel_drop_down > span{ width: 100%; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: relative; z-index: 1; font-size: .14rem; border-radius: 30px; padding-right: .2rem; padding-left: .2rem; background-color: #edf1f4; color: #000000; line-height: 3.5714; outline: none; border: none; } .sel_drop_down i{ font-size: .16rem; color: #a2aeae; transition: all 0.5s; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%) rotate(0deg); } .sel_drop_down i.on{ transform:translateY(-50%) rotate(180deg); } .drop_down_box{ display: none; width: 100%; font-size: .14rem; line-height: 2.5; background-color: #fff; box-shadow: 5px 0 20px rgba(0,0,0,.2); -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; position: absolute; top: 100%; left: 0; color: #55626e; } .drop_down_box ul{ padding: 0 .2rem; } .drop_down_box li{ display: block; cursor: pointer; } .drop_down_box li.on,.drop_down_box li:hover{ color: #00653b; } .sel_show{ color: #000; font-size: 0; } .sel_show > i ,.sel_show > span{ display: inline-block; vertical-align: middle; } .sel_show > span{ font-size: .14rem; } .ind_search > input{ padding:0 .2rem; } .app_entering_box3{ padding-top: .15rem; } .form_hint{ font-size: .14rem; line-height: 1; padding-top: .3rem; padding-bottom: .6rem; color: #ff0000; width: 96%; margin: 0 auto; } .form_input_box2 textarea{ margin: .45rem 0; } .tex_sty{ border-radius: 30px; padding: .3rem .2rem .1rem .2rem; line-height: .15; font-size: .14rem; display: block; width: 100%; background-color: #edf1f4; height: 1.1rem; color: #000; resize: none; border: none; outline: none; } .textarea_box{ padding-top: 0; } .textarea_box .form_input_box{ padding: 0; margin-bottom: 0 !important; } .form_input_box_point{ width: 70.79%; display: inline-block; vertical-align: middle; font-size: 0; } .form_input_box_point > div{ display: inline-block; vertical-align: middle; position: relative; width: calc((100% - 7.9%) / 2); margin-right: 7.9%; } .form_input_box_point > div input{ width: 100%; } .form_input_box_point > div:last-child{ margin-right: 0; } .form_input_box_point > div label{ position: absolute; bottom: 100%; left: 0; width: 100%; display: block; padding-left: .2rem; padding-right: 0; } .form_input_box_alone{ padding-top: .5rem; } /*娉ㄥ唽*/ .res_text_box{ text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #fff; } .res_title{ font-size: .3rem; line-height: 1.5; margin-bottom: .2rem; } .res_into{ font-size: .14rem; line-height: 2; color: rgba(255,255,255,.6); } .app_body.reg_body .pro_con{ background: #f6f9fb; } .reg_body .app_con_box{ margin-top: -1.5rem; } .reg_body .form_box { border: none; border-radius: 0; } .reg_body .blo_con > div{ border-bottom: 1px solid #eee; padding-right: 0; padding-left: 0; } .reg_body .blo_con > div:last-child{ border-bottom: 1px solid #eee; } .form_input_box img{ border-radius: 10px; width: 100%; } .app_entering_img_box{ padding-top: .6rem; } .reg_body .app_entering_box{ padding-bottom: .2rem; } .inp_hint{ padding: .2rem 0 .3rem .2rem; font-size: .12rem; color: rgba(0,0,0,.7); } /*鐧诲綍*/ .log_body > div{ height: 100vh; position: relative; background: url("../img/log_banner.png") no-repeat center; background-size: cover; } .log_con_box{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 67.7%; } .log_left{ float: left; width: 40%; color: #fff; font-size: .14rem; line-height: 1.428; } .log_title{ font-size: .3rem; margin-top: .7rem; margin-bottom: .3rem; } .log_into{ margin: .2rem 0; } .log_info{ color: rgba(255,255,255,.7); } .log_get{ color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.7); line-height: 2.7777; font-size: .18rem; text-transform: uppercase; padding: 0 21.15%; border-radius: 30px; cursor: pointer; display: inline-block; margin-top: .8rem; } .log_right{ float: right; width: 50%; background-color: rgba(255,255,255,.9); border-radius: 30px; padding:6.1538% 6.538% 7.6923% 6.538%; } .log_name{ color: #000; font-size: .3rem; line-height: 1; margin-bottom: .45rem; } .log_right .inp_style{ background-color: rgba(136,147,155,.3); margin-bottom: .4rem; } .log_right .form_box_btn{ margin-top: .7rem; text-align: left; font-size: 0; } .log_right .form_box_btn a{ width: 50%; text-align: center; padding: 0; } .log_right .form_box_btn .btn_for{ background: none !important; color: rgba(0,0,0,.7); font-size: .14rem; box-shadow: none; } /*鍏ㄧ悆涓氬姟*/ #gmap-12{ height: 100%; width: 100%; position: absolute; left: 0; top: 0; } .gm-svpc, .gmnoprint.gm-style-cc, .gm-style-mtc, .gm-style-cc /*.gmnoprint*/ { display: none; } /*鍏抽棴鎸夐挳*/ .gm-style-iw + div{ display: none; } .gmnoprint.gm-bundled-control.gm-bundled-control-on-bottom .gmnoprint{ display: block; } .gm-control-active.gm-fullscreen-control{ top: auto !important; bottom: 110px !important; } .on_gmap.dropdown.gmap_controls{ top: 120px!important; } #water{ pointer-events: none; } .sen_link_box{ pointer-events: none; } .sen_link_con{ pointer-events: auto; } .map_body .ins_banner{ height: 100vh; } .gm-style .gm-style-iw { text-align: center; } .dis_num{ color: rgba(255,255,255,1); font-size: .2rem; line-height: 2; position: absolute; left: 10vw; top: 50%; transform: translateY(-50%); pointer-events: none; z-index: 5; } .dis_num div{ font-size: .4rem; font-weight: 700; } /*鎼滅储缁撴灉椤?/ .sea_body .ins_banner{ height: 41.4666vh; } .sen_text_box{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: .4rem; line-height: 1.5; color: #fff; text-align: center; width: 100%; } .sen_text_box > div{ font-size: .15rem; color: rgba(255,255,255,.4); } .sea_search_box{ border-radius: 10px; background-color: #fff; padding: .2rem 0; padding-left: 5.3846%; line-height: .8rem; margin-top: -.6rem; position: relative; z-index: 11; box-shadow: 0 23px 90px -5px rgba(29, 56, 72, 0.17); } .sea_search_box input{ border: none; height: .8rem; width: calc(100% - 1.2rem); float: left; display: block; background-color: transparent; outline: none; color: #000000; font-size: .18rem; font-weight: 700; padding-right: .1rem; box-shadow: 0 0 100px 46px #fff inset; } .sea_search_box span{ display: block; float: left; cursor: pointer; width: 1.2rem; color: #7f7f7f; border-left: 1px solid #dfe5e8; text-align: center; } .sea_search_box span i{ font-size: .3rem; } .sea_search_box span button{ border: none; background-color: transparent; display: block; cursor: pointer; width: 100%; line-height: .8rem; } .statistical_result{ position: relative; text-align: center; } .sea_res_bg{ font-size: 1.5rem; line-height: 1.8; color: rgba(0,0,0,.05); text-transform: uppercase; } .sea_res_text{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: .2rem; color: #1a1a1a; } .sea_res_text span{ color: #00653b; } .sea_nav_box{ margin-bottom: .45rem; } .sea_nav_box a{ border-radius: 18px; background-color: #e6e9ec; font-size: .16rem; font-weight: 700; line-height: 2.1875; text-align: center; padding: 0 .25rem; color: #00653b; transition: all .5s ease; cursor: pointer; display: inline-block; } .sea_nav_box a.on{ background-color: #00653b; color: #fff; cursor: auto; } .sea_nav_box .swiper-button-prev,.sea_nav_box .swiper-button-next{ display: none; } .sea_nav_box .swiper-slide{ width: auto; } .sea_hint{ font-size: .14rem; line-height: 1; color: #767676; text-align: center; margin-top: .9rem; padding-bottom: 1rem; } .sea_hint::after{ content: ''; display: inline-block; vertical-align: middle; height: 1px; width: .3rem; margin-left: .5rem; background-color: #767676; } .sea_hint::before{ content: ''; display: inline-block; vertical-align: middle; height: 1px; width: .3rem; margin-right: .5rem; background-color: #767676; } .sea_con.mar_con{ background: #f6f9fb; } .sea_res_con_box > div{ display: none; } .sea_res_con_box > div:first-child{ display: block; } .sea_res_con_list > a{ display: block; border-bottom: 1px solid #c1cbd1; padding: 3.846% 20% 3.0769% 5.3846%; position: relative; transition: all .5s ease; } .sea_title{ font-size: .2rem; line-height: 1.5; padding: .05rem 0; color: #000; font-weight: 700; transition: all .5s ease; } .sea_info{ font-size: .14rem; line-height: 1.8; color: #84898c; transition: all .5s ease; text-align: justify; } .sea_list_sty{ position: absolute; right: 3.46%; top: 50%; transform: translateY(-50%); height: .35rem; text-align: center; line-height: .35rem; overflow: hidden; min-width: .88rem; } .sea_list_sty i{ display: block; font-size: .88rem; color: #1a7937; transition:all .3s ease; position: absolute; top: 100%; /*left: 50%;*/ /*transform: translateX(-50%);*/ right: 0; } .sea_list_sty div{ font-size: .16rem; text-align: center; border-radius: 18px; background-color: #e6e9ec; color: #1a7937; padding: 0 .25rem; font-weight: 700; transition:all .3s ease .2s; } .sea_res_con_list > a:hover{ border-bottom: 1px solid #1a7937; } .sea_res_con_list > a:hover .sea_title{ color: #1a7937; } .sea_res_con_list > a:hover .sea_info{ color: #000; } .sea_res_con_list > a:hover .sea_list_sty > div{ margin-top: .35rem; transition:all .3s ease; } .sea_res_con_list > a:hover .sea_list_sty > i{ top: 0; transition:all .3s ease .2s; } .sea_center.sea_nav_box a{ margin: 0 15px; } .sea_center.sea_nav_box .swiper-wrapper{ justify-content: center; } /*淇℃伅*/ .btn_sha{ text-transform: uppercase; color: #fff; text-align: center; font-size: .16rem; box-shadow: 17px 0 57px rgba(7,147,61,.4); background: linear-gradient(90deg, #79bd28 0%, #00653b 100%); position: fixed; border-radius: .6rem; padding: .2rem .35rem; line-height: 1; right: .2rem; top: 30%; cursor: pointer; z-index: 11; width: 1.85rem; } .btn_sha i{ font-size: .32rem; vertical-align: middle; margin-right: .15rem; } .sha_bg{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0,0,0,.65); z-index: 1010; } .sha_con_box{ border-radius: 30px; background-color: rgba(255,255,255,1); position: absolute; left: 50%; top: 30%; width: 52%; transform: translateX(-50%); padding: 3.125% 6.25% 4.166% 6.25%; z-index: 1011; } .sha_btn_close{ position: absolute; right: .4rem; top: .4rem; cursor: pointer; font-size: .28rem; line-height: 1; color: #b0b0b0; text-align: center; } .sha_btn_close i{ font-size: .28rem; } .sha_title_box{ border-bottom: 3px solid #00653b; position: relative; } .sha_title_box > div{ display: inline-block; vertical-align: middle; font-size: .16rem; color: #64727f; } .sha_title_box > div i{ color: #ff0000; } .sha_title_box > div:first-child{ font-size: .28rem; line-height: 2.5; width: 1.54rem; color: #000; } .sha_con_box .form_box{ border: none; border-radius: 0px; } .sha_con_box .blo_con > div{ padding: 0; padding-top: .65rem; } .sha_con_box .form_input_box2{ margin: 0; width: 100%; padding: .15rem 0; border-bottom: none; } .sha_con_box .form_input_box2 label{ width: 1.54rem; } .sha_con_box .form_input_box2 input,.sha_con_box .form_input_box2 textarea{ width: calc(100% - 1.54rem); } .sha_con_box .form_input_box2 textarea{ resize: none; margin: 0; display: inline-block; vertical-align: top; } .sha_con_box .sha_inq_code input{ width: calc(50% - 1.54rem); } .code_img{ display: inline-block; vertical-align: middle; margin-left: .2rem; width: 15.75%; text-align: center; cursor: pointer; } .code_img img{ vertical-align: middle; } .cod_hint{ font-size: .14rem; line-height: 1.5; color: #000; margin-left: .2rem; display: inline-block; vertical-align: middle; } .sha_con_box .form_box_btn{ text-align: left; margin-top: .35rem; margin-left: 1.54rem; } .sha_con_box .form_box_btn a{ width: 55%; text-align: center; text-transform: capitalize; padding: 0; } .sha_title_box .btn_edit{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: .3rem; line-height: 1; color: #1a7937; cursor: pointer; } .sha_con_box_info .sha_title_box > div:first-child{ width: 100%; padding-right: .4rem; } .sha_con_box_info .app_entering_box > div{ margin-bottom: .3rem; } .sha_con_box_info .app_entering_box:first-child{ border-bottom: 1px solid #d6dbd8; } .sha_con_box_info.sha_con_box .blo_con > div{ padding-top:.3rem } .sha_con_box_info.sha_con_box .blo_con > div:first-child{ padding-top: .65rem; } .sha_con_box_info input,.sha_con_box_info .sel_drop_down{ pointer-events: none; } .sha_con_box_info.sha_con_box .form_box_btn{ margin-left: 0; text-align: center; } .edit_box .sha_title_box .btn_edit{ color: #a2aeae; } .edit_box input,.edit_box .sel_drop_down{ pointer-events: all; } .sha_con_box_info .form_box_btn{ display: none; } .edit_box.sha_con_box_info .form_box_btn{ display: block; } .edit_box .app_entering_box{ border-bottom: 1px solid #d6dbd8; } .sha_con_box_pass{ width: 41.66%; padding-right: 5.2%; padding-left: 5.2%; } .sha_con_box_pass .sha_title_box > div:first-child{ width: 100%; } .sha_con_box_pass .form_input_box{ width: 100%; margin: 0; margin-bottom: .3rem; } .sha_con_box_pass .blo_con > div{ padding-top: .3rem; } .sha_con_box_pass .form_box_btn { text-align: center; margin-top: .35rem; margin-left: 0; } .sha_con_box_pass .form_box_btn a{ display: block; width: 100%; } .sha_con_box{ display: none; } .sha_bg{ display: none; } .sha_con_box_for_pass{ width: 41.66%; padding-right: 5.2%; padding-left: 5.2%; } .sha_con_box_for_pass .sha_title_box > div:first-child{ width: 100%; } .sha_con_box_for_pass .form_input_box{ width: 100%; margin: 0; margin-bottom: .3rem; } .sha_con_box_for_pass .blo_con > div{ padding-top: .3rem; } .sha_con_box_for_pass .form_box_btn { text-align: center; margin-top: .35rem; margin-left: 0; } .sha_con_box_for_pass .form_box_btn a{ display: block; width: 100%; } .time-graph { display:flex; display:-webkit-flex; justify-content: center; align-items: center; position: relative; } .time-graph .time-graph-canvas { width: 90px; height: 90px; } .time-graph > div { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: .14rem; line-height: 1; color: #00653b; } .ad_code_box{ position: relative; } .ad_code{ width: 150px; height: 150px; display: none; position: absolute; right:0; bottom: 110%; } .ad_code_box:hover img{ display: block; } @media screen and (max-width:1600px){ .mee_num_bg { font-size: 1rem; } } @media screen and (max-width:1366px) { .pro_det_title { font-size: .2rem; } .pro_det_merit > div { padding: .1rem 0; } .pro_det_cla_bg { font-size: 1.6rem; } .pro_det_cla_con { width: 50%; } .pro_det_cla_con::after { width: 120%; } .publ_marks span{ font-size: .3rem; } .mee_num_bg { font-size: .8rem; } .form_input_box_alone { padding-top: .7rem; } .log_right .inp_style{ margin-bottom: .3rem; } .log_right .form_box_btn{ margin-top: .5rem; } .log_get{ margin-top: .6rem; } .log_title{ margin-top: .5rem; } .code_img{ padding: 0 .05rem; } .sha_title_box > div:first-child{ width: 1.2rem; } .sha_con_box .form_input_box2 label { width: 1.2rem; } .sha_con_box .form_input_box2 input, .sha_con_box .form_input_box2 textarea{ width: calc(100% - 1.2rem); } .sha_con_box .sha_inq_code input{ width: calc(50% - 1.2rem); } .sha_con_box .form_box_btn{ margin-left: 1.2rem; } .sha_con_box_pass .form_box_btn{ margin-left: 0; } .sha_con_box_for_pass .form_box_btn{ margin-left: 0; } .sha_btn_close { right: .3rem; top: .3rem; } } @media screen and (max-width:1024px){ .alone_box{ height: 40vh; } .pro_det_crosswise{ padding-right: 30px; padding-left: 30px; } .pro_det_into_box{ width: 100%; } .pro_det_img img { margin-left: 30px; } .mee_con_box { padding: 1rem 30px; } .log_con_box > div{ float: none; width: 100%; } .log_right{ margin-top: .8rem; } .log_title{ margin-top: 0; } .map_body .ins_banner{ height: 90vh; } .sha_con_box{ width: 80%; top: 22%; } } @media screen and (max-width: 768px){ .pro_det_merit { margin-top: .2rem; } .pro_det_classify { margin-top: .25rem; } .pro_det_cla_bg { letter-spacing: .3rem; } .pro_det_cla_con { width: 60%; } .trait_box > div{ width: calc((100% - 2.7% * 1) / 2); } .trait_box > div:nth-child(2n){ margin-right: 0; } .trait_box > div:nth-child(5n){ margin-right: 2.7%; } .det_con_title { line-height: .3rem; padding: .2rem 0; } .det_con_box{ padding-top: .2rem; } .text_box{ padding: .2rem 5%; } .text_box p{ margin-bottom: .1rem; } .am_con{ float: none; } .am_title{ width: 30%; float: none; } .am_re { top: .35rem; transform: translateY(0); } .am_con{ width: 100%; padding-left: 15px; padding-right: 15px; } .publ_name { padding: .08rem 0 .1rem 0; } .app_con_box{ padding-right: 15px; padding-left: 15px; } .blo_con > div { padding-left: 10px; padding-right: 10px; } .sea_res_con_list > a{ padding-left: 15px; } .sea_list_sty{ min-width: .4rem; } .sea_list_sty div{ font-size: .14rem; padding: 0 .15rem; } .sea_list_sty i{ font-size: .4rem; } .sea_search_box{ padding-top: .1rem; padding-bottom: .1rem; line-height: .4rem; } .sea_search_box input{ width: calc(100% - .6rem); } .sea_search_box span{ width: .6rem; } .sea_res_bg{ font-size: 1rem; } .sea_nav_box{ margin-bottom: .2rem; } .sea_hint { margin-top: .4rem; padding-bottom: .5rem; } .det_proportion_box > div { width: 45%; margin-right: 5%; } .sha_con_box { top: 16%; } .sha_btn_close { right: .2rem; top: .2rem; } } @media screen and (max-width: 640px){ .pro_det_crosswise{ padding: 60px 15px 70px 15px; } .pro_det_img{ width: 100%; margin-bottom: .15rem; } .pro_det_img img{ margin: 0; } .pro_cro_bg1 { width: 88%; } .pro_cro_bg2 { width: 80%; } .pro_det_text_box{ width: 100%; } .det_proportion_box{ padding: .4rem 0 .3rem 0; } .det_proportion_box > div { width: 100%; float: left; padding: .1rem 0; margin-right: 0; } .det_pro_box.det_border{ margin-bottom: .1rem; margin-top: .1rem; } .down_box > a span i { font-size: .2rem; } .down_box > a div { font-size: .14rem; } .flow_box > div { font-size: .14rem; } .pro_into_img { width: calc((100% - 2.6%) / 2); float: left; text-align: center; } .pro_into_box .pro_into_img:nth-child(2n){ margin-right: 0; } .pro_into_img> div { font-size: .14rem; padding: 0 5px; } .pro_into_img img { margin-bottom: 5%; } .det_con_title span{ font-size: .22rem; } .det_con_title { font-size: .14rem; } .det_con_title { padding: .1rem 0; } .am_title{ font-size: .18rem; padding-right: 10px; } .publ_tab_nav_box { margin-bottom: .4rem; } .publ_marks span { font-size: .15rem; } .publ_name { padding: 0.05rem 0 .1rem 0; font-size: .14rem; } .publ_marks img { max-width: 40px; } .vid_body .pro_box{ margin-bottom: .4rem; } .pro_list_box > a:nth-child(3n+1){ clear: none; } .pro_list_box > a:nth-child(2n+1){ clear: left; } .mee_con_box { padding: .3rem 15px; margin-top: -.3rem; } .mee_con_list > div{ padding-left: .5rem; margin-bottom: .4rem; } .mee_body .sen_link_box { padding-bottom: .4rem; } .mee_logo, .mee_into{ width: 100%; } .mee_num{ width: .4rem; left: 0; transform: translate(0,-50%); } .mee_logo{ position: relative; left: 0; top: 0; transform: translate(0,0); } .mee_con_list > div .mee_into{ float: none; margin-top: .1rem; text-align: left; } .mee_con_list > div:nth-child(odd) .mee_into{ float: none; } .mee_num_bg{ opacity: 1; font-size: .4rem; } .faq_trouble, .faq_answer { padding-left: .3rem; } .faq_num img { max-width: 90px; } .faq_list_box > div{ margin-bottom: .2rem; } .app_con_box { margin-top: -.15rem; padding-top: .3rem; padding-bottom: .3rem; } .app_title_l { padding-top: .2rem; padding-bottom: .15rem; } .app_title { font-size: .22rem; margin-bottom: .2rem; } .app_entering_box{ padding-top: .15rem; } .app_entering_box > div{ margin-bottom: .15rem; margin-right: 0; width: 100%; } .meo_inp_box label{ display: block; } .meo_inp_box .form_input_box{ width: 100%; margin-bottom: .2rem; margin-right: 0; } .crosswise_box > div:last-child{ margin-bottom: 0; } .crosswise_box{ padding-top: .15rem; } .crosswise_box2 .input_box_cun .inp_style{ width: 100%; margin-bottom: .2rem; margin-right: 0; } .form_input_box2{ width: 100%; padding-top: .15rem; padding-bottom: .15rem; } .form_input_box2 label{ width: 100%; padding-left: .2rem; padding-right: 0; } .form_input_box2 input, .form_input_box2 .sele_box{ width: 100%; } .form_input_box2 textarea{ margin: .2rem 0; } .form_hint { padding-top: .15rem; padding-bottom: .3rem; } .app_entering_box3 { padding-top: .08rem; } .reg_body .app_entering_box { padding-bottom: 0; } .form_box_btn{ margin-top: .3rem; } .reg_body .app_con_box{ margin-top: -.5rem; } .form_input_box_point{ width: 100%; } .form_input_box_point > div{ width: 100%; margin-right: 0; margin-bottom: .15rem; } .form_input_box_point > div:last-child{ margin-bottom: 0; } .form_input_box_point > div label{ position: relative; } .log_title{ font-size: .22rem; margin-bottom: .1rem; } .log_into{ margin: .1rem 0; } .log_get{ margin-top: .3rem; } .log_con_box{ width: 100%; padding: 0 15px; } .log_right{ margin-top: .4rem; } .log_name{ margin-bottom: .23rem; } .log_right .inp_style{ margin-bottom: .2rem; } .log_right .form_box_btn{ margin-top: .25rem; } .sea_list_sty{ width: .4rem; } .sea_list_sty div{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: .4rem; border-radius: 8px; text-align: center; padding: 0; } .sea_list_sty i{ font-size: .4rem; } .sha_con_box { width: 90%; top: 22%; padding: .4rem .15rem; } .sha_btn_close { right: .2rem; top: .2rem; } .sha_con_box .blo_con > div { padding-top: .3rem; } .sha_con_box .form_input_box2 label{ width: 100%; } .sha_con_box .form_input_box2 input, .sha_con_box .form_input_box2 textarea{ width: 100%; } .code_img { margin-top: .15rem; margin-left: 0; width: 35%; padding: 0 .15rem; } .sha_con_box .form_box_btn { text-align: center; margin-top: .15rem; margin-left: 0; } .btn_sha{ width: 85px; height: 52px; padding: .1rem .15rem; right: .1rem; } .btn_sha i{ margin-right: 0; font-size: .16rem; } .btn_sha span{ display: block; font-size: .14rem; } .sha_title_box > div:first-child{ font-size: .2rem; } .sha_con_box_info.sha_con_box .blo_con > div:first-child{ padding-top: .3rem; } } @media screen and (max-width: 375px){ .am_title{ font-size: .17rem; } .log_get{ line-height: 2; margin-top: .15rem; } .log_right{ margin-top: .25rem; } } @media screen and (max-width: 320px){ .pro_det_cla_con { width: 68%; } .pro_det_cla_bg { letter-spacing: .1rem; } .am_title{ font-size: .16rem; } .log_right{ padding-left: 15px; padding-right: 15px; } .log_name{ margin-bottom: .2rem; font-size: .22rem; } }