html,body,.wrap,.wrapper,.contact-msg li dl dt,.contact-msg li dl dd .btn-link,.news-article .article-content p img,.case-article .article-content p img,.case-header .detail-img,.article-panel img,.aside .form-panel .form-content .btn-link { margin-left: auto; margin-right: auto } .fl,.cate-list li,.bg-01 .pic-panel,.bg-01 .font-panel,.case-list li,.news-list li,.footer .footer-link li,.case-list-fst li,.news-list-fst li,.form-wrap .form-content .form-item dl,.page-banner .banner-bg ul li,.pro-list li,.about-panel.bg-f6 .wrap .rt-content .btm-img,.section,.aside,.pager .all-page .page-bd .current-list li,.pager .all-page .page-hd li,.product-info .product-des ul li,.product-font ul li,.product-font ul li .img-list span,.tab-case .bd { float: left } .fr,.about-panel.bg-f6 .wrap .rt-content .rt-img,.tab-case .hd { float: right } .wrap,.wrapper,.fixed-header,.swiper-banner,.swiper-banner .swiper-font .slide-des,.bg-01 .font-panel dl,.case-list,.case-list li .case-panel,.case-list li .case-panel .case-title p,.news-list li .news-wrap,.news-list li .news-wrap .news-content,.breadcrumb,.contact-msg,.contact-msg li dl,.contact-msg li dl dd .btn-link,.case-list-fst,.case-list-fst li .case-panel,.case-list-fst li .case-panel .case-title p,.news-list-fst li .news-wrap,.news-list-fst li .news-wrap .news-content,.form-wrap,.form-wrap .form-content,.form-wrap .form-content .form-item,.form-wrap .form-content .form-item dl,.form-wrap .form-content .form-item .btn-link,.page-banner,.page-banner .banner-bg ul,.case-header .detail-img,.pro-list,.pro-list li,.pro-list li dl,.about-content,.about-panel.bg-f6 .wrap .lf-img,.article-wrap .article-title,.section,.aside,.aside .font-panel,.aside .form-panel .form-content .btn-link,.bg-f6,.page-panel,.main-content,.product-header,.product-font,.product-font ul,.product-font ul li,.tab-case,.tab-case .bd .item-case,.tab-case .hd,.tab-case .hd ul { *zoom:1} .wrap:before,.wrapper:before,.fixed-header:before,.swiper-banner:before,.swiper-banner .swiper-font .slide-des:before,.bg-01 .font-panel dl:before,.case-list:before,.case-list li .case-panel:before,.case-list li .case-panel .case-title p:before,.news-list li .news-wrap:before,.news-list li .news-wrap .news-content:before,.breadcrumb:before,.contact-msg:before,.contact-msg li dl:before,.contact-msg li dl dd .btn-link:before,.case-list-fst:before,.case-list-fst li .case-panel:before,.case-list-fst li .case-panel .case-title p:before,.news-list-fst li .news-wrap:before,.news-list-fst li .news-wrap .news-content:before,.form-wrap:before,.form-wrap .form-content:before,.form-wrap .form-content .form-item:before,.form-wrap .form-content .form-item dl:before,.form-wrap .form-content .form-item .btn-link:before,.page-banner:before,.page-banner .banner-bg ul:before,.case-header .detail-img:before,.pro-list:before,.pro-list li:before,.pro-list li dl:before,.about-content:before,.about-panel.bg-f6 .wrap .lf-img:before,.article-wrap .article-title:before,.section:before,.aside:before,.aside .font-panel:before,.aside .form-panel .form-content .btn-link:before,.bg-f6:before,.page-panel:before,.main-content:before,.product-header:before,.product-font:before,.product-font ul:before,.product-font ul li:before,.tab-case:before,.tab-case .bd .item-case:before,.tab-case .hd:before,.tab-case .hd ul:before,.wrap:after,.wrapper:after,.fixed-header:after,.swiper-banner:after,.swiper-banner .swiper-font .slide-des:after,.bg-01 .font-panel dl:after,.case-list:after,.case-list li .case-panel:after,.case-list li .case-panel .case-title p:after,.news-list li .news-wrap:after,.news-list li .news-wrap .news-content:after,.breadcrumb:after,.contact-msg:after,.contact-msg li dl:after,.contact-msg li dl dd .btn-link:after,.case-list-fst:after,.case-list-fst li .case-panel:after,.case-list-fst li .case-panel .case-title p:after,.news-list-fst li .news-wrap:after,.news-list-fst li .news-wrap .news-content:after,.form-wrap:after,.form-wrap .form-content:after,.form-wrap .form-content .form-item:after,.form-wrap .form-content .form-item dl:after,.form-wrap .form-content .form-item .btn-link:after,.page-banner:after,.page-banner .banner-bg ul:after,.case-header .detail-img:after,.pro-list:after,.pro-list li:after,.pro-list li dl:after,.about-content:after,.about-panel.bg-f6 .wrap .lf-img:after,.article-wrap .article-title:after,.section:after,.aside:after,.aside .font-panel:after,.aside .form-panel .form-content .btn-link:after,.bg-f6:after,.page-panel:after,.main-content:after,.product-header:after,.product-font:after,.product-font ul:after,.product-font ul li:after,.tab-case:after,.tab-case .bd .item-case:after,.tab-case .hd:after,.tab-case .hd ul:after { content: ""; display: table } .wrap:after,.wrapper:after,.fixed-header:after,.swiper-banner:after,.swiper-banner .swiper-font .slide-des:after,.bg-01 .font-panel dl:after,.case-list:after,.case-list li .case-panel:after,.case-list li .case-panel .case-title p:after,.news-list li .news-wrap:after,.news-list li .news-wrap .news-content:after,.breadcrumb:after,.contact-msg:after,.contact-msg li dl:after,.contact-msg li dl dd .btn-link:after,.case-list-fst:after,.case-list-fst li .case-panel:after,.case-list-fst li .case-panel .case-title p:after,.news-list-fst li .news-wrap:after,.news-list-fst li .news-wrap .news-content:after,.form-wrap:after,.form-wrap .form-content:after,.form-wrap .form-content .form-item:after,.form-wrap .form-content .form-item dl:after,.form-wrap .form-content .form-item .btn-link:after,.page-banner:after,.page-banner .banner-bg ul:after,.case-header .detail-img:after,.pro-list:after,.pro-list li:after,.pro-list li dl:after,.about-content:after,.about-panel.bg-f6 .wrap .lf-img:after,.article-wrap .article-title:after,.section:after,.aside:after,.aside .font-panel:after,.aside .form-panel .form-content .btn-link:after,.bg-f6:after,.page-panel:after,.main-content:after,.product-header:after,.product-font:after,.product-font ul:after,.product-font ul li:after,.tab-case:after,.tab-case .bd .item-case:after,.tab-case .hd:after,.tab-case .hd ul:after { clear: both } .case-list li .case-panel .case-title p.infos,.news-list li .news-wrap .news-content p a,.case-list-fst li .case-panel .case-title p.infos,.news-list-fst li .news-wrap .news-content p a,.pro-list li dl dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .bg-02 .wrap h2:before,.news-list li .news-wrap>strong,.news-list-fst li .news-wrap>strong,.news-article>h1:before,.model-panel h2:before,.model-panel h4:before,.page-banner .wrap>p:before,.page-banner .wrap>h1:before,.page-banner .wrap>h2:before,.about-panel.bg-f6 .wrap h2:before,.aside .font-panel .step-img:after,.footer-model .wrap>h2:before,.pager .total-page:after,.pager .all-page .page-tab:before,.pager .all-page .page-tab:after,.tab-case .hd ul li.on:after { content: ""; height: 0; width: 0; overflow: hidden } main,article,aside,details,figcaption,figure,footer,header,nav,section,summary { display: block } audio,canvas,video { display: inline-block; *display: inline; *zoom:1} audio:not([controls]) { display: none; height: 0 } [hidden],template { display: none } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100% } html,button,input,select,textarea { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif } body { margin: 0 } a { background: transparent } a:hover,a:active { outline: 0 } abbr[title] { border-bottom: 1px dotted } b,strong { font-weight: bold } blockquote { margin: 1em 40px } dfn { font-style: italic } mark { background: #ff0; color: #000 } code,kbd,pre,samp { font-family: monospace,serif; _font-family: 'courier new',monospace; font-size: 1em } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word } q { quotes: "\201C" "\201D" "\2018" "\2019" } q { quotes: none } q:before,q:after { content: ''; content: none } small { font-size: 80% } sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } sup { top: -0.5em } sub { bottom: -0.25em } dl,ol,ul { margin: 1em 0 } dd { margin: 0 0 0 40px } ol,ul { padding: 0 0 0 40px } nav ul,nav ol { list-style-image: none } img { border: 0; -ms-interpolation-mode: bicubic } svg:not(:root) { overflow: hidden } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em } legend { border: 0; padding: 0; white-space: normal; *margin-left: -7px } button,input,select,textarea { font-family: inherit; font-size: 100%; margin: 0; vertical-align: baseline; padding: 0; border: none; *vertical-align: middle } button:focus,input:focus,select:focus,textarea:focus { outline: none } button,input { line-height: normal } button,select { text-transform: none } button,html input[type="button"],input[type="reset"],input[type="submit"] { -webkit-appearance: button; cursor: pointer; *overflow: visible } button[disabled],input[disabled] { cursor: default } input[type="checkbox"],input[type="radio"] { box-sizing: border-box; padding: 0; *height: 12px; *width: 12px } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box } input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration { -webkit-appearance: none } input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button { height: auto } button::-moz-focus-inner,input::-moz-focus-inner { border: 0; padding: 0 } textarea { overflow: auto; vertical-align: top } optgroup { font-weight: bold } html { -webkit-overflow-scrolling: touch; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100% } body { font-size: 12px; line-height: 1.5; color: #2b2a28; background-color: #fff; min-height: 100vh } body,button,input,select,textarea { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif } img { vertical-align: middle } textarea { resize: vertical } h1,h2,h3,h4,h5,h6,p,figure,form { margin: 0 } ul,ol,li,dl,dd { margin: 0; padding: 0 } ul,ol { list-style: none outside none } h1,h2,h3 { line-height: 2 } h1 { font-size: 18px } h2 { font-size: 15.6px } h3 { font-size: 14.04px } h4 { font-size: 12px } h5,h6 { font-size: 10.2px; text-transform: uppercase } a { text-decoration: none; color: #333 } a:hover { color: #262626 } input:-moz-placeholder,textarea:-moz-placeholder { color: #ccc } input::-moz-placeholder,textarea::-moz-placeholder { color: #ccc } input:-ms-input-placeholder,textarea:-ms-input-placeholder { color: #ccc } input::-webkit-input-placeholder,textarea::-webkit-input-placeholder { color: #ccc } html,body { min-width: 1000px } body { height: auto !important } a,a:hover,a:active,a:visited,a:focus { text-decoration: none } .clear { display: block; clear: both; overflow: hidden } .wrap { width: 960px; position: relative } .wrapper { min-width: 1000px; width: 100%; position: relative } .max-panel { max-width: 1920px; overflow: hidden } .bg-white { background: #fff } .none { display: none } .h20 { height: 20px } .h30 { height: 30px } *,*:after,*:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } @font-face { font-family: 'FuturaStd_Bold'; font-style: italic; src: url("../fonts/FuturaStd-Bold.otf") format("OpenType"); font-display: swap } @font-face { font-family: 'FuturaStd_Heavy'; font-style: italic; src: url("../fonts/FuturaStd-Heavy.otf") format("OpenType"); font-display: swap } @font-face { font-family: 'FuturaStd_Light'; font-style: italic; src: url("../fonts/FuturaStd-Light_1.otf") format("OpenType"); font-display: swap } @font-face { font-family: 'FuturaStd_Medium'; font-style: italic; src: url("../fonts/FuturaStd-MEDIUM.otf") format("OpenType"); font-display: swap } @font-face { font-family: 'Monoton_Regular'; font-style: italic; src: url("../fonts/Monoton-Regular.ttf") format("TrueType"); font-display: swap } .i-shadow { -webkit-box-shadow: 6px 6px 28px rgba(29,66,122,0.1); -moz-box-shadow: 6px 6px 28px rgba(29,66,122,0.1); -ms-box-shadow: 6px 6px 28px rgba(29,66,122,0.1); -o-box-shadow: 6px 6px 28px rgba(29,66,122,0.1); box-shadow: 6px 6px 28px rgba(29,66,122,0.1); -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out } .fixed-header { width: 100%; padding: 15px; position: relative; z-index: 1100 } .fixed-header .lt-panel { position: absolute; display: block; overflow: hidden; width: 144px; height: 144px; left: 0; top: 0 } .fixed-header .lt-panel>span { position: absolute; display: block; overflow: hidden; left: -23px; top: 0; width: 159px; height: 15px; background: -webkit-linear-gradient(left, #1d427a, #396faa); background: -o-linear-gradient(right, #1d427a, #396faa); background: -moz-linear-gradient(right, #1d427a, #396faa); background: linear-gradient(to right, #1d427a, #396faa); transform: skewX(-45deg); -ms-transform: skewX(-45deg); -moz-transform: skewX(-45deg); -webkit-transform: skewX(-45deg); -o-transform: skewX(-45deg); z-index: 1 } .fixed-header .lt-panel>i { position: absolute; display: block; overflow: hidden; left: 0; top: -23px; width: 15px; height: 159px; background: -webkit-linear-gradient(#1d427a, #396faa); background: -o-linear-gradient(#1d427a, #396faa); background: -moz-linear-gradient(#1d427a, #396faa); background: linear-gradient(#1d427a, #396faa); transform: skewY(-45deg); -ms-transform: skewY(-45deg); -moz-transform: skewY(-45deg); -webkit-transform: skewY(-45deg); -o-transform: skewY(-45deg) } .fixed-header .logo { display: block; width: 230px; height: 114px; float: left; position: relative; z-index: 1040; background-color: #ffffff; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out } .fixed-header .logo a { display: block; width: 100%; height: 100%; position: relative; z-index: 1 } .fixed-header .logo a img { display: block; width: 134px; height: 48px; position: absolute; left: 50%; top: 50%; margin: -24px 0 0 -62px } .fixed-header ul { width: 76%; float: right; overflow: hidden; background-color: #fff; padding: 29px 0; position: relative; z-index: 1010 } .fixed-header ul li { width: 16%; float: left; height: 56px; overflow: hidden; position: relative } .fixed-header ul li a { display: block; width: 100%; height: 100%; text-align: center; line-height: 56px; font-size: 14px; color: #1d427a; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-transform: uppercase; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out } .fixed-header ul li a i { -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; opacity: 0; display: block; position: absolute; left: 50%; margin-left: -20px; top: 55px; width: 0; height: 1px; background-color: #c1a468 } .fixed-header ul li a:hover { color: #c1a468; font-family: 'FuturaStd_Heavy',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out } .fixed-header ul li a:hover i { -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; width: 40px; opacity: 1 } .fixed-header ul li.on a { -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; color: #c1a468; font-family: 'FuturaStd_Heavy',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased } .fixed-header ul li.on a i { -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; width: 40px; opacity: 1 } .site-wrap { padding-left: 0; min-height: 300px } .nav-mark>i { display: none; width: 60px; height: 48px; position: absolute; left: -60px; top: 150px; background: url("../images_pc/nav_mark.png") center top no-repeat } .swiper-banner { width: 100%; z-index: 1030; position: relative } .swiper-banner .swiper-container .swiper-slide { text-align: center; font-size: 18px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position: relative } .swiper-banner .swiper-img { width: 100% } .swiper-banner .swiper-img a { display: block; width: 100%; overflow: hidden } .swiper-banner .swiper-img a img { display: block; width: 100% } .swiper-banner .swiper-font { width: 100%; margin: -200px 0 0 0; position: relative; z-index: 1030 } .swiper-banner .swiper-font>span { display: block; position: absolute; z-index: 10; width: 830px; height: 320px; left: 0; top: 40px; background: -webkit-linear-gradient(left top, #1d427a, #3e77b2); background: -o-linear-gradient(bottom right, #1d427a, #3e77b2); background: -moz-linear-gradient(bottom right, #1d427a, #3e77b2); background: linear-gradient(to bottom right, #1d427a, #3e77b2) } .swiper-banner .swiper-font .swiper-wrapper { padding: 100px 0 80px; z-index: 12 } .swiper-banner .swiper-font .swiper-slide { -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: left; -webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start } .swiper-banner .swiper-font .swiper-pagination { left: 5%; text-align: left; width: 830px; height: 21px; top: 60px; bottom: initial; z-index: 13 } .swiper-banner .swiper-font .swiper-pagination-bullet { display: inline-block; width: auto; margin: 0 50px 0 0; border-radius: 0; height: 21px; line-height: 20px; border-bottom: 1px solid #fff; font-size: 18px; color: #fff; background: none; font-family: 'FuturaStd_Bold',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; opacity: 1 } .swiper-banner .swiper-font .swiper-pagination-bullet-active { color: #c8ae79; border-bottom: 1px solid #c8ae79 } .swiper-banner .swiper-font .slide-des { padding: 30px 10% 30px 80px; width: 70%; margin-left: 5%; position: relative; background-color: #fff; -webkit-box-shadow: 0 19px 24px rgba(2,37,88,0.1); -moz-box-shadow: 0 19px 24px rgba(2,37,88,0.1); -ms-box-shadow: 0 19px 24px rgba(2,37,88,0.1); -o-box-shadow: 0 19px 24px rgba(2,37,88,0.1); box-shadow: 0 19px 24px rgba(2,37,88,0.1) } .swiper-banner .swiper-font .slide-des dt { width: 100%; overflow: hidden } .swiper-banner .swiper-font .slide-des dt a { text-align: left; display: block; width: 100%; overflow: hidden; height: 56px; line-height: 56px; color: #1d427a; font-size: 40px; font-family: 'FuturaStd_Bold',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-transform: uppercase } .swiper-banner .swiper-font .slide-des dt+dd { position: absolute; width: 380px; height: 390px; right: -220px; top: -100px; margin: 0 } .swiper-banner .swiper-font .slide-des dt+dd a { display: block; width: 100%; height: 100%; overflow: hidden; margin: 0; padding: 0 } .swiper-banner .swiper-font .slide-des dt+dd a:hover { top: 0 } .swiper-banner .swiper-font .slide-des dt+dd a img { display: block; width: 100% } .swiper-banner .swiper-font .slide-des dd { width: 100%; overflow: hidden; text-align: right; font-size: 0; margin-top: 16px } .swiper-banner .swiper-font .slide-des dd p { display: block; width: 100%; padding-right: 76px; overflow: hidden; font-size: 24px; color: #396faa; line-height: 36px; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-align: left } .swiper-banner .swiper-font .slide-des dd>a { display: inline-block; font-size: 20px; color: #c8ae79; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; line-height: 60px; padding: 0 30px 20px; margin-left: 60px; position: relative; top: 0; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out } .swiper-banner .swiper-font .slide-des dd>a i { display: block; width: 180px; height: 2px; position: absolute; left: 50%; margin-left: -90px; bottom: 18px; background: #c8ae79 } .swiper-banner .swiper-font .slide-des dd>a i:after { -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; opacity: 0; width: 180px; height: 20px; content: ""; display: block; position: absolute; top: 0; left: 0; background: url("../images_pc/a_mark.png") center top no-repeat } .swiper-banner .swiper-font .slide-des dd>a:hover { -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; top: -5px } .swiper-banner .swiper-font .slide-des dd>a:hover i:after { -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; opacity: 1 } .cate-list { width: 100%; height: 160px } .cate-list li { display: block; padding-right: 70px; width: 25% } .cate-list li a { display: block; line-height: 36px; font-size: 26px; color: #a2afc3; font-family: 'FuturaStd_Heavy',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-transform: capitalize; position: relative; padding-right: 50px } .cate-list li a:before { content: ""; position: absolute; right: 0; top: 11px; width: 6px; height: 14px; background: #a2afc3; transform: skewX(-45deg); -ms-transform: skewX(-45deg); -moz-transform: skewX(-45deg); -webkit-transform: skewX(-45deg); -o-transform: skewX(-45deg) } .cate-list li:hover a,.cate-list li.on a { color: #c8ae79 } .cate-list li:hover a:before,.cate-list li.on a:before { background: #c8ae79 } .bg-01 { height: 460px; position: relative; z-index: 30; background: url("../images_pc/bg_01.jpg") center top no-repeat } .bg-01 .pic-panel { display: none; width: 460px; height: 460px; position: relative; background: url("../images_pc/man_bg.png") left bottom/100% auto no-repeat } .bg-01 .pic-panel ul { width: 332px; margin-left: -166px; padding: 10px 30px 10px 50px; background: #c8ae79; position: absolute; bottom: -20px; left: 50% } .bg-01 .pic-panel ul li { width: 100%; padding-left: 30px; line-height: 36px; font-size: 20px; color: #fff; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; position: relative } .bg-01 .pic-panel ul li:before { content: ''; width: 8px; height: 8px; border-radius: 100%; background: #fff; position: absolute; display: block; left: 0; top: 50%; margin-top: -4px } .bg-01 .pic-panel ul:after { content: ""; display: block; width: 100%; clear: both } .bg-01 .pic-panel ul:before { content: ""; width: 100%; height: 42px; background: url("../images_pc/top_bg.png") center top no-repeat; display: block; position: absolute; top: -42px; right: 0 } .bg-01 .font-panel { width: 100%; padding: 50px 0 0 0 } .bg-01 .font-panel>p { width: 70%; line-height: 36px; font-size: 22px; color: #fff; font-family: 'FuturaStd_Light',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-transform: capitalize } .bg-01 .font-panel dl { margin-left: auto; margin-right: auto; width: 730px; margin-top: 20px } .bg-01 .font-panel dl dt { width: 100%; text-align: right; font-size: 0 } .bg-01 .font-panel dl dt strong { display: inline-block; height: 36px; line-height: 36px; padding-left: 20px; position: relative; font-size: 22px; color: #fff; font-family: 'FuturaStd_Light',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; font-weight: normal; vertical-align: middle } .bg-01 .font-panel dl dt strong:before { content: ""; display: block; position: absolute; width: 8px; height: 8px; border-radius: 8px; background: #fff; left: 0; top: 50%; margin-top: -4px } .bg-01 .font-panel dl dd { width: 100%; height: 148px; margin-top: 15px; position: relative; background: url("../images_pc/line_bg.png") center 28px no-repeat } .bg-01 .font-panel dl dd .lf-icon,.bg-01 .font-panel dl dd .rt-icon { width: 50px; height: 50px; position: absolute } .bg-01 .font-panel dl dd .lf-icon i,.bg-01 .font-panel dl dd .lf-icon span,.bg-01 .font-panel dl dd .lf-icon strong,.bg-01 .font-panel dl dd .lf-icon p,.bg-01 .font-panel dl dd .rt-icon i,.bg-01 .font-panel dl dd .rt-icon span,.bg-01 .font-panel dl dd .rt-icon strong,.bg-01 .font-panel dl dd .rt-icon p { display: inline-block; position: absolute; left: 50% } .bg-01 .font-panel dl dd .lf-icon i,.bg-01 .font-panel dl dd .lf-icon span,.bg-01 .font-panel dl dd .lf-icon strong,.bg-01 .font-panel dl dd .rt-icon i,.bg-01 .font-panel dl dd .rt-icon span,.bg-01 .font-panel dl dd .rt-icon strong { top: 50%; border-radius: 100% } .bg-01 .font-panel dl dd .lf-icon p,.bg-01 .font-panel dl dd .rt-icon p { height: 40px; padding: 0 20px; border-radius: 40px; background: #fff; -webkit-box-shadow: 8px 8px 18px rgba(2,37,88,0.6); -moz-box-shadow: 8px 8px 18px rgba(2,37,88,0.6); -ms-box-shadow: 8px 8px 18px rgba(2,37,88,0.6); -o-box-shadow: 8px 8px 18px rgba(2,37,88,0.6); box-shadow: 8px 8px 18px rgba(2,37,88,0.6); font-family: 'FuturaStd_Light',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; color: #28508c; font-size: 24px; line-height: 40px; transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%) } .bg-01 .font-panel dl dd .lf-icon i,.bg-01 .font-panel dl dd .rt-icon i { width: 100%; height: 100%; margin: -25px 0 0 -25px; background: #00cc75; opacity: .2; z-index: 1; -webkit-animation: scalePoint 2s infinite linear; animation: scalePoint 2s infinite linear } .bg-01 .font-panel dl dd .lf-icon span,.bg-01 .font-panel dl dd .rt-icon span { width: 30px; height: 30px; margin: -15px 0 0 -15px; background: #00cc75; opacity: .5; z-index: 2; -webkit-animation: scalePoint 2s infinite linear; animation: scalePoint 2s infinite linear } .bg-01 .font-panel dl dd .lf-icon strong,.bg-01 .font-panel dl dd .rt-icon strong { width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid #fff; background: #00cc75; opacity: 1; z-index: 3 } .bg-01 .font-panel dl dd .lf-icon { left: 0; top: 56px } .bg-01 .font-panel dl dd .lf-icon p { bottom: -40px; width: 176px } .bg-01 .font-panel dl dd .rt-icon { right: 0; top: 28px } .bg-01 .font-panel dl dd .rt-icon p { bottom: -60px } .bg-01 .font-panel dl dd .center-icon { width: 64px; height: 44px; position: absolute; left: 50%; margin-left: -32px; top: 24px; background: url("../images_pc/icon_hq.png") center top no-repeat; z-index: 2 } .bg-01 .font-panel dl dd .center-icon p { position: absolute; bottom: -50px; left: 50%; height: 40px; padding: 0 35px; border-radius: 40px; background: #fff; -webkit-box-shadow: 8px 8px 18px rgba(2,37,88,0.6); -moz-box-shadow: 8px 8px 18px rgba(2,37,88,0.6); -ms-box-shadow: 8px 8px 18px rgba(2,37,88,0.6); -o-box-shadow: 8px 8px 18px rgba(2,37,88,0.6); box-shadow: 8px 8px 18px rgba(2,37,88,0.6); font-family: 'FuturaStd_Bold',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; color: #28508c; font-size: 24px; line-height: 40px; transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%) } .bg-01 .font-panel dl dd .plane { display: block; width: 48px; height: 36px; background: url("../images_pc/icon_fly.png") center top no-repeat; position: absolute; left: 36px; top: 32px; transform: rotate(-7deg); -ms-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -webkit-transform: rotate(-7deg); -o-transform: rotate(-7deg); -webkit-animation: planeFly 10s infinite linear; animation: planeFly 10s infinite linear } .bg-01 .font-panel dl dd .ship { display: block; width: 60px; height: 32px; background: url("../images_pc/icon_ship.png") center top no-repeat; position: absolute; right: 50px; top: 32px; transform: rotate(-18deg); -ms-transform: rotate(-18deg); -moz-transform: rotate(-18deg); -webkit-transform: rotate(-18deg); -o-transform: rotate(-18deg); -webkit-animation: shipMove 10s infinite linear; animation: shipMove 10s infinite linear } .bg-02 { overflow: hidden; background: url("../images_pc/btm_mark.png") left top no-repeat; padding: 110px 0; position: relative } .bg-02 .wrap { z-index: 10 } .bg-02 .wrap h2 { padding-left: 10%; height: 48px; line-height: 48px; font-size: 40px; color: #1d427a; font-family: 'FuturaStd_Bold',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-transform: uppercase; position: relative; z-index: 1 } .bg-02 .wrap h2:before { content: ""; display: block; width: 0; height: 0; border-bottom: 8px solid #1d427a; border-left: 8px dashed transparent; border-right: 8px dashed transparent; position: absolute; left: -4px; top: 8px; transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg) } .case-list { margin-bottom: 60px; padding: 0 0 0 10%; width: 100%; position: relative; z-index: 1 } .case-list li { width: 50%; margin-left: 0; margin-right: 0; margin-top: 60px; padding: 0 20px; display: block; border-top: 1px dashed #b5b6b6; border-bottom: 1px dashed #b5b6b6 } .case-list li:hover .case-panel .top-skew { -o-transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; width: 76px } .case-list li:hover .case-panel .case-title p { -o-transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out } .case-list li:hover .case-panel .case-title p a:after { right: -60px; -webkit-animation: rightMove 1s linear; animation: rightMove 1s linear } .case-list li:hover .case-panel .case-title p.infos { height: 36px; -o-transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out } .case-list li .case-panel { width: 100%; position: relative; z-index: 5 } .case-list li .case-panel .top-skew { -o-transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; width: 36px; height: 14px; overflow: hidden; position: absolute; left: 0; top: 0; z-index: 3 } .case-list li .case-panel .top-skew span { display: block; width: 100px; height: 14px; position: absolute; right: 10px; top: 0; background: #c1a367; transform: skewX(45deg); -ms-transform: skewX(45deg); -moz-transform: skewX(45deg); -webkit-transform: skewX(45deg); -o-transform: skewX(45deg) } .case-list li .case-panel .case-title { width: 100%; top: 14px; position: absolute; z-index: 3; left: 0; overflow: hidden; background: url("../images_pc/case_font_bg.png") left top repeat-y; padding: 30px 0 } .case-list li .case-panel .case-title p { padding: 0 24% 0 50px; font-size: 0; position: relative; overflow: hidden } .case-list li .case-panel .case-title p span,.case-list li .case-panel .case-title p strong { display: inline-block; font-size: 20px; line-height: 36px; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; word-break: break-all } .case-list li .case-panel .case-title p span { color: #fff; text-transform: capitalize } .case-list li .case-panel .case-title p strong { font-weight: normal; color: #c1a367 } .case-list li .case-panel .case-title p a { margin-bottom: 10px; line-height: 36px; font-size: 24px; color: #fff; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; position: relative } .case-list li .case-panel .case-title p a:after { content: ""; display: block; width: 20px; height: 18px; background: url("../images_pc/icon_more.png") center top no-repeat; position: absolute; right: -30px; bottom: 3px } .case-list li .case-panel .case-title p.infos { -o-transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; height: 0; padding: 0 20px 0 50px } .case-list li .case-panel>i { display: block; width: 1px; height: 30px; background: #b8b8b8; position: absolute } .case-list li .case-panel>span { display: block; width: 204px; height: 88px; background: url("../images_pc/case_bg.png") center top no-repeat; position: absolute; right: -10px; bottom: -10px; z-index: 1 } .case-list li .case-panel>a { -webkit-box-shadow: 0 8px 14px rgba(2,37,88,0.2); -moz-box-shadow: 0 8px 14px rgba(2,37,88,0.2); -ms-box-shadow: 0 8px 14px rgba(2,37,88,0.2); -o-box-shadow: 0 8px 14px rgba(2,37,88,0.2); box-shadow: 0 8px 14px rgba(2,37,88,0.2); display: block; width: 100%; overflow: hidden; position: relative; z-index: 2 } .case-list li .case-panel>a img { display: block; width: 100% } .case-list li .case-panel>i:first-child { left: -1px; top: -15px } .case-list li .case-panel>i+i { right: -1px; top: -15px } .case-list li .case-panel>i+i+i { left: -1px; bottom: -15px; top: initial } .case-list li .case-panel>i+i+i+i { right: -1px; bottom: -15px; top: initial; left: initial } .news-list { width: 100%; overflow: hidden; padding-left: 10%; position: relative; z-index: 1 } .news-list li { width: 50%; padding: 40px 40px 0 0; position: relative; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out } .news-list li:hover { -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out } .news-list li:hover .news-wrap>strong { -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; opacity: 0 } .news-list li:hover .news-wrap>span.tp-line,.news-list li:hover .news-wrap>span.btm-line { -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; width: 100% } .news-list li:hover .news-wrap>span.rt-line { -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; height: 100% } .news-list li:first-child .news-wrap em { right: -77px; bottom: -77px } .news-list li:last-child .news-wrap em { left: -77px; top: -77px } .news-list li .news-wrap { width: 100%; background: #fff; position: relative } .news-list li .news-wrap>em { display: block; width: 112px; height: 112px; background: url("../images_pc/news_icon.png") center center no-repeat; position: absolute } .news-list li .news-wrap>i { display: block; width: 100%; height: 100%; border: 1px solid #b8b8b8; z-index: 0; position: absolute; left: 0; top: 0 } .news-list li .news-wrap>span { -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; display: block; position: absolute; z-index: 1; background: #1d427a } .news-list li .news-wrap>span.lf-line { height: 100%; width: 1px; left: 0; top: 0 } .news-list li .news-wrap>span.tp-line { width: 102px; height: 1px; top: 0; left: 0 } .news-list li .news-wrap>span.btm-line { width: 102px; height: 1px; bottom: 0; left: 0 } .news-list li .news-wrap>span.rt-line { width: 1px; height: 0; right: 0; top: 0 } .news-list li .news-wrap>strong { -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; opacity: 1; display: block; width: 0; height: 0; border-bottom: 10px solid #1d427a; border-left: 10px dashed transparent; border-right: 10px dashed transparent; position: absolute; left: -6px; bottom: -1px; transform: rotate(-135deg); -ms-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); -o-transform: rotate(-135deg); z-index: 2 } .news-list li .news-wrap .news-content { width: 100%; height: 100%; position: relative; z-index: 5; padding: 20px 40px 30px 30px } .news-list li .news-wrap .news-content>a { display: block; float: right; height: 36px; line-height: 36px; font-size: 18px; color: #c1a367; text-transform: uppercase; font-family: 'FuturaStd_Bold',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; padding-right: 40px; position: relative } .news-list li .news-wrap .news-content>a:after { content: ""; display: block; width: 20px; height: 18px; background: url("../images_pc/icon_more.png") center top no-repeat; position: absolute; right: 0; bottom: 9px } .news-list li .news-wrap .news-content p { width: 100%; overflow: hidden } .news-list li .news-wrap .news-content p.news-des { margin: 10px 0 20px; padding-left: 40px; height: 72px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 36px; font-size: 20px; color: #1d427a; font-family: 'FuturaStd_Light',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased } .news-list li .news-wrap .news-content p span { margin-bottom: 10px; display: block; height: 36px; line-height: 36px; font-size: 20px; color: #c1a367; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-transform: capitalize; overflow: hidden } .news-list li .news-wrap .news-content p a { display: block; padding-left: 40px; height: 36px; font-size: 24px; color: #1d427a; font-family: 'FuturaStd_Heavy',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-transform: uppercase; position: relative } .news-list li .news-wrap .news-content p a:before { content: ''; display: block; width: 20px; height: 4px; background: #c1a367; left: 0; top: 16px; position: absolute } .footer { padding: 30px 0 } .footer .wrap p { text-align: center; line-height: 40px; font-size: 22px; color: #1d427a; font-family: 'FuturaStd_Heavy',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-transform: capitalize } .footer .wrap p a { margin: 0 5px; line-height: 40px; font-size: 22px; color: #1d427a; font-family: 'FuturaStd_Heavy',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-transform: capitalize } .footer .footer-link { width: 100%; overflow: hidden; padding-right: 0 } .footer .footer-link li { width: 20%; height: 40px } .footer .footer-link li a { display: inline-block; height: 40px; line-height: 40px; font-size: 22px; color: #1d427a; font-family: 'FuturaStd_Heavy',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-transform: capitalize } .footer.footer-bg { background: #1d427a; background: -webkit-linear-gradient(left, #1d427a 20%, #396faa 80%); background: -o-linear-gradient(right, #1d427a 20%, #396faa 80%); background: -moz-linear-gradient(right, #1d427a 20%, #396faa 80%); background: linear-gradient(to right, #1d427a 20%, #396faa 80%) } .footer.footer-bg .wrap p { color: #fff } .footer.footer-bg .wrap p a { color: #fff } .footer.footer-bg .footer-link li a { color: #fff } .font-item { display: inline-block } .font-item.font-f,.font-item.font-t,.font-item.font-m { font-size: 458px; color: #f1f7fb; text-transform: uppercase; font-family: 'FuturaStd_Bold',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased } .breadcrumb { width: 100%; position: relative; z-index: 1030; padding: 0; text-align: left } .breadcrumb a,.breadcrumb span { padding: 0 20px; margin: 0 20px; display: inline-block; height: 40px; line-height: 40px; font-size: 14px; position: relative; text-transform: uppercase } .breadcrumb a { color: #1d427a; font-family: 'FuturaStd_Light',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased } .breadcrumb a:hover { color: #c8ae79; font-family: 'FuturaStd_Heavy',Helvetica } .breadcrumb a:hover:before { background: #c8ae79 } .breadcrumb a+a:before { content: ""; position: absolute; left: 0; top: 15px; width: 6px; height: 10px; background: #1d427a; transform: skewX(-45deg); -ms-transform: skewX(-45deg); -moz-transform: skewX(-45deg); -webkit-transform: skewX(-45deg); -o-transform: skewX(-45deg) } .breadcrumb span { color: #c8ae79; font-family: 'FuturaStd_Heavy',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased } .breadcrumb span:before { content: ""; position: absolute; left: 0; top: 15px; width: 6px; height: 10px; background: #c8ae79; transform: skewX(-45deg); -ms-transform: skewX(-45deg); -moz-transform: skewX(-45deg); -webkit-transform: skewX(-45deg); -o-transform: skewX(-45deg) } .about-page .page-banner>span { width: 830px } .about-page .page-banner .banner-bg { height: 520px; background: url("../images_pc/about_banner.jpg") left top no-repeat; padding-top: 320px } .about-page .page-banner .banner-bg:before { content: ""; display: block; width: 80px; height: 4px; background: #fff; position: absolute; left: -40px; bottom: 150px; z-index: 1 } .products-page .page-banner .banner-bg { height: 350px; background: url("../images_pc/pro_banner.jpg") left top no-repeat; padding-top: 120px } .products-page .page-banner .banner-bg:before { content: ""; display: block; width: 80px; height: 4px; background: #fff; position: absolute; left: -40px; bottom: 150px; z-index: 1 } .case-page .page-banner>span { background: #c8ae79 } .case-page .page-banner .banner-bg { height: 350px; background: url("../images_pc/case_banner.jpg") left top no-repeat; padding-top: 120px } .news-page .page-banner>span { background: #c8ae79 } .news-page .page-banner .banner-bg { height: 300px; background: url("../images_pc/news_banner.jpg") left top no-repeat; padding-top: 150px } .contact-page .page-banner>span { width: 80% } .contact-page .page-banner .banner-bg { height: 520px; background: url("../images_pc/contact_banner.jpg") left top no-repeat; padding-top: 320px } .contact-page .page-banner .wrap p { font-family: 'FuturaStd_Light',Helvetica; width: 70% } .contact-msg { margin-top: 100px; padding-left: 0; width: 100%; position: relative; z-index: 30 } .contact-msg li { float: left; width: 50%; height: 280px; background: url("../images_pc/contact_bg.png") center top no-repeat; position: relative; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; cursor: pointer } .contact-msg li i { position: absolute; left: 0; top: 0; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; background: url("../images_pc/contact_bg_on.png") center top no-repeat; display: block; width: 100%; height: 100%; opacity: 0 } .contact-msg li dl { position: relative; z-index: 1; width: 100%; height: 100% } .contact-msg li dl dt { width: 88px; height: 88px } .contact-msg li dl dt span { display: block; width: 100%; height: 100%; overflow: hidden } .contact-msg li dl dt span img { display: block; width: 100%; height: 100% } .contact-msg li dl dd { width: 100%; overflow: hidden } .contact-msg li dl dd p { width: 100%; text-align: center; height: 36px; line-height: 36px; font-size: 24px; color: #1d427a; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; margin-top: 40px; margin-bottom: 20px } .contact-msg li dl dd>span,.contact-msg li dl dd>a { display: block; width: 100%; height: 50px; line-height: 50px; text-align: center; color: #c8ae79; font-size: 20px; font-family: 'FuturaStd_Bold',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased } .contact-msg li dl dd .btn-link { width: 245px; position: relative; margin-bottom: 30px } .contact-msg li dl dd .btn-link i { display: block; position: absolute; left: -20px; top: 0; width: 285px; height: 80px; background: url("../images_pc/button_mark.png") center top no-repeat } .contact-msg li dl dd .btn-link input[type="button"],.contact-msg li dl dd .btn-link input[type="submit"],.contact-msg li dl dd .btn-link a { display: block; width: 100%; height: 50px; background: #1d427a; background: -webkit-linear-gradient(left, #1d427a, #396faa); background: -o-linear-gradient(right, #1d427a, #396faa); background: -moz-linear-gradient(right, #1d427a, #396faa); background: linear-gradient(to right, #1d427a, #396faa); border-radius: 10px; text-align: center; line-height: 50px; color: #fff; font-size: 20px; font-family: 'FuturaStd_Bold',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; position: relative; z-index: 1 } .contact-msg li:hover { -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out } .contact-msg li:hover i { -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; opacity: 1 } .contact-msg li+li+li { margin-left: 25% } .case-list-fst { margin-top: 30px; margin-bottom: 120px; padding: 0; width: 100%; position: relative; z-index: 1 } .case-list-fst li { width: 32.26%; margin-top: 30px; padding-left: 20px; display: block } .case-list-fst li:hover .case-panel .top-skew { -o-transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; width: 76px } .case-list-fst li:hover .case-panel .case-title p a:after { right: -60px; -webkit-animation: rightMove 1s linear; animation: rightMove 1s linear } .case-list-fst li:hover .case-panel .case-title p.infos { -o-transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; height: 36px } .case-list-fst li .case-panel { width: 100%; position: relative; z-index: 5 } .case-list-fst li .case-panel .top-skew { -o-transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; width: 36px; height: 14px; overflow: hidden; position: absolute; left: 0; top: 0; z-index: 3 } .case-list-fst li .case-panel .top-skew span { display: block; width: 100px; height: 14px; position: absolute; right: 10px; top: 0; background: #c1a367; transform: skewX(45deg); -ms-transform: skewX(45deg); -moz-transform: skewX(45deg); -webkit-transform: skewX(45deg); -o-transform: skewX(45deg) } .case-list-fst li .case-panel .case-title { width: 100%; top: 14px; position: absolute; z-index: 3; left: 0; overflow: hidden; background: url("../images_pc/case_font_bg.png") left top repeat-y; padding: 30px 0 } .case-list-fst li .case-panel .case-title p { padding: 0 24% 0 50px; width: 100%; position: relative; font-size: 0 } .case-list-fst li .case-panel .case-title p span,.case-list-fst li .case-panel .case-title p strong { font-size: 20px; line-height: 36px; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased } .case-list-fst li .case-panel .case-title p span { color: #fff; text-transform: capitalize } .case-list-fst li .case-panel .case-title p strong { font-weight: normal; color: #c1a367 } .case-list-fst li .case-panel .case-title p a { display: inline-block; line-height: 28px; margin-bottom: 10px; font-size: 18px; color: #fff; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; position: relative } .case-list-fst li .case-panel .case-title p a:after { content: ""; display: block; width: 20px; height: 18px; background: url("../images_pc/icon_more.png") center top no-repeat; position: absolute; right: -30px; bottom: 3px } .case-list-fst li .case-panel .case-title p.infos { -o-transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; height: 0; padding: 0 20px 0 50px } .case-list-fst li .case-panel>a { -webkit-box-shadow: 0 8px 14px rgba(2,37,88,0.2); -moz-box-shadow: 0 8px 14px rgba(2,37,88,0.2); -ms-box-shadow: 0 8px 14px rgba(2,37,88,0.2); -o-box-shadow: 0 8px 14px rgba(2,37,88,0.2); box-shadow: 0 8px 14px rgba(2,37,88,0.2); display: block; width: 100%; overflow: hidden; position: relative; z-index: 2 } .case-list-fst li .case-panel>a img { display: block; width: 100% } .news-list-fst { padding-left: 50px; padding-right: 0; margin-top: 30px; width: 100%; overflow: hidden; position: relative; z-index: 1 } .news-list-fst li { width: 50%; padding: 50px 50px 0 0; position: relative; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out } .news-list-fst li:hover { -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out } .news-list-fst li:hover .news-wrap>strong { -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; opacity: 0 } .news-list-fst li:hover .news-wrap>span.tp-line,.news-list-fst li:hover .news-wrap>span.btm-line { -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; width: 100% } .news-list-fst li:hover .news-wrap>span.rt-line { -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; height: 100% } .news-list-fst li:nth-child(2n) .news-wrap:before { display: block; width: 112px; height: 112px; background: url("../images_pc/news_icon.png") center center no-repeat; position: absolute; left: -82px; bottom: -82px } .news-list-fst li:last-child .news-wrap:before { background: none } .news-list-fst li .news-wrap { width: 100%; background: #fff; position: relative } .news-list-fst li .news-wrap>i { display: block; width: 100%; height: 100%; border: 1px solid #b8b8b8; z-index: 0; position: absolute; left: 0; top: 0 } .news-list-fst li .news-wrap>span { -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; display: block; position: absolute; z-index: 1; background: #1d427a } .news-list-fst li .news-wrap>span.lf-line { height: 100%; width: 1px; left: 0; top: 0 } .news-list-fst li .news-wrap>span.tp-line { width: 102px; height: 1px; top: 0; left: 0 } .news-list-fst li .news-wrap>span.btm-line { width: 102px; height: 1px; bottom: 0; left: 0 } .news-list-fst li .news-wrap>span.rt-line { width: 1px; height: 0; right: 0; top: 0 } .news-list-fst li .news-wrap>strong { -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; opacity: 1; display: block; width: 0; height: 0; border-bottom: 10px solid #1d427a; border-left: 10px dashed transparent; border-right: 10px dashed transparent; position: absolute; left: -6px; bottom: -1px; transform: rotate(-135deg); -ms-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); -o-transform: rotate(-135deg); z-index: 2 } .news-list-fst li .news-wrap .news-content { width: 100%; height: 100%; position: relative; z-index: 5; padding: 20px 40px 30px 30px } .news-list-fst li .news-wrap .news-content>a { display: block; float: right; height: 36px; line-height: 36px; font-size: 18px; color: #c1a367; text-transform: uppercase; font-family: 'FuturaStd_Bold',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; padding-right: 40px; position: relative } .news-list-fst li .news-wrap .news-content>a:after { content: ""; display: block; width: 20px; height: 18px; background: url("../images_pc/icon_more.png") center top no-repeat; position: absolute; right: 0; bottom: 9px } .news-list-fst li .news-wrap .news-content p { width: 100%; overflow: hidden } .news-list-fst li .news-wrap .news-content p.news-des { margin: 10px 0 20px; padding-left: 40px; height: 72px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 36px; font-size: 20px; color: #1d427a; font-family: 'FuturaStd_Light',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased } .news-list-fst li .news-wrap .news-content p span { margin-bottom: 10px; display: block; height: 36px; line-height: 36px; font-size: 20px; color: #c1a367; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-transform: capitalize; overflow: hidden } .news-list-fst li .news-wrap .news-content p a { display: block; padding-left: 40px; height: 36px; font-size: 24px; color: #1d427a; font-family: 'FuturaStd_Heavy',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-transform: uppercase; position: relative } .news-list-fst li .news-wrap .news-content p a:before { content: ''; display: block; width: 20px; height: 4px; background: #c1a367; left: 0; top: 16px; position: absolute } .news-article>h1 { margin: 50px 0 20px; padding-left: 13%; line-height: 48px; font-size: 40px; color: #1d427a; font-family: 'FuturaStd_Bold',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; position: relative; z-index: 20 } .news-article>h1:before { content: ""; display: block; width: 0; height: 0; border-bottom: 8px solid #1d427a; border-left: 8px dashed transparent; border-right: 8px dashed transparent; position: absolute; left: -4px; top: 8px; transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg) } .news-article .time { width: 100%; padding-left: 13%; height: 66px; padding-bottom: 30px; line-height: 36px; font-size: 20px; color: #c1a367; font-family: 'FuturaStd_Light',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-transform: capitalize } .news-article .article-content { padding: 0 10% 0 13%; line-height: 36px; font-size: 20px; color: #1d427a; font-family: 'FuturaStd_Light',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased } .news-article .article-content h2,.news-article .article-content h3 { margin-top: 20px; width: 100%; line-height: 48px; font-size: 32px; color: #c8ae79; font-family: 'FuturaStd_Heavy',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased } .news-article .article-content p { margin-top: 20px; line-height: 36px; font-size: 20px; color: #1d427a; font-family: 'FuturaStd_Light',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased } .news-article .article-content p span { line-height: 36px; font-size: 24px; color: #1d427a; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased } .news-article .article-content p img { display: block; width: 100%; max-width: 600px } .news-article .article-content p a { color: #c8ae79; text-decoration: underline; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased } .case-article { padding-top: 60px } .case-article .article-content { padding: 0 10% 0 13%; line-height: 36px; font-size: 20px; color: #1d427a; font-family: 'FuturaStd_Light',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased } .case-article .article-content h2,.case-article .article-content h3 { width: 100%; line-height: 48px; font-size: 32px; color: #c8ae79; font-family: 'FuturaStd_Heavy',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased } .case-article .article-content p { margin-top: 30px; line-height: 36px; font-size: 20px; color: #1d427a; font-family: 'FuturaStd_Light',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased } .case-article .article-content p span { line-height: 36px; font-size: 20px; color: #1d427a; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased } .case-article .article-content p img { display: block; width: 100%; max-width: 600px } .case-article .article-content p a { color: #c8ae79; text-decoration: underline; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased } .center-panel { padding-right: 0 } .bg-03 { background: #eee7d7; height: 370px; margin-bottom: 120px; margin-top: 70px; z-index: 30 } .btm-article { position: relative } .btm-article .font-item { position: absolute; color: #fff } .btm-article .font-f { right: 7%; bottom: 8% } .btm-article .font-t { bottom: -80%; right: 8% } .btm-article .font-m { right: 5%; bottom: -120% } .btm-article>p { width: 90%; padding-left: 10%; font-family: 'FuturaStd_Light',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; font-size: 22px; color: #1d427a; line-height: 36px } .btm-article>p a { color: #c8ae79; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased } .form-wrap { width: 100%; background: #f6f6f6; padding: 0 0 50px 10%; position: relative; overflow: hidden; margin-top: 60px } .form-wrap .form-content { position: relative; z-index: 30; width: 800px } .form-wrap .form-content>i { display: block; width: 112px; height: 112px; background: url("../images_pc/news_icon.png") center center no-repeat; position: absolute; right: -340px; top: 20px } .form-wrap .form-content .form-item { width: 100%; position: relative; margin-top: 30px } .form-wrap .form-content .form-item dl { width: 340px } .form-wrap .form-content .form-item dl dt { width: 100%; overflow: hidden; line-height: 24px; font-size: 20px; color: #c8ae79; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-transform: capitalize; margin-bottom: 6px } .form-wrap .form-content .form-item dl dt em { line-height: 24px; font-size: 20px; font-style: normal; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; margin-left: 10px } .form-wrap .form-content .form-item dl dt em.error { color: #ff0000 } .form-wrap .form-content .form-item dl dt em.correct { color: #00cc75 } .form-wrap .form-content .form-item dl dt span { color: #1d427a; text-transform: lowercase } .form-wrap .form-content .form-item dl dd { width: 100%; overflow: hidden } .form-wrap .form-content .form-item dl dd input[type="text"] { width: 100%; height: 38px; border: 1px solid #c8ae79; border-radius: 10px; background: #fff; overflow: hidden; padding: 0 10px; line-height: 36px; font-size: 20px; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; color: #1d427a } .form-wrap .form-content .form-item dl+dl { margin-left: 120px } .form-wrap .form-content .form-item .btn-link { width: 245px; position: relative } .form-wrap .form-content .form-item .btn-link i { display: block; position: absolute; left: -20px; top: 0; width: 285px; height: 80px; background: url("../images_pc/button_mark.png") center top no-repeat } .form-wrap .form-content .form-item .btn-link input[type="button"],.form-wrap .form-content .form-item .btn-link input[type="submit"],.form-wrap .form-content .form-item .btn-link a { display: block; width: 100%; height: 50px; background: #1d427a; background: -webkit-linear-gradient(left, #1d427a, #396faa); background: -o-linear-gradient(right, #1d427a, #396faa); background: -moz-linear-gradient(right, #1d427a, #396faa); background: linear-gradient(to right, #1d427a, #396faa); border-radius: 10px; text-align: center; line-height: 50px; color: #fff; font-size: 20px; font-family: 'FuturaStd_Bold',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; position: relative; z-index: 1 } .form-wrap .form-content .form-item.icon-rt i { clear: both; display: block; width: 56px; height: 112px; position: absolute; background: url("../images_pc/lf_icon.png") left top no-repeat; right: -18px; top: -20px } .form-wrap .form-content .form-item.icon-rt dl { width: 100% } .form-wrap .form-content .form-item.icon-rt dl dd textarea { width: 100%; resize: none; height: 130px; border: 1px solid #c8ae79; border-radius: 10px; background: #fff; overflow: hidden; padding: 5px 10px; line-height: 36px; font-size: 20px; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; color: #1d427a } .model-panel .case-list-fst li { margin-top: 20px } .model-panel .news-list-fst li { padding-top: 0 } .model-panel h2,.model-panel h4 { margin: 60px 0 30px; padding-left: 10%; line-height: 48px; font-size: 40px; color: #1d427a; font-family: 'FuturaStd_Bold',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-transform: capitalize; position: relative; z-index: 20 } .model-panel h2:before,.model-panel h4:before { content: ""; display: block; width: 0; height: 0; border-bottom: 8px solid #1d427a; border-left: 8px dashed transparent; border-right: 8px dashed transparent; position: absolute; left: -4px; top: 8px; transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg) } .case-page .page-banner .banner-bg ul li { padding-right: 120px } .case-page .page-banner .banner-bg ul li a { padding-right: 120px } .page-banner { width: 100%; position: relative; z-index: 1030 } .page-banner .banner-bg { width: 100%; position: relative; z-index: 20 } .page-banner .banner-bg .page-title { width: 100%; height: 76px; line-height: 76px; font-size: 70px; font-family: 'Monoton_Regular',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-transform: uppercase; color: #c8ae79; padding: 0 80px } .page-banner .banner-bg ul { padding: 30px 0 0 80px; width: 100%; position: relative } .page-banner .banner-bg ul li { overflow: hidden; padding-right: 50px; width: 20% } .page-banner .banner-bg ul li a { max-width: 200px; display: inline-block; line-height: 36px; font-size: 20px; color: #a2afc3; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-transform: capitalize; position: relative; padding-right: 40px } .page-banner .banner-bg ul li a:before { content: ""; position: absolute; right: 0; top: 11px; width: 6px; height: 14px; background: #a2afc3; transform: skewX(-30deg); -ms-transform: skewX(-30deg); -moz-transform: skewX(-30deg); -webkit-transform: skewX(-30deg); -o-transform: skewX(-30deg) } .page-banner .banner-bg ul li:hover a,.page-banner .banner-bg ul li.on a { color: #c8ae79 } .page-banner .banner-bg ul li:hover a:before,.page-banner .banner-bg ul li.on a:before { background: #c8ae79 } .page-banner .wrap>p { width: 44%; margin: 29px 0 29px; padding-left: 10%; line-height: 36px; font-size: 22px; color: #fff; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-transform: capitalize; position: relative; z-index: 30 } .page-banner .wrap>p:before { content: ""; display: block; width: 0; height: 0; border-bottom: 8px solid #fff; border-left: 8px dashed transparent; border-right: 8px dashed transparent; position: absolute; left: -4px; top: 8px; transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg) } .page-banner .wrap>h1,.page-banner .wrap>h2 { margin: 41px 0; padding-left: 10%; height: 48px; line-height: 48px; font-size: 40px; color: #fff; font-family: 'FuturaStd_Bold',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-transform: capitalize; position: relative; z-index: 30 } .page-banner .wrap>h1:before,.page-banner .wrap>h2:before { content: ""; display: block; width: 0; height: 0; border-bottom: 8px solid #fff; border-left: 8px dashed transparent; border-right: 8px dashed transparent; position: absolute; left: -4px; top: 8px; transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg) } .page-banner>span { left: 0; display: block; position: absolute; z-index: 10; width: 900px; height: 310px; bottom: 0; background: #1d427a; background: -webkit-linear-gradient(left top, #1d427a, #3e77b2); background: -o-linear-gradient(bottom right, #1d427a, #3e77b2); background: -moz-linear-gradient(bottom right, #1d427a, #3e77b2); background: linear-gradient(to bottom right, #1d427a, #3e77b2) } .case-header { width: 100%; margin-left: 0; position: relative; z-index: 1030 } .case-header>i { left: 5%; position: absolute; bottom: 130px; display: block; width: 320px; height: 160px; background: #fff; z-index: 2; -webkit-box-shadow: -15px 15px 24px rgba(2,37,88,0.1); -moz-box-shadow: -15px 15px 24px rgba(2,37,88,0.1); -ms-box-shadow: -15px 15px 24px rgba(2,37,88,0.1); -o-box-shadow: -15px 15px 24px rgba(2,37,88,0.1); box-shadow: -15px 15px 24px rgba(2,37,88,0.1) } .case-header>h1 { margin-left: 5%; width: 90%; padding: 56px 8%; display: block; position: relative; margin-top: -100px; z-index: 40; -webkit-box-shadow: -15px 15px 24px rgba(2,37,88,0.1); -moz-box-shadow: -15px 15px 24px rgba(2,37,88,0.1); -ms-box-shadow: -15px 15px 24px rgba(2,37,88,0.1); -o-box-shadow: -15px 15px 24px rgba(2,37,88,0.1); box-shadow: -15px 15px 24px rgba(2,37,88,0.1); line-height: 64px; color: #1d427a; font-size: 40px; font-family: 'FuturaStd_Bold',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; background: #fff } .case-header>span { width: 100%; left: 0; position: absolute; z-index: 1; top: 20px; height: 500px; background: #1d427a; background: -webkit-linear-gradient(left top, #1d427a, #3e77b2); background: -o-linear-gradient(bottom right, #1d427a, #3e77b2); background: -moz-linear-gradient(bottom right, #1d427a, #3e77b2); background: linear-gradient(to bottom right, #1d427a, #3e77b2) } .case-header .detail-img { width: 96%; position: relative; z-index: 10 } .case-header .detail-img>strong { display: block; width: 300px; height: 120px; -webkit-box-shadow: 0 15px 25px rgba(2,37,88,0.3); -moz-box-shadow: 0 15px 25px rgba(2,37,88,0.3); -ms-box-shadow: 0 15px 25px rgba(2,37,88,0.3); -o-box-shadow: 0 15px 25px rgba(2,37,88,0.3); box-shadow: 0 15px 25px rgba(2,37,88,0.3); position: absolute; left: 0; bottom: 100px; z-index: -1 } .case-header .detail-img span { display: block; width: 100%; overflow: hidden } .case-header .detail-img span img { display: block; width: 100% } .pro-list { padding-right: 0; width: 100%; margin: 50px 0 } .pro-list li { width: 30%; margin-left: 2.5%; margin-top: 30px } .pro-list li dl { width: 100% } .pro-list li dl dt { width: 100%; overflow: hidden; -webkit-box-shadow: 0 8px 14px rgba(2,37,88,0.2); -moz-box-shadow: 0 8px 14px rgba(2,37,88,0.2); -ms-box-shadow: 0 8px 14px rgba(2,37,88,0.2); -o-box-shadow: 0 8px 14px rgba(2,37,88,0.2); box-shadow: 0 8px 14px rgba(2,37,88,0.2) } .pro-list li dl dt a { display: block; width: 100%; overflow: hidden; position: relative } .pro-list li dl dt a:before { content: ''; position: absolute; left: 0; top: 0; width: 210px; height: 90px; background: url("../images_pc/pro_bg.png") left top no-repeat; z-index: 1; display: block } .pro-list li dl dt a img { display: block; width: 100% } .pro-list li dl dd { width: 100%; height: 64px; text-align: center } .pro-list li dl dd a { line-height: 64px; font-size: 16px; color: #999999; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-transform: capitalize } .pf-10 { padding-left: 0 } .about-content { padding-top: 70px; padding-bottom: 90px; position: relative; z-index: 20 } .about-content p { width: 620px; float: left; overflow: hidden; line-height: 36px; font-size: 22px; color: #1d427a; font-family: 'FuturaStd_Light',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased } .about-content .img-03 { margin-left: 40px; width: 300px; float: left; margin-top: -90px } .about-content .img-03 img { display: block; width: 100% } .about-content .img-01,.about-content .img-02 { float: left; position: relative } .about-content .img-01 span,.about-content .img-02 span { border-radius: 10px; display: block; width: 100%; height: 100%; overflow: hidden } .about-content .img-01 span img,.about-content .img-02 span img { display: block; width: 100% } .about-content .img-01 { width: 470px; margin-top: 30px } .about-content .img-02 { width: 455px; margin-left: 32px; margin-top: 32px } .about-content .img-02:before { content: ''; display: block; width: 56px; height: 112px; background: url("../images_pc/rt_icon.png") center top no-repeat; position: absolute; left: -18px; top: -70px } .about-panel.bg-f6 { padding-top: 70px; padding-bottom: 70px } .about-panel.bg-f6 .font-item { color: #fff } .about-panel.bg-f6 .wrap h2 { margin-bottom: 70px; padding-left: 10%; height: 48px; line-height: 48px; font-size: 40px; color: #1d427a; font-family: 'FuturaStd_Bold',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-transform: capitalize; position: relative; z-index: 20 } .about-panel.bg-f6 .wrap h2:before { content: ""; display: block; width: 0; height: 0; border-bottom: 8px solid #1d427a; border-left: 8px dashed transparent; border-right: 8px dashed transparent; position: absolute; left: -4px; top: 8px; transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg) } .about-panel.bg-f6 .wrap .lf-img { margin-left: 0; width: 360px; margin-right: 30px; position: relative; z-index: 20; float: left } .about-panel.bg-f6 .wrap .lf-img .tp-img,.about-panel.bg-f6 .wrap .lf-img .btm-img { width: 100%; position: relative } .about-panel.bg-f6 .wrap .lf-img .tp-img span,.about-panel.bg-f6 .wrap .lf-img .btm-img span { border-radius: 10px; display: block; width: 100%; overflow: hidden } .about-panel.bg-f6 .wrap .lf-img .tp-img span img,.about-panel.bg-f6 .wrap .lf-img .btm-img span img { display: block; width: 100% } .about-panel.bg-f6 .wrap .lf-img .btm-img { margin-top: 30px } .about-panel.bg-f6 .wrap .lf-img .btm-img:after { content: ""; display: block; width: 56px; height: 112px; background: url("../images_pc/lf_icon.png") center top no-repeat; position: absolute; right: -15px; top: -70px } .about-panel.bg-f6 .wrap .rt-content { width: 570px; float: left; overflow: hidden; position: relative; z-index: 20 } .about-panel.bg-f6 .wrap .rt-content p { display: block; width: 100%; overflow: hidden; line-height: 36px; font-size: 22px; color: #1d427a; font-family: 'FuturaStd_Light',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased } .about-panel.bg-f6 .wrap .rt-content .rt-img { width: 220px; margin-top: 40px; overflow: hidden } .about-panel.bg-f6 .wrap .rt-content .rt-img span { display: block; width: 100%; overflow: hidden; border-radius: 10px } .about-panel.bg-f6 .wrap .rt-content .rt-img span img { display: block; width: 100% } .about-panel.bg-f6 .wrap .rt-content .btm-img { width: 330px; position: relative; margin-top: 140px } .about-panel.bg-f6 .wrap .rt-content .btm-img:after { content: ""; display: block; width: 112px; height: 112px; background: url("../images_pc/news_icon.png") center top no-repeat; position: absolute; right: -65px; top: -180px } .about-panel.bg-f6 .wrap .rt-content .btm-img span { display: block; width: 100%; border-radius: 10px; overflow: hidden } .about-panel.bg-f6 .wrap .rt-content .btm-img span img { display: block; width: 100% } .article-wrap>i { display: block; width: 100%; top: 0; height: 550px; position: absolute; right: 0; z-index: 0; background: url("../images_pc/article_banner.jpg") left top no-repeat } .article-wrap .article-title { width: 100%; position: relative; z-index: 1030; padding-top: 50px; padding-bottom: 10px } .article-wrap .article-title>strong { display: block; width: 100%; line-height: 96px; height: 96px; overflow: hidden; white-space: nowrap; font-size: 72px; color: #1d427a; font-family: 'Monoton_Regular',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-transform: uppercase; font-weight: normal; letter-spacing: .1em; text-align: center } .section { width: 100%; position: relative } .section .pro-des { width: 100%; padding: 50px 50px 60px 60px; margin-bottom: 72px; background-color: #fff; -webkit-box-shadow: 0 19px 24px rgba(2,37,88,0.1); -moz-box-shadow: 0 19px 24px rgba(2,37,88,0.1); -ms-box-shadow: 0 19px 24px rgba(2,37,88,0.1); -o-box-shadow: 0 19px 24px rgba(2,37,88,0.1); box-shadow: 0 19px 24px rgba(2,37,88,0.1); position: relative; z-index: 1020 } .section .pro-des dt { width: 100%; overflow: hidden; line-height: 56px; color: #1d427a; font-size: 40px; font-family: 'FuturaStd_Bold',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-transform: uppercase } .section .pro-des dt h1 { width: 100%; overflow: hidden; line-height: 56px; color: #1d427a; font-size: 40px; font-family: 'FuturaStd_Bold',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-transform: uppercase; font-weight: normal } .section .pro-des dd { width: 100%; overflow: hidden; text-align: right; font-size: 0; margin-top: 24px; -o-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out } .section .pro-des dd p { display: block; width: 100%; padding-right: 76px; font-size: 24px; color: #396faa; line-height: 36px; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-align: left } .section .pro-des dd a { display: inline-block; font-size: 20px; color: #c8ae79; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; line-height: 60px; padding: 0 30px 20px; margin-left: 60px; top: 0; position: relative; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out } .section .pro-des dd a i { display: block; width: 180px; height: 2px; position: absolute; left: 50%; margin-left: -90px; bottom: 18px; background: #c8ae79 } .section .pro-des dd a i:after { -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; opacity: 0; width: 180px; height: 20px; content: ""; display: block; position: absolute; top: 0; left: 0; background: url("../images_pc/a_mark.png") center top no-repeat } .section .pro-des dd a:hover { -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; top: -5px } .section .pro-des dd a:hover i:after { -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; opacity: 1 } .article-panel { width: 800px; margin-left: auto; margin-right: auto; overflow: hidden; position: relative; z-index: 12 } .article-panel h2 { width: 100%; overflow: hidden; line-height: 36px; font-size: 32px; color: #c8ae79; font-family: 'FuturaStd_Heavy',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; font-weight: normal; text-transform: Capitalize; margin: 60px 0 40px } .article-panel h3 { margin: 20px 0; width: 100%; overflow: hidden; line-height: 36px; font-size: 24px; color: #1d427a; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; font-weight: normal } .article-panel p { width: 100%; overflow: hidden; line-height: 36px; font-size: 20px; color: #1d427a; font-family: 'FuturaStd_Light',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; margin: 25px 0 } .article-panel img { display: block; height: auto !important; margin-bottom: 20px } .article-panel table { margin: 20px 0; width: 100%; border-spacing: 0; border: 1px solid #1d427a } .article-panel table thead { display: none } .article-panel table tr td:first-child,.article-panel table tr th { border-bottom: 1px solid #fff; padding: 15px 30px; background: #1d427a; color: #fff; font-family: 'FuturaStd_Light',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; line-height: 36px; font-size: 20px } .article-panel table tr td { border-bottom: 1px solid #1d427a; padding: 15px 30px; background: #fff; color: #1d427a; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; line-height: 36px; font-size: 20px } .article-panel table tr:last-child th,.article-panel table tr:last-child td { border-bottom: none } .swiper-content { width: 100%; height: 600px; position: relative; overflow: hidden } .swiper-content .swiper-container { margin-left: auto; margin-right: auto } .swiper-content .swiper-slide { background-size: cover; background-position: center } .swiper-content .gallery-top { height: 458px; width: 100%; border-radius: 15px; overflow: hidden } .swiper-content .gallery-top .swiper-slide a,.swiper-content .gallery-top .swiper-slide p { display: block; width: 100%; height: 100%; overflow: hidden; position: relative; margin: 0 } .swiper-content .gallery-top .swiper-slide a span,.swiper-content .gallery-top .swiper-slide a i,.swiper-content .gallery-top .swiper-slide p span,.swiper-content .gallery-top .swiper-slide p i { display: block; width: 100%; height: 70px; position: absolute; left: 0; bottom: 0 } .swiper-content .gallery-top .swiper-slide a i,.swiper-content .gallery-top .swiper-slide p i { opacity: 0.7; filter: alpha(opacity=70); background: #00193d; z-index: 0 } .swiper-content .gallery-top .swiper-slide a span,.swiper-content .gallery-top .swiper-slide p span { text-align: center; line-height: 70px; z-index: 1; color: #fff; font-size: 20px; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased } .swiper-content .gallery-thumbs { width: 710px; height: 132px; margin-top: 10px; border-radius: 10px; overflow: hidden } .swiper-content .gallery-thumbs .swiper-slide { height: 100%; width: 230px !important; opacity: 0.4 } .swiper-content .gallery-thumbs .swiper-slide-thumb-active { opacity: 1 } .swiper-content .swiper-button-next,.swiper-content .swiper-button-prev { width: 28px; height: 28px; top: initial; bottom: 52px; margin: 0 } .swiper-content .swiper-button-next:focus,.swiper-content .swiper-button-prev:focus { border: none; outline: none } .swiper-content .swiper-button-next { right: 0; background: url("../images_pc/article_next.png") center center no-repeat } .swiper-content .swiper-button-prev { left: 0; background: url("../images_pc/article_prev.png") center center no-repeat } .aside { width: 100% } .aside .font-panel { margin-bottom: 26px; clear: both; width: 100%; padding-right: 390px; min-height: 320px; position: relative; padding-bottom: 30px; background: #1d427a; background: -webkit-linear-gradient(right top, #1d427a, #396faa); background: -o-linear-gradient(bottom left, #1d427a, #396faa); background: -moz-linear-gradient(bottom left, #1d427a, #396faa); background: linear-gradient(to bottom left, #1d427a, #396faa) } .aside .font-panel .step-img { width: 420px; height: 120px; top: 170px; right: -30px; margin-left: -90px; background: #c8ae79; position: absolute; margin-bottom: -20px } .aside .font-panel .step-img:after { content: ""; display: block; position: absolute; width: 0; height: 0; top: -18px; right: 2px; border-top: 21px solid #9d782e; border-left: 21px dashed transparent; border-right: 21px dashed transparent; transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg) } .aside .font-panel .step-img img { display: block; width: 100%; height: 100% } .aside .font-panel p { width: 100%; padding: 0 20px 0 36px; overflow: hidden; line-height: 36px; font-size: 18px; color: #fff; margin-top: 30px; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; position: relative; word-break: break-all } .aside .font-panel p i { display: block; position: absolute; left: 0; top: 0; width: 36px; text-align: right; font-size: 18px; color: #fff; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; font-style: normal } .aside .font-panel p span { color: #bfbfbf } .aside .form-panel { width: 100%; top: 0; padding: 15px 15px 30px 0; position: relative; z-index: 1010 } .aside .form-panel .rt-icon { width: 144px; height: 144px; overflow: hidden; position: absolute; top: 0; right: 0 } .aside .form-panel .rt-icon>span { position: absolute; display: block; overflow: hidden; right: -23px; top: 0; width: 159px; height: 15px; background: -webkit-linear-gradient(left, #396faa, #1d427a); background: -o-linear-gradient(right, #396faa, #1d427a); background: -moz-linear-gradient(right, #396faa, #1d427a); background: linear-gradient(to right, #396faa, #1d427a); transform: skewX(45deg); -ms-transform: skewX(45deg); -moz-transform: skewX(45deg); -webkit-transform: skewX(45deg); -o-transform: skewX(45deg); z-index: 1 } .aside .form-panel .rt-icon>i { position: absolute; display: block; overflow: hidden; right: 0; top: -23px; width: 15px; height: 159px; background: #1d427a; background: -webkit-linear-gradient(#1d427a, #396faa); background: -o-linear-gradient(#1d427a, #396faa); background: -moz-linear-gradient(#1d427a, #396faa); background: linear-gradient(#1d427a, #396faa); transform: skewY(45deg); -ms-transform: skewY(45deg); -moz-transform: skewY(45deg); -webkit-transform: skewY(45deg); -o-transform: skewY(45deg) } .aside .form-panel .form-content { width: 100%; overflow: hidden; padding: 20px 20px 70px; position: relative; z-index: 2; background: #fff; -webkit-box-shadow: 6px 6px 28px rgba(29,66,122,0.1); -moz-box-shadow: 6px 6px 28px rgba(29,66,122,0.1); -ms-box-shadow: 6px 6px 28px rgba(29,66,122,0.1); -o-box-shadow: 6px 6px 28px rgba(29,66,122,0.1); box-shadow: 6px 6px 28px rgba(29,66,122,0.1) } .aside .form-panel .form-content h4 { width: 100%; overflow: hidden; line-height: 48px; font-size: 24px; color: #1d427a; font-family: 'FuturaStd_Heavy',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; font-weight: normal } .aside .form-panel .form-content p { width: 100%; margin-top: 20px; margin-bottom: 6px; font-size: 18px; line-height: 20px; color: #c8ae79; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased } .aside .form-panel .form-content p em { line-height: 24px; font-size: 20px; font-style: normal; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; margin-left: 10px } .aside .form-panel .form-content p em.error { color: #ff0000 } .aside .form-panel .form-content p em.correct { color: #00cc75 } .aside .form-panel .form-content p span { color: #1d427a } .aside .form-panel .form-content p strong { font-family: 'FuturaStd_Light',Helvetica; color: #bbbbbb; font-weight: normal } .aside .form-panel .form-content input[type="text"],.aside .form-panel .form-content textarea { width: 100%; border: 1px solid #c8ae79; border-radius: 10px; font-size: 16px; line-height: 25px; color: #1d427a; padding: 5px 10px; overflow: hidden } .aside .form-panel .form-content input[type="text"] { height: 37px } .aside .form-panel .form-content textarea { resize: none; height: 90px } .aside .form-panel .form-content .btn-link { width: 245px; margin-top: 20px; position: relative } .aside .form-panel .form-content .btn-link i { display: block; position: absolute; left: -20px; top: 0; width: 285px; height: 80px; background: url("../images_pc/button_mark.png") center top no-repeat } .aside .form-panel .form-content input[type="button"],.aside .form-panel .form-content input[type="submit"],.aside .form-panel .form-content a { display: block; width: 100%; height: 50px; background: #1d427a; background: -webkit-linear-gradient(left, #1d427a, #396faa); background: -o-linear-gradient(right, #1d427a, #396faa); background: -moz-linear-gradient(right, #1d427a, #396faa); background: linear-gradient(to right, #1d427a, #396faa); border-radius: 10px; text-align: center; line-height: 50px; color: #fff; font-size: 20px; font-family: 'FuturaStd_Bold',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; position: relative; z-index: 1 } .kf-panel { width: 300px; margin-bottom: -170px; height: 160px; float: right; background: url("../images_pc/kf_bg.png") center top no-repeat; margin-top: 30px; position: relative; z-index: 1 } .kf-panel .font-bg { position: absolute; bottom: 70px; left: 20px; display: block; width: 148px; background: url("../images_pc/font_bg.png") center top no-repeat; padding: 30px 0 0; overflow: hidden } .kf-panel .kf-link { width: 140px; height: 70px; position: absolute; bottom: 0; left: 20px } .kf-panel .kf-link span { margin-top: 10px; display: block; width: 100%; height: 32px; line-height: 32px; font-size: 20px; font-family: 'FuturaStd_Heavy',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-transform: capitalize; color: #c8ae79 } .kf-panel .kf-link i { display: block; width: 60px; height: 2px; background: #c8ae79; position: absolute; left: 40px; bottom: 20px; -webkit-animation: leftMove 2s infinite linear; animation: leftMove 2s infinite linear } .kf-panel .kf-link i:after { content: ''; width: 12px; height: 12px; border-top: 2px solid #c8ae79; border-left: 2px solid #c8ae79; transform: rotate(135deg); -ms-transform: rotate(135deg); -moz-transform: rotate(135deg); -webkit-transform: rotate(135deg); -o-transform: rotate(135deg); position: absolute; right: 0; top: -5px } .kf-panel p { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; background: #fff; display: block; line-height: 24px; font-size: 16px; color: #c8ae79; font-family: 'FuturaStd_Heavy',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; padding: 0 15px 10px } .kf-panel p strong { color: #c88600; font-size: 18px; line-height: 28px; font-family: 'FuturaStd_Bold',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; font-weight: normal } .bg-f6 { width: 100%; background: #f6f6f6; overflow: hidden; padding-bottom: 140px } .bg-f6 .about-img { display: none; width: 390px; height: 300px; border-left: 10px solid #c8ae79; position: absolute; right: -65px; bottom: -92px; z-index: 10; -webkit-box-shadow: 2px 2px 16px rgba(76,52,3,0.23); -moz-box-shadow: 2px 2px 16px rgba(76,52,3,0.23); -ms-box-shadow: 2px 2px 16px rgba(76,52,3,0.23); -o-box-shadow: 2px 2px 16px rgba(76,52,3,0.23); box-shadow: 2px 2px 16px rgba(76,52,3,0.23) } .bg-f6 .about-img img { display: block; width: 100%; height: 100% } .bg-article { width: 98%; min-height: 800px; background: url("../images_pc/article_bg_01.jpg") left top no-repeat; padding-top: 25px } .bg-article .article-panel h3,.bg-article .article-panel p { color: #fff } .bg-article .article-panel ul { width: 100%; overflow: hidden } .bg-article .article-panel ul li { width: 100%; height: 40px; line-height: 40px; padding-left: 24px; position: relative; color: #fff; font-size: 20px; font-family: 'FuturaStd_Light',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; margin-bottom: 32px } .bg-article .article-panel ul li:before { content: ""; display: block; position: absolute; width: 8px; height: 8px; border-radius: 100%; background: #fff; left: 0; top: 16px; z-index: 1 } .bg-article .partner-panel { border-left: 10px solid #c8ae79; width: 103%; background: #fff; border-radius: 0 10px 10px 0; position: relative; left: 20px; padding: 20px 5% 20px 0 } .bg-article .partner-panel h3 { width: 100%; background: url(../images_pc/icon_h3.jpg) left center no-repeat; height: 48px; line-height: 48px; font-size: 24px; color: #c8ae79; text-transform: capitalize; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; font-weight: normal; padding-left: 30px } .bg-article .partner-panel ul { width: 100%; overflow: hidden; margin-top: 10px } .bg-article .partner-panel ul li { float: left; display: block; width: 16.666666%; padding: 0 2.33% } .bg-article .partner-panel ul li span,.bg-article .partner-panel ul li a { display: block; overflow: hidden } .bg-article .partner-panel ul li span img,.bg-article .partner-panel ul li a img { display: block; width: 100% } .bg-article .partner-panel ul li+li+li+li+li+li+li+li { margin-left: .82%; width: 20%; padding: 0 4% } .footer-model { width: 100%; overflow: hidden; background: url("../images_pc/article_bg_02.jpg") center top no-repeat; padding-bottom: 20px } .footer-model .wrap>h2 { margin-top: 70px; margin-bottom: 60px; padding-left: 10%; height: 48px; line-height: 48px; font-size: 40px; color: #c8ae79; font-family: 'FuturaStd_Bold',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-transform: capitalize; position: relative; z-index: 1 } .footer-model .wrap>h2:before { content: ""; display: block; width: 0; height: 0; border-bottom: 8px solid #c8ae79; border-left: 8px dashed transparent; border-right: 8px dashed transparent; position: absolute; left: -4px; top: 8px; transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg) } .footer-model .wrap>p { padding-left: 10%; margin-bottom: 50px; display: block; width: 960px; overflow: hidden; line-height: 36px; font-size: 22px; color: #fff; font-family: 'FuturaStd_Light',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased } .footer-model .article-panel h2 { margin: 50px 0 30px } .footer-model .article-panel h3,.footer-model .article-panel p { color: #fff } .footer-model .article-panel p { margin: 20px 0 } .footer-model .article-panel p a,.footer-model .article-panel p span { color: #fff; text-decoration: underline; font-size: 20px; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; margin-right: 10px } .footer-model .img-panel { display: block; width: 100%; overflow: hidden } .footer-model .img-panel img { display: block; width: 100% } .back-top { width: 75px; height: 75px; position: fixed; z-index: 1050; bottom: 50px; right: 50px } .back-top a { display: block; width: 100%; height: 100%; overflow: hidden } .back-top a img { display: block; width: 100%; height: 100% } .page-panel { width: 100%; position: relative; font-size: 0; text-align: center } .pager { padding: 20px 0px; text-align: center; line-height: 0; font-size: 0; vertical-align: middle; position: relative } .pager .pagination { display: inline-block; vertical-align: middle; margin: 20px 0 } .pager .pagination li { float: left; border: 1px solid #e6e6e6; margin: 0 5px; border-radius: 2px } .pager .pagination li a,.pager .pagination li span { display: block; color: #9e9e9e; padding: 8px 15px; line-height: 20px; font-size: 15px } .pager .pagination li:hover { position: relative; z-index: 1; border: 1px solid #1d427a } .pager .pagination li:hover a,.pager .pagination li:hover span { color: #1d427a } .pager .pagination li.disable { text-decoration: none; background: #f5f5f5; border-color: #e6e6e6; cursor: not-allowed } .pager .pagination li.disable a,.pager .pagination li.disable span { color: #999 } .pager .pagination li.disable:hover { background: #f5f5f5; border-color: #e6e6e6 } .pager .pagination li.disable:hover a,.pager .pagination li.disable:hover span { color: #999 } .pager .pagination li.active { position: relative; padding: 1px; z-index: 2; border: none; background: #1d427a } .pager .pagination li.active a,.pager .pagination li.active span { color: #fff } .pager .total-page { display: inline-block; vertical-align: middle; border: 1px solid #e6e6e6; padding: 8px 40px 8px 20px; margin: 0 5px; border-radius: 2px; cursor: pointer; position: relative } .pager .total-page:after { content: ''; display: block; width: 0; height: 0; border-top: 6px solid #1d427a; border-left: 6px dashed transparent; border-right: 6px dashed transparent; position: absolute; right: 20px; top: 15px } .pager .total-page strong,.pager .total-page span { display: inline-block; padding: 0; line-height: 20px; font-size: 15px; vertical-align: middle; color: #999 } .pager .total-page strong { font-style: normal; font-weight: normal; color: #1d427a } .pager .all-page { position: absolute; width: 960px; bottom: 80px; left: 50%; margin-left: -480px; right: 0; z-index: 10; display: none; padding-bottom: 20px } .pager .all-page .page-tab { padding: 30px 20px 20px; border-radius: 2px; border: 1px solid #e6e6e6; background: #fff; position: relative } .pager .all-page .page-tab:after,.pager .all-page .page-tab:before { content: ''; display: block; position: absolute } .pager .all-page .page-tab:before { left: 50%; margin-left: -8px; bottom: -16px; border-top: 16px solid #e6e6e6; border-left: 16px dashed transparent; border-right: 16px dashed transparent } .pager .all-page .page-tab:after { left: 50%; margin-left: -6px; bottom: -14px; border-top: 14px solid #ffffff; border-left: 14px dashed transparent; border-right: 14px dashed transparent } .pager .all-page .close { display: block; width: 30px; height: 30px; position: absolute; right: 0; top: 0; color: #fff; background: #1d427a; font-size: 18px; line-height: 20px; text-align: center; cursor: pointer; border-bottom-left-radius: 30px; padding-left: 4px } .pager .all-page .page-bd { width: 100%; overflow: hidden } .pager .all-page .page-bd .current-list { display: none; width: 100%; overflow: hidden } .pager .all-page .page-bd .current-list li { width: 10%; text-align: center; overflow: hidden } .pager .all-page .page-bd .current-list li a { display: inline-block; line-height: 20px; font-size: 15px; color: #999; border: 1px solid #e6e6e6; border-radius: 2px; padding: 8px 14px } .pager .all-page .page-bd .current-list li a:hover { border: 1px solid #1d427a; color: #1d427a } .pager .all-page .page-bd .current-list li.active a { padding: 9px 15px; z-index: 2; color: #fff; border: none; background: #1d427a } .pager .all-page .page-bd .current-list.on { display: block } .pager .all-page .page-hd { width: 100%; overflow: hidden; margin-top: 10px } .pager .all-page .page-hd li { width: 20%; margin-top: 10px } .pager .all-page .page-hd li span { display: block; width: 80%; margin: 0 auto; padding: 8px 14px; line-height: 20px; border: 1px solid #e6e6e6; text-align: center; font-size: 15px; color: #999; border-radius: 2px; cursor: pointer } .pager .all-page .page-hd li:hover span { border: 1px solid #1d427a; color: #1d427a } .pager .all-page .page-hd li.active span { padding: 9px 15px; z-index: 2; color: #fff; border: none; background: #1d427a } .pager .all-page .page-hd li.on span { border: 1px solid #1d427a; color: #1d427a } .pager .all-page .page-hd li.active.on span { border: none; color: #fff } .timer-shaft-box { width: 100%; padding: 10px 20px 50px 20px; box-sizing: border-box } .timer-shaft { position: relative; width: 100% } .timer-right,.timer-left { display: none } .timer-scale-cont { display: inline-block; height: 100%; padding: 0; margin-right: 15px; vertical-align: middle; line-height: 22px; text-align: center; font-size: 18px; color: #00355d; transition: all .3s; cursor: pointer; background: #fff; overflow: hidden; border-radius: 10px; position: relative; box-shadow: 0 0 9px rgba(0,53,93,0.4) } .timer-scale-cont:after,.timer-scale-cont:before { position: absolute; content: ''; bottom: 0; top: 0; left: 0; right: 0 } .timer-shaft-box .timer-scale-cont p.time-circle { display: block; vertical-align: middle; line-height: 22px; text-align: center; font-size: 18px; color: #00355d; transition: all .3s; cursor: pointer; overflow: hidden; border-radius: 10px; position: relative; height: 50px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; display: -webkit-flex; align-items: center; justify-content: center; -webkit-align-items: center; -webkit-justify-content: center; z-index: 3; padding: 0 20px } .time-circle span { clear: both; display: block; position: relative; z-index: 3 } .hov .time-circle { color: #00355d; font-weight: bold } .hov.timer-scale-cont:after { background: url(../images_pc/tabicon02.png) no-repeat right center } .hov.timer-scale-cont:before { background: url(../images_pc/tabicon01.png) no-repeat left bottom } .timer-shaft-content { width: 100%; overflow: hidden; margin: 30px 0 0 } .shaft-detail-cont { display: none; width: 100% } .shaft-detail-cont p { display: block; width: 100%; font-size: 16px; line-height: 36px; margin-bottom: 10px } .shaft-detail-cont table+p { margin-top: 20px } .singleParam h3 { font-size: 18px; line-height: 36px; margin-bottom: 10px; margin-top: 20px } .shaft-detail-cont table tr th,.shaft-detail-cont table tr td,.singleParam table tr th,.singleParam table tr td { padding: 5px 10px; font-size: 14px } .singleParam { margin: 0 0 30px; overflow: auto } .param-panel { padding-bottom: 30px } .param-panel .param-content { display: none; overflow: hidden } .param-panel .timer-shaft-box { padding: 10px 0 20px 10px; overflow: hidden } .param-panel .param-header { width: 100%; background-image: url(../images_pc/param_bg.jpg); background-position: left top; background-repeat: no-repeat; -webkit-background-size: 100% auto; background-size: 100% auto; padding: 17px 7.29927% 17px 5.10949%; overflow: hidden; margin-bottom: 20px } .param-panel .param-header h2 { float: left; font-size: 18px; color: #fff; font-family: 'FuturaStd_Bold'; height: 36px; line-height: 36px } .param-panel .param-header .more { float: right; line-height: 36px; font-size: 18px; color: #c8ae79; font-family: 'FuturaStd_Light'; padding-right: 60px; position: relative; text-transform: capitalize; cursor: pointer } .param-panel .param-header .more:before { content: ''; display: block; width: 36px; height: 36px; position: absolute; right: 0; top: 0; background-position: center center; background-repeat: no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100% } .param-panel .param-header .more.show:before { background-image: url(../images_pc/icon_show.png) } .param-panel .param-header .more.hide:before { background-image: url(../images_pc/icon_hide.png) } .skrollable { position: fixed; z-index: 10 } .skrollr-mobile .skrollable { position: absolute } .skrollable .skrollable { position: absolute } .skrollable .skrollable .skrollable { position: static } #LRfloater0 { display: none } .ie9-hack .swiper-banner .swiper-container .swiper-slide { display: none } .ie9-hack .swiper-banner .swiper-container .swiper-slide.on { display: block } .ie9-hack .font-item,.ie9-hack .aside .font-panel .step-img:after { display: none } .ie9-hack .bg-01 .font-panel dl dd .lf-icon p { font-size: 20px } .ie9-hack .aside .font-panel .step-img { top: 0 } .ie8-hack .news-list li+li+li+li+li+li .news-wrap em { left: -77px; top: -77px } .ie8-hack .page-banner .banner-bg .page-title { font-family: Arial,Helvetica,sans-serif } .ie8-hack .news-list-fst li .news-wrap>strong,.ie8-hack .news-list li .news-wrap>strong { display: none } .new-article .breadcrumb { padding: 40px 0 } .main-content { width: 100% } .product-header { padding-top: 400px; width: 100%; position: relative; z-index: 1030 } .product-header .product-img { position: absolute; top: 0px; right: 50%; margin-right: -400px; z-index: 1030; border: 4px solid #c8ae79; border-radius: 10px; overflow: hidden; width: 800px } .product-header .product-img img { display: block; width: 100% } .product-info { width: 960px; border-radius: 20px; background: url(../images_pc/article_bg_03.jpg) left top repeat; margin-left: 0; padding: 80px 40px 40px; position: relative; z-index: 1020 } .product-info h1 { width: 100%; line-height: 48px; font-size: 32px; color: #fff; font-family: 'FuturaStd_Bold',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; padding-right: 0 } .product-info p { font-size: 16px; line-height: 30px; margin: 10px 0 20px; width: 100%; color: #fff; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; padding-right: 0 } .product-info a { display: block; width: 120px; height: 36px; line-height: 36px; border-radius: 36px; font-size: 16px; text-align: center; background: #fff; color: #1d427a; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-transform: capitalize } .product-info .product-des { background: #1d427a; border-top-left-radius: 40px; margin-left: -50px; margin-top: 50px; padding: 20px 0 0 50px; display: none } .product-info .product-des>span { display: block; width: 420px; overflow: hidden } .product-info .product-des>span img { display: block; width: 100% } .product-info .product-des ul { width: 100%; margin-top: 30px; overflow: hidden } .product-info .product-des ul li { height: 64px; line-height: 30px; font-size: 20px; color: #c8ae79; font-family: 'FuturaStd_Light',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; text-transform: capitalize; position: relative } .product-info .product-des ul li:before { content: ''; display: block; width: 10px; height: 10px; border-radius: 100%; background: #c8ae79; left: 50%; margin-left: -5px; bottom: 20px; position: absolute } .product-info .product-des ul li:after { content: ''; width: 2px; height: 20px; position: absolute; left: 50%; margin-left: -1px; bottom: 0; border-left: 1px dashed #c8ae79 } .product-info .product-des ul li+li { margin-left: 60px } .product-font { margin-left: 0; margin-top: -94px; position: relative; z-index: 1024 } .product-font ul { width: 100%; margin-bottom: 40px } .product-font ul li { min-height: 490px; background: #fff; -webkit-box-shadow: 0 20px 24px rgba(2,37,88,0.1); -moz-box-shadow: 0 20px 24px rgba(2,37,88,0.1); box-shadow: 0 20px 24px rgba(2,37,88,0.1); width: 32.1%; padding: 100px 20px 0; position: relative } .product-font ul li h3 { width: 100%; position: relative } .product-font ul li h3 span { display: block; line-height: 76px; font-size: 56px; color: #eff3f7; font-family: 'Monoton_Regular',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; font-weight: normal } .product-font ul li h3 strong { display: block; position: absolute; bottom: 0; padding: 0 20px; line-height: 24px; font-size: 18px; color: #c8ae79; font-family: 'FuturaStd_Heavy',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased } .product-font ul li p { padding: 0; font-size: 16px; line-height: 24px; color: #1d427a; font-family: 'FuturaStd_Light',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; margin-top: 14px } .product-font ul li p a { border-bottom: 1px dashed #1d427a } .product-font ul li p a:hover { color: #c8ae79 } .product-font ul li .img-list { position: absolute; width: 100%; padding: 0 20px; bottom: -30px; left: 0 } .product-font ul li .img-list span { display: block; width: 26.456%; margin: 0 3.43865% } .product-font ul li .img-list span img { display: block; width: 100%; border-radius: 100%; border: 1px solid #c8ae79 } .product-font ul li+li { margin-left: 1.7% } .txt-h2 { width: 100%; overflow: hidden; font-size: 40px; color: #c8ae79; line-height: 64px; font-family: 'FuturaStd_Bold',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; padding-left: 10%; position: relative } .txt-h2:before { content: ''; display: block; width: 0; height: 0; border-bottom: 8px solid #c8ae79; border-left: 8px dashed transparent; border-right: 8px dashed transparent; position: absolute; left: -4px; top: 12px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg) } .customer-say { padding: 30px 0 } .tab-case { width: 100% } .tab-case .bd { width: 560px; overflow: hidden; padding-right: 30px; padding-top: 60px; margin-top: 30px } .tab-case .bd .item-case { display: none; width: 100% } .tab-case .bd .item-case .case-img { width: 100%; overflow: hidden; position: relative } .tab-case .bd .item-case .case-img img { display: block; width: 100% } .tab-case .bd .item-case .case-img p { display: block; position: absolute; right: 0; left: 30px; bottom: 0; height: 56px; line-height: 56px; font-size: 18px; padding: 0 20px; color: #fff; font-family: 'FuturaStd_Bold',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; z-index: 1 } .tab-case .bd .item-case .case-img p:before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #c8ae79; opacity: 0.9; z-index: -1 } .tab-case .bd .item-case .case-info { width: 100%; margin: -74px 0 0 30px; padding: 80px 30px 30px; overflow: hidden; background: #27538c; background: -webkit-linear-gradient(left top, #1d427a, #396faa); background: -o-linear-gradient(bottom right, #1d427a, #396faa); background: -moz-linear-gradient(bottom right, #1d427a, #396faa); background: linear-gradient(to bottom right, #1d427a, #396faa) } .tab-case .bd .item-case .case-info p { margin-top: 10px; line-height: 30px; font-size: 16px; color: #fff; font-family: 'FuturaStd_Light',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased } .tab-case .bd .item-case .case-info p strong { font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; font-weight: normal } .tab-case .bd .item-case.on { display: block } .tab-case .hd { width: 380px; margin-top: 30px } .tab-case .hd ul { width: 100% } .tab-case .hd ul li { width: 100%; border: 1px solid #b8b8b8; padding: 10px 10px 10px 130px; min-height: 130px; position: relative; cursor: pointer } .tab-case .hd ul li:before { content: ''; display: block; width: 102px; position: absolute; left: -1px; top: -1px; bottom: -1px; border: 1px solid #1c4077; border-right: none } .tab-case .hd ul li .customer-img { width: 110px; height: 110px; padding: 0 0 10px 10px; position: absolute; left: 10px; top: 50%; margin-top: -55px } .tab-case .hd ul li .customer-img img { display: block; width: 100%; position: relative; z-index: 1 } .tab-case .hd ul li .customer-img:before { width: 100px; height: 100px; content: ''; display: block; position: absolute; left: 0; bottom: 0; background: #1d427a; -webkit-box-shadow: 0 7px 16px rgba(2,37,88,0.3); -moz-box-shadow: 0 7px 16px rgba(2,37,88,0.3); box-shadow: 0 7px 16px rgba(2,37,88,0.3) } .tab-case .hd ul li .customer-font { width: 100%; overflow: hidden; font-size: 16px; line-height: 26px; color: #c8ae79; font-family: 'FuturaStd_Light',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; padding: 0 0 0 10px } .tab-case .hd ul li+li { margin-top: 15px } .tab-case .hd ul li.on:after { content: ''; display: block; width: 0; height: 0; border-right: 15px solid #1d427a; border-top: 15px dashed transparent; border-bottom: 15px dashed transparent; position: absolute; left: -15px; top: 50%; margin-top: -15px } .price-panel { width: 100%; background: url(../images_pc/price_bg.jpg) center top no-repeat; height: 360px } .price-panel .txt-h2 { margin-bottom: 20px } .price-panel .main-content { padding-top: 60px; position: relative } .price-panel p { color: #fff; padding: 0 1%; font-size: 18px; line-height: 36px; margin-top: 20px; font-family: 'FuturaStd_Medium',Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased } .price-panel .tag-img { width: 160px; height: 160px; border-radius: 100%; overflow: hidden; position: absolute; right: 0; top: 10px; z-index: 1 } .price-panel .tag-img img { display: block; width: 100% } .service-panel { padding: 30px 0 40px; position: relative; background: #f2f8ff url("../images_pc/btm_mark.png") left top no-repeat } .service-panel .service-img { margin: 20px 0 0; overflow: hidden } .service-panel .service-img img { display: block; width: 100% } .h100 { height: 40px } .fdftm { position: fixed; width: 8.4167%; min-width: 100px; max-width: 200px; right: 10px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); z-index: 9999 } @media screen and (min-width: 1240px) { .page-banner .banner-bg ul li { width:auto } } @media screen and (min-width: 1366px) { .wrap { width:1240px } .fixed-header ul { width: 82% } .section { width: 940px } .section .pro-des { width: 880px; padding: 50px 50px 60px 60px } .aside { width: 300px } .aside .kf-panel { clear: both; margin-bottom: 0 } .aside .font-panel { margin-bottom: 26px; padding-right: 0; clear: both } .aside .font-panel .step-img { width: 420px; height: 120px; top: initial; right: initial; position: relative; margin-left: -90px; margin-bottom: -20px } .aside .form-panel { width: 300px } .aside .form-panel .form-content { width: 100%; padding: 20px 20px 70px } .aside .form-panel .form-content .btn-link { width: 100% } .aside .form-panel .form-content .btn-link i { left: -20px; top: 0; width: 285px; height: 80px } .aside .form-panel .form-content input[type="button"],.aside .form-panel .form-content input[type="submit"],.aside .form-panel .form-content a { width: 100% } .article-panel { margin-left: 4% } .singleParam { margin: 0 4% 30px } .article-wrap .article-title>strong { line-height: 106px; height: 106px; overflow: hidden; font-size: 96px } .bg-01 .pic-panel { display: block; width: 32%; height: 460px } .bg-01 .font-panel { width: 66% } .bg-01 .font-panel>p { width: 100% } .bg-01 .font-panel dl { margin-left: 0; float: right; margin-right: 30px } .case-list { margin-bottom: 60px; padding: 0 0 0 10% } .case-list li { width: 50%; margin-left: 0%; margin-right: 0%; margin-top: 60px; padding: 0 20px } .case-list li .case-panel .case-title p { padding: 0 24% 0 50px } .pro-list li dl dd a { font-size: 24px } .about-content p { width: 700px } .about-content .img-03 { width: 334px; margin-left: 120px } .about-content .img-01 { margin-top: -50px } .about-content .img-02 { width: 525px } .about-panel.bg-f6 .wrap .lf-img { width: 390px } .about-panel.bg-f6 .wrap .rt-content { width: 780px } .about-panel.bg-f6 .wrap .rt-content p { width: 700px } .about-panel.bg-f6 .wrap .rt-content .btm-img { width: 452px } .about-panel.bg-f6 .wrap .rt-content .btm-img:after { right: -80px } .about-panel.bg-f6 .wrap .rt-content .rt-img { width: 296px } .case-list-fst li { width: 32.26%; margin-top: 60px; padding-left: 50px } .case-header .detail-img { width: 80% } .case-header>h1 { margin-left: 5%; width: 68% } .contact-msg { padding-left: 0 } .contact-msg li { width: 410px; float: left } .contact-msg li+li+li { margin-left: 0 } .product-info { margin: 0; padding: 30px 0 0 50px; width: 800px; border-radius: 0; border-top-left-radius: 40px } .product-info h1 { line-height: 52px; font-size: 36px; padding-right: 36% } .product-info p { font-size: 18px; line-height: 30px; margin: 15px 0 25px; padding-right: 36% } .product-info a { width: 140px; height: 40px; line-height: 40px; border-radius: 40px; font-size: 16px } .product-info .product-des { margin-left: -50px; padding: 20px 0 0 50px; margin-top: 40px; display: block } .product-info .product-des>span { width: 320px } .product-info .product-des ul { margin-top: 20px } .product-info .product-des ul li { height: 64px; line-height: 30px; font-size: 16px } .product-header { padding-top: 78px } .product-header .product-img { width: 680px; right: 0; margin-right: 0 } .product-font ul { margin-bottom: 40px } .product-font ul li { min-height: 580px } .product-font ul li h3 span { line-height: 88px; font-size: 64px } .product-font ul li h3 strong { line-height: 28px; font-size: 20px } .product-font ul li p { font-size: 18px; line-height: 28px; margin-top: 20px; padding: 0 20px } .customer-say { padding: 40px 0 } .tab-case .bd { width: 700px } .tab-case .bd .item-case .case-img p { height: 64px; line-height: 64px; font-size: 20px; padding: 0 30px } .tab-case .bd .item-case .case-info { margin: -74px 0 0 30px; padding: 80px 30px 30px } .tab-case .bd .item-case .case-info p { margin-top: 10px; line-height: 30px; font-size: 18px } .tab-case .hd { width: 480px } .tab-case .hd ul li { padding: 10px 10px 10px 140px; min-height: 140px } .tab-case .hd ul li .customer-img { width: 120px; height: 120px; padding: 0 0 10px 10px; margin-top: -60px } .tab-case .hd ul li .customer-img:before { width: 110px; height: 110px } .tab-case .hd ul li .customer-font { font-size: 18px; line-height: 30px } .tab-case .hd ul li+li { margin-top: 20px } .price-panel { height: 420px } .price-panel .txt-h2 { margin-bottom: 40px } .price-panel p { padding: 0 3%; font-size: 18px; line-height: 36px; margin-top: 30px } .price-panel .tag-img { width: 180px; height: 180px } .service-panel { padding: 50px 0 40px } .service-panel .service-img { margin: 30px -15px 0 } .h100 { height: 60px } .param-panel .param-header { padding: 20px 7.29927% 20px 5.10949% } .param-panel .param-header h2 { height: 50px; line-height: 50px; font-size: 20px } .param-panel .param-header .more { font-size: 20px; line-height: 50px; padding-right: 80px } .param-panel .param-header .more:before { width: 50px; height: 50px } } @media screen and (min-width: 1600px) { .wrap { width:100%; padding-left: 19%; } .site-wrap .wrap { padding-left: 0 } .fixed-header { position: fixed; top: 0; bottom: 0; width: 16.666666%; padding: 15px 0 100px 15px } .fixed-header .logo { width: 100% } .fixed-header .logo a img { left: 24%; margin: -24px 0 0 0 } .fixed-header ul { width: 100%; height: 86%; padding: 20px } .fixed-header ul li { width: 100% } .fixed-header ul li a { text-align: left; padding-left: 60px; line-height: 56px } .fixed-header ul li a i { left: 0; top: 27px; margin: 0 } .fixed-header ul li a i:after { content: ""; display: block; width: 3px; height: 3px; border-radius: 3px; position: absolute; top: -1px; right: -9px; background-color: #c1a468; -webkit-box-shadow: 0 0 6px #c1a468; -moz-box-shadow: 0 0 6px #c1a468; -ms-box-shadow: 0 0 6px #c1a468; -o-box-shadow: 0 0 6px #c1a468; box-shadow: 0 0 6px #c1a468 } .article-wrap>i { width: 83.333333% } .article-wrap .article-title { padding-top: 60px; padding-bottom: 20px; padding-left: 20% } .article-wrap .article-title>strong { line-height: 120px; height: 120px; overflow: hidden; font-size: 106px; text-align: left } .section { width: 980px } .section .bg-article { width: 102%; margin-left: -5%; padding-left: 5% } .section .pro-des { margin-left: -5%; width: 1000px; padding: 50px 100px 60px 150px; margin-bottom: 72px } .article-panel { margin-left: 5% } .singleParam { margin: 0 5% 30px } .site-wrap { padding-left: 16.666666%; min-height: 300px } .swiper-banner .swiper-font { width: 104%; margin: -220px 0 0 -4% } .swiper-banner .swiper-font .swiper-pagination { left: 4% } .swiper-banner .swiper-font .slide-des { padding: 50px 100px 30px 150px; width: 1000px; margin-left: 4% } .bg-01 .pic-panel { width: 32%; height: 460px } .bg-01 .font-panel { width: 66% } .bg-01 .font-panel>p { width: 70% } .bg-01 .font-panel dl { margin-left: 0; float: right; margin-right: 30px } .case-list { padding-left: 9%; padding-right: 0; margin-bottom: 90px } .case-list li { width: 50%; margin-top: 100px; margin-right: 0; margin-left: 0; padding: 0 10.5% 0 20px } .case-list li .case-panel .case-title p { padding: 0 32% 0 50px } .news-list li { width: 33% } .footer .footer-link { padding-right: 10% } .breadcrumb { padding: 40px } .breadcrumb a,.breadcrumb span { padding: 0 30px; margin: 0 40px } .btm-article>p { width: 65% } .page-banner .banner-bg .page-title { padding: 0 150px } .page-banner .banner-bg ul { padding: 30px 0 0 150px } .page-banner>span { left: -4% } .pro-list { padding-right: 14% } .pf-10 { padding-left: 10% } .about-panel.bg-f6 .wrap .lf-img { margin-left: 10% } .case-list-fst li .case-panel .case-title p { padding: 0 24% 0 50px } .case-list-fst li .case-panel .case-title p a { line-height: 36px; font-size: 24px } .news-list-fst { padding-left: 50px; padding-right: 10%; margin-top: 30px } .center-panel { padding-right: 16.666666% } .case-header { width: 105%; margin-left: -5% } .case-header>i { left: 0 } .case-header>h1 { margin-left: 0; width: 68%; padding: 56px 8% } .case-header>span { width: 95%; left: 5% } .case-header .detail-img { width: 1200px } .contact-page .page-banner>span { width: 70% } .contact-page .page-banner .wrap p { width: 58% } .contact-msg { padding-left: 5% } .contact-msg li { width: 416px } .nav-mark>i { display: block } .main-content { width: 1280px } .product-info { margin-left: -4%; padding: 30px 0 0 50px; width: 880px } .product-info h1 { line-height: 56px; font-size: 40px } .product-info p { font-size: 20px; line-height: 32px; margin: 15px 0 25px } .product-info a { width: 160px; height: 44px; line-height: 44px; border-radius: 44px; font-size: 18px } .product-info .product-des { margin-left: -50px; padding: 20px 0 0 50px; margin-top: 40px } .product-info .product-des>span { width: 380px } .product-info .product-des ul { margin-top: 30px } .product-info .product-des ul li { height: 64px; line-height: 30px; font-size: 18px } .product-header .product-img { width: 730px } .product-font { margin-left: 0; margin-top: -94px } .product-font ul { margin-bottom: 60px } .product-font ul li { min-height: 620px } .product-font ul li h3 span { line-height: 102px; font-size: 72px } .product-font ul li h3 strong { line-height: 36px; font-size: 24px } .product-font ul li p { font-size: 20px; line-height: 30px; margin-top: 24px } .customer-say { padding: 50px 0 } .tab-case .bd { width: 700px } .tab-case .bd .item-case .case-img p { height: 74px; line-height: 74px; font-size: 22px; padding: 0 40px } .tab-case .bd .item-case .case-info { margin: -74px 0 0 30px; padding: 80px 40px 40px } .tab-case .bd .item-case .case-info p { margin-top: 15px; line-height: 30px; font-size: 20px } .tab-case .hd { width: 520px } .tab-case .hd ul li .customer-font { font-size: 20px; line-height: 36px } .tab-case .hd ul li+li { margin-top: 30px } .price-panel { height: 460px } .price-panel .txt-h2 { margin-bottom: 60px } .price-panel p { padding: 0 5%; font-size: 20px; line-height: 36px; margin-top: 40px } .price-panel .tag-img { width: 220px; height: 220px } .service-panel { padding: 70px 0 60px } .service-panel .service-img { margin: 40px -15px 0 } .h100 { height: 80px } .param-panel .param-header { padding: 22px 7.29927% 22px 5.10949% } .param-panel .param-header h2 { font-size: 22px } .param-panel .param-header .more { font-size: 22px; line-height: 50px; padding-right: 80px } } @media screen and (min-width: 1720px) { .fdftm { width:150px } .product-info { margin-left: -5%; padding: 50px 0 0 70px; width: 950px } .product-info h1 { line-height: 60px; font-size: 44px } .product-info p { font-size: 22px; line-height: 36px; margin: 20px 0 30px } .product-info a { width: 180px; height: 50px; line-height: 50px; border-radius: 50px; font-size: 20px } .product-info .product-des { margin-left: -70px; padding: 20px 0 0 70px; margin-top: 50px } .product-info .product-des>span { width: 420px } .product-info .product-des ul { margin-top: 30px } .product-info .product-des ul li { height: 64px; line-height: 30px; font-size: 20px } .main-content { width: 1370px } .product-header .product-img { width: 800px } .tab-case .bd { width: 790px } .tab-case .hd { width: 540px } .tab-case .hd ul li+li { margin-top: 50px } .price-panel p { padding: 0 7%; font-size: 22px; line-height: 36px; margin-top: 40px } .price-panel .tag-img { width: 256px; height: 256px } .service-panel { padding: 90px 0 80px } .service-panel .service-img { margin: 55px -15px 0 } .h100 { height: 100px } .param-panel .param-header { padding: 25px 7.29927% 25px 5.10949% } } @media screen and (min-width: 1760px) { .section { width:1070px } .section .bg-article { width: 103%; margin-left: -6%; padding-left: 6% } .section .pro-des { margin-left: -6% } .swiper-banner .swiper-font { width: 105%; margin: -220px 0 0 -5% } .swiper-banner .swiper-font .swiper-pagination { left: 5% } .swiper-banner .swiper-font .slide-des { padding: 50px 100px 30px 150px; width: 1000px; margin-left: 5% } .bg-01 .pic-panel { width: 460px; height: 460px } .bg-01 .font-panel { width: 960px } .bg-01 .font-panel>p { width: 70% } .bg-01 .font-panel dl { margin-left: 180px } .news-list li { width: 32% } .page-banner>span { left: -5% } .case-list-fst { padding: 0 10% 0 0 } .contact-msg { padding-left: 10% } } @media screen and (min-width: 1820px) { .product-info { margin-left:-6%; padding: 50px 0 0 90px } .product-info .product-des { margin-left: -90px; padding: 20px 0 0 90px } } @media screen and (min-width: 1920px) { .wrap { width:100%; padding-left: 406px; } .site-wrap { padding-left: 320px } .fixed-header { width: 320px } .center-panel { padding-right: 320px } .article-wrap>i { width: 83% } } @keyframes leftMove { 0% { left: 40px } 50% { left: 20px } 100% { left: 40px } } @-webkit-keyframes leftMove /*Safari and Chrome*/ { 0% { left: 40px } 50% { left: 20px } 100% { left: 40px } } @keyframes rotateMove { from { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg) } to { transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg) } } @-webkit-keyframes rotateMove /*Safari and Chrome*/ { from { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg) } to { transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg) } } @keyframes opacityScale { 0% { opacity: 0; transform: scale(0.1); -webkit-transform: scale(0.1); -moz-transform: scale(0.1); -o-transform: scale(0.1); -ms-transform: scale(0.1) } 50% { opacity: .3; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1) } 100% { opacity: 0; transform: scale(0.1); -webkit-transform: scale(0.1); -moz-transform: scale(0.1); -o-transform: scale(0.1); -ms-transform: scale(0.1) } } @-webkit-keyframes opacityScale /*Safari and Chrome*/ { 0% { opacity: 0; transform: scale(0.1); -webkit-transform: scale(0.1); -moz-transform: scale(0.1); -o-transform: scale(0.1); -ms-transform: scale(0.1) } 50% { opacity: .3; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1) } 100% { opacity: 0; transform: scale(0.1); -webkit-transform: scale(0.1); -moz-transform: scale(0.1); -o-transform: scale(0.1); -ms-transform: scale(0.1) } } @keyframes scalePoint { 0% { transform: scale(0.1); -webkit-transform: scale(0.1); -moz-transform: scale(0.1); -o-transform: scale(0.1); -ms-transform: scale(0.1) } 100% { opacity: 0; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1) } } @-webkit-keyframes scalePoint /*Safari and Chrome*/ { 0% { transform: scale(0.1); -webkit-transform: scale(0.1); -moz-transform: scale(0.1); -o-transform: scale(0.1); -ms-transform: scale(0.1) } 100% { opacity: 0; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1) } } @keyframes planeFly { 0% { opacity: 0; left: 36px; top: 32px; transform: rotate(-7deg); -ms-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -webkit-transform: rotate(-7deg); -o-transform: rotate(-7deg) } 5% { opacity: 1; left: 36px; top: 32px; transform: rotate(-7deg); -ms-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -webkit-transform: rotate(-7deg); -o-transform: rotate(-7deg) } 25% { opacity: 1; left: 165px; top: 10px; transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); -webkit-transform: rotate(0); -o-transform: rotate(0) } 45% { opacity: 1; left: 315px; top: 20px; transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); -webkit-transform: rotate(0); -o-transform: rotate(0) } 50% { opacity: 0; left: 340px; top: 20px; transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); -webkit-transform: rotate(0); -o-transform: rotate(0) } 100% { opacity: 0; left: 340px; top: 20px; transform: rotate(0) rotate(-7deg); -ms-transform: rotate(0) rotate(-7deg); -moz-transform: rotate(0) rotate(-7deg); -webkit-transform: rotate(0) rotate(-7deg); -o-transform: rotate(0) rotate(-7deg) } } @-webkit-keyframes planeFly { 0% { opacity: 0; left: 36px; top: 32px; transform: rotate(-7deg); -ms-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -webkit-transform: rotate(-7deg); -o-transform: rotate(-7deg) } 5% { opacity: 1; left: 36px; top: 32px; transform: rotate(-7deg); -ms-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -webkit-transform: rotate(-7deg); -o-transform: rotate(-7deg) } 25% { opacity: 1; left: 165px; top: 10px; transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); -webkit-transform: rotate(0); -o-transform: rotate(0) } 45% { opacity: 1; left: 315px; top: 20px; transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); -webkit-transform: rotate(0); -o-transform: rotate(0) } 50% { opacity: 0; left: 340px; top: 20px; transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); -webkit-transform: rotate(0); -o-transform: rotate(0) } 100% { opacity: 0; left: 340px; top: 20px; transform: rotate(0) rotate(-7deg); -ms-transform: rotate(0) rotate(-7deg); -moz-transform: rotate(0) rotate(-7deg); -webkit-transform: rotate(0) rotate(-7deg); -o-transform: rotate(0) rotate(-7deg) } } @keyframes shipMove { 0% { opacity: 0; right: 340px; top: 36px; transform: rotate(18deg) rotateY(0deg); -ms-transform: rotate(18deg) rotateY(0deg); -moz-transform: rotate(18deg) rotateY(0deg); -webkit-transform: rotate(18deg) rotateY(0deg); -o-transform: rotate(18deg) rotateY(0deg) } 50% { opacity: 0; right: 340px; top: 36px; transform: rotate(18deg) rotateY(180deg); -ms-transform: rotate(18deg) rotateY(180deg); -moz-transform: rotate(18deg) rotateY(180deg); -webkit-transform: rotate(18deg) rotateY(180deg); -o-transform: rotate(18deg) rotateY(180deg) } 55% { opacity: 1; right: 340px; top: 36px; transform: rotate(18deg) rotateY(180deg); -ms-transform: rotate(18deg) rotateY(180deg); -moz-transform: rotate(18deg) rotateY(180deg); -webkit-transform: rotate(18deg) rotateY(180deg); -o-transform: rotate(18deg) rotateY(180deg) } 75% { opacity: 1; right: 175px; top: 55px; transform: rotate(0) rotateY(180deg); -ms-transform: rotate(0) rotateY(180deg); -moz-transform: rotate(0) rotateY(180deg); -webkit-transform: rotate(0) rotateY(180deg); -o-transform: rotate(0) rotateY(180deg) } 95% { opacity: 1; right: 50px; top: 32px; transform: rotate(-18deg) rotateY(180deg); -ms-transform: rotate(-18deg) rotateY(180deg); -moz-transform: rotate(-18deg) rotateY(180deg); -webkit-transform: rotate(-18deg) rotateY(180deg); -o-transform: rotate(-18deg) rotateY(180deg) } 100% { opacity: 0; right: 50px; top: 32px; transform: rotate(-18deg) rotateY(180deg); -ms-transform: rotate(-18deg) rotateY(180deg); -moz-transform: rotate(-18deg) rotateY(180deg); -webkit-transform: rotate(-18deg) rotateY(180deg); -o-transform: rotate(-18deg) rotateY(180deg) } } @-webkit-keyframes shipMove { 0% { opacity: 0; right: 340px; top: 36px; transform: rotate(18deg) rotateY(0deg); -ms-transform: rotate(18deg) rotateY(0deg); -moz-transform: rotate(18deg) rotateY(0deg); -webkit-transform: rotate(18deg) rotateY(0deg); -o-transform: rotate(18deg) rotateY(0deg) } 50% { opacity: 0; right: 340px; top: 36px; transform: rotate(18deg) rotateY(180deg); -ms-transform: rotate(18deg) rotateY(180deg); -moz-transform: rotate(18deg) rotateY(180deg); -webkit-transform: rotate(18deg) rotateY(180deg); -o-transform: rotate(18deg) rotateY(180deg) } 55% { opacity: 1; right: 340px; top: 36px; transform: rotate(18deg) rotateY(180deg); -ms-transform: rotate(18deg) rotateY(180deg); -moz-transform: rotate(18deg) rotateY(180deg); -webkit-transform: rotate(18deg) rotateY(180deg); -o-transform: rotate(18deg) rotateY(180deg) } 75% { opacity: 1; right: 175px; top: 55px; transform: rotate(0) rotateY(180deg); -ms-transform: rotate(0) rotateY(180deg); -moz-transform: rotate(0) rotateY(180deg); -webkit-transform: rotate(0) rotateY(180deg); -o-transform: rotate(0) rotateY(180deg) } 95% { opacity: 1; right: 50px; top: 32px; transform: rotate(-18deg) rotateY(180deg); -ms-transform: rotate(-18deg) rotateY(180deg); -moz-transform: rotate(-18deg) rotateY(180deg); -webkit-transform: rotate(-18deg) rotateY(180deg); -o-transform: rotate(-18deg) rotateY(180deg) } 100% { opacity: 0; right: 50px; top: 32px; transform: rotate(-18deg) rotateY(180deg); -ms-transform: rotate(-18deg) rotateY(180deg); -moz-transform: rotate(-18deg) rotateY(180deg); -webkit-transform: rotate(-18deg) rotateY(180deg); -o-transform: rotate(-18deg) rotateY(180deg) } } @keyframes rightMove { 0% { opacity: 1; right: -30px } 48% { opacity: 0; right: -60px } 52% { opacity: 0; right: -30px } 100% { opacity: 1; right: -60px } } @-webkit-keyframes rightMove /*Safari and Chrome*/ { 0% { opacity: 1; right: -30px } 48% { opacity: 0; right: -60px } 52% { opacity: 0; right: -30px } 100% { opacity: 1; right: -60px } } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight } .hvr-backward { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-property: transform; transition-property: transform } .hvr-backward:active,.hvr-backward:focus,.hvr-backward:hover { -webkit-transform: translateX(-8px); transform: translateX(-8px) } .hvr-grow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-property: transform; transition-property: transform } .hvr-grow:active,.hvr-grow:focus,.hvr-grow:hover { -webkit-transform: scale(1.1); transform: scale(1.1) } .hvr-float { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out } .hvr-float:active,.hvr-float:focus,.hvr-float:hover { -webkit-transform: translateY(-8px); transform: translateY(-8px) } .hvr-sink { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out } .hvr-sink:active,.hvr-sink:focus,.hvr-sink:hover { -webkit-transform: translateY(8px); transform: translateY(8px) } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } .animated.delay-1s { -webkit-animation-delay: 1s; animation-delay: 1s } .animated.delay-2s { -webkit-animation-delay: 2s; animation-delay: 2s } .animated.delay-3s { -webkit-animation-delay: 3s; animation-delay: 3s } .animated.delay-4s { -webkit-animation-delay: 4s; animation-delay: 4s } .animated.delay-5s { -webkit-animation-delay: 5s; animation-delay: 5s } .animated.fast { -webkit-animation-duration: 800ms; animation-duration: 800ms } .animated.faster { -webkit-animation-duration: 500ms; animation-duration: 500ms } .animated.slow { -webkit-animation-duration: 2s; animation-duration: 2s } .animated.slower { -webkit-animation-duration: 3s; animation-duration: 3s } @media (print), (prefers-reduced-motion) { .animated { -webkit-animation: unset !important; animation: unset !important; -webkit-transition: none !important; transition: none !important } } .ly-note { font-size: 16px; color: #ccc; line-height: 36px } .fixed-notice { display: none; width: 100%; background: #061a37; padding: 20px 200px; overflow: hidden; position: fixed; left: 0; top: 0; z-index: 1090 } .fixed-notice p { width: 100%; font-size: 18px; color: #fff; line-height: 36px; overflow: hidden; text-align: center } .fixed-notice span { display: block; position: absolute; right: 20px; top: 50%; height: 36px; padding: 0 20px; border-radius: 36px; background: #fff; color: #061a37; font-size: 16px; margin-top: -18px; line-height: 36px; cursor: pointer; transition: all .3s linear } .fixed-notice span:hover { opacity: .9 } .notice-placeholder { width: 100%; height: 76px; display: none } .fixed-notice.active,.notice-placeholder.active { display: block } .msg-confirm { overflow: hidden; background: rgba(0,0,0,0.5); position: fixed; left: 0; right: 0; top: 50%; bottom: 50%; z-index: 9999; transition: all .5s } .msg-confirm .msg-box { width: 629px; background: #1d2c3d; padding: 30px; position: absolute; left: 50%; top: 50%; margin: -100px 0 0 -315px } .msg-confirm .msg-box .text { font-size: 18px; color: #d7d7d7; text-align: center } .msg-confirm dl { font-size: 0 } .msg-confirm dl dd,.msg-confirm dl dt { display: inline-block; vertical-align: middle } .msg-confirm dl dt { margin-left: 85px } .msg-confirm dl dd p { font-size: 20px; color: #fff; text-align: center; position: relative; margin-top: 40px } .msg-confirm dl dd p label { background: #1d2c3d; font-size: 15px; color: #ababab; font-family: FuturaStd_Medium; line-height: 1; padding: 0 10px; display: block; position: absolute; left: 15px; top: -6px } .msg-confirm dl dd p input { width: 340px; height: 53px; background: 0 0; border: 1px solid #51534f; font-size: 18px; color: #ceaa61; font-family: FuturaStd_Light; padding: 10px 0 0 22px } .msg-confirm dl dt a { width: 130px; height: 42px; background: #fff; border-radius: 50px; font-size: 18px; color: #1d2c3d; font-family: FuturaStd_Light; text-align: center; line-height: 42px; display: block; margin-top: 40px } .msg-confirm dl dt .submit { background: #ffa23f; margin-top: 44px; box-shadow: 0 6px 9px rgba(233,144,48,0.6) } .msg-show { top: 0; bottom: 0 } .swt-panel { position: fixed; width: 168px; right: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); z-index: 9999 } .swt-panel .swt-content { cursor: pointer; width: 100%; height: 240px; background: url("../images/swt_bg.png") center top no-repeat } .swt-panel .swt-content p { position: absolute; top: 144px; width: 149px; left: 10px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; background: #fff; display: block; line-height: 22px; font-size: 16px; color: #c8ae79; font-family: 'Lato_Regular', Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; padding: 10px 15px 10px; -webkit-box-shadow: 0 6px 6px rgba(64,8,29,0.2); -moz-box-shadow: 0 6px 6px rgba(64,8,29,0.2); -ms-box-shadow: 0 6px 6px rgba(64,8,29,0.2); -o-box-shadow: 0 6px 6px rgba(64,8,29,0.2); box-shadow: 0 6px 6px rgba(64,8,29,0.2) } .swt-panel .swt-content p strong { color: #c88600; font-size: 18px; line-height: 24px; font-family: 'FuturaBT_Bold', Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; font-weight: normal }