@charset "utf-8"; @font-face { font-family: "iconfont"; /* Project id 1383274 */ src: url('fonts/iconfont.woff2?t=1627975989902') format('woff2'), url('fonts/iconfont.woff?t=1627975989902') format('woff'), url('fonts/iconfont.ttf?t=1627975989902') format('truetype'); } @font-face { font-family: "Helvetica Bold"; src: url("fonts/Helvetica Bold.woff2") format("woff2"), url("fonts/Helvetica Bold.woff") format("woff"), url("fonts/Helvetica Bold.ttf") format("truetype"), url("fonts/Helvetica Bold.eot") format("embedded-opentype"), url("fonts/Helvetica Bold.svg") format("svg"); } @font-face { font-family: "HelveticaCdBd"; src: url("fonts/HelveticaCdBd.woff2") format("woff2"), url("fonts/HelveticaCdBd.woff") format("woff"), url("fonts/HelveticaCdBd.ttf") format("truetype"), url("fonts/HelveticaCdBd.eot") format("embedded-opentype"), url("fonts/HelveticaCdBd.svg") format("svg"); } @font-face { font-family: "helvetica-webfont.woff"; src: url("fonts/helvetica-webfont.woff.woff2") format("woff2"), url("fonts/helvetica-webfont.woff.woff") format("woff"), url("fonts/helvetica-webfont.woff.ttf") format("truetype"), url("fonts/helvetica-webfont.woff.eot") format("embedded-opentype"), url("fonts/helvetica-webfont.woff.svg") format("svg"); } @font-face { font-family: "SourceHanSansCN-Regular"; src: url("fonts/SourceHanSansCN-Regular.woff2") format("woff2"), url("fonts/SourceHanSansCN-Regular.woff") format("woff"), url("fonts/SourceHanSansCN-Regular.ttf") format("truetype"), url("fonts/SourceHanSansCN-Regular.eot") format("embedded-opentype"), url("fonts/SourceHanSansCN-Regular.svg") format("svg"); } @font-face { font-family: 'Adobe Arabic'; src: url('fonts/AdobeArabic-Regular.woff2') format('woff2'), url('fonts/AdobeArabic-Regular.woff') format('woff'), url('fonts/AdobeArabic-Regular.svg#AdobeArabic-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "PFDinTextCompProRegular"; src: url("fonts/PFDinTextCompProRegular.woff2") format("woff2"), url("fonts/PFDinTextCompProRegular.woff") format("woff"), url("fonts/PFDinTextCompProRegular.ttf") format("truetype"), url("fonts/PFDinTextCompProRegular.eot") format("embedded-opentype"), url("fonts/PFDinTextCompProRegular.svg") format("svg"); } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0px; border: 0; font-size: 100%; outline: none; } html { font-size: 100%; overflow-x: hidden;} /* always display scrollbars */ body { font: 16px/1.8 "Microsoft YaHei New","Microsoft Yahei","微软雅黑","Hiragino Sans GB","冬青黑体","Arial","Helvetica","SimHei","黑体","STXihei","华文细黑",sans-serif; margin: 0 auto; color:#666; _background-attachment:fixed; _background-image:url(about:blank); overflow-y:visible\9;text-size-adjust: none; background: #fff; -webkit-overflow-scrolling: touch ;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } input, select { vertical-align: middle; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } strong { font-weight: bold; } input { outline: none; padding:0;} img { border: 0; } input[type="text"], input[type="button"], input[type="submit"], input[type="reset"] ,select{ -webkit-appearance: none; border-radius: 0;} textarea { -webkit-appearance: none; border-radius: 0; background:none; outline:none; padding:0; margin:0; border:none;} ::-moz-selection { background: #f7a300; color: #fff; text-shadow: none; } ::selection { background: #f7a300; color: #fff; text-shadow: none; } a { text-decoration: none; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0);} a:link, a:visited { text-decoration: none; color:inherit;} a:active, a:hover { text-decoration: none; color:inherit;} .clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0px; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } .fc { text-align: center; } .fr { text-align: right; } .l { float: left; display: inline-block; } .r { float: right; display: inline-block; } .vt { vertical-align: top; } .vm { vertical-align: middle; } .inner { margin: 0 159px 0 50px; position: relative;} .gradual{ width: 100%; height: 100%; position: fixed; left: 0; bottom: 0; z-index: -2;} .gradual:before{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url(../images/sbg.png) center no-repeat; -o-background-size: cover; background-size: cover; background: -webkit-linear-gradient(315deg, #F5D9FF, #FDFDD0, #DFFAF8, #F5D8D8, #F8D4D4) left center/400% 400%; background: -moz-linear-gradient(315deg, #F5D9FF, #FDFDD0, #DFFAF8, #F5D8D8, #F8D4D4) left center/400% 400%; background: -o-linear-gradient(315deg, #F5D9FF, #FDFDD0, #DFFAF8, #F5D8D8, #F8D4D4) left center/400% 400%; background: linear-gradient(135deg, #F5D9FF, #ffffff, #ffffff, #ffffff, #b6a08e) left center/400% 400%; -webkit-transform: translateZ(0);} /* .gradual.gradual-stop{ -moz-animation: none; -o-animation: none; animation: none; -webkit-animation: none; -o-animation: move 20s infinite; animation: move 20s infinite; -webkit-animation: move 20s infinite; -moz-animation: move 20s infinite;} */ .gradual svg{ width: 100%; height: 100%;} .flex-en{ display: none; position: fixed; left: 0; width: 100%; bottom: 2%; z-index: -1;} /* .flex-en strong{ display: block; color: #fff; color: rgba(255,255,255,0.5); font-size: 192px; line-height: 1; white-space: nowrap; font-family: "Helvetica Bold"; font-weight: normal; text-transform: uppercase; backdrop-filter:blur(50px); -webkit-animation: Move1 145s linear infinite alternate; -moz-animation: Move1 145s linear infinite alternate; -o-animation: Move1 145s linear infinite alternate; animation: Move1 145s linear infinite alternate; } .flex-en strong:nth-child(2){ -webkit-animation: Move 145s linear infinite alternate; -moz-animation: Move 145s linear infinite alternate; -o-animation: Move 145s linear infinite alternate; animation: Move 145s linear infinite alternate;} */ .slideflex{ position: fixed; width:200px; left: 15px; bottom: 100px; z-index: 99; padding-bottom: 50px; -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s;} .slideflex.fdown{ padding-bottom:40px;} .slideflex.fdown .relate li.backtop{ opacity: 1; visibility: visible; -webkit-transition: 0.5s 0.2s; -o-transition: 0.5s 0.2s; -moz-transition: 0.5s 0.2s; transition: 0.5s 0.2s;} .slideflex.fdown .mouse{ opacity: 0; visibility: hidden; bottom: -134px;} .relate{ padding-bottom: 26px;} .relate li{ margin-bottom: 10px; position: relative;} .relate li.backtop{ position: absolute; left: 0; bottom: 0; opacity: 0; visibility: hidden; -webkit-transition: 0.35s 0s; -o-transition: 0.35s 0s; -moz-transition: 0.35s 0s; transition: 0.35s 0s;} .relate li >a{ display: block; width: 120px; height: 35px; border-radius: 5%; background: #fff; text-align: center; line-height: 35px; color: #8f511c; font-size: 16px; position: relative; z-index: 3;} .relate li >a i{ display: block; width: 16px; height: 16px; border-radius: 50%; text-align: center; line-height: 16px; color: #fff; font-size: 12px; font-family: arial; background: #FD758F; position: absolute; right: 4px; top: 7px; -webkit-animation: scolltops 2.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;} .relate li >a:before{ content: ""; width: 100%; height: 100%; background: -webkit-linear-gradient(315deg, #F5D9FF, #FDFDD0, #DFFAF8, #F5D8D8, #F8D4D4) left center/400% 400%; background: -moz-linear-gradient(315deg, #F5D9FF, #FDFDD0, #DFFAF8, #F5D8D8, #F8D4D4) left center/400% 400%; background: -o-linear-gradient(315deg, #F5D9FF, #FDFDD0, #DFFAF8, #F5D8D8, #F8D4D4) left center/400% 400%; background: linear-gradient(135deg, #F5D9FF, #FDFDD0, #DFFAF8, #F5D8D8, #F8D4D4) left center/400% 400%; -o-animation: move 10s infinite; animation: move 10s infinite; -webkit-animation: move 10s infinite; -moz-animation: move 10s infinite; position: absolute; left: 0; top: 0; z-index: -1; border-radius: 50%; opacity: 0; visibility: hidden; -webkit-transition: 0.38s; -o-transition: 0.38s; -moz-transition: 0.38s; transition: 0.38s;} .relate li:hover >a:before{ opacity: 1; visibility: visible;} .relate li:hover .telbox,.relate li.active .telbox,.relate li:hover .eqbox{ opacity: 1; visibility: visible; right: 100%;} .telbox{ padding-right: 22px; position: absolute; right: 150%; top: -4px; opacity: 0; visibility: hidden; -webkit-transition: 0.45s; -o-transition: 0.45s; -moz-transition: 0.45s; transition: 0.45s;} .relate li.networkBg{ opacity: 0; visibility: hidden; transition: 0.5s; transform: scale(0);} .relate li.networkBg >a{ font-size: 22px; font-weight: bold;} .relate li.networkBg.show{ opacity: 1; visibility: visible; transform: scale(1);} .telbox span{ display: block; padding: 20px 0 20px 27px; background: #fff; color: #B28B7F; font-size: 16px; font-weight: bold; line-height: 16px; white-space: nowrap; padding-right: 12px; position: relative; border-radius: 12px;} .telbox span:before{ content: ""; width: 5px; height: 16px; background: #8f511c; position: absolute; left: 13px; top: 50%; margin-top: -8px;} .telbox span:after{ content:""; width:0; height:0; border-top:8px solid transparent; border-bottom: 8px solid transparent; border-left: 9px solid #fff; position:absolute; right: -9px; top:50%; margin-top: -8px;} .eqbox{ padding-right: 22px; position: absolute; right: 150%; top: 50%; margin-top: -80px; opacity: 0; visibility: hidden; -webkit-transition: 0.45s; -o-transition: 0.45s; -moz-transition: 0.45s; transition: 0.45s;} .eqbox:before{ content:""; width:0; height:0; border-top:8px solid transparent; border-bottom: 8px solid transparent; border-left: 9px solid #fff; position:absolute; right: 15px; top:50%; margin-top: -8px;} .eqbox img{ display: block; width: 120px; padding: 20px; background: #fff; border-radius: 12px;} .productimg { position: relative; overflow: hidden;} .searbtn{ width: 56px; text-align: center; padding: 19px 0 9px; background: #8f511c; background: rgba(65,196,166,0.5); color: #fff; font-size: 18px; cursor: pointer; position: absolute; right:84px; bottom: 0; z-index: 10; border-radius: 28px 28px 0 0; -webkit-transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);} .searbtn:hover{ padding-bottom: 19px;} .searchs{ width: 400px; position: absolute; left: 50%; margin-left: -200px; z-index: 10; opacity: 0; visibility: hidden; bottom: 0px; -webkit-transition: 0.58s; -o-transition: 0.58s; -moz-transition: 0.58s; transition: 0.58s;} .searchs.show{ opacity: 1; visibility: visible; bottom: 50px;} .searchs input.text{ padding-left: 24px; width: 376px; border: none; height: 56px; line-height: 56px; color: #FFFFFF; font-size: 14px; border-radius: 28px; color: #fff; font-size: 14px; background: #55968A; filter:alpha(opacity=50); background: rgba(85,150,138,0.5);} .searchs input.text::-webkit-input-placeholder{ color:#fff; } .searchs input.text::-moz-placeholder{ color:#fff; } .searchs input.text:-moz-placeholder{ color:#fff; } .searchs input.text:-ms-input-placeholder{ color:#fff; } .searchs input.text:focus::-webkit-input-placeholder{ opacity: 0; visibility: hidden;} .searchs .sub{ width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; line-height: 56px; color: #fff; font-size: 18px; position: absolute; right: 0; top: 0; background: #8f511c; filter:alpha(opacity=20); background: rgba(65,196,166,0.2); -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s;} .searchs .sub:hover{ background: rgba(65,196,166,0.4);} .mouse{ text-align: center; -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s; position: absolute; left: 12px; bottom: 0;} .mouse span{ display: block; width: 24px; height: 24px; background: url(../images/mouse.png) center no-repeat; margin: auto; margin-bottom: 10px;} .mouseline{ width: 4px; height: 100px; background: #fff; margin: auto; position: relative;} .mouseline i{ display: block; width: 100%; height: 46px; background: #FD758F; position: absolute; left: 0; top: 0; -o-animation:moveDownSpot 2000ms infinite; animation:moveDownSpot 2000ms infinite; -webkit-animation:moveDownSpot 2000ms infinite; -moz-animation:moveDownSpot 2000ms infinite;} .header{ position: fixed; width: 100%; left: 0; top: 0; z-index: 199;} .headerwr{ position: relative; z-index: 3; padding-top: 21px; padding-bottom: 35px; -webkit-transition: 0.58s; -o-transition: 0.58s; -moz-transition: 0.58s; transition: 0.58s;} .headerwr:before{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; webkit-transition: 0.58s; -o-transition: 0.58s; -moz-transition: 0.58s; transition: 0.58s; z-index: -1;} .headerwr:hover:before{ height: 146px;} .notices{ position: absolute; z-index: 200; margin-bottom: -40px; left: 0; top: 0; padding: 0 70px 0 50px; display: flex; align-items: center; height: 60px; box-sizing: border-box; width: 100%; background: #8f511c; transition: 0.5s;} .notices p{ padding-left: 44px; color: #fff; font-size: 15px; background: url(../images/notis.png) left center no-repeat; line-height: 1.5;} .notices span{ display: block; position: absolute; right: 40px; top: 50%; margin-top: -10px; line-height: 1; color: #fff; font-size: 18px; cursor: pointer; transition: 0.4s;} .notices span:hover{ transform: rotate(180deg);} .header.visflex .headerwr{ background: none; padding-top: 6px; padding-bottom: 2px; background-color: rgba(250,237,237,0.8); backdrop-filter: saturate(180%) blur(10px);} /* .header.visflex .headerwr{ background: none; padding-top: 18px; padding-bottom: 18px; background-color: rgba(255,255,255,0.6);} */ .header.visflex .headerwr:before{ opacity: 0; visibility: visible;} .header.visflex .navs{ opacity: 1; visibility: visible;} .logo-wr{ position: relative; margin-left: 50px; float: left;} .logo{ display: block; width:100%; height:auto; position: relative; z-index: 5; transition: 0.4s;} .logo-wr .hide{ position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden;} .header-nav{ margin-top: 10px; float: right; margin-right: 55px;} .navs{ float: left; opacity: 0; visibility: hidden; transition: 0.45s;} .navs >li{ float: left; margin-left: 40px; line-height: 1;} .navs >li >a{ position: relative; z-index: 5; display: block; color: #966F62; font-size: 20px; line-height: 30px;} .navs >li >a:first-child{ margin-left: 0;} .navs >li >a:hover,.navs >li.active >a{ color: #8f511c;} .navs-down{ width: 100%; background-color: rgba(250,237,237,0.8); backdrop-filter: saturate(180%) blur(10px); position: absolute; left: 0; top: 0; height: 0; overflow: hidden;} .navs-down-list{ margin-left: 58px; margin-right: 54px; padding-top: 138px; padding-bottom: 62px;} .navs-down-list li{ float: left; width: 20%;} .navs-down-list li a{ display: block; margin: 0 11px; position: relative; z-index: 3; padding: 37px 30px 16px; background: #fff; border-radius: 12px; overflow: hidden;} .navs-down-list li a:before{ content:""; width: 100%; height: 0px; position: absolute; right: 0; bottom: 0; z-index: -1; background-color: #36C5A5; -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s;} .navs-down-list li a:hover:before{ height: 100%; bottom: auto; top: 0;} .navs-down-list li a:hover strong,.navs-down-list li a:hover p,.navs-down-list li a:hover small,.navs-down-list li a:hover i{ color: #fff;} .navs-down-list li a strong{ display: block; line-height: 1.2; color: #33C6B5; font-size: 20px; font-weight: normal; margin-bottom: 15px; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s;} .navs-down-list li a p{ color: #707070; font-size: 14px; line-height: 1.6; margin-bottom: 10px; height: 66px; overflow: hidden; text-align: justify; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s;} .navs-down-list li a small{ display: block; line-height: 1; color: #AAAAAA; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s;} .navs-down-list li a i{ display: block; line-height: 1; color: #33C6B5; font-size: 32px; font-weight: normal; position: absolute; right: 30px; top: 21px; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s;} .header-nav .tel{ float: right; margin-left: 50px; line-height: 19px; color: #966F62; font-size: 14px; position: relative; z-index: 5;} .header-nav .tel i{ display: inline-block; color: #966F62; font-size: 16px; font-style: normal; margin-right: 7px; -webkit-transition: 0.35s; -o-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s;} .header-nav .tel:hover{ color: #8f511c;} .header-nav .tel:hover i{ color: #8f511c;} .menubg{ display: block; position: fixed; width: 100%; background: url(../images/sbg.png) center no-repeat; -o-background-size: cover; background-size: cover; background: -webkit-linear-gradient(top,rgba(223,250,248,1) 0%,rgba(245,216,216,1) 88%,rgba(248,212,212,1) 100%); background: -moz-linear-gradient(top,rgba(223,250,248,1) 0%,rgba(245,216,216,1) 88%,rgba(248,212,212,1) 100%); background: -o-linear-gradient(top,rgba(223,250,248,1) 0%,rgba(245,216,216,1) 88%,rgba(248,212,212,1) 100%); background: linear-gradient(180deg,rgba(223,250,248,1) 0%,rgba(245,216,216,1) 88%,rgba(248,212,212,1) 100%); left: 0; top: 0; z-index: -1; height: 0; overflow: hidden; -webkit-transition: 1s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: 1s cubic-bezier(0.7, 0, 0.3, 1); -moz-transition: 1s cubic-bezier(0.7, 0, 0.3, 1); transition: 1s cubic-bezier(0.7, 0, 0.3, 1);} html.show .menubg{ height: 100%;} html.show{ height: 100%; overflow-y: hidden;} .menubox{ position: absolute; width: 100%; height: 100%; height: 100vh; top: 0; left: 0;} .menuwr{ padding: 0 31px 0 68px; position: absolute; top: 50%; margin-top: -285px; left: 0; right: 0;} .menuclose{ display: block; width: 64px; height: 64px; text-align: center; line-height: 64px; background: #8f511c; border-radius: 50%; position: absolute; right: 55px; top: 0; cursor: pointer; color: #fff; font-size: 18px; font-weight: bold; line-height: 64px; -webkit-transition: 0.45s; -o-transition: 0.45s; -moz-transition: 0.45s; transition: 0.45s;} .menuclose:hover{ -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg);} .menu-top{ width: 565px; max-width: 100%; margin-bottom: 85px;} .menu-top strong{ display: block; color: #41C4A6; font-size: 56px; line-height: 1.3; margin-bottom: 10px;} .menu-top p{ color: #966F62; font-size: 14px; line-height: 2;} .caselist li{ width: 20%; float: left;} .caselist li a{ display: block; margin-right: 33.8%;} .caselist li a figure{ display: block; overflow: hidden; line-height: 1;} .caselist li a figure img{ display: block; width: 100%; height: auto; -webkit-transition: 0.68s; -o-transition: 0.68s; -moz-transition: 0.68s; transition: 0.68s;} .caselist li a strong{ display: block; margin-top: 25px; line-height: 1.2; color: #966F62; font-size: 20px; margin-bottom: 15px; -webkit-transition: 0.38s; -o-transition: 0.38s; -moz-transition: 0.38s; transition: 0.38s;} .caselist li a p{ color: #966F62; font-size: 14px; line-height: 1.8; font-family: "helvetica-webfont.woff";} .caselist li a:hover figure img{ -ms-transform: scale(1.06); -o-transform: scale(1.06); transform: scale(1.06); -webkit-transform: scale(1.06); -moz-transform: scale(1.06);} .caselist li a:hover strong{ color: #41C4A6;} .slick-list { overflow: hidden; width: 100%; height: 100%; } .slick-track { position: relative; left: 0; top: 0; display: block; zoom: 1; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both;} .banner{ position: relative; padding: 0px 0px 0px 0px; z-index: 10;} .item{ float: left; position: relative;} .item figure{ display: block; line-height: 1; overflow: hidden;} .item figure img{ display: block; width: 100%; height: auto; border-radius: 0px;} .item.slick-current{ -moz-animation: brightnessIn 1s; -o-animation: brightnessIn 1s; animation: brightnessIn 1s; -webkit-animation: brightnessIn 1s;} .btext{ padding-top: 300px; width: 100%; height: 109px; position: absolute; left: 130px; bottom: 0; border-radius: 0 0 16px 16px;} .bwr{ position: absolute; left: 0; right: 0; top: 10px;} .btext strong{ display: block; padding-left: 56px; color: #fff; font-size: 36px; line-height: 1.3;} .btext strong span{ display: inline-block; opacity: 0; filter: blur(10px); -webkit-filter: blur(10px); -webkit-transform: translateY(-16px); -moz-transform: translateY(-16px); -ms-transform: translateY(-16px); -o-transform: translateY(-16px); transform: translateY(-16px); min-width: 18px;} .item.slick-current .btext strong span{ opacity: 1; filter: blur(0px); -webkit-filter: blur(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px);} .bannerbox .slick-dots{ position: absolute; left: 50px; top: 50%; width: 20px; -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);} .bannerbox .slick-dots li{ display: block; width: 20px; text-align: center; margin-top: 45px; cursor: pointer; padding-bottom: 12px; position: relative; line-height: 0;} .bannerbox .slick-dots li:before{ content: ""; width: 100%; height: 2px; background: #FD758F; position: absolute; right: 0; bottom: 0; width: 0; -webkit-transition: 0.45s; -o-transition: 0.45s; -moz-transition: 0.45s; transition: 0.45s;} .bannerbox .slick-dots li.slick-active:before{ width: 100%; right: auto; left: 0;} .bannerbox .slick-dots li.slick-active span{ color: #FD758F;} .bannerbox .slick-dots li:first-child{ margin-top: 0;} .bannerbox .slick-dots li span{ display: block; line-height: 1; color: #B28B7F; font-size: 14px; font-family: "HelveticaCdBd"; text-align: center; -webkit-transition: 0.35s; -o-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s;} .vides{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0; -o-object-fit: cover; object-fit: cover;} .nubles span.star{ color: #FD758F; margin-bottom: 58px; } .nubles i{ width: 100%; height: 2px; background: #FD758F; position: absolute; left: 0; top: 25px;} .navigate{ position: fixed; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; left: 0; bottom: 0; z-index: 99; display: none;} .navigatewr{ padding: 34px 5% 25px; background: -webkit-linear-gradient(bottom,rgba(65,196,166,1) 0%,rgba(65,196,166,0.22) 100%); background: -moz-linear-gradient(bottom,rgba(65,196,166,1) 0%,rgba(65,196,166,0.22) 100%); background: -o-linear-gradient(bottom,rgba(65,196,166,1) 0%,rgba(65,196,166,0.22) 100%); background: linear-gradient(360deg,rgba(65,196,166,1) 0%,rgba(65,196,166,0.22) 100%);} .navbtn{ float: left;} .navbtn a{ display: block; color: #FFFFFF; font-size: 14px; line-height: 1.5; float: left; margin-left: 30px;} .navbtn a:first-child{ margin-left: 0;} .menubtn{-webkit-transition: 0.4s;-o-transition: 0.4s;-moz-transition: 0.4s;transition: 0.4s; position:relative; z-index: 20; float: right; width: 32px; height: 21px; cursor: pointer;} .menubtn span{ display:block; width:12px; height:3px; background:#fff; margin-top:9px; position:relative; vertical-align: middle; -webkit-transition-duration: .3s,.3s; -moz-transition-duration: .3s,.3s; -o-transition-duration: .3s,.3s; transition-duration: .3s,.3s;-webkit-transition-delay: .3s,0s; -moz-transition-delay: .3s,0s; -o-transition-delay: .3s,0s; transition-delay: .3s,0s;} .menubtn i, .menubtn:before { content: ""; position: absolute; display: inline-block; width: 100%; height: 3px; left: 0; background-color: #fff; -webkit-transition-duration: .3s,.3s; -moz-transition-duration: .3s,.3s;-o-transition-duration: .3s,.3s; transition-duration: .3s,.3s;-webkit-transition-delay: .3s,0s;-moz-transition-delay: .3s,0s;-o-transition-delay: .3s,0s; transition-delay: .3s,0s} .menubtn i{ display: block; background: none;} .menubtn i:before{ content: ""; width: 24px; height: 3px; background: #fff; position: absolute; left: 0; top: 0;} .menubtn i:after{ content: ""; width: 5px; height: 3px; background: #fff; position: absolute; right: 0; top: 0;} .menubtn:before {top: 0;-webkit-transition-property: top,transform;-moz-transition-property: top,transform;-o-transition-property: top,transform;-webkit-transition-property: top,-webkit-transform;transition-property: top,-webkit-transform;-o-transition-property: top,-o-transform;-moz-transition-property: top,transform,-moz-transform;transition-property: top,transform;transition-property: top,transform,-webkit-transform,-moz-transform,-o-transform;} .menubtn i{bottom: 0;-webkit-transition-property: bottom,transform;-moz-transition-property: bottom,transform;-o-transition-property: bottom,transform; -webkit-transition-property: bottom,-webkit-transform; transition-property: bottom,-webkit-transform; -o-transition-property: bottom,-o-transform; -moz-transition-property: bottom,transform,-moz-transform; transition-property: bottom,transform; transition-property: bottom,transform,-webkit-transform,-moz-transform,-o-transform;} .menubtn.active span {background-color: transparent;-webkit-transition-delay: 0s,0s;-moz-transition-delay: 0s,0s;-o-transition-delay: 0s,0s;transition-delay: 0s,0s} .menubtn.active i,.menubtn.active:before {-webkit-transition-delay: 0s,.3s;-moz-transition-delay: 0s,.3s; -o-transition-delay: 0s,.3s; transition-delay: 0s,.3s} .menubtn.active:before {top: 9px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg)} .menubtn.active i {bottom:9px;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);} .navigate-box{ width: 100%; height: 100%; position: fixed; left: 100%; top: 0; background: -webkit-linear-gradient(top,rgba(223,250,248,1) 0%,rgba(245,216,216,1) 88%,rgba(248,212,212,1) 100%); background: -moz-linear-gradient(top,rgba(223,250,248,1) 0%,rgba(245,216,216,1) 88%,rgba(248,212,212,1) 100%); background: -o-linear-gradient(top,rgba(223,250,248,1) 0%,rgba(245,216,216,1) 88%,rgba(248,212,212,1) 100%); background: linear-gradient(180deg,rgba(223,250,248,1) 0%,rgba(245,216,216,1) 88%,rgba(248,212,212,1) 100%); z-index: 10; overflow: hidden; visibility: hidden; -webkit-transition: 0.78s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: 0.78s cubic-bezier(0.7, 0, 0.3, 1); -moz-transition: 0.78s cubic-bezier(0.7, 0, 0.3, 1); transition: 0.78s cubic-bezier(0.7, 0, 0.3, 1);} .navigate-box.show{ opacity: 1; visibility: visible; left: 0;} .navigatewrs{ height: 100%; overflow-y: auto; position: relative; z-index: 3;} .navigate-box:before{ content: ""; width: 100%; height: 100%; background: -webkit-linear-gradient(bottom,rgba(65,196,166,1) 0%,rgba(65,196,166,0) 100%); background: -moz-linear-gradient(bottom,rgba(65,196,166,1) 0%,rgba(65,196,166,0) 100%); background: -o-linear-gradient(bottom,rgba(65,196,166,1) 0%,rgba(65,196,166,0) 100%); background: linear-gradient(360deg,rgba(65,196,166,1) 0%,rgba(65,196,166,0) 100%); position: absolute; left: 0; top: 0; z-index: -2;} .navlist{ margin-top: 90px; position: relative; margin: 90px 12.53% 0;} .navlist >li{ margin-bottom: 18px;} .navlist >li.fadeo{ opacity: 0; visibility: hidden;} .navlist >li:last-child{ margin-bottom: 0; -webkit-transition: 0.56s; -o-transition: 0.56s; -moz-transition: 0.56s; transition: 0.56s;} .navlist >li >a{ display: block; color: #966F62; font-size: 14px; font-weight: bold; line-height: 80px; text-align: center; position: relative; z-index: 3;} .navlist >li >a:before{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; background: -webkit-linear-gradient(276deg,rgba(245,217,255,1) 0%,rgba(253,253,208,1) 100%); background: -moz-linear-gradient(276deg,rgba(245,217,255,1) 0%,rgba(253,253,208,1) 100%); background: -o-linear-gradient(276deg,rgba(245,217,255,1) 0%,rgba(253,253,208,1) 100%); background: linear-gradient(174deg,rgba(245,217,255,1) 0%,rgba(253,253,208,1) 100%); opacity: 0.5;} .address1{ padding-top: 50px; padding-bottom: 40px;} .navigate-box .address1 a{ background: #E8D9D5;} .naven{ width: 100%; position: absolute; left: 0; top: 0; -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform: rotate(90deg); z-index: -1;} .naven small{ display: block; line-height: 0.8; font-size: 120px; font-family: "HelveticaCdBd"; -webkit-backdrop-filter: blur(50px); color: rgba(255,255,255,0.2); backdrop-filter: blur(50px); white-space: nowrap; text-transform: uppercase; -webkit-animation: Move1 145s linear infinite alternate; -moz-animation: Move1 145s linear infinite alternate; -o-animation: Move1 145s linear infinite alternate; animation: Move1 145s linear infinite alternate;} .naven small:nth-child(2){ -webkit-animation: Move 145s linear infinite alternate; -moz-animation: Move 145s linear infinite alternate; -o-animation: Move 145s linear infinite alternate; animation: Move 145s linear infinite alternate;} .navdown{ width: 100%; position: absolute; left: 0; top: 0; height: 100%; z-index: 10; height: 0; overflow: hidden; -webkit-transition: 0.88s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: 0.88s cubic-bezier(0.7, 0, 0.3, 1); -moz-transition: 0.88s cubic-bezier(0.7, 0, 0.3, 1); transition: 0.88s cubic-bezier(0.7, 0, 0.3, 1);} .navdown.show{ height: 100%;} .navdown:after{ content: ""; width: 100%; position: absolute; left: 0; top: 0; right: 0; bottom: 32px; background: -webkit-linear-gradient(276deg,rgba(245,217,255,1) 0%,rgba(253,253,208,1) 100%); background: -moz-linear-gradient(276deg,rgba(245,217,255,1) 0%,rgba(253,253,208,1) 100%); background: -o-linear-gradient(276deg,rgba(245,217,255,1) 0%,rgba(253,253,208,1) 100%); background: linear-gradient(174deg,rgba(245,217,255,1) 0%,rgba(253,253,208,1) 100%);} .navdown:before{ content: ""; width: 100%; height: 104px; background: url(../images/bg2.png) center no-repeat; -o-background-size: 100% 100%; background-size: 100% 100%; position: absolute; left: 0; bottom: 0; z-index: -1;} .menuleval{ width: 100%; height:440px; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-wrap: -webkit-wrap; flex-wrap: -webkit-wrap; margin-bottom: 32px; -webkit-box-flex: 1; position: relative; z-index: 3;} .menuleval li{ width: 50%; position: relative;} .navwr{ display: -moz-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-justify-content: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-wrap: wrap; width: 100%; position: absolute; left: 0; top: 50%; margin-top: -26px;} .menuleval li a b{ display: block; text-align: center; color: #41C4A6; font-size: 24px; font-weight: normal; line-height: 1; margin-bottom: 14px; width: 100%;} .menuleval li a span{ display: block; text-align: center; line-height: 1; color: #966F62; font-size: 14px; font-weight: bold;} .brand{ position: relative; padding-bottom: 204px; padding-left: 30%; padding-right: 80px; padding-top: 167px; z-index: 3;} .trigger{ position: absolute; left: 0; top: 0; width: 100%;} .branden{ position: absolute; left: 30%; top: -500px; z-index:0; line-height: 1;} /* .branden small{ display: block; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; font-size: 1400px; font-family: "Helvetica Bold"; text-align:-webkit-auto; text-align:-moz-auto; text-align:auto; opacity: 0.6; filter:alpha(opacity=60); line-height: 0.8; background-attachment: local; background-position: left 0; display: none;} */ .branden small{ display: none;} .branden.loacl small{ background-attachment: local;} .branden .brandimg{ display: block; margin-top: 260px;} .branden1 .brandimg{ margin-top: 60px;} .branden2 .brandimg{ margin-top: 0;} .commonflex{ position: absolute; left: 170px; top: 100px; z-index: 5;} .commonflex.flex1{ position: fixed;} .commonflex.flex2{ position: absolute; top: auto; bottom: 0;} .commonflex strong{ display: block; color: #8d5121; font-size: 44px; line-height: 1.2; margin-bottom: 32px;} .brandl{ padding-left: 16px; padding-top: 3px; padding-bottom: 3px; border-left: 4px solid #8d511f;} .brandl p{ color: #8d511f; font-size: 16px; margin-top: 30px; line-height: 1;} .brandl p:first-child{ margin-top: 0;} .brand-mian{ position: relative;} .brand-img{ line-height: 1; margin-bottom: 100px; margin-left: 55px; margin-right: 55px;display: none;} .brand-img img{ display: block; width: 100%; height: auto;} .brand-list li{ width: 33.3333%; float: left; margin-bottom: 20px;} .brand-list li a{ display: block; margin: 0 55px; position: relative; box-shadow: 0 0 10px rgba(0,0,0,0.1);} .brand-list li a figure{ display: block; line-height: 0; padding-bottom: 75%; position: relative; height: 0; overflow: hidden;} .brand-list li a figure:before{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url(../images/shabox4.png) left bottom repeat-x; opacity: 0; visibility: hidden; z-index: 2; -webkit-transition: 0.65s; -o-transition: 0.65s; -moz-transition: 0.65s; transition: 0.65s;} .brand-list li a:hover figure img{ -ms-transform: scale(1.04); -o-transform: scale(1.04); transform: scale(1.04); -webkit-transform: scale(1.04); -moz-transform: scale(1.04);} .brand-list li a:hover figure:before{ opacity: 1; visibility: visible;} .brand-list li a:hover .brand-text:before{ opacity: 0; visibility: hidden;} .brand-list li a:hover .brand-text{ background: #8f511c;} .brand-list li a:hover .brand-text strong{ font-weight: bold; color: #fff; } .brand-list li a:hover .brandtt{ top: 0px;} .brand-list li a:hover .brandtt:before{ width: 70px; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s;} .brand-list li a:hover .brand-down{ border-color: #fff; border-color: rgba(255,255,255,0.2);} .brand-list li a:hover .brand-down b{ color: #fff;} .brand-list li a:hover .brand-down p{ color: #fff;} .brand-list li a:hover .brand-down span{ color: #fff;} .brand-list li a figure img{ display: block; width: 100%; height: auto; -webkit-transition: 0.65s; -o-transition: 0.65s; -moz-transition: 0.65s; transition: 0.65s;} .brand-text{ position: relative; padding: 0 25px; z-index: 3; -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s; border-radius: 0 0 12px 12px;} .brand-text:before{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #fff; z-index: -1; -webkit-transition: 0.65s; -o-transition: 0.65s; -moz-transition: 0.65s; transition: 0.65s; border-radius: 0 0 12px 12px;} .brandtt{ height:62px; position: relative; top: 0; padding-top: 12px; -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s;} .brand-text strong{ position: relative; display: block; color: #966F62; font-size: 22px; line-height: 1.4; font-weight: normal; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s; overflow: hidden; display: -webkit-box; -o-text-overflow: ellipsis; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .brandtt:before{ content: ""; width: 0; height: 6px; background: #fff; position: absolute; left: -25px; top: 0; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s;} .brand-down{border-top: 1px solid #E8D9D5;padding: 15px 0 10px;-webkit-transition: 0.36s;-o-transition: 0.36s;-moz-transition: 0.36s;transition: 0.36s;} .brand-down b{display: block;float: left;line-height: 20px;color: #41C4A6;max-width: 64%;height: 40px;font-size: 14px;margin-right: 14px;-webkit-transition: 0.35s;-o-transition: 0.35s;-moz-transition: 0.35s;transition: 0.35s;} .brand-down p{ float: left; color: #966F62; font-size: 14px; line-height: 20px; -webkit-transition: 0.35s; -o-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s;} .brand-down span{ display: block; float: right; color: #B28B7F; font-size: 20px; line-height: 20px; font-weight: bold; -webkit-transition: 0.35s; -o-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s;} .mores{ position: absolute; right: 161px; top: 0; z-index: 10;} .mores.mflex{ position: fixed; top: 100px;} .mores.mflex a,.mores a:hover{ padding-left: 95px; width: 67px; font-size: 18px; text-align: left;} .mores.mflex a:before,.mores a:hover:before{ width: 42px; opacity: 1; visibility: visible;} .mores a{ display: block; width: 100px; height: 100px; text-align: center; line-height: 100px; border-radius: 50px; color: #fff; font-size:34px; background: #8f511c;} .mores a:hover{ text-indent: 5px;} .mores a:before{ content: "MORE"; color: #fff; font-size: 14px; position: absolute; left: 45px; top: 50%; margin-top: -7px; line-height: 1; opacity: 0; visibility: hidden; white-space: nowrap; width: 0;} .mores.mflex1{ position: absolute; top: auto; bottom: 0;} .brandmore.mores.mflex1{ bottom: 156px;} .line{ position: absolute; left: 0; bottom: 156px; width: 100%;} .select1{ position: relative; margin-top:0px; padding: 114px 80px 135px 30%;} .selewr{ position: relative;} .commonflex span{ display: block; color: #8d511f; font-size: 16px; line-height: 1.2; margin-bottom: 7px;} .select1 .line{ bottom: 0;} .branden1{ top: -311px; left: auto; margin-left: 0; right: 110px;} .characteristic{ position: relative;} .characteristic img{ display: block; width: 100%; height: auto;} .characteristic span{ display: block; padding: 29px 35px 0; height: 140px; position: absolute; right: 0; bottom: 0; width: 719px; background: url(../images/shabox5.png) left bottom repeat-x; color: #fff; font-size: 32px; line-height: 1.4; border-radius: 0 0 16px 0;} .characteristic span:before{ content: ""; width: 70px; height: 6px; background: #fff; position: absolute; left: 0; top: 0;} .select2{ padding: 110px 80px 217px 30%; margin-top: 30px; position: relative;} .branden2{ top: -120px; left: 28%;} .branden2 small{ font-size: 1240px; background-position: center top;} .polyeles{ display: -moz-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; width: -webkit-calc(100% + 3px); width: -moz-calc(100% + 3px); width: calc(100% + 3px); margin-left: -3px;} .polyeles >li{ width: 33.3333%; float: left; margin-bottom: 1px;} .polyewr{ margin-left: 1px; -moz-box-sizing: border-box; box-sizing: border-box; height: 100%; min-height: 408px; position: relative; padding: 70px 50px 110px; z-index: 3; background: #fff; filter:alpha(opacity=60); background: rgba(255,255,255,0.6);} .select2 .line,.select3 .line{ bottom: 0;} .polyett{ margin-bottom: 56px;} .polyett strong{ display: block; float: left; color: #966F62; font-size: 18px; font-weight: bold; line-height: 24px; -webkit-transition: 0.36s; -o-transition: 0.36s; -moz-transition: 0.36s; transition: 0.36s;} .polyett a:hover strong{ color: #8f511c;} .polyett span{ margin-bottom: 18px; display: block; line-height: 1; height:30px; width: 30px; color: #966F62; font-size: 30px;} .polyelem li{ margin-bottom: 5px;} .polyelem li span{ display: inline-block; color: #966F62; font-size: 16px;} .polyelem li span:hover{ color: #8f511c;} .polyemore{ display: block; width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; background: -webkit-linear-gradient(top,rgba(65,196,166,0) 0%,rgba(65,196,166,1) 100%); background: -moz-linear-gradient(top,rgba(65,196,166,0) 0%,rgba(65,196,166,1) 100%); background: -o-linear-gradient(top,rgba(65,196,166,0) 0%,rgba(65,196,166,1) 100%); background: linear-gradient(180deg,rgba(65,196,166,0) 0%,rgba(65,196,166,1) 100%);} .polyemore span{ display: block; margin-top: 121px; padding: 32px 52px 0 42px; color: #fff; font-size: 24px; font-weight: bold; line-height: 1.5; position: relative; -webkit-transition: 0.54s; -o-transition: 0.54s; -moz-transition: 0.54s; transition: 0.54s;} .polyemore span:before{ content: ""; width: 70px; height: 6px; background: #fff; position: absolute; left: 0; top: 0;} .polyemore i{ color: #fff; font-size: 20px; font-style: normal; position: absolute; right: 50px; bottom: 45px; line-height: 1; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s;} .polyelemore{ right: 161px; top: 0;} .polyewr:hover .polyemore{ opacity: 1; visibility: visible;} .polyewr:hover .polyemore span{ opacity: 1; visibility: visible; -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px);} .polyewr:hover .polyemore span:before{ width: 70px; } .polyewr:hover .polyemore i{ opacity: 1; visibility: visible; right: 35px;} .select3{ margin-top: 60px; padding: 160px 80px 100px 30%; position: relative; background: url(../images/yuyaojinzhuan_P_sdfsdfsdfg.jpg) repeat-x;} .branden3{ top: -260px; left: 56%;} .branden3 small{ margin-left: -100px;} .branden3 .brandimg{ margin-top: 80px;} .brands li a figure{ padding-bottom: 58.52%;} .brands .brand-text strong{ font-size: 18px;} .brand-down .time{ display: block; float: left; color: #966F62; font-size: 14px; line-height: 20px; padding-left: 22px; position: relative; -webkit-transition: 0.35s; -o-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s;} .brand-down .time i{ display: inline-block; color: #E2C2B8; font-size: 16px; font-style: normal; width: 16px; height: 16px; position: absolute; left: 0; top: 50%; margin-top: -10px; -webkit-transition: 0.36s; -o-transition: 0.36s; -moz-transition: 0.36s; transition: 0.36s;} .brands li a:hover .brand-down .time{ color: #fff;} .brands li a:hover .brand-down i{ color: #fff;} .brand-hidde .brands{ margin-left: -55px;} .select4{ padding: 100px 80px 140px 30%; position: relative; background: url(../images/yuyaojinzhussan_P_2.jpg) top repeat-x;} .subscribe{ padding: 30px 30px 30px; background: #fff; filter:alpha(opacity=60); background: rgba(255,255,255,0.8); position: relative;} .subscribe h3{ text-align: center; line-height: 1; color: #966F62; font-size: 24px; font-weight: bold;} .subscribe-t{ margin-top: 56px;} .row{ width: 47.52%; float: left; position: relative; margin-bottom: 48px;} .row .text{ width: 100%; position: relative; -moz-box-sizing: content-box; box-sizing: content-box; padding: 0; border: 0; margin: 0; outline: none; line-height: 1; color: #AD8072; font-size: 16px; height: 15px; padding-bottom: 22px; border-bottom: 1px solid #E2C2B8; background: none; -webkit-transition: 0.38s; -o-transition: 0.38s; -moz-transition: 0.38s; transition: 0.38s;} .row i{ display: block; width: 0; height: 1px; background: #8f511c; position: absolute; left: 0; bottom: 0; -webkit-transition: 0.8s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: 0.8s cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: 0.8s cubic-bezier(0.77, 0, 0.175, 1); transition: 0.8s cubic-bezier(0.77, 0, 0.175, 1);} .row:nth-child(2n+2){ float: right;} .row .text::-webkit-input-placeholder{ color: #AD8072; -webkit-transition: 0.35s; -o-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s;} .row .text::input-placeholder{ color: #AD8072; -webkit-transition: 0.35s; -o-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s;} .row .text:focus{ color: #8f511c; border-color: #8f511c;} .row .text:focus::-webkit-input-placeholder{ color: #8f511c;} .row .text:focus::input-placeholder{ color: #8f511c;} .subscribe-s{ text-align: center;} .subox{ width: 240px; margin: auto; position: relative; background: #8d5121; z-index: 3; border-radius: 32px; transition: 0.38s;} .subox:before{ content: ""; width: 100%; height: 100%; background: -webkit-linear-gradient(315deg, #F5D9FF, #FDFDD0, #DFFAF8, #F5D8D8, #F8D4D4) left center/400% 400%; background: -moz-linear-gradient(315deg, #F5D9FF, #FDFDD0, #DFFAF8, #F5D8D8, #F8D4D4) left center/400% 400%; background: -o-linear-gradient(315deg, #F5D9FF, #FDFDD0, #DFFAF8, #F5D8D8, #F8D4D4) left center/400% 400%; background: linear-gradient(135deg, #F5D9FF, #FDFDD0, #DFFAF8, #F5D8D8, #F8D4D4) left center/400% 400%; -o-animation: move 10s infinite; animation: move 10s infinite; -webkit-animation: move 10s infinite; -moz-animation: move 10s infinite; position: absolute; left: 0; top: 0; z-index: -1; opacity: 0; visibility: hidden; -webkit-transition: 0.38s; -o-transition: 0.38s; -moz-transition: 0.38s; transition: 0.38s; border-radius: 32px;} .subox:hover:before{ opacity: 1; visibility: visible;} .subox:hover .sub{ color: #AD8072;} .subox:hover { background: transparent;} .subox .sub{ padding: 0; margin: 0; border: 0; width: 100%; height: 64px; text-align: center; margin: auto; line-height: 64px; color: #FFFFFF; font-size: 14px; background: none; cursor: pointer; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s; } .subscribe-s p{ color: #AD8072; font-size: 14px; line-height: 1; text-align: center; margin-top: 64px;} .branden4{ top: -340px;} .branden4 small{ font-size: 1250px;} .branden4 .brandimg{ margin-top: 100px;} .footer{ padding: 35px 160px 26px 50px; background:#69492f;} .footer-t{ margin-bottom: 56px;} .footer-n{ float: left;} .footer-n li{ float: left; margin-right: 66px;} .footer-n li:last-child{ margin-right: 0;} .footer-n li a{ display: block; line-height: 1.4; color: #fff; font-size: 14px; position: relative;} .footer-n li a:before{ content: ""; width: 0; height: 2px; background: #AD8072; position: absolute; right: 0; bottom: -2px; -webkit-transition: 0.4s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: 0.4s cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: 0.4s cubic-bezier(0.77, 0, 0.175, 1); transition: 0.4s cubic-bezier(0.77, 0, 0.175, 1);} .footer-n li a i{ display: inline-block; color: #AD8072; font-size: 8px; font-style: normal; margin-left: 5px; font-style: normal;} .footer-n li a:hover{ color: #fca35c;} .footer-n li a:hover i{ color: #8f511c;} .address{ text-align: center; display: -moz-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-justify-content: center; margin-bottom: 30px; display: none;} .address a{ display: inline-block; width: 56px; height: 56px; text-align: center; line-height: 56px; color: #fff; font-size: 18px; border-radius: 50%; background: #8f511c;} .address a:first-child{ margin-right: 14px;} .footer-address{ float: right; line-height: 1.4;} .footer-address p,.footer-address a{ display: block; float: left; margin-left: 12px; color: #fff; font-size: 14px;} .footer-address p i{ display: inline-block; color: #fff; font-size: 16px; font-style: normal; margin-right: 5px;} .footer-address a{ font-size: 16px; line-height: 22px;} .footer-address a:hover{ color: #fca35c;} .footer-b p{ color:#CCC; font-size: 14px; line-height: 1.2;} /*news*/ .recommend{ margin-top: 178px; position: relative; border-radius: 16px; overflow: hidden;} .rebanner{ position: relative; margin-right: 340px;} .bitem{ position: absolute; left: 0; top: 0; width: 100%; opacity: 0;} .bitem figure{ line-height: 1; overflow: hidden;} .bitem figure img{ display: block; width: 100%; height: auto; border-radius: 16px 0 0 16px;} .bitem.active{ position: relative; z-index: 3; opacity: 1; -webkit-transition: 0.8s ease; -o-transition: 0.8s ease; -moz-transition: 0.8s ease; transition: 0.8s ease; -webkit-animation:brightnessIn 1s 0s forwards; -moz-animation:brightnessIn 1s 0s forwards; -o-animation:brightnessIn 1s 0s forwards; animation:brightnessIn 1s 0s forwards;} .news-menu{ position: fixed; left: 100%; top: 180px; margin-left: -159px; z-index: 6; -webkit-transition: margin-left 0.55s; -o-transition: margin-left 0.55s; -moz-transition: margin-left 0.55s; transition: margin-left 0.55s;} .news-menu.fixd{ top: 110px; margin-left: -103px;} .news-menu.fixd a{ padding-left: 0;} .news-menu.fixd a:before{ opacity: 0; visibility: hidden;} .news-menu a{ display: block; line-height: 22px; color: #966F62; font-size: 14px; margin-bottom: 20px; position: relative; padding-left: 19px; white-space: nowrap;} .news-menu a.pmore{ color: #8f511c;} .news-menu a:before{ content: ""; width: 6px; background: #8f511c; position: absolute; left: -3px; bottom: 0; height: 0; -webkit-transition: 0.32s; -o-transition: 0.32s; -moz-transition: 0.32s; transition: 0.32s;} .news-menu a:hover:before,.news-menu a.active:before{ height: 100%; bottom: auto; top: 0;} .news-menu a:hover,.news-menu a.active{ color: #8f511c;} .news-recommend{ width: 340px; height: 100%; background: #fff; background: rgba(255,255,255,0.6); position: absolute; right: 0; top: 0; z-index: 5; border-radius: 0 16px 16px 0;} .news-list{ padding: 13px 30px 0 30px;} .news-list li{ border-bottom: 1px solid #E2C2B8; border-bottom: 1px solid rgba(226,194,184,0.4); padding: 25px 0 41px; position: relative;} .news-list li:before{ content: ""; width: 64px; height: 6px; background: #8f511c; position: absolute; left: -76px; top: 73px; -moz-transform-origin:100%; -ms-transform-origin:100%; -o-transform-origin:100%; transform-origin:100%; -webkit-transform-origin:100%; -webkit-transition:-webkit-transform .45s cubic-bezier(.215,.61,.355,1); transition:-webkit-transform .45s cubic-bezier(.215,.61,.355,1); -o-transition:-o-transform .45s cubic-bezier(.215,.61,.355,1); -moz-transition:transform .45s cubic-bezier(.215,.61,.355,1), -moz-transform .45s cubic-bezier(.215,.61,.355,1); transition:transform .45s cubic-bezier(.215,.61,.355,1); transition:transform .45s cubic-bezier(.215,.61,.355,1), -webkit-transform .45s cubic-bezier(.215,.61,.355,1), -moz-transform .45s cubic-bezier(.215,.61,.355,1), -o-transform .45s cubic-bezier(.215,.61,.355,1); transition:transform .45s cubic-bezier(.215,.61,.355,1),-webkit-transform .45s cubic-bezier(.215,.61,.355,1); -moz-transform:scaleX(0); -ms-transform:scaleX(0); -o-transform:scaleX(0); transform:scaleX(0); -webkit-transform:scaleX(0); visibility:hidden\9;} .news-list li:hover:before,.news-list li.active:before{ -ms-transform:scaleX(1); -o-transform:scaleX(1); transform:scaleX(1); -webkit-transform:scaleX(1); -moz-transform:scaleX(1); -moz-transform-origin:0; -ms-transform-origin:0; -o-transform-origin:0; transform-origin:0; -webkit-transform-origin:0; visibility:visible\9;} .news-list li:hover strong,.news-list li.active strong{ color: #8f511c;} .news-list li:hover a i{ right: -3px;} .proudct-more{ width: 158px; position: fixed; right: 0; top: 0; overflow: hidden; z-index: 999; background: #F4FCFA; height: 0; -webkit-transition: 1s cubic-bezier(.215,.61,.355,1); -o-transition: 1s cubic-bezier(.215,.61,.355,1); -moz-transition: 1s cubic-bezier(.215,.61,.355,1); transition: 1s cubic-bezier(.215,.61,.355,1);} .proudct-more.show{ height: 100%;} .productwr{ padding-top: 42px; padding-left: 65px;} .productwr .proclose{ display: block; line-height: 1; color: #966F62; font-size: 16px; cursor: pointer; -webkit-transition: 0.45s; -o-transition: 0.45s; -moz-transition: 0.45s; transition: 0.45s; margin-left: 6px; display: inline-block;} .productwr .proclose:hover{ -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg);} .promenuli{ margin-top: 42px;} .promenuli li{ margin-bottom: 4px;} .promenuli li a{ display: inline-block; color: #966F62; font-size: 14px;} .promenuli li a:hover,.promenuli li a.active{ color: #8f511c;} .news-list li time{ display: block; color: #B28B7F; font-size: 14px; line-height: 16px; margin-bottom: 21px;} .news-list li time b{ display: inline-block; color: #E2C2B8; font-size: 16px; font-weight: normal; margin-right: 7px;} .news-list li strong{ display: block; height: 62px; overflow: hidden; color: #966F62; font-size: 24px; line-height: 1.3; margin-bottom: 24px; -webkit-transition: 0.36s; -o-transition: 0.36s; -moz-transition: 0.36s; transition: 0.36s;} .news-list li a i{ display: block; color: #B28B7F; font-size: 20px; line-height: 1; font-style: normal; position: absolute; right: 0; bottom: 41px; font-weight: bold; -webkit-transition: 0.32s; -o-transition: 0.32s; -moz-transition: 0.32s; transition: 0.32s;} .news-list li .praise{ display: block; line-height: 1; color: #B28B7F; font-size: 14px; font-family: "helvetica-webfont.woff"; cursor: pointer;} .news-list li .praise.on em{ color: #8f511c;} .news-list li .praise em{ -webkit-transition: 0.35s; -o-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s; display: inline-block; color: #E2C2B8; font-size: 16px;} .newsmore{ position: absolute; left: 30px; bottom: 42px;} .stitle .newsmore{ position: static;} .newsmore span{ display: inline-block; cursor: pointer; line-height: 33px; color: #B28B7F; font-size: 14px; -webkit-transition: 0.35s; -o-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s;} .newsmore span i{ display: inline-block; width: 32px; height: 32px; line-height: 32px; text-align: center; border-radius: 50%; margin-right: 10px; background: #8f511c; color: #fff; font-size: 12px; vertical-align: middle; font-weight: bold; -webkit-transition: 0.32s; -o-transition: 0.32s; -moz-transition: 0.32s; transition: 0.32s;} .newsmore span:hover{ color: #8f511c;} .newsmore span:hover i{ line-height: 36px;} .news-box{ padding: 0 104px 0 0; margin-left: -5px; position: relative;} .newslist li{ width: 25%;} .page{ position: absolute; left: 69px; bottom: 0; right: 159px;} .page a{ display: block; width: 100px; height: 100px; text-align: center; line-height: 100px; border-radius: 50px; color: #fff; font-size:34px; background: #8f511c; position: absolute; bottom: 0;} .page a.prev{ left: 0;} .page a.next{ right: 0;} .page a:before{ content: "MORE"; color: #fff; font-size: 14px; position: absolute; left: 45px; top: 50%; margin-top: -7px; line-height: 1; opacity: 0; visibility: hidden; white-space: nowrap; -webkit-transition: 0.32s; -o-transition: 0.32s; -moz-transition: 0.32s; transition: 0.32s;} .page a.prev:before{ right: 45px; left: auto;} .page a:hover{ padding-left: 95px; width: 67px; font-size: 20px; text-align: left;} .page a.prev:hover{ padding-left: 49px; width: 113px;} .page a:hover:before{ opacity: 1; visibility: visible; -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s;} .pbanner{ position: relative; background: #8f511c; padding-left: 340px; z-index: 7;} .pbanner img{ display: block; width: 100%; height: auto;} .pbanner:before{ content: ""; width: 560px; height: 100%; position: absolute; left: 340px; top: 0; background: url(../images/shabox6.png) left top repeat-y;background: -webkit-linear-gradient(left,rgba(65,196,166,1) 0%,rgba(65,196,166,0) 100%);background: -moz-linear-gradient(left,rgba(65,196,166,1) 0%,rgba(65,196,166,0) 100%);background: -o-linear-gradient(left,rgba(65,196,166,1) 0%,rgba(65,196,166,0) 100%);background: linear-gradient(90deg,rgba(65,196,166,1) 0%,rgba(65,196,166,0) 100%);} .ptext.pscoll{ opacity: 0; visibility: hidden; -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); -webkit-transform: translateY(50px);} .ptext.phide .ptops time{ color: #B28B7F;} .ptext.phide .ptops time i{ color: #B28B7F;} .ptext.phide .ptops strong{ color: #966F62; font-size: 32px;} .ptext.phide .fabulousd{ color: #B28B7F;} .ptext.phide .fabulousd i{ color: #fff; background: #8f511c;} .ptext.phide .share span{ color: #B28B7F;} .ptext.phide .share a{ color: #B28B7F;} .ptext.phide .share a:hover{ color: #8f511c;} .ptext.phide{ z-index: 5; opacity: 0; width: 360px; visibility: hidden; -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -o-transform: translateY(-40px); transform: translateY(-40px); -webkit-transform: translateY(-40px); left: 69px; position: fixed; top: 45%; margin-top: -90px; -webkit-transition: 0.25s; -o-transition: 0.25s; -moz-transition: 0.25s; transition: 0.25s;} .ptext.phide.show{ opacity: 1; visibility: visible; left: 50px; -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transform: translateY(0); -webkit-transition: 0.45s; -o-transition: 0.45s; -moz-transition: 0.45s; transition: 0.45s;} .ptext.phide .fabulousd:hover i{ color: #fff;} .ptext{ position: absolute; left: 50px; top: 69px; margin-top: 0; z-index: 8; width: 640px; -webkit-transition: 0.45s; -o-transition: 0.45s; -moz-transition: 0.45s; transition: 0.45s;} .ptops time{ display: block; color: #fff; font-size: 14px; line-height: 19px; margin-bottom: 22px; -webkit-transition: 0.35s; -o-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s;} .ptops time i{ display: inline-block; color: #FFFFFF; font-size: 16px; font-style: normal; margin-right: 6px; -webkit-transition: 0.35s; -o-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s;} .ptops strong{ display: block; color: #fff; font-size: 54px; font-weight: bold; line-height: 1.3; -webkit-transition: 0.4s color; -o-transition: 0.4s color; -moz-transition: 0.4s color; transition: 0.4s color; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;} .pbotom{ margin-top: 26px;} .fabulousd{ float: left; color: #FFFFFF; font-size: 14px; font-family: "helvetica-webfont.woff"; line-height: 32px; -webkit-transition: 0.38s; -o-transition: 0.38s; -moz-transition: 0.38s; transition: 0.38s; cursor: pointer;} .fabulousd i{ display: inline-block; width: 32px; height: 32px; text-align: center; border-radius: 50%; line-height: 32px; color: #E2C2B8; font-size: 16px; background: #fff; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s;} .pbotom .fabulousd:hover i{ color: #8f511c;} .share{ float: left; margin-left: 15px;} .share span{ display: block; line-height: 32px; color: #fff; font-size: 14px; float: left; margin-right: 8px; -webkit-transition: 0.35s; -o-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s;} .share a{ display: block; line-height: 1; color: #fff; font-size: 18px; float: left; margin-right: 24px; margin-top: 9px;} .share a:last-child{ font-size: 22px;} .share a:hover{ color: #E2C2B8;} .vmore{ position: absolute; left: 50px; bottom: 26px;} .vmore span{ color: #fff;} .vmore span i{ background: #fff; color: #8f511c;} .vmore span:hover{ color: #fff;} .viewa{ margin-bottom: 0;} .flip{ width: 495px; position: absolute; right: -159px; top: 35px; z-index: 10;} .flipbtn{ width: 247px; float: left;} .flipbtn i{ display: block; float: left; width: 47px; height: 88px; line-height: 88px; text-align: center; color: #966F62; font-size: 16px; font-style: normal; background: #fff; filter:alpha(opacity=20); background: rgba(255,255,255,0.2); -webkit-transition: 0.48s; -o-transition: 0.48s; -moz-transition: 0.48s; transition: 0.48s;} .flipt{ float: left; background: #fff; filter:alpha(opacity=60); background: rgba(255,255,255,0.6); padding: 14px 18px 0; width: 163px; height: 74px; margin-left: 1px; -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s;} .flipt p{ color: #966F62; font-size: 12px; height: 46px; line-height: 1.5; -webkit-transition: 0.35s; -o-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s;} .flipt time{ display: block; line-height: 1.2; color: #AD8072; font-size: 12px; -webkit-transition: 0.35s; -o-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s;} .flipt span{ display: block; line-height: 1.2; color: #8f511c; -webkit-transition: 0.38s; -o-transition: 0.38s; -moz-transition: 0.38s; transition: 0.38s;} .flipnext{ float: right;} .flipnext i{ float: right;} .flipnext .flipt{ float: left; margin-left: 0; margin-right: 1px;} .flipbtn a:hover i{ background: #8f511c; color: #fff;} .flipbtn a:hover .flipt{ background: #8f511c;} .flipbtn a:hover .flipt p,.flipbtn a:hover .flipt time,.flipbtn a:hover .flipt span{ color: #fff;} .flipbtn.flipprev a:hover i{ text-indent: -5px;} .flipbtn.flipnext a:hover i{ text-indent: 5px;} .backlist{ position: absolute; right: 32px; bottom: 108px; z-index: 5;} .backlist a{ display: block; width: 56px; height: 56px; text-align: center; line-height: 56px; border-radius: 50%; background: #8f511c; filter:alpha(opacity=50); background: rgba(65,196,166,0.5); text-align: center; line-height: 56px; color: #fff; font-size: 20px;} .flipbtn.flipprev a i{ border-radius: 12px 0 0 12px;} .flipbtn.flipnext a i{ border-radius: 0 12px 12px 0;} .backlist a:hover{ background: rgba(65,196,166,1);} .viewnews{ position: relative;} .views{ width: 900px; float: right; background: #fff; position: relative; margin-top: -80px; padding: 0 85px 135px; z-index: 9;} .viewtop{ padding: 54px 0 12px; border-bottom: 1px solid #8f511c; border-bottom: 1px solid rgba(65,196,166,0.3);} .viewtop h4{ float: left; color: #8f511c; font-size: 12px; line-height: 1.8; font-family: "helvetica-webfont.woff"; text-transform: uppercase;} .posite{ line-height: 20px; float: right; line-height: 22px;;} .posite a{ display: block; float: left; color: #8f511c; font-size: 12px;} .posite b{ display: block; float: left; color: #8f511c; font-weight: normal; margin: 0 4px; font-size: 12px; } .posite a i{ display: inline-block; color: #8f511c; font-style: normal; margin-right: 5px; font-size: 10px; position: relative; top: -1px;} .view-text{ padding: 38px 0 0;} .view-text p,.view-text a{ color: #966F62; font-size: 16px;} .view-text a:link{color: #966F62;} .view-text a:visited {color: #966F62;} .view-text .viewtt{ display: block; color: #966F62; font-size: 24px; line-height: 1.2;} .view-text img{ max-width: 100%; width: auto !important; height: auto !important;} .view-text a img{ cursor:url(../images/mouse.ico),auto;} .viewpage{ position: fixed; left: 50px; right: 159px; bottom: 30px; z-index: 10; display: none;} .viewpage.bott{ position: absolute; left: 0; right: 0;} .viewpage .pagebtn,.viewpage .backs{ display: block; width: 56px; height: 56px; text-align: center; line-height: 56px; border-radius: 28px; float: left; background: #8f511c; filter:alpha(opacity=50); background: rgba(65,196,166,0.5); color: #fff; font-size: 22px; position: absolute; bottom: 0;} .viewpage .pagebtn b{ display: block; color: #fff; font-size: 22px; font-weight: normal; position: absolute; left: 16px; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s;} .viewpage .pagebtn.prev{ left: 0;} .viewpage .pagebtn.next{ float: right; right: 0;} .viewpage .pagebtn.next b{ left: auto; right: 16px;} .viewpage .backs{ position: absolute; left: 50%; margin-left: -28px; bottom: 0;} .viewpage .pagebtn i{ display: block; line-height: 56px; color: #fff; font-size: 14px; text-transform: uppercase; position: absolute; top: 0; opacity: 0; visibility: hidden; white-space: nowrap; -webkit-transition: 0.45s; -o-transition: 0.45s; -moz-transition: 0.45s; transition: 0.45s; font-style: normal;} .viewpage .pagebtn.prev i{ left: 40px;} .viewpage .pagebtn.next i{ right: 40px;} .viewpage .pagebtn:hover{ width: 102px;} .viewpage .pagebtn:hover i{ opacity: 1; visibility: visible;} .viewpage .pagebtn:hover b{ font-size: 18px;} .viewpage .backs:hover{ background: #8f511c;} .pbanner1{ margin-top: 180px; background-attachment: fixed; -o-background-size: cover; background-size: cover;} .pbanner1 figure{ line-height: 1; overflow: hidden; padding-bottom: 44.91%; height: 0; -o-background-size: cover; background-size: cover;} .pbanner1 figure a{ display:block;} .pbannerbg{ position: absolute; bottom: 0; width: 100%; height: 100%; z-index: -1; top: 0; overflow: hidden; width: 100%;} .pbannewrd{ height: 100%; left: 0; top: 0; background-attachment: fixed; -o-background-size: cover; background-size: cover; -webkit-transform: translateZ(0);} .ptopbox .backlist{ bottom: 0;} .pbanner1 figure img{ display: block; width: 100%; height: auto; border-radius: 16px;} .pfix{ position: absolute; left: 63px; bottom: 94px; background: rgba(255,255,255,0.9); padding: 32px 30px 31px; width: 280px; border-radius: 12px;} .ftops{ margin-bottom: 26px;} .ftops span{ display: block; line-height: 1; color: #8f511c; font-size: 16px; font-weight: bold; margin-bottom: 14px;} .ftops strong{ display: block; color: #966F62; font-size: 32px; line-height: 1.3;} .picon{ margin-bottom: 67px;} .picon b{ display: block; float: left; margin-right: 15px; color: #B28B7F; font-size: 14px; font-weight: normal; line-height: 1; border-radius: 4px; line-height: 180%;} .alink i{ display: block; width: 32px; height: 32px; text-align: center; float: left; background: #966F62; border-radius: 50%; line-height: 32px; color: #fff; font-size: 16px; -webkit-transition: 0.35s; -o-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s;} .alink p{ float: left; line-height: 32px; margin-left: 10px; color: #B28B7F; font-size: 14px; -webkit-transition: 0.35s; -o-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s;} .pro-menu a{ margin-bottom: 2px;} .alink a:hover i{ background: #8f511c;} .alink a:hover p{ color: #8f511c;} .products{ padding: 0px 103px 50px 0; margin-left: -5px; position: relative;} .commontop .viewpage.bott{ left: 69px; right: 159px;} .produst-list li{ width: 25%;} .propage .pagebtn{ width: 100px; height: 100px; border-radius: 50px; background: #8f511c; line-height: 100px;} .propage .pagebtn b{ font-size: 33px;} .propage .pagebtn i{ line-height: 100px;} .propage .pagebtn.prev b{ left: 36px;} .propage .pagebtn.prev i{ left: 70px;} .propage .pagebtn.next b{ right: 36px;} .propage .pagebtn.next i{ right: 70px;} .propage .pagebtn:hover{ width: 162px;} .propage .pagebtn:hover b{ font-size: 18px;} .propage .pagebtn.prev:hover b{ left: 49px;} .propage .pagebtn.next:hover b{ right: 49px;} .pbotom1{ margin-top: 21px; padding-top: 22px; border-top: 1px solid #E8D9D5; border-top: 1px solid rgba(232,217,213,0.4);} .pbotom1 .fabulousd{ color: #966F62;} .pbotom1 .fabulousd i{ background: #966F62; color: #fff;} .pbotom1 .share span{ color: #966F62;} .pbotom1 .share a{ color: #B28B7F; margin-right: 20px;} .pbotom1 .share a:hover{ color: #8f511c;} .share a:last-child{ margin-right: 0;} .ptopbox{ position: relative;} .productview{ margin-top: 127px; padding-bottom: 100px;} .pfix1.scolls{ position: fixed; left: 113px; top: 50%; bottom: auto; margin-top: -195px; z-index: 20;} .pfix1.scolls1{ bottom: 373px; top: auto; margin-top: 0;} .serces{ margin-top: 21px;} .serces small{ display: block; float: left; color: #966F62; font-size: 14px; font-family: "Helvetica Bold"; margin-right: 6px;} .serces span{ display: block; float: left; color: #966F62; font-size: 14px; margin-right: 16px;} .pshare{ margin-top: 58px; text-align: center; position: relative; z-index: 10;} .pshare .commons{ position: relative; display: inline-block; width: 60px; height: 60px; border-radius: 50%; background: #966F62; text-align: center; line-height: 60px; color: #fff; font-size: 18px;} .pshare .pzan i{ position: absolute; left: 0; top: 30%; text-align: center; font-size: 24px; line-height: 1; width: 100%; color: #fff; opacity: 0;} .pshare .pzan:hover{ color: #8f511c;} .pshare .pzan.active:hover{ color: #fff;} .sharebox{ display: inline-block; margin-left: 26px; position: relative;} .sharebox .commons:hover,.pshare .pzan.active,.sharebox:hover .commons{ background: #8f511c;} .pshare .pzan.active i{ -webkit-animation: movetop 1s 0s forwards; -moz-animation: movetop 1s 0s forwards; -o-animation: movetop 1s 0s forwards; animation: movetop 1s 0s forwards;} .sharebox:hover .sharedown{ opacity: 1; visibility: visible; top: 100%;} .sharedown{ position: absolute; padding-top: 10px; left: 50%; margin-left: -112px; opacity: 0; visibility: hidden; top: 140%; -webkit-transition: 0.42s; -o-transition: 0.42s; -moz-transition: 0.42s; transition: 0.42s;} .sharewr{ padding: 20px 32px; background: #fff; width: 160px; border-radius: 12px; box-shadow:0px 0px 12px rgba(111,177,163,0.2);} .sharedown:before{ content:""; width:0; height:0; border-left:6px solid transparent; border-right: 6px solid transparent; border-bottom: 7px solid #fff; position:absolute; left: 50%; top:3px; margin-left: -8px;} .sharewr a{ display: block; float: left; margin-left: 40px; line-height: 1; color: #966F62; font-size: 24px;} .sharewr a:first-child{ margin-left: 0;} .sharewr a:hover{ color: #8f511c;} .parkbox{ padding: 68px 159px 300px 69px;} .parktt{ margin-bottom: 32px;} .blist{ display: -moz-box; display: -ms-flexbox; display: flex; display: -webkit-flex;} .parks{ margin-bottom: 15px;} .parks strong{ display: block; float: left; color: #8f511c; font-size: 16px; font-weight: bold; line-height: 21px; margin-right: 23px;} .parks span{ display: block; float: left; color: #B28B7F; font-size: 14px; line-height: 21px; margin-right: 15px;} .parktt h3{ color: #966F62; font-size: 32px; line-height: 1.4;} .parkimg img{ max-width: 100%; width: auto !important; height: auto !important;} .viewpage1{ display: block; bottom: auto; top: 50%; margin-top: 28px;} .parksilde{ position: fixed; right: 0; top: 0; z-index: 10;} .parksilde .parkback{ display: block; width: 206px; height: 206px; position: absolute; right: -103px; top: -103px; background:#8f511c; text-align: center; line-height: 103px; cursor: pointer; color: #fff; font-size: 18px; border-radius: 0 0 103px 103px;} .parksilde .parkback i{ display: block; line-height: 1; color: #fff; font-size: 18px; position: absolute; left: 48px; bottom: 48px; -webkit-transition: 0.38s; -o-transition: 0.38s; -moz-transition: 0.38s; transition: 0.38s;} .parksilde .parkback:hover i{ -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg);} .parklink{ margin-right: 55px; margin-top: 178px;} .parklink .linkes{ display: block; width: 32px; height: 32px; text-align: center; line-height: 32px; background: #966F62; border-radius: 50%; color: #fff; font-size: 16px; margin: auto; margin-bottom: 48px;} .pshare1{ margin-top: 0;} .parklink .linkes:hover{ background: #8f511c;} .pshare1 a{ display: block; width: 48px; height: 48px; line-height: 48px; font-size: 16px;} .pshare1 .pzan i{ font-size: 16px;} .pshare1 .sharebox{ margin-left: 0; margin-top: 24px;} .contact{ margin: 180px 100px 0 200px; position: relative;} .contact-map{ margin-right: 340px; height: 760px; position: relative;} .eq{ position: absolute; right: 30px; bottom: 16px; z-index: 20;} .eq img{ display: block; padding: 8px; background: #fff; width: 72px; border-radius: 12px;} .eq span{ display: block; text-align: center; line-height: 1; color: #FFFFFF; font-size: 14px; margin-top: 10px; line-height: 1.2; font-weight: bold;} .maps{ height: 100%; border-radius: 16px 0 0 16px;} .anchorBL{ display: none !important;} .BMap_mask{ background: rgba(65,196,166,0.2) !important;} .contact-text{ width: 340px; height: 100%; position: absolute; right: 0; top: 0; background: #fff; filter:alpha(opacity=50); background: rgba(255,255,255,0.5); z-index: 2; border-radius: 0 16px 16px 0;} .contactwr{ padding: 0 30px;} .office{ position: relative; padding: 31px 0 16px; border-bottom: 1px solid #E2C2B8; border-bottom: 1px solid rgba(226,194,184,0.4);} .office:before{ content: ""; width: 32px; height: 1px; background: #8f511c; position: absolute; left: 0; bottom: -1px;} .office i{ display: block; float: left; color: #8f511c; font-size: 16px; font-style: normal; margin-right: 15px; line-height: 1;} .office small{ display: block; float: left; color: #B28B7F; font-size: 14px; font-family: "Helvetica Bold"; text-transform: uppercase; line-height: 16px;} .contact-btn{ padding-top: 39px; margin-bottom: 50px;} .contact-btn span{ display: block; float: left; margin-right: 18px; cursor: pointer; -webkit-transition: 0.38s; -o-transition: 0.38s; -moz-transition: 0.38s; transition: 0.38s; font-weight: bold; color: #966F62; font-size: 14px;} .contact-btn span:hover,.contact-btn span.active{ color: #8f511c;} .cbanner{ position: relative;} .oitem{ float: left; position: absolute; left: 0; top: 0; opacity: 0;} .oitem.slick-current{ position: relative;} .oitem h4{ color: #8f511c; font-size: 18px; font-weight: bold; margin-bottom: 28px; line-height: 1.2; position: relative;} .oitem h4:before{ content: ""; width: 64px; height: 6px; background:#8f511c; position: absolute; left: -78px; top: 50%; margin-top: -3px; z-index: 16;} .citem{ margin-bottom: 24px;} .citem b{ display: block; line-height: 1; color: #8f511c; font-size: 16px; font-weight: normal; float: left; margin-top: 6px;} .citem p{ color: #966F62; font-size: 14px; margin-left: 28px;} .recuites{ margin-left: 28px;} .recuites a{ display: block; float: left; margin-right: 15px;} .recuites a img{ display: block; width: 32px; height: auto; border-radius: 4px; -webkit-transition: 0.35s; -o-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s;} .recuites a:hover img{ -ms-transform: translateY(-4px); -o-transform: translateY(-4px); transform: translateY(-4px); -webkit-transform: translateY(-4px); -moz-transform: translateY(-4px);} .aboutbann{ margin-top: 180px; position: relative;} .aboutbann figure{ display: block; line-height: 1; padding-bottom: 44.91%; height: 0;} .aboutbann figure img{ width: 100%; height: auto; border-radius: 16px 16px 0 16px;} .datas{ width: 755px; padding: 55px 0 55px 37px; position: absolute; right: 0; bottom: 0; background: #fff; filter:alpha(opacity=50); background: rgba(255,255,255,0.5);} .data-item{ float: left; width: 36%;} .data-item:last-child{ width: auto;} .data-item strong{ display: block; color: #8f511c; font-size: 40px; line-height: 1; font-weight: normal; font-family: "helvetica-webfont.woff"; margin-bottom: 8px;} .data-item p{ color: #966F62; font-size: 14px; line-height: 1;} .introdus-text{ width: 37.82%;} .introducts .introdus-text{ padding-top: 202px; float: left;} .intext{ margin-bottom: 30px;} .intext strong{ display: block; color: #8f511c; font-size: 72px; line-height: 1.2; font-weight: bold; margin-bottom: 26px;} .intext p{ color: #966F62; font-size: 18px; width: 565px; max-width: 100%;} .introdus-text .posite{ float: none;} .since{ width: 792px; float: right; background: #fff; } .since-top { padding: 64px 35px 0 36px; position: relative;} .since-time{ float: left;} .since-time small{ display: block; color: #fff; font-size: 14px; font-family: "Helvetica Bold"; line-height: 1.2; margin-bottom: 8px;} .since-time strong{ display: block; line-height: 1; color: #fff; font-size: 32px; font-weight: normal; font-family: "helvetica-webfont.woff";} .since-text{ width: 440px; float: right;} .sincein p{ color: #966F62; font-size: 14px; width: 408px;} .sincein{ margin-bottom: 35px; position: relative;} .sincein .newsmore{ position: relative; left: 0; margin-top: 18px; bottom: 0;} .sinceimg img{ display: block; width: 100%; height: auto;} .business{ padding: 170px 68px 100px 36px; background: #8f511c; margin-top: -97px;} .busienntt{ display: block; float: left; color: #8f511c; font-size: 20px; font-family: "Helvetica Bold"; line-height: 1.2;} .business-text{ width: 408px; float: right;} .business-text p{ color: #FFFFFF; font-size: 14px;} .business-text .newsmore{ position: static; margin-top: 30px;} .business-box{ padding: 136px 0 130px;} .business-box .businee-text{ padding-top: 0; float: none;} .intext h4{ color: #966F62; font-size: 32px; line-height: 1.5; font-weight: normal;} .business-l{ margin-top: 88px; padding-top: 25px; border-top: 1px solid #E8D9D5;} .blist li{ float: left; width: 22.4%; position: relative;} .blist li:last-child{ width: auto;} .business-top{ position: relative; width: 160px;} .business-top:before{ content: ""; width: 0; height: 1px; background:#8f511c; position: absolute; right: 0; top: -26px; -webkit-transition: 0.58s; -o-transition: 0.58s; -moz-transition: 0.58s; transition: 0.58s; z-index: 3;} .business-top figure{ display: block; line-height: 1; overflow: hidden;} .business-top figure img{ display: block; width: 100%; height: auto; -webkit-transition: 0.58s; -o-transition: 0.58s; -moz-transition: 0.58s; transition: 0.58s;} .business-top:hover:before{ width: 100%; right: auto; left: 0;} .business-top:hover figure img{ -ms-transform: scale(1.06); -o-transform: scale(1.06); transform: scale(1.06); -webkit-transform: scale(1.06); -moz-transform: scale(1.06);} .business-li{ display: block; margin-top: 26px;} .business-li dt{ display: block; margin-bottom: 18px;} .business-li dt a{ color: #966F62; font-size: 18px; font-weight: bold; line-height: 1.2;} .business-li dt a:hover{ color: #8f511c;} .business-li dd{ display: block;} .business-li dd p{ margin-bottom: 6px;} .business-li dd p a{ color: #966F62; font-size: 16px; line-height: 1.5;} .business-li dd p a:hover{ color: #8f511c;} .history{ position: relative; z-index: 3; } .historybg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden;} .historybg img{ width: 120%; position: absolute; left: -10%; top: -60%;} .history-left{ float: left; padding: 74px 0 62px 58px; width: 582px; background: url(../images/shabox6.png) left top repeat-y;} .history-left .introdus-text{ float: none;} .introdus-text1{ width: auto;} .introdus-text1 .intext strong{ color: #fff;} .introdus-text1 .posite a,.introdus-text1 .posite b,.introdus-text1 .posite a i{ color: #fff;} .histext{ margin-top: 142px; width: 420px; height: 162px;} .histext p{ color: #fff; font-size: 14px;} .historysm small{ display: block; color: #fff; font-size: 14px; font-family: "Helvetica Bold"; line-height: 1.4;} .historysm:before{ content: ""; position: absolute; left: 160px; height: 1px; right: -159px; bottom: 75px; background: #91E5D2;} .history-ri{ width: 54.9%; position: absolute; right: 0; bottom: 71px;} .historybtn{ position: absolute; right: 29px; top: -90px;} .historybtn span{ display: block; width: 40px; height: 40px; text-align: center; line-height: 40px; cursor: pointer; -webkit-transition: 0.38s; -o-transition: 0.38s; -moz-transition: 0.38s; transition: 0.38s; background: #8f511c; color: #fff; font-size: 16px; float: left; transition: 0.38s; margin-left: 16px; border-radius: 50%; position: relative; z-index: 3;} .historybtn span.prev:hover{ text-indent: -4px;} .historybtn span.next:hover{ text-indent: 4px;} .hitem{ float: left; width: 33.3333%; padding-bottom: 63px; position: relative;} .historywr{ position: relative; margin: 0 29px;} .hitem:before{ content: ""; width: 9px; height: 9px; background:#91E5D2; border-radius: 50%; position: absolute; left: 59px; bottom: 0;} .historywr figure{ display: block; line-height: 1; overflow: hidden; padding-bottom: 56.25%; height: 0;} .historywr figure img{ display: block; width: 100%; height: auto; -webkit-transition: 0.58s; -o-transition: 0.58s; -moz-transition: 0.58s; transition: 0.58s;} .history-text{ padding: 28px 25px 26px; background: #FFFFFF; position: relative;} .history-text:before{ content: ""; width:0; height:0; border-left:5px solid transparent; border-right: 5px solid transparent; border-top: 24px solid #fff; position:absolute; left: 29px;bottom: -24px;} .history-text p{ color: #966F62; font-size: 14px; padding-top: 20px; position: relative; height: 88px; overflow: hidden;} .history-text p:before{ content: ""; width: 16px; height: 4px; background: #8f511c; position: absolute; left: 0; top: 0;} .history-text strong{ display: block; color: #8f511c; font-size: 32px; font-weight: normal; line-height: 1; font-family: "Helvetica Bold";} .historywr:hover figure img{ -ms-transform: scale(1.06); -o-transform: scale(1.06); transform: scale(1.06); -webkit-transform: scale(1.06); -moz-transform: scale(1.06);} .effect{ padding-top: 132px;} .effects{ margin-top: 90px; margin-bottom: 150px;} .effect-item{ width: 33%; float: left; margin-right: 17%; padding-top: 29px; border-top: 1px solid #E2C2B8;} .effect-item p{ color: #966F62; font-size: 14px;} .officed{ padding: 61px 0; position: relative; overflow: hidden;} .office-wr{ width: 800px; margin: auto; position: relative;} .officebg img{ display: block; width: 100%; height: auto;} .officebgd{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;} .officebgd img{ width: 120%; position: absolute; left: -10%; top: -60%;} .north{ position: absolute; left: -102px; top: 80px} .north span{ display: block; text-align: center; line-height: 1; color: #FFFFFF; font-size: 14px; font-family: "Helvetica Bold"; margin-bottom: 5px;} .north b{ display: block; width: 32px; height: 32px; background: url(../images/north.png) center no-repeat; border: 1px solid #fff; border-radius: 50%;} .officebtn{ position: absolute;} .officebtn span{ display: block; line-height: 1; color: #fff; font-size: 14px; font-weight: bold; padding-top: 15px; position: relative;} .officebtn span:before{ content: ""; width: 8px; height: 8px; background: #fff; border-radius: 50%; position: absolute; left: 50%; margin-left: -4px; top: 0;} .fbtn1{ left: 38.27%; top: 59.5%;} .fbtn2{ left: 47.5%; top: 65.22%;} .fbtn3{ left: 52.48%; top: 49.95%;} .fbtn4{ left: 47.5%; top: 74.22%;} .officeth{ padding-top: 76px;} .officeth .introdus-text{ float: none; width: auto;} .officet{ margin-bottom: 30px;} .officet p{ color: #966F62; font-size: 14px; width: 33%; margin-right: 17%; float: left;} .sbanner{ margin-top: 180px;} .swr{ position: relative; padding-bottom: 100px;} .sbanner figure{ display: block; line-height: 1; overflow: hidden;} .sbanner figure img{ display: block; width: 100%; height: auto;} .sbanner p{ display: block; padding-left: 31px; width: 71.47%; padding-top: 287px; padding-bottom: 28px; color: #fff; font-size: 32px; line-height: 1.2; font-weight: bold; background: url(../images/shabox2.png) left bottom repeat-x; position: absolute; right: 0; bottom: 0; white-space: nowrap;overflow: hidden;-o-text-overflow: ellipsis;text-overflow: ellipsis;} .sbrand{ padding: 160px 0 170px;} .stitle{ float: left; width: 54%;} .stitle small{ display: block; color: #8f511c; font-size: 60px; font-weight: bold; line-height: 1.2;} .btts{ margin-top: 28px;} .btts span{ display: block; float: left; color: #B28B7F; font-size: 14px; line-height: 1.3;} .btts p{ display: block; float: left; color: #B28B7F; font-size: 14px; line-height: 1.3; margin-left: 15px;} .careers{ width: 43%; float: right; margin-top: 26px;} .careesle{ width: 46.98%; float: left; padding-top: 40px; border-top: 4px solid #966F62;} .careesle p{ color: #966F62; font-size: 16px;} .careesle:last-child{ float: right;} .services{ margin-bottom: 88px;} .service-top{ margin-bottom: 40px;} .ser-data{ float: left; margin-right: 58px;} .ser-data strong{ display: block; float: left; line-height: 1; color: #8f511c; font-size: 40px; font-weight: normal; font-family: "helvetica-webfont.woff";} .ser-data p{ float: left; color: #966F62; font-size: 14px; margin-left: 16px; margin-top: 10px;} .sermore{ float: right; margin-top: 10px;} .sermore a{ display: block; color: #966F62; font-size: 14px;} .sermore a:hover{ color: #8f511c;} .serviceli li{ width: 5.91%; margin-left: 1.327%; height: 60px; position: relative; background: #fff; text-align: center; float: left; -webkit-transition: 0.38s; -o-transition: 0.38s; -moz-transition: 0.38s; transition: 0.38s;} .serviceli li:hover{-ms-transform: translateY(-5px);-o-transform: translateY(-5px);transform: translateY(-5px); -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px);} .serviceli li:first-child{ margin-left: 0;} .serviceli li img{ display: block; max-width: 90%; max-height: 90%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;} .workbtn{ padding-top: 40px; border-top: 1px solid #E8D9D5; padding-bottom: 20px;} .work-item{ padding-right: 91px; float: left; position: relative; margin-bottom: 20px;} /* .work-item:before{ content: ""; width: 0; height: 1px; background: #8f511c; position: absolute; right: 0; top: -41px; transition: 0.58s;} */ .workwr{ cursor: pointer;} .workwr b{ display: block; width: 56px; height: 56px; border-radius: 50%; float: left; line-height: 56px; background: #966F62; color: #E2C2B8; font-size: 24px; text-align: center; font-weight: normal; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s; z-index: 3; position: relative;} .workwr b:before{ content: ""; width: 100%; height: 100%; background: #8f511c; position: absolute; left: 0; top: 0; border-radius: 50%; -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); visibility: hidden; -webkit-transition: 0.45s; -o-transition: 0.45s; -moz-transition: 0.45s; transition: 0.45s; z-index: -1;} .workwr span{ display: block; float: left; line-height: 56px; color: #966F62; font-size: 16px; font-weight: bold; margin-left: 13px; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s;} .work-item.active:before{ width: 100%; right: auto; left: 0;} .workwr:hover b,.work-item.active .workwr b{ color: #91E5D2; background: #8f511c; -webkit-transition: all 0.4s 0s,background-color 0.4s 0.2s; -o-transition: all 0.4s 0s,background-color 0.4s 0.2s; -moz-transition: all 0.4s 0s,background-color 0.4s 0.2s; transition: all 0.4s 0s,background-color 0.4s 0.2s;} .workwr:hover b:before,.work-item.active .workwr b:before{ visibility: visible; -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1);} .workwr:hover span,.work-item.active .workwr span{ color: #8f511c;} .workbann{ position: relative; z-index: 3;} .witem{ float: left; width: 100%; background-position: center; -o-background-size: cover; background-size: cover; position: relative; z-index: 3; overflow:hidden;} .workbg{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; -o-background-size: cover; background-size: cover; background-position: center;} .flanning{ padding: 59px 0 36px 47px; width: 593px; background: url(../images/shabox6.png) left top repeat-y; transform: none !important; transform: translateZ(0px) !important;} .flanning-top{ height: 335px;} .flanning-top small{ display: block; color: #fff; font-size: 40px; line-height: 1; font-family: "Helvetica Bold"; margin-bottom: 28px; text-transform: uppercase;} .flanning-top p{ color: #fff; font-size: 16px; max-width: 100%; width: 500px;} .plan-tel b{ display: block; width: 48px; height: 48px; line-height: 48px; text-align: center; border-radius: 50%; background: #fff; float: left; color: #8f511c; font-size: 20px; font-weight: normal; float: left; margin-right: 17px;} .plan-tel span{ display: block; float: left; color: #FFFFFF; font-size: 16px; font-weight: bold; line-height: 48px;} .analysis{ position: absolute; right: 0; bottom: 0; padding: 42px 0 31px 29px; width: 700px; background: rgba(255,255,255,0.9);} .analyli li{ width: 50%; float: left; margin-bottom: 5px;} .analyli li a{ color: #966F62; font-size: 14px;} .analyli li a:hover{ color: #8f511c;} .witem.slick-current .workbg{ -moz-animation: brightnessIn 1s; -o-animation: brightnessIn 1s; animation: brightnessIn 1s; -webkit-animation: brightnessIn 1s;} .caseblock{ margin-top: 90px;} .casett{ color: #8f511c; font-size: 32px; font-weight: bold; line-height: 1; margin-bottom: 42px;} .casebann{ position: relative;} .maxbanner { position: relative; z-index: 3;} .maxitem{ float: left; position: relative; width: 100%;} .maxitem.slick-current figure{ -moz-animation: brightnessIn 1s; -o-animation: brightnessIn 1s; animation: brightnessIn 1s; -webkit-animation: brightnessIn 1s;} .maxitem.slick-current .pfix{ opacity: 1; visibility: visible; -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -webkit-transition: 0.78s; -o-transition: 0.78s; -moz-transition: 0.78s; transition: 0.78s;} .maxitem figure{ display: block; line-height: 1; overflow: hidden; position: relative;} .maxitem figure img{ display: block; width: 100%; height: auto;} .maxitem .pfix{ left: 13.3%; bottom: auto; top: 26.28%; opacity: 0; visibility: hidden; -ms-transform: translateY(-60px); -o-transform: translateY(-60px); transform: translateY(-60px); -webkit-transform: translateY(-60px); -moz-transform: translateY(-60px); z-index: 5;} .minbanner{ position: absolute; right: 82px; bottom: 74px; z-index: 5; width: 710px;} .mitems{ float: left; width: 25%;} .mitems figure{ display: block; margin: 0 10px; position: relative; line-height: 1; cursor: pointer; overflow: hidden;} .mitems figure:before{ content: ""; width: 100%; height: 0; background: #8f511c; opacity: 0.5; filter:alpha(opacity=50); position: absolute; left: 0; bottom: 0; z-index: 3; -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s;} .mitems figure img{ display: block; width: 100%; height: auto; -webkit-transition: 0.58s; -o-transition: 0.58s; -moz-transition: 0.58s; transition: 0.58s;} .mitems figure:hover img{ -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1);} .mitems.active figure:before{ height: 100%; bottom: auto; top: 0;} .mores.casemore{ position: absolute; top: auto; bottom: 0; text-align: right;} .mores.casemore a{ display: inline-block; position: relative;} .video-banner{ position: relative;} .video-img{ position: relative;} .video-img img{ display: block; width: 100%; height: auto;} .vide-pop{ position: absolute; cursor: pointer; left: 13.2%; top: 50%; z-index: 5; margin-top: -151px; background: rgba(255,255,255,0.9); padding: 32px 30px 30px; width: 280px;} .videotop span{ display: block; color: #8f511c; font-size: 16px; font-weight: bold; line-height: 1; margin-bottom: 14px;} .videotop strong{ display: block; line-height: 1.2; color: #966F62; font-size: 32px; font-weight: bold; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap;} .videotop b{ position: relative; display: block; width: 44px; height: 44px; text-align: center; background:url(../images/videobtn2.png); background-size: cover; margin-top: 22px;} .video-ico{ margin-top: 90px;} .video-ico p{ display: block; float: left; color: #B28B7F; font-size: 14px; line-height: 1.2; margin-right: 15px;} .popvideos{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 999; opacity: 0; visibility: hidden; -webkit-transition: 0.65s; -o-transition: 0.65s; -moz-transition: 0.65s; transition: 0.65s;} .popvideos.show{ opacity: 1; visibility: visible;} .popvideos .popclose{ top: 30px; z-index: 10;} .videomark{ width: 100%; height: 100%; position: absolute; z-index: 1; left: 0; top: 0; background: #000; filter:alpha(opacity=50); background: rgba(0,0,0,0.5);} .videomark b{ position: absolute;left: 50%; top: 50%;margin-left: -26px;margin-top: -26px; width: 53px; height: 53px;background: url(../images/videobtn.png) center no-repeat;background-size: cover; cursor: pointer;} .inforbann{ position: relative; margin-bottom: 100px; border-radius: 16px;} .inforbann .slick-list{ position: relative; z-index: 3;} .informate-i{ width: 100%; position: relative; float: left; border-radius: 16px; overflow: hidden;} .informate-i.slick-current .pbanner{ -moz-animation: brightnessIn 1s; -o-animation: brightnessIn 1s; animation: brightnessIn 1s; -webkit-animation: brightnessIn 1s;} .inforbann .slick-dots{ position: absolute; z-index: 10; left: 50px; bottom: 52px; z-index: 20; height: 8px; line-height: 0;} .inforbann .slick-dots li{ line-height: 1; float: left; margin-right: 24px;} .inforbann .slick-dots li button{ padding: 0; margin: 0; border: none; width: 8px; height: 8px; border-radius: 50%; background: #FFFFFF; text-indent: 99999px; overflow: hidden; cursor: pointer; -webkit-transition: 0.38s; -o-transition: 0.38s; -moz-transition: 0.38s; transition: 0.38s; outline: none;} .inforbann .slick-dots li.slick-active button{ background: #E2C2B8;} .process{ padding: 32px 0 80px; background-position: center; -o-background-size: cover; background-size: cover; margin-top: 120px; position: relative; z-index: 3; overflow: hidden;} .processbgd{ position: absolute; left: 69px; top: 0; right: 159px; bottom: 0; z-index: -1; background-position: center; -o-background-size: cover; background-size: cover;} .process .casett{ margin-left: 103px;} .process-box{ position: relative; z-index: 3; padding-left: 8.125%; padding-right: 8.125%;} .processwr{ position: relative; margin-top: 145px;} .processwr:before,.processwr:after{ content: ""; position: absolute; top: 32px; width: 8.125%; background: #B28B7F; height: 1px; opacity: 0.5; filter:alpha(opacity=50); z-index: -1;} .processwr:before{ left: 0;} .processwr:after{ right: 0;} .process-box li{ width: 16.6666%; float: left; position: relative; text-align: center;} .process-box li:before,.process-box li:after{ content: ""; position: absolute; top: 32px; background: #B28B7F; height: 1px; opacity: 0.5; filter:alpha(opacity=50);} .process-box li:before{ left: 0; right: 50%; margin-right: 32px;} .process-box li:after{ left: 50%; right: 0%; margin-left: 32px;} .process-top b{ display: block; width: 60px; height: 60px; text-align: center; line-height: 60px; border-radius: 50%; border: 2px solid #966F62; color: #966F62; font-size: 14px; font-family: "Helvetica Bold"; font-weight: normal; margin: auto; -webkit-transition: 0.45s; -o-transition: 0.45s; -moz-transition: 0.45s; transition: 0.45s;} .process-top span{ display: block; text-align: center; line-height: 1; color: #966F62; font-size: 14px; font-weight: bold; margin-top: 20px; margin-bottom: 17px; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s;} .process-top i{ display: block; text-align: center; color: #B28B7F; font-size: 28px; font-style: normal; line-height: 1; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s;} .process-bott{ margin-top: 19px; padding-top: 20px; position: relative;} .process-bott:before{ content: ""; width: 1px; height: 12px; background: #8f511c; position: absolute; left: 50%; top: 0; height: 0; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s;} .process-bott p{ color: #8f511c; font-size: 14px; font-size: 14px; opacity: 0; visibility: hidden; -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -webkit-transition: 0.45s; -o-transition: 0.45s; -moz-transition: 0.45s; transition: 0.45s;} .process-box li a:hover .process-top b{ background: #8f511c; border-color: #8f511c; color: #fff;} .process-box li a:hover .process-top span{ color: #8f511c;} .process-box li a:hover .process-top i{ color: #8f511c;} .process-box li a:hover .process-bott:before{ height: 12px;} .process-box li a:hover .process-bott p{ opacity: 1; visibility: visible; -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s;} .informate{ margin-top: 60px;} .message{ padding-top: 140px; padding-bottom: 0; margin-top: 0;} .message .commonflex{ top: 140px;} .message .commonflex strong{ font-size: 32px; margin-bottom: 135px;} .viewmark{ position: relative; display: block;} .sbanner.article-block,.productimg.article-block,.about.article-block{ opacity: 0;} .sbanner.articleShow,.productimg.articleShow,.about.articleShow{ opacity: 1; -moz-animation: brightnessIn 1s; -o-animation: brightnessIn 1s; animation: brightnessIn 1s; -webkit-animation: brightnessIn 1s;} .about-poaple{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; background: url(../images/weilasi.png) 65% center no-repeat; -o-background-size: auto 100%; background-size: auto 100%; display: none; z-index: -1;} .adelay1 { -webkit-transition: 500ms; -o-transition: 500ms; -moz-transition: 500ms; transition: 500ms;} .adelay2 { -webkit-transition: 500ms 100ms; -o-transition: 500ms 100ms; -moz-transition: 500ms 100ms; transition: 500ms 100ms;} .adelay3 { -webkit-transition: 500ms 200ms; -o-transition: 500ms 200ms; -moz-transition: 500ms 200ms; transition: 500ms 200ms; } .adelay4 { -webkit-transition: 500ms 300ms; -o-transition: 500ms 300ms; -moz-transition: 500ms 300ms; transition: 500ms 300ms; } .adelay5 { -webkit-transition: 500ms 400ms; -o-transition: 500ms 400ms; -moz-transition: 500ms 400ms; transition: 500ms 400ms; } .adelay6 { -webkit-transition: 500ms 500ms; -o-transition: 500ms 500ms; -moz-transition: 500ms 500ms; transition: 500ms 500ms; } .adelay7 { -webkit-transition: 500ms 600ms; -o-transition: 500ms 600ms; -moz-transition: 500ms 600ms; transition: 500ms 600ms; } .adelay8 { -webkit-transition: 500ms 700ms; -o-transition: 500ms 700ms; -moz-transition: 500ms 700ms; transition: 500ms 700ms; } .adelay9 { -webkit-transition: 500ms 800ms; -o-transition: 500ms 800ms; -moz-transition: 500ms 800ms; transition: 500ms 800ms; } .adelay10 { -webkit-transition: 500ms 900ms; -o-transition: 500ms 900ms; -moz-transition: 500ms 900ms; transition: 500ms 900ms; } .adelay11 { -webkit-transition: 500ms 1000ms; -o-transition: 500ms 1000ms; -moz-transition: 500ms 1000ms; transition: 500ms 1000ms; } .adelay12 { -webkit-transition: 500ms 1100ms; -o-transition: 500ms 1100ms; -moz-transition: 500ms 1100ms; transition: 500ms 1100ms; } .animate{ opacity: 0; visibility: hidden; position:relative; } .shown{ opacity: 1; visibility: visible; } .loadmore{ margin: auto; text-align: center;} .loadmore span{ height: 50px; line-height: 50px; display: inline-block; padding: 0 30px; color: #fff; background: #8f511c; border-radius: 5px; font-size: 14px;} .recuite-main{ overflow: hidden;} .recuite-main{ position: relative; z-index: 3; padding-bottom: 228px;} .recuitebg{ position: absolute; left: 0; top: 0; width: 100%; z-index: -1;} .recuitebg img{ width: 100%; height: auto;} .recuite-wr{ width: 878px; margin: auto;} .recuit-top{ padding: 216px 0 98px;} .recuit-top h2{ line-height: 1.2; color: #333333; font-size: 64px; font-weight: normal; margin-bottom: 28px; text-align: center;} .recuit-top strong{ display: block; line-height: 1; color: #64D0B7; font-size: 43px; text-align: center; font-weight: normal;} .condite{ margin-bottom: 66px;} .retitle{ text-align: center; line-height: 1; color: #333333; font-size: 24px; font-weight: normal; position: relative; padding-bottom: 34px;} .retitle:before{ content: ""; width: 34px; height: 34px; background: url(../images/arrow1.png) center no-repeat; position: absolute; left: 50%; margin-left: -17px; bottom: 0;} .condite strong{ display: block; text-align: center; color: #64D0B7; font-size: 24px; line-height: 1.2; margin-top: 10px; font-weight: normal;} .provide{ margin-bottom: 46px;} .providefix{ margin-top: 31px; text-align: center; width: 100%;} .providefix li{ display: inline-block; margin-left: 15px; width: 160px; padding-top: 39px; height: 333px; background: url(../images/providebg.png) center top no-repeat; vertical-align: top;} .providefix li:first-child{ margin-left: 0;} .provide-i{ display: block; margin-left: 32px; text-align: left;} .provide-i dt{ display: block; color: #64D0B7; font-size: 24px; font-weight: bold; line-height: 1.2; margin-bottom: 18px;} .provide-i dd{ display: block;} .provide-i dd p{ color: #333333; font-size: 16px; margin-bottom: 10px;} .providefix li:last-child .provide-i dd p{ margin-bottom: 0px; line-height: 1.6;} .advantages{ margin-bottom: 65px;} .advantaged{ text-align: center; margin-top: 18px;} .advantaged li{ display: inline-block; margin-left: 46px; width: 148px; border-radius: 50%; background: #fff; padding-top: 41px; height: 107px; text-align: center;} .advantaged li:first-child{ margin-left: 0;} .advantaged li b{ display: block; text-align: center; line-height: 1; color: #AACC7A; font-size: 32px; margin-bottom: 13px; font-weight: normal;} .advantaged li strong{ display: block; text-align: center; line-height: 1.2; color: #64D0B7; font-size: 18px;} .procedure{ margin-bottom: 80px;} .proceduli{ margin-top: 34px;} .proceitem{ float: left; padding-left: 30px; position: relative; margin-left: 96px;} .proceitem:first-child{ margin-left: 0;} .proceitem b{ display: block; line-height: 1; color: #64D0B7; font-size: 64px; font-family: "Helvetica Bold"; font-weight: normal; position: absolute; left: 0; top: 50%; margin-top: -32px;} .proceitem span{ display: block; padding-left: 49px; width: 148px; background: #fff; color: #333333; font-size: 18px; line-height: 114px; border-radius: 12px;} .submission{ padding: 42px 0 51px; background: #64D0B7; background: rgba(100,208,183,0.7);} .retitle1{ color: #fff;} .retitle1:before{ background: url(../images/arrow2.png) center no-repeat;} .subbox{ margin-top: 27px; padding: 0 70px; margin-bottom: 30px;} .subrow{ width: 50%; float: left; padding: 0 16px; -moz-box-sizing: border-box; box-sizing: border-box;} .subrow input{ -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; border: 0; outline: none; width: 100%; padding-left: 28px; height: 64px; line-height: 64px; color: #333333; font-size: 14px; background: #fff; border-radius: 12px; outline: none;} .submessage{ text-align: center;} .submessage .sub{ padding: 0; margin: 0; border: 0; width: 240px; height: 64px; line-height: 64px; color: #fff; font-size: 14px; border-radius: 12px; background: #AACC7A; margin: auto; cursor: pointer; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s;} .submessage .sub:hover{ background:#64D0B7;} .recuitebg1{ top: auto; bottom: 0; line-height: 0;} .popUpblack{ background:#000\9; filter:alpha(opacity=80); background:rgba(0,0,0,0.8); width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: 1010; display: none;} .popUp { width: 220px; border: 2px solid #8f511c; background: #fff; position: fixed; left: 50%; top: 50%; margin: -87px 0 0 -115px; z-index: 1004; } .popUp .t { padding: 0 0 0 10px; height: 26px; line-height: 26px; color: #666; font-weight: bold; border-bottom: 1px solid #e8e8e8; background: #f2f2f2; } .popUp .t .close{ padding: 0 10px 0 0; float: right; cursor: pointer; color: #666; font-weight: normal;} .popUp .img { padding: 20px; } .popUp .img img { width: 100%; display: block;} .news-box .casemore{ bottom: -50px;} #newBridge{ opacity: 1; visibility: hidden !important; -webkit-transition: 0.45s; -o-transition: 0.45s; -moz-transition: 0.45s; transition: 0.45s;} #newBridge.show{ opacity: 1; visibility: visible !important; -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; z-index: 90 !important;} #newBridge .nb-right-bottom{ right: 72px !important; bottom: -63px !important;} .pbanner1.hide{ background: none !important;} .pbanner1.hide figure img{ opacity: 1; visibility: visible;} .error{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: table;} .error-wrapper{ position: relative; display: table-cell; vertical-align: middle; padding-left: 68px; padding-right: 17.7%;} .error-left{ width: 560px; float: left;} .error-top{ height: 300px;} .error-top strong{ display: block; color: #8f511c; font-size: 56px; line-height: 1; margin-bottom: 18px;} .error-top p{ color: #966F62; font-size: 14px; line-height: 2;} .error-img img{ display: block; width: 100%; height: auto;} .error-back{ float: right; margin-top: 280px;} .error-back a{ display: block; width: 100px; height: 100px; background:#8f511c; border-radius: 50%; color: #fff; font-size: 28px; margin-top: 40px; text-align: center; line-height: 100px;} .error-back a:hover{ background: #F7D5D5;} .seo-header-top{ position: relative;margin-top: 140px; } .seo-wrap{ padding: 0 4%;} .seo-header{ padding: 22px 0 28px;} .seo-logos{ display: block; float: left;} .seo-logos img{ display: block; width: 138px; height: auto; float: left;} .seo-logos span{ display: block; float: left; margin-left: 24px; padding-left: 15px; line-height: 29px; color: #cb0b0b; font-size: 14px; margin-top: 9px; white-space: nowrap; border-left: 1px solid #c80000;} .seo-nav{ float: right; margin-top: 10px;} .seo-nav-list{ position: absolute; left: 50%; margin-left: -136px; top: 32px;} .seo-nav-list li{ float: left; margin-left: 40px;} .seo-nav-list li:first-child{ margin-left: 0;} .seo-nav-list li a{ display: block; line-height: 26px; color: #966f62; font-size: 16px;} .seo-nav-list li a:hover{ color: #64d0b7;} .seo-tel{ float: left; margin-left: 105px;} .seo-tel i{ float: left; display: block; width: 26px; height: 26px; background: url(../images/tel1.png) center no-repeat; font-style: normal;} .seo-tel p{ float: left; line-height: 26px; color: #966f62; font-size: 14px; margin-left: 6px;} .seo-banner-box{ position: relative;} .seo-banner{ position: relative; z-index: 1;} .seo-banner-item{ position: relative;} .seo-item-bg{ width: 100%; height: 760px; height: -webkit-calc( 100vh - 228px ); height: -moz-calc( 100vh - 228px ); height: calc( 100vh - 228px ); left: 0; top: 0; z-index: -1; -o-background-size: cover; background-size: cover; background-position: center;} .seo-words{ width: 90%; position: absolute; left: 5%; text-align: center; top: 50%; -webkit-transform: translateY(-55%); -moz-transform: translateY(-55%); -ms-transform: translateY(-55%); -o-transform: translateY(-55%); transform: translateY(-55%); z-index: 3;} .seo-words-title strong{ display: block; line-height: 1.2; color: #fff; font-size: 2.6042vw; margin-bottom: 10px;} .seo-words-title p{ color: #fff; font-size: 16px; margin-bottom: 5%;} .seo-words-title span{ display: block; position: relative; padding-top: 28px; line-height: 1.5; font-size: 14px;} .seo-words-title span:before{ content: ""; width: 32px; height: 3px; background-color: #fff; opacity: 0.5; filter:alpha(opacity=50); position: absolute; left: 50%; margin-left: -16px; top: 0;} .seo-btn{ text-align: center; margin-top: 6.4815vh;} .seo-btn a{ display: inline-block; width: 145px; height: 44px; line-height: 44px; border: 1px solid #fff; border-radius: 24px; color: #fff; font-size: 14px; text-align: center;} .seo-btn a:first-child{ margin-right: 22px;} .seo-btn a i{ display: inline-block; color: #fff; font-size: 26px; margin-right: 10px; position: relative; top: 0px; vertical-align: middle;} .seo-btn a:hover{ background-color: #64d0b7; border-color: #64d0b7; } .seo-price{ position: absolute; right: 7.9167vw; top: 50%; margin-top: -191px; background-color: #f1ecef; padding: 0 20px 40px; width: 239px; z-index: 3;} .seo-price-top{ padding: 32px 0 66px; text-align: center;} .seo-price-top strong{ display: block; line-height: 1.1; color: #333333; font-size: 16px; font-weight: bold; margin-bottom: 24px;} .seo-price-top p{ color: #666666; font-size: 12px; font-weight: bold; line-height: 1;} .seo-price-top p b{ display: inline-block; color: #cb0b0b; font-size: 45px; font-weight: lighter; font-family: "PFDinTextCompProRegular"; margin-right: 8px;} .seo-input input.text{ padding: 0; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 15px; width: 100%; color: #999999; height: 41px; line-height: 42px; background-color: #fff; font-size: 12px; margin-bottom: 6px; border: none; outline: none;} .seo-input input::-webkit-input-placeholder{ -webkit-columns: #999; columns: #999;} .seo-input input:focus::-webkit-input-placeholder{ opacity: 0;} .seo-input .sub{ width: 100%; padding: 0; height: 41px; line-height: 41px; background-color: #64d0b7; color: #fff; font-size: 14px; border: none; cursor: pointer; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s; -webkit-transition: 0.35s; -o-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s;} .seo-input .sub:hover{ background-color: #cb0b0b;} .seo-input p{ color: #999999; font-size: 12px; text-align: center; line-height: 1; margin-top: 12px;} .seo-banner-item.slick-current{ -moz-animation: brightnessIn 1s; -o-animation: brightnessIn 1s; animation: brightnessIn 1s; -webkit-animation: brightnessIn 1s;} .seo-banner .slick-list{ position: relative; z-index: 2;} .seo-banner .slick-dots{ width: 100%; position: absolute; left: 0; bottom: 28px; z-index: 10; text-align: center; font-size: 0;} .seo-banner .slick-dots li{ display: inline-block; margin-left: 8px; line-height: 1;} .seo-banner .slick-dots li:first-child{ margin-left: 0;} .seo-banner .slick-dots li button{ padding: 0; margin: 0; width: 13px; height: 13px; border: 1px solid #fff; border-radius: 50%; text-indent: 99999px; overflow: hidden; background: none; -webkit-transition: 0.35s; -o-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s; outline: none; cursor: pointer;} .seo-banner .slick-dots li.slick-active button{ background: #64d0b7;} .seo-munble{ padding: 60px 0;} .seo-data{ text-align: center; width: 1185px; position: absolute; left: 50%; margin-left: -592px; bottom: -90px; z-index: 10; font-size: 0; box-shadow: 0 0 15px rgba(0,0,0,0.1); background-color: #fff; padding: 30px 0 19px;} .seo-data-item{ display: inline-block; width: 25%; float: left; text-align: center; padding: 16px 0 7px; -moz-box-sizing: border-box; box-sizing: border-box; border-left: 1px solid #eaeaea;} .seo-data-item:first-child{ border-left: none;} .seo-data-wrap{ text-align: left; display: inline-block;} .seo-data-wrap p{ color: #212121; line-height: 1; } .seo-data-wrap p b{font-family: "PFDinTextCompProRegular"; font-size: 60px; font-weight: normal;} .seo-data-wrap p i{ font-size: 24px; font-style: normal; font-family: "PFDinTextCompProRegular"; display: inline-block; vertical-align: top;} .seo-data-wrap p em{ position: relative; top: -5px; display: inline-block; width: 19px; height: 19px; text-align: center; line-height: 19px; color: #fff; font-size: 12px; border-radius: 50%; background-color: #64d0b7; font-style: normal;} .seo-data-wrap span{ position: relative; margin-top: 8px; padding-bottom: 15px; display: block; line-height: 1; color: #999999; font-size: 14px;} .seo-data-wrap span:before{ content: ""; width: 20px; height: 2px; background-color: #c2c2c2; position: absolute; left: 0; bottom: 0; } .seo-box{ margin: 0 4.9792vw; overflow: hidden;} .seo-box-list{ padding-top: 10px; position: relative; display: -moz-box; display: -ms-flexbox; display: flex; display: -webkit-flex;} .seo-box-list li{ width: 170px; float: left; position: relative; height: 44px; text-align: center;} .seo-box-list li img{ display: block; max-width: 100%; max-height: 100%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s;} .seo-box-list li:hover img{ -webkit-transform: translateY(-7px); -moz-transform: translateY(-7px); -ms-transform: translateY(-7px); -o-transform: translateY(-7px); transform: translateY(-7px);} .str_wrap{ background: none !important;} .apply-serve-wrap{ width: 1180px; margin: auto; max-width: 90%;} .apply-serve-tt{ padding: 0 0 56px; text-align: center;} .apply-serve-tt strong{ display: block; color: #333333; font-size: 50px; line-height: 1.2; margin-bottom: 25px; font-weight: normal;} .apply-serve-tt p{ text-align: center; color: #999999; font-size: 16px; line-height: 1.5;} .apply-item{ width: 18.4%; float: left; cursor: pointer; margin-left: 1.7%; background-color: #fff; padding: 38px 0 34px; position: relative; z-index: 3; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s;border: 1px solid #eee;} .apply-item:before{ content: ""; width: 100%; height: 0%; background-color: #64d0b7; position: absolute; left: 0; bottom: 0; -webkit-transition: 0.78s; -o-transition: 0.78s; -moz-transition: 0.78s; transition: 0.78s; z-index: -1;} .apply-item:first-child{ margin-left: 0;} .apply-item-top b{ display: block; line-height: 1; font-weight: normal; text-align: center; color: #64d0b7; font-size: 60px; -webkit-transition: 0.36s; -o-transition: 0.36s; -moz-transition: 0.36s; transition: 0.36s;} .apply-item-top strong{ display: block; text-align: center; line-height: 1; color: #333333; font-size: 24px; margin-top: 28px; margin-bottom: 16px; -webkit-transition: 0.36s; -o-transition: 0.36s; -moz-transition: 0.36s; transition: 0.36s; font-weight: normal;} .apply-list{ height: 210px; -webkit-transition: 0.36s; -o-transition: 0.36s; -moz-transition: 0.36s; transition: 0.36s;} .apply-list li{ margin-bottom: 2px; text-align: center;} .apply-list li{ color: #666666; font-size: 14px; -webkit-transition: 0.36s; -o-transition: 0.36s; -moz-transition: 0.36s; transition: 0.36s;} .apply-price{ margin: 0 10%; } .apply-price a{ display: block; height: 37px; line-height: 37px; text-align: center; color: #fff; font-size: 14px; background-color: #64d0b7; border-radius: 19px; position: relative; top: 0; -webkit-transition: 0.36s; -o-transition: 0.36s; -moz-transition: 0.36s; transition: 0.36s;} .case-block-title{ padding: 86px 0 60px 0; width: 1185px; max-width: 90%; margin: auto;} .case-blicktt{ float: left;} .case-blicktt strong{ display: block; color: #333333; font-size: 35px; line-height: 1; font-weight: normal; float: left;} .case-blicktt p{ float: left; color: #999999; font-size: 16px; margin-left: 24px; line-height: 35px;} .case-mode{ float: right; margin-top: 10px; cursor: pointer;} .casebtns{ border-top: 1px solid #cdcdcd; border-bottom: 1px solid #cdcdcd; float: left; margin-left: 16px;} .casebtns:first-child{ margin-left: 0;} .tbtn{ padding: 10px 2px;} .tbtn i{ width: 6px; height: 6px; float: left; margin-left: 2px; background-color: #c0c1c2; -webkit-transition: 0.3s; -o-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s;} .tbtn i:first-child{ margin-left: 0;} .lbtn{ width: 20px; padding: 9px 3px 7px 3px;} .lbtn i{ display: block; width: 4px; height: 4px; background-color: #c0c1c2; float: left; margin-right: 1px; margin-bottom: 1px; -webkit-transition: 0.3s; -o-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s;} .casebtns.tbtn.active i,.casebtns:hover i,.casebtns.lbtn.active i{ background-color: #000000;} .case-mode span{ display: block; float: left; color: #999999; font-size: 12px; line-height: 20px; -webkit-transition: 0.34s; -o-transition: 0.34s; -moz-transition: 0.34s; transition: 0.34s; opacity: 0; visibility: hidden;} .case-mode:hover i,.case-mode:hover span{ color: #64d0b7;} .seo-case{ position: relative; padding: 0 4% 80px;} .seo-case-bg{ width: 100%; height: 362px; background-position: center; -o-background-size: cover; background-size: cover; position: absolute; left: 0; top: 0;} .seo-case-swiper{ position: absolute; position: absolute; width: 100%; top: 0; left: 0; opacity: 0; visibility: hidden;} .seo-case-swiper.show{ position: relative; opacity: 1; visibility: visible;} .seo-case-swiper li{ position: relative; width: 25%; float: left;} .seo-case-swiper li figure{ display: block; line-height: 1; overflow: hidden;} .seo-case-swiper li figure img{ display: block; width: 100%; -webkit-transition: 0.68s; -o-transition: 0.68s; -moz-transition: 0.68s; transition: 0.68s;} .seo-case-fix{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 3; background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden; -webkit-transition: 0.56s; -o-transition: 0.56s; -moz-transition: 0.56s; transition: 0.56s;} .seo-case-fix p{ color: #fff; font-size: 18px; position: absolute; left: 8%; top: 8%; font-weight: lighter;} .seo-case-fix strong{ display: block; position: absolute; left: 8%; bottom: 8%; color: #fff; font-size: 16px; right: 8%; line-height: 1.5; font-weight: lighter; padding-top: 10px;} .seo-case-fix strong:before{ content: ""; position: absolute; left: 0; top: 0; width: 8px; height: 1px; background-color: #fff;} .seo-case-btn{ position: absolute; top: 148px; z-index: 10; cursor: pointer;} .seo-case-btn span{ display: block; width: 44px; height: 44px; text-align: center; line-height: 44px; border-radius: 50%; background-color: #696969; color: #fff; font-size: 18px; -webkit-transition: 0.35s; -o-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s;} .seo-case-btn p{ text-align: center; line-height: 1; color: #959595; font-size: 12px; font-weight: bold; margin-top: 10px; -webkit-transition: 0.35s; -o-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s;} .seo-case-btn:hover span{ background-color: #64d0b7;} .seo-case-btn:hover p{ color: #fff;} .seo-case-btn.prev{ left: 44px;} .seo-case-btn.next{ right: 44px;} .seo-case-tab{ width: 800px; padding-top: 86px; margin: auto; max-width: 100%;} .seo-case-item{ float: left; width: 100%;} .seo-case-item strong{ display: block; text-align: center; line-height: 1; color: #fff; font-size: 24px; font-weight: bold; margin-bottom: 36px; margin-left: 3vw;} .seo-case-item img{ display: block; width: 90%; height: auto; margin: auto;} .seo-mubles{ margin-top: 76px; text-align: center; color: #333333; font-size: 16px; line-height: 1; font-family: "PFDinTextCompProRegular";} .seo-mubles i{ display: inline-block; margin-right: 8px; color: #333333; font-style: normal; opacity: 1;} .seo-mubles span{ opacity: 0.3;} .seo-mubles span.end{ margin-left: 3px;} .seo-case-tops{ position: relative;} .seo-case-tops.show{ opacity: 0; visibility: hidden; position: absolute;width: 100%;} .seo-case-banners{ margin-left: -17px; margin-right: -17px;} .seo-case-list{ margin: auto; max-width: 100%; } .seo-case-list li{ width: 33.3333%; float: left; margin-bottom: 45px;} .seo-case-list li a{ display: block; margin: 0 17px;} .seo-case-list li a figure{ display: block; overflow: hidden; line-height: 1;} .seo-case-list li a figure img{ display: block; width: 100%; height: auto; -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s;} .seo-case-down{ position: relative; padding: 20px 29px 14px; background-color: #fff;} .seo-case-down:before{ content: ""; width: 0; height: 6px; background-color: #64d0b7; position: absolute; right: 0; bottom: 0; -webkit-transition: 0.58s; -o-transition: 0.58s; -moz-transition: 0.58s; transition: 0.58s;} .seo-case-down strong{ display: block; line-height: 1.2; color: #333333; font-size: 18px; font-weight: normal; margin-bottom: 12px; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; -webkit-transition: 0.35s; -o-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s;} .seo-case-down p{ color: #999999; font-size: 13px; line-height: 1.4;height:36px;} .seo-case-down i{ text-align: center; display: block; width: 24px; height: 24px; border: 1px solid #cacaca; border-radius: 50%; position: absolute; right: 30px; line-height: 24px; top: 17px; color: #cecece; font-size: 12px; -webkit-transition: 0.356s; -o-transition: 0.356s; -moz-transition: 0.356s; transition: 0.356s;} .seo-case-list li a:hover figure img{ -webkit-transform: scale(1.06); -moz-transform: scale(1.06); -ms-transform: scale(1.06); -o-transform: scale(1.06); transform: scale(1.06);} .seo-case-list li a:hover .seo-case-down:before{ width: 100%; right: auto; left: 0;} .seo-case-list li a:hover .seo-case-down i{ color: #64d0b7; border-color: #64d0b7;} .seo-case-info{ float: left; width: 100%;} .seo-btn-downs{ text-align: center;} .seo-prev{ display: inline-block; line-height: 1; color: #b6b8b8; font-size: 16px; cursor: pointer; -webkit-transition: 0.35s; -o-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s;} .seo-prev:hover{ color: #64d0b7;} .seo-prev.prev{ margin-right: 108px;} .seo-case-banners .slick-dots{ position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); bottom: 0; text-align: center; z-index: 10;} .seo-case-banners .slick-dots li{ display: inline-block; margin-left: 10px;} .seo-case-banners .slick-dots li:first-child{ margin-left: 0;} .seo-case-banners .slick-dots li button{ padding: 0; margin: 0; border: none; width: 13px; height: 13px; border: 1px solid #9b9b9b; border-radius: 50%; cursor: pointer; background: none; text-indent: 9999px; overflow: hidden; outline: none; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s;} .seo-case-banners .slick-dots li.slick-active button{ border-color: #64d0b7; background: #64d0b7;} .us-advantege{ width: 1180px; margin: auto; max-width: 90%;} .advantage-tt{ display: block; text-align: center; line-height: 1; color: #333333; font-size: 35px; font-weight: normal; margin-bottom: 58px;} .advantage-lists{ margin-left: -13px; margin-right: -13px;} .advantage-items{ width: 33.3333%; float: left; margin-bottom: 26px;} .advantage-wraps{ margin: 0 13px; position: relative; z-index: 3; background-color: #fff; box-shadow: 0 0 15px rgba(0,0,0,0.1); padding: 30px 30px; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s; cursor: pointer;} .advantage-wraps:before{ content: ""; width: 100%; height: 0; background-color: #64d0b7; position: absolute; right: 0; bottom: 0; -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s; z-index: -1;} .advantage-wraps i{ line-height: 1; margin-bottom: 20px; display: block; color: #000000; font-size: 46px; font-style: normal; -webkit-transition: 0.38s; -o-transition: 0.38s; -moz-transition: 0.38s; transition: 0.38s;} .advantage-wraps strong{ display: block; line-height: 1.1; color: #252525; font-size: 1.4583vw; font-weight: normal; padding-bottom: 14px; position: relative; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis;} .advantage-main{ height: 75px;} .advantage-main p{ color: #999999; font-size: 14px; line-height: 1.8; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s;} .advantage-wraps b{ display: inline-block; color: #64d0b7; font-size: 12px; line-height: 1; -webkit-transition: 0.38s; -o-transition: 0.38s; -moz-transition: 0.38s; transition: 0.38s;} .select-us{ padding: 200px 0 116px;} .select-us-wrap{ width: 1180px; margin: auto; max-width: 100%;} .select-us-title{ float: left;} .select-us-fix{ height: 250px;} .select-us-fix strong{ display: block; line-height: 1; color: #333333; font-size: 35px; font-weight: normal; margin-bottom: 16px;} .select-us-fix p{ color: #666666; font-size: 20px; line-height: 1;} .select-us-title .select-more{ display: block; width: 180px; height: 56px; line-height: 56px; color: #fff; font-size: 15px; border-radius: 28px; background-color: #64d0b7; text-align: center;} .select-us-title .select-more i{ display: inline-block; font-size: 25px; margin-left: 14px; line-height: 1; position: relative; left: 0; top: 5px; -webkit-transition: 0.35s; -o-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s;} .select-us-title .select-more:hover i{ left: 5px;} .service-slelect{ float: right;} .service-items{ float: left; margin-left: 4.1667vw;} .service-items:first-child{ margin-left: 0;} .service-items small{ display: block; color: #64d0b7; font-size: 33px; line-height: 1; font-family: "PFDinTextCompProRegular"; text-transform: uppercase; height: 112px;} .service-items strong{ display: block; line-height: 1; color: #333333; font-size: 24px; margin-bottom: 94px;} .service-items img{ display: block; height: 67px;} .serve-process-box{ padding-top: 0;} .serve-process{ width: 1180px; margin: auto; max-width: 90%; padding: 46px 0 70px;} .serve-process-main{ margin-left: -3px; margin-right: -3px; display: -moz-box; display: -ms-flexbox; display: flex; display: -webkit-flex;} .serve-process-item{ width: 16.6666%; float: left; -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s;} .serves-process-wrap{ margin: 0 3px; -webkit-transition: 0.45s; -o-transition: 0.45s; -moz-transition: 0.45s; transition: 0.45s; height: 376px; position: relative; background-color: #fff;border: 1px solid #eee;} .serves-center{ width: 100%; text-align: center; position: absolute; left: 0; top: 50%; margin-top: -58px; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s;} .serves-center img{ display: block; height: 45px; width: auto; margin: auto; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s;} .serves-center strong{display: block;text-align: center;color: #333333;font-size: 16px;line-height: 1.5; margin-top: 38px;margin-bottom: 10px;-webkit-transition: 0.4s;-o-transition: 0.4s;-moz-transition: 0.4s;transition: 0.4s;} .serves-center p{ color: #666666; font-size: 14px; text-align: left; opacity: 0; visibility: hidden; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s; transition: 0.4s;} .serves-process-wrap b{ display: block; line-height: 1; color: #333333; font-size: 2.6042vw; font-family: "PFDinTextCompProRegular"; position: absolute; left: 10%; bottom: 22px; opacity: 0.2; opacity: 0; visibility: hidden; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s; font-weight: normal;} .city-serves{ overflow: hidden;} .city-serve-top{ width: 1180px; margin: auto; max-width: 90%; position: relative; padding: 94px 0 100px;} .city-serve-content{ width: 410px; position: absolute; left: 0; top: 164px; z-index: 4;} .city-serve-title strong{ display: block; line-height: 1.2; color: #333333; font-size: 35px; margin-bottom: 26px; font-weight: normal;} .city-serve-title p{ color: #666666; font-size: 16px; line-height: 1.5;} .city-lists{ margin-top: 70px;} .city-list-item{ width: 135px; float: left; margin-right: 15px; margin-bottom: 12px; background-color: #d9dbda; padding: 17px 0; text-align: center; cursor: pointer; position: relative; z-index: 3;} .city-list-item:before{ content: ""; width: 100%; height:0; background-color: #64d0b7; position: absolute; right: 0; bottom: 0; z-index: -1; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s;} .city-list-item p{ color: #666666; font-size: 14px; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s;} .city-list-item:hover:before,.city-list-item.active:before{ height: 100%; bottom: auto; top: 0;} .city-list-item:hover p,.city-list-item.active p{ color: #fff;} .city-maps{ position: relative; width: 38.75vw; float: right;} .city-maps-img img{ display: block; width: 100%; height: auto;} .city-itemsd{ width: 100%; position: absolute; left: 0; top: 0; height: 100%;} .city-serves-info{ position: absolute; left: 48.19%; top: 57.7%;} .city-dit{ display: block; line-height: 1; color: #64d0b7; font-size: 24px;} .city-arltcle{ width: 107px; height: 107px; border-radius: 50%; position: absolute; left: 50%; top: 50%; margin-left: -53px; margin-top: -53px;} .city-arltcle img{ width: 100%; border: 5px solid #fff; -moz-box-sizing: border-box; box-sizing: border-box; height: auto; border-radius: 50%; opacity: 0; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s; visibility: hidden;} .city-dit-wrap{ position: absolute; width: 100%; text-align: center; left: 0; top: 28px; opacity: 0; visibility: hidden; -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s;} .city-dit-wrap i{ display: block; text-align: center; line-height: 1; color: #64d0b7; font-size: 24px; margin-bottom: 8px;} .city-dit-wrap p{ text-align: center; line-height: 1; color: #fff; font-size: 12px;} .city-dit-content{ position: absolute; right: 113px; top: 90px; width: 184px; padding: 11px 36px 12px 28px; background: rgba(0,0,0,0.5); z-index: 3; -webkit-transform: translateX(-80px); -moz-transform: translateX(-80px); -ms-transform: translateX(-80px); -o-transform: translateX(-80px); transform: translateX(-80px); -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s; opacity: 0;} .city-dit-content h3{ color: #fff; font-size: 16px; font-weight: normal; margin-bottom: 4px; display: none;} .city-dit-content p{ color: #fff;} .city-dit-content:before{ content: ""; width: 24px; height: 24px; background: url(../images/line2.png) center no-repeat; position: absolute; right: -28px; top: 0;} .city-serves-info.active{ z-index: 6;} .city-serves-info.active .city-arltcle img{ opacity: 1; visibility: visible; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); transform: rotateY(0deg);} .city-serves-info.active .city-arltcle .city-dit-wrap{ opacity: 1; visibility: visible; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s;} .city-serves-info.active .city-dit-content{ -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); opacity: 1;} .city-serves-info1{ left: 58.333%; top: 48.7%;} .city-serves-info2{ left: 55.91%; top: 59.8%} .city-serves-info3{ left: 56.6%; top: 67%;} .city-serve-wraps{ position: relative; z-index: 3;} .city-serve-images{ position: relative; margin: 0 4%;} .city-items-img{ float: left; width: 25%; overflow: hidden;} .city-items-img img{ display: block; width: 100%; -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s;} .city-items-img:hover img{ -webkit-transform: scale(1.06); -moz-transform: scale(1.06); -ms-transform: scale(1.06); -o-transform: scale(1.06); transform: scale(1.06);} .city-btn{ width: 43px; height: 43px; border-radius: 50%; text-align: center; line-height: 43px; cursor: pointer; position: absolute; top: 50%; margin-top: -21px; z-index: 10; background-color: rgba(0,0,0,0.3); color: #fff; font-size: 18px; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s;} .city-btn.prev{ left: 18px;} .city-btn.next{ right: 18px;} .city-btn:hover{ background-color: #64d0b7;} .multivariate{ width: 1180px; margin: auto; max-width: 90%; padding-top: 90px;} .multivariate-title{ padding: 90px 0 52px; text-align: center;} .multivariate-title strong{ display: block; text-align: center; line-height: 1; color: #333333; font-size: 50px; font-weight: normal; margin-bottom: 12px;} .multivariate-title p{ text-align: center; color: #666666; font-size: 16px; line-height: 1.5;} .multivariate-list li{ width: 16.6666%; float: left; -moz-box-sizing: border-box; box-sizing: border-box; padding: 45px 0 42px; text-align: center; border: 1px solid #e4e4e4; margin-left: -1px; margin-top: -1px; -webkit-transition: 0.45s; -o-transition: 0.45s; -moz-transition: 0.45s; transition: 0.45s; cursor: pointer;} .multivariate-list li img{ display: block; height: 40px; width: auto; margin: auto;} .multivariate-list li span{ display: block; text-align: center; line-height: 1; color: #666666; font-size: 14px; margin-top: 16px;} .seo-serves{ margin: 146px 4% 0; background-color: #64d0b7; margin-top: 146px;} .seo-serve-top{ margin: auto; width: 1183px; max-width: 100%; border-bottom: 1px solid rgba(255,255,255,0.5); padding: 52px 0 22px; display: -moz-box; display: -ms-flexbox; display: flex; display: -webkit-flex;} .seo-serve-info{ display: -moz-box; display: -ms-flexbox; display: flex; display: -webkit-flex; margin-left: 6.7708vw; -moz-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-flex: 1;} .seo-serve-info:first-child{ margin-left: 26px;} .seo-serve-info i{ display: block; float: left; width: 35px; height: 35px; text-align: center; line-height: 35px; border: 1px solid #fff; border-radius: 50%; color: #fff; font-size: 20px;} .seo-serve-info p{ float: left; color: #fff; font-size: 18px; line-height: 38px; margin-left: 14px; white-space: nowrap;} .seo-serve-info:nth-child(3) i{ font-size: 22px;} .seo-serve-sub{ padding: 7.5926vh 0; width: 638px; margin: auto; max-width: 100%;} .seo-serve-sub strong{ display: block; text-align: center; line-height: 1; color: #fff; font-size: 24px; font-weight: normal; margin-bottom: 32px;} .seo-serve-input .texts{ float: left; margin-right: 20px; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; border: none; padding-left: 20px; width: 256px; height: 38px; line-height: 38px; background-color: #fff; color: #999999; font-size: 12px; border-radius: 6px;} .seo-serve-input input:focus::-webkit-input-placeholder{ opacity: 0;} .seo-serve-input .sub{ width: 85px; height: 38px; line-height: 38px; text-align: center; border: none; outline: none; text-align: center; border-radius: 6px; background-color: #aacc7a; color: #fff; font-size: 14px; cursor: pointer; float: right; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s;} .seo-serve-input .sub:hover{ background-color: #cb0b0b;} .seo-copy{ padding: 24px 0 30px;} .seo-copy p,.seo-copy a{ text-align: center; color: #af8477; font-size: 14px;} .coopecates{ padding: 100px 0 60px;} .coopecate-wrap{ width: 1180px; margin: auto; max-width: 90%;} .coopecate-list{ margin-left: -6px; margin-right: -6px;} .coopecate-item{ width: 57%; float: left;} .coopecate-in{ margin-bottom: 16px; float: left; width: 25%;} .coopecate-in1{ width: 50%;} .coopecate-in figure{ margin: 0 6px; box-shadow: 0 0 15px rgba(0,0,0,0.1); display: block; line-height: 0; background-color: #fff; padding-bottom: 66%; height: 0; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s;} .coopecate-in1 figure{ padding-bottom: 70.5%;} .coopecate-in figure img{ width: 100%; height: auto;} .coopecate-item1{ width: 43%;} .coopecate-item1 .coopecate-in{ width: 33.33333%;} .coopecate-item1 .coopecate-in1{ width: 66.6666%;} .coopecate-item1 .coopecate-in figure{ padding-bottom: 66%;} .coopecate-item1 .coopecate-in1 figure{ padding-bottom: 70%;} .gradual-grey{ background: none #f9f9f9;} .probanner{ position: relative;} .probanner.article-block{ opacity: 0;} .probanner.articleShow{ opacity: 1; -moz-animation: brightnessIn 1s; -o-animation: brightnessIn 1s; animation: brightnessIn 1s; -webkit-animation: brightnessIn 1s;} .probanner figure{ display: block; line-height: 1; overflow: hidden;} .probanner figure img{ min-width: 100%; width: auto; height: auto;} .probanner strong{ position: absolute; left: 0; top: 60%; margin-top: -24px; display: block; line-height: 1; color: #333333; font-size: 48px; font-weight: bold; width: 100%; text-align: center; font-weight: normal;} .profixlist{ padding: 49px 60px; margin-top: 100px;} .profix-info{ width: 50%; float: right; position: relative;} .profix-info figure{ display: block; line-height: 1; padding-bottom: 75.55%; height: 0; overflow: hidden;} .profix-info figure img{ display: block; width: 100%; height: auto; -webkit-transition: 0.8s; -o-transition: 0.8s; -moz-transition: 0.8s; transition: 0.8s;} .profix-mark{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 5;} .profix-mark:before{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.3); z-index: -1; opacity: 0; visibility: hidden; -webkit-transition: 0.7s; -o-transition: 0.7s; -moz-transition: 0.7s; transition: 0.7s;} .profix-wraps{ width: 100%; position: absolute; left: 0; top: 50%; margin-top: -78px; text-align: center; z-index: 4; -webkit-transition: 0.48s; -o-transition: 0.48s; -moz-transition: 0.48s; transition: 0.48s;} .profix-wraps strong{ margin-bottom: 12px; display: block; text-align: center; line-height: 1; color: #fff; font-size: 18px; font-weight: normal; opacity: 0; visibility: hidden; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition: 0.45s; -o-transition: 0.45s; -moz-transition: 0.45s; transition: 0.45s;} .profix-wraps small{display: block; line-height: 1; color: #fff; font-size: 32px; font-weight: bold; font-family: arial; opacity: 0; visibility: hidden; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition: 0.45s; -o-transition: 0.45s; -moz-transition: 0.45s; transition: 0.45s; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis;} .profix-href{ display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0;} .profix-btns{ font-size: 0; text-align: center; margin-top: 50px; opacity: 0; visibility: hidden; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s;} .profix-btns a{ margin-left: 32px; display: inline-block; width: 42px; height: 42px; border: 1px solid #fff; border-radius: 50%; text-align: center; line-height: 42px; color: #fff; font-size: 16px; } .profix-btns a:hover{ background-color: #fff; color: #43C5A7;} .profix-btns a:first-child{ margin-left: 0;} .profix-info:hover figure img{ -webkit-transform: scale(1.04); -moz-transform: scale(1.04); -ms-transform: scale(1.04); -o-transform: scale(1.04); transform: scale(1.04);} .profix-info:hover .profix-mark:before{ opacity: 1; visibility: visible;} .profix-info:hover .profix-wraps strong{ opacity: 1; visibility: visible; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .profix-info:hover .profix-wraps small{ opacity: 1; visibility:visible; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);} .profix-info:hover .profix-btns{ opacity: 1; visibility: visible; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);} .profix-list{ width: 50%; float: left;} .profixbox{ width: 50%; float: left;} .profix-bg{ -webkit-transition: 0.6s; -o-transition: 0.6s; -moz-transition: 0.6s; transition: 0.6s;} .profix-bg.bg1{ background: rgba(0,0,0,0.9); } .profix-bg.bg2{ background: rgba(255,255,255,0.8);} .profix-defaut .profix-wraps{ margin-top: -31px;} .profix-defaut .profix-wraps strong,.profix-defaut .profix-wraps small{ opacity: 1; visibility: visible; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px);} .profix-info:hover .profix-bg{ background-color: #43C5A7;} .profix-info:hover .profix-defaut .profix-wraps{ margin-top: -78px;} .profix-wraps1 strong{ color: #333333;} .profix-wraps1 small{ color: #333333;} .profix-info:hover .profix-wraps1 strong{ color: #fff;} .profix-info:hover .profix-wraps1 small{ color: #fff;} .profix-item:nth-child(2n+2) >.profix-info{ float: left;} .prosearch-btn{ width: 64px; position: fixed; right: 28px; top: 160px; background-color: #fff; z-index: 10; box-shadow: 0 12px 12px rgba(0,0,0,0.16);} .prosearch-btn span{ display: block; text-align: center; color: #707070; font-size: 24px; line-height: 1; cursor: pointer; -webkit-transition: 0.38s; -o-transition: 0.38s; -moz-transition: 0.38s; transition: 0.38s; padding: 20px 0;} .prosearch-btn span:hover{ background-color: #43C5A7; color: #fff;} .profix-menu{ width: 100%; background: #fff; position: fixed; left: 0; top: 0; z-index: 199; height: 0; overflow: hidden;} .profix-wrapd{ width: 784px; margin: auto; padding: 160px 0 84px;} .profix-calss{ padding-bottom: 30px;} .profix-tt{ margin-bottom: 15px; display: block; line-height: 1; color: #333333; font-size: 16px; font-weight: bold;} .profixclass-list{ margin-left: -4px; margin-right: -4px;} .profixclass-list li{ float: left; width: 11.1111%; margin-bottom: 8px;} .profixclass-list li a{ display: block; margin: 0 4px; background: rgba(67,197,167,0.1); height: 80px; line-height: 80px; text-align: center; color: #707070; font-size: 14px;} .profixclass-list li a:hover,.profixclass-list li.active a{ background: #43C5A7; color: #fff;} .profix-search-content{ position: relative;} .profix-search-content .ph{ -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; border: none; padding-left: 26px; width: 100%; height: 80px; line-height: 80px; background: rgba(67,197,167,0.1); color: #707070; font-size: 14px;} .profix-search-content .ph::-webkit-input-placeholder{ color: #707070;} .profix-search-content .ph:focus::-webkit-input-placeholder{ opacity: 0; visibility: hidden;} .profix-search-content .sub{ width: 80px; height: 80px; border: none; margin: 0; padding: 0; line-height: 80px; color: #707070; font-size: 24px; position: absolute; right: 0; top: 0; background: none; cursor: pointer; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s;} .profix-search-content .sub:hover{ color: #43C5A7;} .profix-close{ width: 64px; height: 64px; text-align: center; line-height: 64px; position: absolute; right: 28px; top: 152px; z-index: 10; background: #43C5A7; color: #fff; font-size: 16px; cursor: pointer; -webkit-transition: 0.38s; -o-transition: 0.38s; -moz-transition: 0.38s; transition: 0.38s;} .profix-close:hover{ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);} .polyeles li.img_last_li{display:none;} /*.polyeles >li{ width: 50%;} */ .navs-down-list li{ width: 33.333%;} .blist li{width: 33.333%;} .video-img{ margin-bottom: 80px;} .bannerbox,.characteristic,.subscribe,.history,.officed,.contact,.pbanner,.seo-banner,.seo-case-swiper,.seo-serves,.workbann,.video-img,.processbgd,.parkimg{ border-radius: 16px; overflow: hidden; } .viewa{ overflow: inherit;} .pbanner1,.submission{ border-radius: 16px; } .aboutbann figure{ border-radius: 16px 16px 0 16px; } .views{ border-radius: 16px 0 16px 16px;} .brand-list li a,.sinceimg,.error-img,.providefix li,.seo-data,.apply-item,.advantage-wraps,.coopecate-in1 figure,.coopecate-in figure,.serves-process-wrap,.city-list-item,.city-dit-content,.city-serve-images,.multivariate-list li,.serviceli li,.vide-pop{ border-radius: 12px; overflow: hidden; } .sbanner figure{ border-radius: 16px 16px 0 16px; } .sbanner p{ border-radius: 0 0 12px 12px;} .historywr figure{ border-radius: 12px 12px 0 0; } .history-text{ border-radius: 0 0 12px 12px; } .analysis{ border-radius: 12px 0 0 0; } .datas{ border-radius: 12px 0 0 0; } .since{ border-radius: 0 0 16px 16px; overflow: hidden; } .propage-posite1 img{ top: 50%; } .propage-posite2 img{ top: auto; bottom: 0; } .imprint-tab{ position: relative; } .imprint-bg img{ display: block; width: 100%; height: auto; } .imprint-swiper{ position: absolute; right: 29.5%; top: 27.04%; width: 22.28%; } .imprint-slide{ line-height: 1; overflow: hidden; } .imprint-slide img{ display: block; width: 100%; height: auto; border-radius: 0px !important; }