.button_menu, .button_menu .menu span, .news_list .text_desc h3, .read_more, .btn_default, .btn_default:after, .btn_default:before, .btn_default span, .btn_default span i, .crumbs ul li a, .crumbs ul li a i, .solu_group_list .group_wrapper .img-box:after, .pro_list li > a > .img-box .img_thumbnail, .pro_list li > a > .img-box .icon_link, .hot_mod .tig, .nav-tabs_wrapper .nav-tabs li a, .nav-tabs_wrapper .select-wrapper .select-button, .loading .label:before, .loading .label:after, .btn-primary .shape:before, .btn-primary .shape:after, .video_wrapper .videopopup .btn_video_pause, .pagination a, .pagings a, .pagings a span, .news_mod_list figcaption .desc, .news_mod_list .category, .history_slick_date .slick_item em, .history_slick_date .slick_item time, .validate_form .form-control, .support ul li .quest .icon_arrow, .support ul li .icon_arrow, .support ul li .icon_arrow:after, .support ul li .icon_arrow:before, .support ul li .icon_arrow em { -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .hot_mod figcaption h1, .share a { -moz-transition: color .36s ease; -o-transition: color .36s ease; -webkit-transition: color .36s ease; transition: color .36s ease } .poster figcaption, .pro_swiper .arrow_slick, .pro_picture .text-info, .pro_picture .text_primary, .hot_news article, .global .list .box p, .global .bg, .location figcaption, .service .caption, .popover .container { -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%) } @font-face { font-family: "Lato_medium"; src: url('../assets/fonts/LatoMedium/Lato-Medium.eot?1644992441'); src: url('../assets/fonts/LatoMedium/Lato-Medium.eot?&1644992441#iefix') format('embedded-opentype'), url('../assets/fonts/LatoMedium/Lato-Medium.woff2?1644992437') format('woff2'), url('../assets/fonts/LatoMedium/Lato-Medium.woff?1644992437') format('woff'), url('../assets/fonts/LatoMedium/Lato-Medium.ttf?1644992441') format('truetype'); font-weight: 400; font-style: normal } @font-face { font-family: "Lato_Bold"; src: url('../assets/fonts/LatoBold/LatoBold.eot?1644992436'); src: url('../assets/fonts/LatoBold/LatoBold.eot?&1644992436#iefix') format('embedded-opentype'), url('../assets/fonts/LatoBold/LatoBold.woff2?1644992436') format('woff2'), url('../assets/fonts/LatoBold/LatoBold.woff?1644992436') format('woff'), url('../assets/fonts/LatoBold/LatoBold.ttf?1644992436') format('truetype'); font-weight: 400; font-style: normal } @font-face { font-family: "Lato_Light"; src: url('../assets/fonts/LatoLight/LatoLight.eot?1644992435'); src: url('../assets/fonts/LatoLight/LatoLight.eot?&1644992435#iefix') format('embedded-opentype'), url('../assets/fonts/LatoLight/LatoLight.woff2?1644992435') format('woff2'), url('../assets/fonts/LatoLight/LatoLight.woff?1644992435') format('woff'), url('../assets/fonts/LatoLight/LatoLight.ttf?1644992435') format('truetype'); font-weight: 400; font-style: normal } @font-face { font-family: "GothamBook"; src: url('../assets/fonts/GothamBook/GothamBook.eot?1644992433'); src: url('../assets/fonts/GothamBook/GothamBook.eot?&1644992433#iefix') format('embedded-opentype'), url('../assets/fonts/GothamBook/GothamBook.woff2?1644992433') format('woff2'), url('../assets/fonts/GothamBook/GothamBook.woff?1644992433') format('woff'), url('../assets/fonts/GothamBook/GothamBook.ttf?1644992433') format('truetype'); font-weight: 400; font-style: normal } @font-face { font-family: "Franklin Gothic Demi Cond"; src: url('../assets/fonts/Franklin Gothic Demi Cond/Franklin Gothic Demi Cond.eot?1644992435'); src: url('../assets/fonts/Franklin Gothic Demi Cond/Franklin Gothic Demi Cond.eot?&1644992435#iefix') format('embedded-opentype'), url('../assets/fonts/Franklin Gothic Demi Cond/Franklin Gothic Demi Cond.woff2?1644992433') format('woff2'), url('../assets/fonts/Franklin Gothic Demi Cond/Franklin Gothic Demi Cond.woff?1644992434') format('woff'), url('../assets/fonts/Franklin Gothic Demi Cond/Franklin Gothic Demi Cond.ttf?1644992434') format('truetype'); font-weight: 400; font-style: normal } a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { border: 0; font-size: 100%; font: inherit; margin: 0; padding: 0; vertical-align: baseline; font-family: "PingFang SC", "Source Han Sans CN", "Microsoft YaHei", "STSong", "SimSun", Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block } body { line-height: 1; text-size-adjust: none } ol, ul { list-style: none } blockquote, q { quotes: none } blockquote::after, blockquote::before, q::after, q::before { content: ""; content: none } table { border-collapse: collapse; border-spacing: 0 } input, select, textarea { -moz-appearance: none; -webkit-appearance: none; appearance: none; border-radius: 0 } * { -webkit-tap-highlight-color: transparent; box-sizing: border-box } a { outline: 0; text-decoration: none; color: inherit; color: #fff } a:hover { text-decoration: none } body, input, textarea { font-family: "PingFang SC", "Source Han Sans CN", "Microsoft YaHei", "STSong", "SimSun", Arial, sans-serif } input[type='text']:-webkit-autofill { box-shadow: 0 0 0 1000px #fff inset } [class*=' icon-'], [class^=icon-] { font-family: "iconfont"; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-style: normal; font-variant: normal; line-height: 1; speak: none; text-transform: none } input[type=text]::-ms-clear, input[type=tel]::-ms-clear, input[type=number]::-ms-clear { display: none } .mt-10 { margin-top: 10px } .mt-20 { margin-top: 20px } .mt-30 { margin-top: 30px } .mt-40 { margin-top: 40px } .mt-50 { margin-top: 50px } .mt-60 { margin-top: 60px } .mt-70 { margin-top: 70px } .mt-80 { margin-top: 80px } .mt-90 { margin-top: 90px } .mt-100 { margin-top: 100px } .mt-110 { margin-top: 110px } .mt-120 { margin-top: 120px } .mt-130 { margin-top: 130px } .mt-140 { margin-top: 140px } .mt-150 { margin-top: 150px } .mt-160 { margin-top: 160px } .mt-170 { margin-top: 170px } .mt-180 { margin-top: 180px } .mt-200 { margin-top: 200px } .pt-150 { padding-top: 150px } .d-inline-block { display: inline-block; vertical-align: top } .d-none { display: none } .d-block { display: block } .v-rl { writing-mode: vertical-rl; -ms-writing-mode: tb-rl } .v-lr { writing-mode: vertical-lr; -ms-writing-mode: tb-lr } .contact-map .BMapLabel { border: 0 } .contact-map .anchorBL { display: none } .list { position: relative; font-size: 0 } .list > li { display: inline-block; vertical-align: top } .list-1 > li { width: 100% } .list-2 > li { width: 50% } .list-3 > li { width: 33.3333% } .list-4 > li { width: 25% } .list-5 > li { width: 20% } .list-6 > li { width: 16.6666% } .img-box { position: relative } .img-box::before { content: ""; display: block } .img-box > img { left: 0; position: absolute; top: 0; width: 100% } .bg-cover { background-repeat: no-repeat; background-position: center center; background-size: cover } .bg-contain { background-repeat: no-repeat; background-position: center center; background-size: contain } .wx-share { margin-top: -130px; margin-left: -120px; border-radius: 3px; position: fixed; z-index: 1000; top: 50%; left: 50%; padding: 20px 10px; width: 240px; height: 280px; background-color: #fff; cursor: pointer; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1) } .wx-share img { display: block; width: 100% } .wx-share p { font-size: 12px; line-height: 20px; text-align: center; font-weight: 500; color: #000 } .wx-share i { position: absolute; top: 0; right: 0; font-size: 12px; width: 2.5em; height: 2.5em; line-height: 2.5; text-align: center; color: #000 } .ui-mini-mt { margin-left: 8.33333%; margin-right: 8.33333% } .ui-mini-pt { padding-left: 8.33333%; padding-right: 8.33333% } .ui-mini { margin-left: 13.54167%; margin-right: 13.54167% } .ui-float-left { float: left } .ui-float-right { float: right } .ui-auto { margin-left: auto; margin-right: auto } .ui-wd { width: 52.08333% } .clearfix { zoom: 1 } .clearfix:after { content: ""; display: block; clear: both } .fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 3000 } .relative { position: relative } .text-align_left { text-align: left } .text-align_center { text-align: center } .text-align_right { text-align: right } .col-md-6 { width: 50% } .ui-pull_right { right: 0 } .ui-pull_left { left: 0 } .bgcolor { background-color: #F7F7F7 } .ellipsis { display: -webkit-box; -webkit-line-clamp: 4; overflow: hidden; height: 100px } .clamp-1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden } .sn-hidden { display: none !important } .sn-visible { display: block !important } .header, .wrapper, .footer, .navbar { max-width: 100%; min-width: 320px } .wrapper { overflow: hidden } .windowBar { overflow-y: scroll } .windowBar::-webkit-scrollbar { width: 0px; height: 0px } .windowBar::-moz-scrollbar { width: 0px; height: 0px } .windowBar::-o-scrollbar { width: 0px; height: 0px } .windowBar::-ms-scrollbar { width: 0px; height: 0px } .windowBar::-webkit-scrollbar-button { display: none } .windowBar::-moz-scrollbar-button { display: none } .windowBar::-ms-scrollbar-button { display: none } .windowBar::-o-scrollbar-button { display: none } .windowBar::-webkit-scrollbar-track-piece { background: #fafafa } .windowBar::-moz-scrollbar-track-piece { background: #fafafa } .windowBar::-ms-scrollbar-track-piece { background: #fafafa } .windowBar::-o-scrollbar-track-piece { background: #fafafa } .windowBar::-webkit-scrollbar-thumb { background: #eee; border-radius: 4px } .windowBar::-moz-scrollbar-thumb { background: #eee; border-radius: 4px } .windowBar::-ms-scrollbar-thumb { background: #eee; border-radius: 4px } .windowBar::-o-scrollbar-thumb { background: #eee; border-radius: 4px } @-webkit-keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp } @-webkit-keyframes fadeInUpSmall { from { opacity: 0; -webkit-transform: translate3d(0, 80px, 0); transform: translate3d(0, 80px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInUpSmall { from { opacity: 0; -webkit-transform: translate3d(0, 80px, 0); transform: translate3d(0, 80px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInUpSmall { -webkit-animation-name: fadeInUpSmall; animation-name: fadeInUpSmall } .fadeInUpSlow { -webkit-animation-name: fadeInUpSlow; animation-name: fadeInUpSlow } @keyframes fadeInUpSlow { from { opacity: 0; -webkit-transform: translate3d(0, 80px, 0); transform: translate3d(0, 80px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInUpSlowTo { -webkit-animation-name: fadeInUpSlowTo; animation-name: fadeInUpSlowTo } @keyframes fadeInUpSlowTo { from { opacity: 0; -webkit-transform: translate3d(50px, 50px, 0); transform: translate3d(50px, 50px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft } @-webkit-keyframes fadeInLeftSmall { from { opacity: 0; -webkit-transform: translate3d(-40px, 0, 0); transform: translate3d(-40px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInLeftSmall { from { opacity: 0; -webkit-transform: translate3d(-40px, 0, 0); transform: translate3d(-40px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInLeftSmall { -webkit-animation-name: fadeInLeftSmall; animation-name: fadeInLeftSmall } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight } @-webkit-keyframes fadeInRightSmall { from { opacity: 0; -webkit-transform: translate3d(40px, 0, 0); transform: translate3d(40px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInRightSmall { from { opacity: 0; -webkit-transform: translate3d(40px, 0, 0); transform: translate3d(40px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInRightSmall { -webkit-animation-name: fadeInRightSmall; animation-name: fadeInRightSmall } @-webkit-keyframes fadeZoom { from { -webkit-transform: scale3d(1.2, 1.2, 1.2); transform: scale3d(1.2, 1.2, 1.2) } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } } @keyframes fadeZoom { from { -webkit-transform: scale3d(1.2, 1.2, 1.2); transform: scale3d(1.2, 1.2, 1.2) } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } } .fadeZoom { -webkit-animation-name: fadeZoom; animation-name: fadeZoom } .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 } .animated.delay { -webkit-animation-delay: 0s; animation-delay: 0s } .animated.trans { animation-timing-function: cubic-bezier(0.59, 0.5, 0.41, 0.92); -webkit-animation-timing-function: cubic-bezier(0.59, 0.5, 0.41, 0.92) } @media (prefers-reduced-motion) { .animated { -webkit-animation: unset !important; animation: unset !important; -webkit-transition: none !important; transition: none !important } } .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0 } .slick-list:focus { outline: 0 } .slick-list.dragging { cursor: pointer; cursor: hand } .slick-slider .slick-list, .slick-slider .slick-track { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto } .slick-track::after, .slick-track::before { display: table; content: "" } .slick-track::after { clear: both } .slick-loading .slick-track { visibility: hidden } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; outline: 0 } .slick-slide a { outline: 0 } [dir=rtl] .slick-slide { float: right } .slick-slide img { display: block } .slick-slide.slick-loading img { display: none } .slick-slide.dragging img { pointer-events: none } .slick-initialized .slick-slide { display: block } .slick-loading .slick-slide { visibility: hidden } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent } .slick-arrow.slick-hidden { display: none } .banner-dots { position: absolute; bottom: 20px; right: 0; left: 0; font-size: 0; text-align: center } .banner-dots li { margin: 0 8px; display: inline-block; vertical-align: top } .banner-dots li button { position: relative; display: inline-block; padding: 0; border: 0; font-size: 0; background-color: transparent; outline: 0; cursor: pointer } .banner-dots li button::before { -moz-transition: border .3s ease-out; -o-transition: border .3s ease-out; -webkit-transition: border .3s ease-out; transition: border .3s ease-out; content: ""; display: block; width: 5px; height: 5px; border-radius: 50%; background-color: #bababa } .banner-dots li.slick-active button::before { background-color: #0075c2 } .footer { padding-top: 77px; background-repeat: no-repeat; background-position: center center; background-size: cover; background-color: #202020; position: relative; overflow: hidden } .footer .cont { padding-left: 8.33333%; padding-right: 8.33333%; padding-bottom: 60px } .footer .copy { margin-right: 12px } .footer .right { margin-right: 30px } .footer .code { margin-right: 30px } .footer dl { display: inline-block; vertical-align: top } .footer dl dt { font-size: 18px; font-size: 16px; color: #DC5F00; line-height: 30px; margin-bottom: 16px; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .footer dl dt a { font-size: 18px; font-size: 16px; color: #DC5F00; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .footer dl dd { font-size: 16px; font-size: 14px; color: #fff; color: #999; line-height: 36px; letter-spacing: 1px; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .footer dl dd a { font-size: 16px; font-size: 14px; color: #fff; color: #999; line-height: 36px; letter-spacing: 1px; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .footer dl dd i { display: inline-block; vertical-align: -5px; width: 38px; font-size: 24px } .footer dl dd .icon-icon_email:before { margin-left: -8px } .footer dl dd .icon-icon_tel1:before { margin-left: -3px } .footer .link { float: right; width: 650px; font-size: 0; margin-right: -112px } .footer .link dl { margin-bottom: 30px; width: 33.33333% } .footer .link dd { line-height: 30px } .footer .link dd a { line-height: 30px } .footer .copyringht { font-size: 14px; line-height: 30px; color: #fff; background-color: #000; padding-top: 20px; padding-bottom: 20px; padding-left: 8.33333%; padding-right: 8.33333%; position: relative; z-index: 5000 } .footer .copyringht span { font-size: 12px; line-height: 30px; color: #fff } .footer .copyringht a { -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease; font-size: 14px; line-height: 30px; color: #fff } .footer .design { font-size: 14px; color: #fff } .footer .share { margin-top: 20px; margin-left: -10px } .footer .share a { color: #fff; position: relative } .footer .share .btn-youku { font-size: 48px; vertical-align: -14px } .footer .share .code { position: absolute; width: 100px; top: 0px; left: 50%; margin-left: -50px; padding-top: 26px; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease; -moz-transform: translate(0, 20px); -ms-transform: translate(0, 20px); -webkit-transform: translate(0, 20px); transform: translate(0, 20px); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; visibility: hidden } .footer .bgcover { position: absolute; bottom: 0; left: 0; background-image: url(../upload/footer/bgcover.svg); background-repeat: no-repeat; background-position: center center; background-size: cover; width: 40%; padding-top: 40%; bottom: -272px; left: -127px } .btn_backtop { display: block; display: none; width: 86px; height: 86px; width: 60px; height: 60px; position: relative; text-align: center; position: fixed; bottom: 100px; right: 0; z-index: 6000 } .btn_backtop .box { position: absolute; top: 50%; left: 0; width: 100%; margin-top: -14px; z-index: 70; font-size: 14px; font-family: "GothamBook"; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .btn_backtop:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; -moz-transform: scale(0.7, 0.7) rotate(45deg); -ms-transform: scale(0.7, 0.7) rotate(45deg); -webkit-transform: scale(0.7, 0.7) rotate(45deg); transform: scale(0.7, 0.7) rotate(45deg); z-index: 50; margin-top: 0px; margin-left: -10px; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .btn_backtop:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #DC5F00; -moz-transform: scale(0.7, 0.7) rotate(45deg); -ms-transform: scale(0.7, 0.7) rotate(45deg); -webkit-transform: scale(0.7, 0.7) rotate(45deg); transform: scale(0.7, 0.7) rotate(45deg); z-index: 60 } .btn_backtop span { position: relative; z-index: 200; color: #fff; display: block; line-height: 12px } .btn_backtop .text { font-size: 12px } .tips { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999999 } .tips .tt_container { position: absolute; top: 50%; left: 50%; width: 545px; height: 285px; background-color: #fff; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); padding: 77px 0 } .tips .icon { display: block; width: 80px; height: 80px; border-radius: 50%; border: 2px solid #DC5F00; margin-left: auto; margin-right: auto; text-align: center; line-height: 80px; color: #DC5F00; font-size: 24px } .tips p { font-size: 20px; line-height: 30px; color: #333; text-align: center; margin-top: 25px; padding: 0 30px } .tips .btn_close { position: absolute; top: 6px; right: 14px; width: 50px; height: 50px; text-align: center; line-height: 50px; color: #DC5F00 } @media only screen and (min-width: 1025px) { .btn_backtop:hover:after { margin-left: 0 } .footer dl dd:hover a { color: #DC5F00; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1 } .footer dl dt:hover a { color: #fff; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1 } .footer .copyringht a:hover { color: #DC5F00; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1 } .footer .share .icon-icon_wx:hover .code { -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; visibility: visible } .footer .share .icon-douyin:hover .code { -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; visibility: visible } .footer .share .icon-tengxunshipin:hover .code { -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; visibility: visible } } @media only screen and (max-width: 1024px) { .footer { position: relative } .footer dl.msg, .footer dl.link { display: none } .footer .link { display: none } .footer .cont { padding-left: 5.33333%; padding-right: 5.33333% } .footer .copyringht { padding-left: 5.33333%; padding-right: 5.33333% } .footer .code, .footer .plain, .footer .design { display: none } .btn_backtop { position: fixed; bottom: 50px; right: 0; width: 50px; height: 50px } .btn_backtop:after { margin-left: -5px } .footer .copyringht span { font-size: 12px } .footer .copy { margin-right: 0 } } @media only screen and (max-width: 768px) { .footer dl dt { font-size: 16px } .footer dl dd { font-size: 14px; line-height: 26px } .footer .share a { font-size: 12px } .footer .copyringht { font-size: 12px; padding-top: 18px; padding-bottom: 18px } .footer { padding-top: 30px; background-position: -235px -94px } .footer .cont { padding-bottom: 40px } .tips .tt_container { width: 90%; height: 210px; padding: 60px 0 } .tips .icon { width: 40px; height: 40px; line-height: 40px } .tips .icon { font-size: 18px } .tips p { font-size: 18px } } .header { background-color: #000; padding-left: 8.33333%; padding-left: 2.33333%; height: 88px } .header .logo { display: block; width: 116px; height: 39px; background-image: url(../assets/img/logo.svg); background-repeat: no-repeat; background-position: center center; background-size: 116px auto; margin-top: 24px } .header .btn_tools { font-size: 0; position: relative; z-index: 20 } .header .telphone { display: inline-block; color: #fff; font-family: "GothamBook"; line-height: 100px; line-height: 88px; font-size: 0; height: 100px; height: 88px } .header .telphone .icon-icon_tel { margin-right: 15px } .header .telphone span { display: inline-block; height: 100% } .header .telphone .tel { font-size: 18px } .header .btn { display: inline-block; width: 100px; width: 88px; height: 100px; height: 88px; text-align: center; line-height: 100px; line-height: 88px; color: #fff; border-right: 1px solid rgba(255, 255, 255, 0.2); vertical-align: top; position: relative; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .header .btn a { color: #fff } .header .btn_lang > a { margin-left: 20px; font-size: 16px } .header .btn_search { font-size: 16px; font-size: 26px; font-size: 20px; border-left: 1px solid rgba(255, 255, 255, 0.2) } .header .btn_lang { font-size: 14px } .header .btn_inquiry { font-size: 28px; font-size: 26px; font-size: 20px; background-color: #DC5F00 } .header .btn_tools_menu { position: absolute; top: 50%; right: 0; display: none; margin-right: 0; margin-top: -40px } .header .options { width: 130px; font-size: 0; line-height: normal; background-color: #DC5F00; padding: 10px 20px; position: absolute; top: 100%; left: 50%; height: 100px; height: 180px; overflow: hidden; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease; width: 0; -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; visibility: hidden } .header .options li { width: 100%; display: inline-block; vertical-align: top; padding-top: 10px; padding-bottom: 10px; line-height: normal } .header .options li a { font-size: 14px; color: #fff; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .header_bg { height: 88px } .otherpage .header_bg { height: 138px } .button_menu { width: 80px; height: 80px; position: relative; margin-top: 10px; margin-right: 28px } .button_menu .menu { display: block; width: 30px; height: 26px; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .button_menu .menu span { display: block; width: 100%; height: 2px; background-color: #fff; position: absolute; left: 0 } .button_menu .menu span:nth-child(1) { top: 0 } .button_menu .menu span:nth-child(2) { top: 50%; margin-top: -1px } .button_menu .menu span:nth-child(3) { bottom: 0 } .button_close .menu span:nth-child(2) { display: none } .navbar { width: calc(100% - 116px - 88px); position: relative } .navbar .nav { margin-left: 60px; font-size: 0; position: relative; z-index: 20 } .navbar .nav > li { display: inline-block; margin-right: 30px; position: relative } .navbar .nav > li > a { display: block; font-size: 16px; color: #fff; line-height: 100px; line-height: 88px; position: relative; z-index: 2000 } .navbar .nav > li > a span { display: inline-block; width: 20px; padding-left: 8px } .navbar .nav > li > a span:before { display: none } .navbar .nav > li > a .hasClass { width: 42px } .navbar .nav > li > a .hasClass:before { display: block } .navbar .nav > li > a:after { content: ""; position: absolute; display: block; width: 100%; bottom: 0; height: 2px; background-color: #DC5F00; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .navbar .nav > li:last-child { margin-right: 0 } .navbar .bgcover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10 } .navbar .dropdown { position: absolute; top: 88px; left: -60px; width: 130px; width: 20vw; z-index: 1000; width: 60vw } .navbar .dropdown .dropdown-menu_wrapepr { padding-top: 30px; padding-bottom: 34px } .navbar .dropdown .dropdown-menu_wrapepr:after { content: ""; display: block; position: absolute; top: 0; left: -50vw; width: 200vw; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 200 } .dropnav { display: none; position: fixed; top: 100px; left: 0; right: 0; width: 100%; z-index: 3010; visibility: hidden; opacity: 0; transition: opacity .125s ease-in-out, visibility 1ms linear .1125s, transform .36s ease; -moz-transform: translate(0, 20px) scale(1, 0); -ms-transform: translate(0, 20px) scale(1, 0); -webkit-transform: translate(0, 20px) scale(1, 0); transform: translate(0, 20px) scale(1, 0) } .dropnav .dropnav_wrapper { background-color: #DC5F00; width: 958px; height: 282px; -moz-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; transition: all .25s ease-in-out; position: relative } .dropnav .dropnav_wrapper .dropdown { font-size: 0; height: 282px; overflow: hidden } .dropnav .dropnav_wrapper:after { content: ""; display: block; position: absolute; top: -12px; left: 138px; border-bottom: 12px solid #DC5F00; border-left: 12px solid transparent; border-right: 12px solid transparent; margin-left: -30px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; visibility: hidden; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .dropnav_wrapper ul, .navbar .dropdown ul { display: inline-block; vertical-align: top; padding-right: 60px; padding-left: 60px } .dropnav_wrapper ul:last-child, .navbar .dropdown ul:last-child { border-right: none } .dropnav_wrapper li, .navbar .dropdown li { padding-top: 10px; padding-bottom: 10px } .dropnav_wrapper li a, .navbar .dropdown li a { font-size: 14px; line-height: 20px; color: #fff; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease; position: relative } .dropnav_wrapper .level_wrapper, .navbar .dropdown .level_wrapper { display: inline-block; vertical-align: top; position: relative; z-index: 300; border-left: 1px solid rgba(255, 255, 255, 0.15) } .dropnav_wrapper .level_wrapper .level, .navbar .dropdown .level_wrapper .level { display: none } .dropnav_wrapper .level_wrapper li a, .navbar .dropdown .level_wrapper li a { color: #999 } .dropnav_wrapper .dropdown-menu, .navbar .dropdown .dropdown-menu { display: inline-block; vertical-align: top; position: relative; z-index: 300 } .dropnav_wrapper .img-box, .navbar .dropdown .img-box { width: 270px; display: inline-block; vertical-align: top; overflow: hidden; position: relative; z-index: 300; margin-left: 60px } .dropnav_wrapper .img-box:before, .navbar .dropdown .img-box:before { padding-top: 104.44444% } .dropnav_wrapper .img-box > img, .navbar .dropdown .img-box > img { height: 100%; width: auto; left: 50%; -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0) } .formsearch { position: absolute; top: 0; right: 200px; right: 176px; right: 88px; height: 100px; height: 88px; background-color: #000; font-size: 0; padding-left: 30px; width: 375px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; visibility: hidden; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease; border-right: 1px solid rgba(255, 255, 255, 0.2); z-index: 20 } .formsearch .form-group { display: inline-block; width: 260px; width: 75%; height: 60px; margin-top: 14px; vertical-align: top; position: relative; margin-right: -15px; -moz-transition: all .8s ease; -o-transition: all .8s ease; -webkit-transition: all .8s ease; transition: all .8s ease; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; visibility: hidden; width: 0; position: absolute; top: 0; right: 25% } .formsearch .form-control { display: block; padding: 0; margin: 0; border: none; background: none; height: 100%; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.6); font-size: 14px; color: #ffff; padding: 0 20px } .formsearch .form-control + label { position: absolute; top: 22px; left: 20px; font-size: 14px; color: #fff } .formsearch .form-control::-webkit-input-placeholder { font-size: 14px; color: #fff } .formsearch .form-control::-moz-placeholder { font-size: 14px; color: #fff } .formsearch .form-control:-ms-input-placeholder { font-size: 14px; color: #fff } .formsearch .form-control:-moz-placeholder { font-size: 14px; color: #fff } .formsearch .form-group.on .form-control + label { display: none } .formsearch .form-control:focus { outline: none } .formsearch .button { padding: 0; margin: 0; border: none; background: none; display: inline-block; width: 88px; height: 88px; line-height: 88px; text-align: center; color: #fff; cursor: pointer; font-size: 16px; font-size: 20px; float: right } .formsearch .button:focus { outline: none } .formsearch.active { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; visibility: visible } .formsearch.active .form-group { width: calc(100% - 100px); filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; visibility: visible } .container-full { background-color: rgba(0, 0, 0, 0.8); position: fixed; top: 88px; left: 0; width: 100%; z-index: 2500 } .language-box { display: none; text-align: right; padding: 40px 0 70px 0; font-size: 0; padding-right: 32px } .language-box dl { display: inline-block; margin: 0 13px; vertical-align: top; text-align: left } .language-box dl img { display: inline-block; vertical-align: middle; margin-right: 20px; position: absolute; top: 0; left: 0 } .language-box dt { font-size: 20px; color: #fff; padding-bottom: 15px } .language-box dt a { color: #fff; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s } .language-box dd { display: inline-block; display: block; margin-top: 16px } .language-box dd a { display: block; font-size: 14px; color: #fff; border-bottom: 1px solid #303030; padding-bottom: 16px; padding-right: 45px; position: relative; padding-left: 42px } @media only screen and (max-width: 1280px) { .navbar .nav { margin-left: 30px } .navbar .nav > li { margin-right: 20px } } @media only screen and (min-width: 1025px) { .dropdown .dropdown-menu_wrapepr { display: none } .header .btn_inquiry:hover { background-color: rgba(220, 95, 0, 0.8) } .header .btn_lang:hover .options { width: 100%; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; visibility: visible } .options a:hover, .dropnav_wrapper li a:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: .8 } .header .btn_lang > a, .navbar .nav > li > a { -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .navbar .dropdown li a:hover, .navbar .dropdown li.active a { color: #DC5F00 } .navbar .nav > li > a:after { width: 0; left: auto; right: 0 } .navbar .nav > li:hover > a:after, .navbar .nav > li.active > a:after { width: 100%; left: 0; right: 100% } .header .btn_search:hover, .header .btn_lang:hover > a, .navbar .nav > li.active > a, .navbar .nav > li:hover > a { color: #DC5F00 } .language-box dd a { -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .language-box dd a:hover { color: #DC5F00 } } @media only screen and (max-width: 1130px) { .header .btn_tools_menu { display: none } .navbar .dropdown { display: none } .navbar .nav > li > a:after { display: none } .navbar .dropdown ul { padding-left: 0; padding-right: 0; display: block } .navbar .dropdown .dropdown-menu { display: block; width: 100%; position: relative; padding: 0; padding-top: 0 } .header { padding-left: 5.33333%; height: auto } .header .logo { width: 148px; height: 62px; background-size: 148px auto; margin-top: 19px } .navbar { display: none; position: fixed; top: 100px; left: 0; width: 100%; height: calc(100vh - 100px) } .navbar .nav { margin-left: 0; position: relative; z-index: 300; float: none; clear: both } .navbar .nav > li { display: inline-block; vertical-align: top; width: 50%; margin-right: 0; padding-left: 14.13333%; border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-right: 1px solid rgba(255, 255, 255, 0.1) } .formsearch .form-control + label { left: 18.79433% } .formsearch .form-control { padding: 0 18.79433% } .navbar .nav > li:last-child { border-bottom: none } .navbar .nav > li.on { background-color: #DC5F00 } .navbar .nav > li > a { color: #fff; font-size: 24px } .button_close { -moz-transform: translate(100px, 0); -ms-transform: translate(100px, 0); -webkit-transform: translate(100px, 0); transform: translate(100px, 0) } .header .btn_inquiry { width: 100px; height: 100px; line-height: 100px; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .header .btn_inquiry.opa { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0 } .header .btn_tools { position: relative; display: block; float: none; clear: both; width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.1); z-index: 200 } .header .telphone { display: block; width: 100%; font-size: 28px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); text-align: center } .header .telphone span { display: inline-block; width: 50%; margin-right: 0 !important; padding-left: 12%; font-size: 14px !important } .header .telphone .icon-icon_tel { font-size: 30px; padding-left: 19% } .header .btn_search { display: inline-block; vertical-align: top; width: 50%; font-size: 30px; border-right: none; float: right; border-bottom: 1px solid rgba(255, 255, 255, 0.1); text-align: left; padding-left: 18% } .header .btn_lang { display: inline-block; vertical-align: top; width: 50%; font-size: 28px; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-right: 1px solid rgba(255, 255, 255, 0.1); text-align: left; padding-left: 18% } .header .btn_lang span { font-size: 28px; margin-left: 5px } .navbar .dropdown { top: 100px; left: 0; width: calc(100% + 1px); background-color: #DC5F00; z-index: 3000 } .navbar .dropdown .dropdown-menu_wrapepr { padding-top: 0; padding-bottom: 0 } .navbar .dropdown .dropdown-menu_wrapepr:after { display: none } .navbar .dropdown .img-box { display: none } .navbar .dropdown .dropdown-menu { width: 100% !important } .navbar .dropdown .level { display: none } .navbar .dropdown li { padding: 30px 0; padding-left: 28.26667%; height: auto; line-height: normal } .navbar .dropdown li a { font-size: 24px; height: auto; line-height: normal } .button_close .menu span:nth-child(1) { -moz-transform: rotate(45deg) translate(9px, 9px); -ms-transform: rotate(45deg) translate(9px, 9px); -webkit-transform: rotate(45deg) translate(9px, 9px); transform: rotate(45deg) translate(9px, 9px) } .button_close .menu span:nth-child(3) { -moz-transform: rotate(-45deg) translate(8px, -9px); -ms-transform: rotate(-45deg) translate(8px, -9px); -webkit-transform: rotate(-45deg) translate(8px, -9px); transform: rotate(-45deg) translate(8px, -9px) } .formsearch { position: relative; width: auto; height: 100px; background-color: #212121; top: 0; right: 0; margin-left: 0; margin-right: 0; border-right: none; font-size: 0; padding-left: 0; z-index: 200 } .formsearch .form-group { margin-right: 0 } .formsearch.active .form-group { width: 75% } .formsearch .button { width: 20%; width: 25%; background-color: #DC5F00 } .header .telphone .icon-icon_tel { height: auto } .navbar .bgcover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #212121; z-index: 100 } .navbar .dropdown .dropdown-menu_wrapepr { width: 100% !important } .container-full { top: 0; z-index: 4000; padding-left: 5.33333%; padding-right: 5.33333%; height: 100%; overflow-y: scroll } .container-full .cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 20 } .language-box dt { font-size: 16px; padding-bottom: 0 } .language-box dl { display: block; margin: 0; padding-top: 20px; position: relative; z-index: 30; width: 100% } .language-box dl:first-child { padding-top: 0 } .language-box dd { display: inline-block; width: 50%; vertical-align: top; padding-right: 0; border-bottom: none } .navbar .dropdown .level_wrapper { display: none !important } .container-full .button_menu { position: absolute; top: 5px; right: 63px; margin-right: 0; margin-top: 0 } .language-box dl img { display: block; margin-right: 10px; margin-bottom: 10px } .language-box dd a { padding-right: 0 } } @media only screen and (max-width: 768px) { .container-full .button_menu { position: absolute; top: 5px; right: 63px; margin-right: 0; margin-top: 0 } .otherpage .header_bg { height: 100px } .header .logo { width: 74px; height: 31px; background-size: 74px auto; margin-top: 10px } .header_bg { height: 50px } .header .btn_inquiry { width: 50px; height: 50px; line-height: 50px; font-size: 16px } .button_menu { width: 40px; height: 40px; margin-right: 14px; margin-top: 5px } .button_close { -moz-transform: translate(50px, 0); -ms-transform: translate(50px, 0); -webkit-transform: translate(50px, 0); transform: translate(50px, 0) } .button_menu .menu { width: 18px; height: 14px } .navbar .nav > li, .navbar .nav > li > a, .header .telphone, .header .btn_lang, .header .btn_search { line-height: 50px; height: 50px } .navbar { top: 50px; height: calc(100vh - 50px) } .navbar .nav > li > a { font-size: 14px } .navbar .dropdown { top: 50px } .header .telphone { font-size: 14px } .header .telphone .icon-icon_tel { font-size: 16px } .header .btn_search { font-size: 16px } .header .btn_lang { font-size: 14px } .header .btn_lang span { font-size: 14px } .navbar .dropdown li { padding: 15px 0; padding-left: 28.26667% } .navbar .dropdown li a { font-size: 14px } .button_close .menu span:nth-child(1) { -moz-transform: rotate(45deg) translate(4px, 4px); -ms-transform: rotate(45deg) translate(4px, 4px); -webkit-transform: rotate(45deg) translate(4px, 4px); transform: rotate(45deg) translate(4px, 4px) } .button_close .menu span:nth-child(3) { -moz-transform: rotate(-45deg) translate(4px, -5px); -ms-transform: rotate(-45deg) translate(4px, -5px); -webkit-transform: rotate(-45deg) translate(4px, -5px); transform: rotate(-45deg) translate(4px, -5px) } .formsearch { height: 50px } .formsearch .form-group { height: 50px; margin-top: 0 } .formsearch .button { height: 50px; line-height: 50px; font-size: 16px } } @-webkit-keyframes scale-down { from { -webkit-transform: translate3d(0, 0, 300px); -moz-transform: translate3d(0, 0, 300px); -ms-transform: translate3d(0, 0, 300px); -o-transform: translate3d(0, 0, 300px); transform: translate3d(0, 0, 300px) } to { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-moz-keyframes scale-down { from { -webkit-transform: translate3d(0, 0, 300px); -moz-transform: translate3d(0, 0, 300px); -ms-transform: translate3d(0, 0, 300px); -o-transform: translate3d(0, 0, 300px); transform: translate3d(0, 0, 300px) } to { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes scale-down { from { -webkit-transform: translate3d(0, 0, 300px); -moz-transform: translate3d(0, 0, 300px); -ms-transform: translate3d(0, 0, 300px); -o-transform: translate3d(0, 0, 300px); transform: translate3d(0, 0, 300px) } to { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes scale-down { from { -webkit-transform: translate3d(0, 0, 300px); -moz-transform: translate3d(0, 0, 300px); -ms-transform: translate3d(0, 0, 300px); -o-transform: translate3d(0, 0, 300px); transform: translate3d(0, 0, 300px) } to { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .effect_banner { position: relative; z-index: 200 } #bg-transitions { overflow: hidden; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; -webkit-transform-style: preserve-3d !important; -moz-transform-style: preserve-3d !important; -ms-transform-style: preserve-3d !important; -o-transform-style: preserve-3d !important; transform-style: preserve-3d !important; background-color: #000; z-index: 100 } .bg-container { overflow: hidden; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: -100; width: 100%; height: 100%; -webkit-perspective: 1200px; -moz-perspective: 1200px; perspective: 1200px; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .bg-container.current { z-index: -1 } .bg-container.current.scaling .bg-slice { -webkit-animation: scale-down 1.3s ease-in-out forwards; -moz-animation: scale-down 1.3s ease-in-out forwards; animation: scale-down 1.3s ease-in-out forwards } .bg-container.current.triggered { z-index: 100 !important } .bg-slice { float: left; width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d } .bg-image { overflow: hidden; position: relative; min-width: 100%; height: 100% } .bg-image img, .bg-image video { display: block; position: absolute } #bg-fade { display: none; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 10; background-size: auto 100% !important; background-position: left top !important; background-repeat: no-repeat !important; background: #000 } .effect-col-1 .bg-slice { width: 100%; height: 100%; overflow: hidden } .effect-col-1 .bg-slice .bg-image { width: 100%; height: 100%; overflow: hidden; background: #000 } .effect-col-1 .bg-slice .bg-image video { width: 100%; height: 100% } @media only screen and (max-width: 1023px) { .effect-col-1 .bg-slice .bg-image video { display: none !important } } @media only screen and (max-width: 1023px) { .effect-col-1 .bg-slice .bg-image { background-size: cover } } .effect-col-1.triggered .bg-slice .bg-image { -webkit-transition: all 1.1s cubic-bezier(0.7, 0, 0.3, 1); -moz-transition: all 1.1s cubic-bezier(0.7, 0, 0.3, 1); transition: all 1.1s cubic-bezier(0.7, 0, 0.3, 1) } .effect-col-1.triggered .bg-slice:nth-child(1) .bg-image { -webkit-transform: translateY(-1110px); -moz-transform: translateY(-1110px); -ms-transform: translateY(-1110px); -o-transform: translateY(-1110px); transform: translateY(-1110px) } @media only screen and (max-width: 600px) { .effect-col-1.triggered .bg-slice:nth-child(1) .bg-image { -webkit-transform: translateY(-650px); -moz-transform: translateY(-650px); -ms-transform: translateY(-650px); -o-transform: translateY(-650px); transform: translateY(-650px) } } @media only screen and (min-width: 1921px) { .effect-col-1.triggered .bg-slice:nth-child(1) .bg-image { -webkit-transform: translateY(-1610px); -moz-transform: translateY(-1610px); -ms-transform: translateY(-1610px); -o-transform: translateY(-1610px); transform: translateY(-1610px) } } .effect-col-5 .bg-slice { width: 20%; height: 100%; overflow: hidden } .effect-col-5 .bg-slice .bg-image { width: 100%; height: 100% } .effect-col-5 .bg-slice .bg-image img { min-width: 500%; height: 100% } .effect-col-5 .bg-slice:nth-child(1) img { left: 0; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s } .effect-col-5 .bg-slice:nth-child(2) img { left: -100%; -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s } .effect-col-5 .bg-slice:nth-child(3) img { left: -200%; -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; transition-delay: 0.6s } .effect-col-5 .bg-slice:nth-child(4) img { left: -300%; -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s } .effect-col-5 .bg-slice:nth-child(5) img { left: -400%; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s } .effect-col-5.triggered img { -webkit-transition: all 0.8s ease-in; -moz-transition: all 0.8s ease-in; transition: all 0.8s ease-in; -webkit-transform: translateY(810px); -moz-transform: translateY(810px); -ms-transform: translateY(810px); -o-transform: translateY(810px); transform: translateY(810px) } @media only screen and (max-width: 600px) { .effect-col-5.triggered img { -webkit-transform: translateY(650px); -moz-transform: translateY(650px); -ms-transform: translateY(650px); -o-transform: translateY(650px); transform: translateY(650px) } } @media only screen and (min-height: 810px) { .effect-col-5.triggered img { -webkit-transform: translateY(1110px); -moz-transform: translateY(1110px); -ms-transform: translateY(1110px); -o-transform: translateY(1110px); transform: translateY(1110px) } } @media only screen and (min-width: 1921px) { .effect-col-5.triggered img { -webkit-transform: translateY(1610px); -moz-transform: translateY(1610px); -ms-transform: translateY(1610px); -o-transform: translateY(1610px); transform: translateY(1610px) } } .effect-col-4 .bg-slice { width: 50%; height: 50% } .effect-col-4 .bg-slice .bg-image { width: 100%; height: 100%; -webkit-transition: all 0.8s ease-in; -moz-transition: all 0.8s ease-in; transition: all 0.8s ease-in } .effect-col-4 .bg-slice .bg-image img { min-width: 200%; height: 200% } .effect-col-4 .bg-slice:nth-child(n+3) .bg-image { -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s } .effect-col-4 .bg-slice:nth-child(1) img { left: 0 } .effect-col-4 .bg-slice:nth-child(2) img { left: -100% } .effect-col-4 .bg-slice:nth-child(3) img { top: -100% } .effect-col-4 .bg-slice:nth-child(4) img { top: -100%; left: -100% } .effect-col-4.triggered .bg-slice img { -webkit-transition: all 0.8s ease-in; -moz-transition: all 0.8s ease-in; transition: all 0.8s ease-in } .effect-col-4.triggered .bg-slice:nth-child(odd) .bg-image { -webkit-transform: translateX(-810px); -moz-transform: translateX(-810px); -ms-transform: translateX(-810px); -o-transform: translateX(-810px); transform: translateX(-810px) } @media only screen and (max-width: 600px) { .effect-col-4.triggered .bg-slice:nth-child(odd) .bg-image { -webkit-transform: translateX(-310px); -moz-transform: translateX(-310px); -ms-transform: translateX(-310px); -o-transform: translateX(-310px); transform: translateX(-310px) } } @media only screen and (min-width: 1600px) { .effect-col-4.triggered .bg-slice:nth-child(odd) .bg-image { -webkit-transform: translateX(-970px); -moz-transform: translateX(-970px); -ms-transform: translateX(-970px); -o-transform: translateX(-970px); transform: translateX(-970px) } } @media only screen and (min-width: 1921px) { .effect-col-4.triggered .bg-slice:nth-child(odd) .bg-image { -webkit-transform: translateX(-1290px); -moz-transform: translateX(-1290px); -ms-transform: translateX(-1290px); -o-transform: translateX(-1290px); transform: translateX(-1290px) } } .effect-col-4.triggered .bg-slice:nth-child(even) .bg-image { -webkit-transform: translateX(810px); -moz-transform: translateX(810px); -ms-transform: translateX(810px); -o-transform: translateX(810px); transform: translateX(810px) } @media only screen and (max-width: 600px) { .effect-col-4.triggered .bg-slice:nth-child(even) .bg-image { -webkit-transform: translateX(310px); -moz-transform: translateX(310px); -ms-transform: translateX(310px); -o-transform: translateX(310px); transform: translateX(310px) } } @media only screen and (min-width: 1600px) { .effect-col-4.triggered .bg-slice:nth-child(even) .bg-image { -webkit-transform: translateX(970px); -moz-transform: translateX(970px); -ms-transform: translateX(970px); -o-transform: translateX(970px); transform: translateX(970px) } } @media only screen and (min-width: 1921px) { .effect-col-4.triggered .bg-slice:nth-child(even) .bg-image { -webkit-transform: translateX(1290px); -moz-transform: translateX(1290px); -ms-transform: translateX(1290px); -o-transform: translateX(1290px); transform: translateX(1290px) } } .effect-col-2 .bg-slice { width: 100%; height: 50% } .effect-col-2 .bg-slice .bg-image { width: 100%; height: 100% } .effect-col-2 .bg-slice .bg-image img { min-width: 100%; height: 200% } .effect-col-2 .bg-slice:nth-child(2) img { top: -100% } .effect-col-2.triggered .bg-slice .bg-image { -webkit-transition: all 1.2s ease-in; -moz-transition: all 1.2s ease-in; transition: all 1.2s ease-in } .effect-col-2.triggered .bg-slice:nth-child(1) .bg-image { -webkit-transform: translateX(-1610px); -moz-transform: translateX(-1610px); -ms-transform: translateX(-1610px); -o-transform: translateX(-1610px); transform: translateX(-1610px) } @media only screen and (max-width: 600px) { .effect-col-2.triggered .bg-slice:nth-child(1) .bg-image { -webkit-transform: translateX(-610px); -moz-transform: translateX(-610px); -ms-transform: translateX(-610px); -o-transform: translateX(-610px); transform: translateX(-610px) } } @media only screen and (min-width: 1600px) { .effect-col-2.triggered .bg-slice:nth-child(1) .bg-image { -webkit-transform: translateX(-1930px); -moz-transform: translateX(-1930px); -ms-transform: translateX(-1930px); -o-transform: translateX(-1930px); transform: translateX(-1930px) } } @media only screen and (min-width: 1921px) { .effect-col-2.triggered .bg-slice:nth-child(1) .bg-image { -webkit-transform: translateX(-2570px); -moz-transform: translateX(-2570px); -ms-transform: translateX(-2570px); -o-transform: translateX(-2570px); transform: translateX(-2570px) } } .effect-col-2.triggered .bg-slice:nth-child(2) .bg-image { -webkit-transform: translateX(1610px); -moz-transform: translateX(1610px); -ms-transform: translateX(1610px); -o-transform: translateX(1610px); transform: translateX(1610px) } @media only screen and (max-width: 600px) { .effect-col-2.triggered .bg-slice:nth-child(2) .bg-image { -webkit-transform: translateX(610px); -moz-transform: translateX(610px); -ms-transform: translateX(610px); -o-transform: translateX(610px); transform: translateX(610px) } } @media only screen and (min-width: 1600px) { .effect-col-2.triggered .bg-slice:nth-child(2) .bg-image { -webkit-transform: translateX(1930px); -moz-transform: translateX(1930px); -ms-transform: translateX(1930px); -o-transform: translateX(1930px); transform: translateX(1930px) } } @media only screen and (min-width: 1921px) { .effect-col-2.triggered .bg-slice:nth-child(2) .bg-image { -webkit-transform: translateX(2570px); -moz-transform: translateX(2570px); -ms-transform: translateX(2570px); -o-transform: translateX(2570px); transform: translateX(2570px) } } .effect-col-3 .bg-slice { width: 33.333333%; height: 100% } .effect-col-3 .bg-slice .bg-image { width: 100%; height: 100% } .effect-col-3 .bg-slice .bg-image img { min-width: 300%; height: 100% } .effect-col-3 .bg-slice:nth-child(1) img { left: 0; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s } .effect-col-3 .bg-slice:nth-child(2) img { left: -100%; -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s } .effect-col-3 .bg-slice:nth-child(3) img { left: -200%; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s } .effect-col-3.triggered .bg-slice .bg-image { -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in; transition: all 1s ease-in } .effect-col-3.triggered .bg-slice:nth-child(1) .bg-image { -webkit-transform: translateX(-600px); -moz-transform: translateX(-600px); -ms-transform: translateX(-600px); -o-transform: translateX(-600px); transform: translateX(-600px) } @media only screen and (max-width: 600px) { .effect-col-3.triggered .bg-slice:nth-child(1) .bg-image { -webkit-transform: translateX(-310px); -moz-transform: translateX(-310px); -ms-transform: translateX(-310px); -o-transform: translateX(-310px); transform: translateX(-310px) } } @media only screen and (min-width: 1600px) { .effect-col-3.triggered .bg-slice:nth-child(1) .bg-image { -webkit-transform: translateX(-800px); -moz-transform: translateX(-800px); -ms-transform: translateX(-800px); -o-transform: translateX(-800px); transform: translateX(-800px) } } @media only screen and (min-width: 1921px) { .effect-col-3.triggered .bg-slice:nth-child(1) .bg-image { -webkit-transform: translateX(-1200px); -moz-transform: translateX(-1200px); -ms-transform: translateX(-1200px); -o-transform: translateX(-1200px); transform: translateX(-1200px) } } .effect-col-3.triggered .bg-slice:nth-child(2) .bg-image { -webkit-transform: translateY(810px); -moz-transform: translateY(810px); -ms-transform: translateY(810px); -o-transform: translateY(810px); transform: translateY(810px) } @media only screen and (max-width: 600px) { .effect-col-3.triggered .bg-slice:nth-child(2) .bg-image { -webkit-transform: translateY(700px); -moz-transform: translateY(700px); -ms-transform: translateY(700px); -o-transform: translateY(700px); transform: translateY(700px) } } @media only screen and (min-height: 810px) { .effect-col-3.triggered .bg-slice:nth-child(2) .bg-image { -webkit-transform: translateY(1110px); -moz-transform: translateY(1110px); -ms-transform: translateY(1110px); -o-transform: translateY(1110px); transform: translateY(1110px) } } @media only screen and (min-width: 1921px) { .effect-col-3.triggered .bg-slice:nth-child(2) .bg-image { -webkit-transform: translateY(1610px); -moz-transform: translateY(1610px); -ms-transform: translateY(1610px); -o-transform: translateY(1610px); transform: translateY(1610px) } } .effect-col-3.triggered .bg-slice:nth-child(3) .bg-image { -webkit-transform: translateX(600px); -moz-transform: translateX(600px); -ms-transform: translateX(600px); -o-transform: translateX(600px); transform: translateX(600px) } @media only screen and (max-width: 600px) { .effect-col-3.triggered .bg-slice:nth-child(3) .bg-image { -webkit-transform: translateX(310px); -moz-transform: translateX(310px); -ms-transform: translateX(310px); -o-transform: translateX(310px); transform: translateX(310px) } } @media only screen and (min-width: 1600px) { .effect-col-3.triggered .bg-slice:nth-child(3) .bg-image { -webkit-transform: translateX(800px); -moz-transform: translateX(800px); -ms-transform: translateX(800px); -o-transform: translateX(800px); transform: translateX(800px) } } @media only screen and (min-width: 1921px) { .effect-col-3.triggered .bg-slice:nth-child(3) .bg-image { -webkit-transform: translateX(1200px); -moz-transform: translateX(1200px); -ms-transform: translateX(1200px); -o-transform: translateX(1200px); transform: translateX(1200px) } } .effect-col-9 .bg-slice { width: 33.3333%; height: 33.33333% } .effect-col-9 .bg-slice .bg-image { width: 100%; height: 100%; -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom } .effect-col-9 .bg-slice .bg-image img { min-width: 300%; height: 300% } .effect-col-9 .bg-slice:nth-child(2) img, .effect-col-9 .bg-slice:nth-child(5) img, .effect-col-9 .bg-slice:nth-child(8) img { left: -100% } .effect-col-9 .bg-slice:nth-child(3n) img { left: -200% } .effect-col-9 .bg-slice:nth-child(4) img, .effect-col-9 .bg-slice:nth-child(5) img, .effect-col-9 .bg-slice:nth-child(6) img { top: -100% } .effect-col-9 .bg-slice:nth-child(n+7) img { top: -200% } .effect-col-9.triggered .bg-slice .bg-image { opacity: 0; -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55); -moz-transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) } .effect-col-9.triggered .bg-slice:nth-child(2) .bg-image { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s } .effect-col-9.triggered .bg-slice:nth-child(1) .bg-image, .effect-col-9.triggered .bg-slice:nth-child(3) .bg-image, .effect-col-9.triggered .bg-slice:nth-child(5) { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s } .effect-col-9.triggered .bg-slice:nth-child(4) .bg-image, .effect-col-9.triggered .bg-slice:nth-child(6) .bg-image, .effect-col-9.triggered .bg-slice:nth-child(8) .bg-image { -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; transition-delay: 0.4s } .effect-col-9.triggered .bg-slice:nth-child(7) .bg-image, .effect-col-9.triggered .bg-slice:nth-child(9) .bg-image { -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; transition-delay: 0.6s } .js_banner_lib .slick_item .item_box { display: block; width: 100%; height: calc(100vh - 88px); overflow: hidden } .js_banner_nav { background-color: rgba(220, 95, 0, 0.8); position: absolute; bottom: 0px; left: 0; width: 50%; height: 142px; z-index: 200 } .js_banner_nav .slick-slide { width: 50vw; text-align: center } .js_banner_nav .text_info { display: inline-block; text-align: left; margin-top: 24px } .video_banner .video_full { display: block; width: 100%; height: calc(100vh - 88px); overflow: hidden } .video_banner .video_full video { position: absolute; top: 0; left: 0; object-fit: cover; object-position: center center; height: 100%; width: 100%; z-index: 20; background-color: #000 } .text_info > h3 { font-size: 22px; line-height: 47px; color: #fff; letter-spacing: 1px } .controls { position: absolute; bottom: 34px; right: 13.80208%; z-index: 200 } .controls .slick-arrow { display: block; width: 50px; height: 42px; line-height: 42px; text-align: center; font-size: 16px; color: #fff } .controls .slick-prev { margin-bottom: 0px; line-height: 62px } .controls .slick-next { margin-top: 0px; line-height: 26px } .custom_paging { position: absolute; bottom: 50px; right: 8.33333%; z-index: 200 } .custom_paging .currentPage { font-size: 42px; color: #fff; margin-right: 20px; vertical-align: super } .custom_paging .line { display: inline-block; width: 3px; height: 43px; background-color: #DC5F00; -moz-transform: rotate(25deg); -ms-transform: rotate(25deg); -webkit-transform: rotate(25deg); transform: rotate(25deg) } .custom_paging .totalPage { font-size: 18px; color: #fff; margin-left: 10px; vertical-align: top } .information > h3 { font-size: 40px; color: #DC5F00; font-family: "GothamBook" } .information > h4 { font-size: 24px; letter-spacing: 1.5px; line-height: 34px; color: #DC5F00; font-weight: 400; color: #333; margin-top: 10px; font-weight: 400 } .information .line { display: block; width: 40px; height: 4px; background-color: #DC5F00 } .text-muted { font-size: 14px; letter-spacing: 1px; color: #999; line-height: 26px; font-weight: 400 } .text-muted strong, .text-muted h6 { font-size: 20px; letter-spacing: 1px; line-height: 26px; font-weight: 400; color: #333 } .text-muted span { font-size: 18px; letter-spacing: 1.5px; line-height: 39px; font-weight: 400; color: #333 } .text_muted { font-size: 14px; color: #999; line-height: 26px; letter-spacing: 1px } .text_muted strong { font-size: 20px; letter-spacing: 1px; line-height: 26px; font-weight: 400 } .text_muted span, .text_muted h6 { font-size: 18px; letter-spacing: 1.5px; line-height: 39px; font-weight: 400; color: #333 } .text_muted p { position: relative } .work_list { font-size: 0; margin-left: -1px; margin-right: -1px } .work_list li { margin-bottom: 2px } .work_list li .item_box { position: relative; display: block; overflow: hidden; margin: 0 1px } .work_list li .img-box:before { padding-top: 63.0394% } .work_list li .text_desc { color: #fff; position: absolute; bottom: 0; left: 0; width: 100%; padding-left: 7.50469%; padding-right: 7.50469%; padding-bottom: 30px; padding-top: 80px } .work_list li .text_desc h3 { font-size: 24px; font-weight: 400; letter-spacing: 1.5px; line-height: 34px; color: #fff } .work_list li .text_desc h4 { font-size: 14px; line-height: 30px; letter-spacing: .8px; margin-top: 10px } .work_list li .text_desc:before { content: ""; display: block; position: absolute; top: 0; left: -1%; width: 102%; height: 100%; background-image: url(../assets/img/icon_mask.svg); background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: 40 } .work_list li .text_desc .btn_shape { display: block; position: absolute; bottom: 7.50469%; right: 7.50469%; width: 40px; height: 40px } .work_list li .text_desc .btn_shape:after { content: ""; display: block; width: 100%; height: 100%; background-color: #fff; -moz-transform: scale(0.7) rotate(45deg); -ms-transform: scale(0.7) rotate(45deg); -webkit-transform: scale(0.7) rotate(45deg); transform: scale(0.7) rotate(45deg) } .work_list li .text_desc .btn_shape span { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 200 } .work_list li .text_desc .btn_shape span:after, .work_list li .text_desc .btn_shape span:before { content: ""; display: block; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #DC5F00 } .work_list li .text_desc .btn_shape span:after { width: 8px; height: 1px } .work_list li .text_desc .btn_shape span:before { width: 1px; height: 8px } .work_list li article { overflow: hidden; min-height: 34px; position: relative; z-index: 50 } .product { display: block; position: relative } .product:before { padding-top: 41.66667% } .effects_slick-dots { position: relative } .effects_slick-dots .slick-dots { position: absolute; bottom: 30px; left: 0; width: 100%; text-align: center } .effects_slick-dots .slick-dots li { display: inline-block; margin: 0; cursor: pointer } .effects_slick-dots .slick-dots button { padding: 0; margin: 0; border: none; background: none; position: relative; display: block; width: 28px; height: 36px; font-size: 14px; color: #fff; line-height: 36px; cursor: pointer; font-size: 0 } .effects_slick-dots .slick-dots button:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; border: 2px solid rgba(255, 255, 255, 0.5); -moz-transform: translate(-50%, -50%) rotate(45deg) scale(0.7, 0.7); -ms-transform: translate(-50%, -50%) rotate(45deg) scale(0.7, 0.7); -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0.7, 0.7); transform: translate(-50%, -50%) rotate(45deg) scale(0.7, 0.7); -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease; cursor: pointer } .effects_slick-dots .slick-dots button:focus { outline: none } .effects_slick-dots .slick-dots .slick-active button:after { border-color: #fff } .js_pro_slick_lib .slick-slide { overflow: hidden } .js_pro_slick_lib .slick-current.slick-active .pagetitle { visibility: visible; -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft } .js_pro_slick_lib .slick-current.slick-active .text-align_right { visibility: visible; -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft } .js_pro_slick_lib .slick-current.slick-active .text-align_left { visibility: visible; -webkit-animation-name: fadeInRight; animation-name: fadeInRight } .pagetitle { position: absolute; top: 22%; left: 10.10417%; padding-left: 90px; z-index: 200 } .pagetitle .icon { display: block; width: 36px; height: 36px; font-size: 14px; color: #fff; line-height: 36px; position: absolute; top: 0; left: 0 } .pagetitle .icon:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 28px; height: 28px; border: 4px solid rgba(255, 255, 255, 0.5); -moz-transform: rotate(45deg) scale(0.7, 0.7); -ms-transform: rotate(45deg) scale(0.7, 0.7); -webkit-transform: rotate(45deg) scale(0.7, 0.7); transform: rotate(45deg) scale(0.7, 0.7) } .pagetitle h1, .pagetitle h2 { font-size: 40px; letter-spacing: .8px; line-height: 34px; color: #fff; margin-bottom: 27px } .pagetitle p { font-size: 14px; letter-spacing: .8px; line-height: 24px; color: #fff } .text_primary h3 { font-size: 18px; letter-spacing: .8px; line-height: 34px; color: #fff; font-weight: 700 } .text_primary p { font-size: 12px; line-height: 24px; letter-spacing: .8px; color: #fff } .product { overflow: hidden } .gradient { position: absolute; top: 0; height: 100% } .gradient .text_primary { position: absolute } .gradient .text_primary .icon { display: inline-block; width: 110px; height: 110px; border-radius: 50%; margin-bottom: 10px } .gradient .text_primary .line { display: block; position: absolute } .orange-gradient { left: 0 } .orange-gradient .text_primary { bottom: 22%; left: 25%; width: 41% } .orange-gradient .text_primary .line { top: 57%; right: -49%; width: 40%; height: auto } .black-gradient { right: 0 } .black-gradient .text_primary { right: 15.625%; bottom: 27%; width: 38% } .black-gradient .text_primary .line { top: 58%; left: -85%; width: 76%; height: auto } .news_list { font-size: 0; margin-left: -1px; margin-right: -1px } .news_list li { display: inline-block; vertical-align: top } .news_list .item_box { display: block; margin: 0 1px } .news_list .img-box:before { content: ""; padding-top: 57.07134% } .news_list .text_desc { padding-top: 26px; padding-right: 9.61034% } .news_list .text_desc h3 { font-size: 24px; color: #DC5F00; color: #333; letter-spacing: 1px; line-height: 34px; margin-bottom: 8px; font-weight: 400 } .news_list .text_desc p { font-size: 14px; letter-spacing: 1px; line-height: 24px; color: #999; min-height: 24px } .news_list .label span { margin-right: 50px } .news_list .label i { font-size: 18px } .news_list .label i:before { margin-right: 15px } .read_more { display: block; font-size: 14px; line-height: 17px; font-family: "GothamBook"; color: #DC5F00; color: #333 } .read_more i { display: inline-block; font-size: 18px; vertical-align: -2px } .server { padding-top: 94px; padding-bottom: 94px; text-align: center } .server h2 { font-size: 32px; line-height: 50px; letter-spacing: 1px; color: #fff; margin-bottom: 30px; font-weight: 400 } .server p { font-size: 12px; line-height: 24px; letter-spacing: 1px; color: #fff } .btn_default { padding: 0; background: none; border: none; display: inline-block; text-align: center; font-size: 14px; color: #DC5F00; position: relative; padding: 10px 24px; overflow: hidden; font-weight: 400; cursor: pointer; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out } .btn_default:after { content: ""; display: block; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; background-color: #fff; z-index: 100; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out } .btn_default:before { content: ""; position: absolute; background-color: #DC5F00; z-index: 50; -moz-transition: all 1.4s ease; -o-transition: all 1.4s ease; -webkit-transition: all 1.4s ease; transition: all 1.4s ease; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.28); -moz-transform: scale(1.02, 1.02); -ms-transform: scale(1.02, 1.02); -webkit-transform: scale(1.02, 1.02); transform: scale(1.02, 1.02); -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out } .btn_default span { position: relative; z-index: 300; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out } .btn_default span i { vertical-align: -2px; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out } .btn_button { padding: 17px 30px } .btn_link { color: #fff } .btn_link:before { background-color: rgba(220, 95, 0, 0.2) } .btn_link:after { background-color: #DC5F00 } @media only screen and (min-width: 1025px) { .work_list li .mask, .work_list li .mask:before, .work_list li .mask h3, .work_list li .mask h4 { -moz-transition: all .6s ease; -o-transition: all .6s ease; -webkit-transition: all .6s ease; transition: all .6s ease } .work_list li .mask h3, .work_list li .mask h4 { -moz-transform: translate(0, 50px); -ms-transform: translate(0, 50px); -webkit-transform: translate(0, 50px); transform: translate(0, 50px) } .work_list li .text_desc .btn_shape { -moz-transition: all .6s ease .4s; -o-transition: all .6s ease .4s; -webkit-transition: all .6s ease; -webkit-transition-delay: .4s; transition: all .6s ease .4s; -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0) } .work_list li .text_desc h3 { position: relative; z-index: 300 } .work_list li .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-top: 7.50469%; padding-bottom: 7.50469%; background-color: #DC5F00; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; visibility: hidden } .work_list li .mask:before { background: none } .work_list li a:hover .pull { display: none; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; visibility: hidden } .work_list li a:hover .mask { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; visibility: visible } .work_list li a:hover .mask .btn_shape { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1) } .work_list li a:hover .mask h3, .work_list li a:hover .mask h4 { -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0) } .btn_default:hover, .btn_default:hover span, .btn_default:hover i { color: #fff } .btn_default:hover:before { -moz-transform: scale(0, 0); -ms-transform: scale(0, 0); -webkit-transform: scale(0, 0); transform: scale(0, 0) } .btn_default:hover:after { background-color: #ff991e } } @media only screen and (max-width: 1320px) and (min-width: 1025px) { .js_banner_lib .slick_item .item_box { height: calc(100vh - 78px) } } @media only screen and (max-width: 1680px) and (min-width: 1025px) { .pagetitle { top: 15%; left: 10.10417% } .work_list li .text_desc h3, .news_list .text_desc h3 { font-size: 18px; font-weight: 400 } .pagetitle h1, .pagetitle h2, .server h2 { font-size: 26px; font-weight: 400; line-height: 48px } } .crumbs { position: fixed; top: 88px; left: 0; height: 50px; background-color: #161616; width: 100%; line-height: 50px; overflow: hidden; z-index: 2000 } .crumbs ul { font-size: 0 } .crumbs ul li { margin-right: 7px } .crumbs ul li a { font-size: 14px; color: #fff; color: #707070 } .crumbs ul li a i { color: #707070; margin-right: 10px } .crumbs ul .home { margin-right: 4px } .crumbs ul .home a { color: #707070 } .crumbs ul .home a i { margin-right: 0; font-size: 20px; vertical-align: -2px } .crumbs ul .active a { color: #fff } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #707070 } .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background: #707070; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)" } .mCSB_container { display: block !important } .mCSB_container { margin-right: 0 } .hide { display: none } .innerbanner:before { padding-top: 20.83333%; padding-top: 31.19792% } .innerbanner .mask { position: absolute; bottom: 0; height: 142px; height: 110px; background-color: #DC5F00 } .innerbanner h1 { font-size: 30px; line-height: 142px; line-height: 110px; font-weight: 700; letter-spacing: 2px; padding: 0 9.79167%; color: #fff } .innerbanner .btn_vido_play { margin-top: -55px } .inner-banner a { display: block } .inner-banner .img-box { overflow: hidden } .inner-banner .img-box::before { padding-top: 31.19792% } .detailbanenr h1 { padding-left: 16.66667%; font-size: 40px; font-weight: 400 } .inves_list { padding-top: 100px; padding-bottom: 150px } .inves_list ul { margin: 0 -16px } .inves_list li .item { background-color: #fff; padding: 70px; position: relative; margin: 0 16px; height: 222px } .inves_list li article { display: inline-block; vertical-align: top; margin-left: 30px; margin-top: 6px } .inves_list li .title { font-size: 14px; letter-spacing: 1px; line-height: 4.07143; color: #B9B9B9; position: absolute; top: 0; right: 30px } .inves_list li .icon { display: inline-block; vertical-align: top } .inves_list li .tle { font-size: 14px; color: #DC5F00; letter-spacing: .4px; line-height: 20px } .inves_list li .tel { font-size: 28px; color: #333; letter-spacing: 1px; line-height: 1.42857; font-family: "GothamBook" } .inves_list li:last-child .icon { margin-top: 12px } .solu_group_list { margin-top: -1px } .solu_group_list .group_wrapper { font-size: 0 } .solu_group_list .group_wrapper .d-inline-block { position: relative } .solu_group_list .group_wrapper .item { display: block } .solu_group_list .group_wrapper .img-box:before { padding-top: 41.5% } .solu_group_list .group_wrapper .img-box:after { content: ""; position: absolute; top: 0; left: 0; width: 85%; width: 100%; height: 100%; z-index: 10; -moz-transition: all 300ms ease 0s; -o-transition: all 300ms ease 0s; -webkit-transition: all 300ms ease; -webkit-transition-delay: 0s; transition: all 300ms ease 0s } .solu_group_list .group_wrapper .img-box h3 { font-size: 30px; line-height: 26px; letter-spacing: 2px; font-weight: 700; color: #fff; position: absolute; top: 40px; left: 0; padding: 0 5%; width: 100%; z-index: 20; font-weight: 400; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .solu_group_list .group_wrapper .img-box h3 span { font-size: 14px; font-family: "GothamBook" } .solu_group_list .group_wrapper .img-box h5 { font-size: 14px; letter-spacing: 1px; line-height: 56px; line-height: 26px; color: #fff; padding: 0 5%; position: absolute; bottom: 0; bottom: 24px; left: 0; width: 100%; z-index: 20; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease; height: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .solu_group_list .group_wrapper .gradient_black:after { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE0MGQxOSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuODQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxOTE4MWEiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #140d19), color-stop(50%, rgba(0, 0, 0, 0.84)), color-stop(100%, rgba(25, 24, 26, 0))); background-image: -moz-linear-gradient(left, #140d19, rgba(0, 0, 0, 0.84), rgba(25, 24, 26, 0)); background-image: -webkit-linear-gradient(left, #140d19, rgba(0, 0, 0, 0.84), rgba(25, 24, 26, 0)); background-image: linear-gradient(to right, #140d19, rgba(0, 0, 0, 0.84), rgba(25, 24, 26, 0)) } .solu_group_list .group_wrapper .gradient_orange:after { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UxNjgxYyIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZTk4MDQxIiBzdG9wLW9wYWNpdHk9IjAuNzciLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3MTZhNjUiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #e1681c), color-stop(50%, rgba(233, 128, 65, 0.77)), color-stop(100%, rgba(113, 106, 101, 0))); background-image: -moz-linear-gradient(left, #e1681c, rgba(233, 128, 65, 0.77), rgba(113, 106, 101, 0)); background-image: -webkit-linear-gradient(left, #e1681c, rgba(233, 128, 65, 0.77), rgba(113, 106, 101, 0)); background-image: linear-gradient(to right, #e1681c, rgba(233, 128, 65, 0.77), rgba(113, 106, 101, 0)) } .solu_group_list .group_wrapper .gradient_blue:after { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFjNWVlMSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjNDE4YWU5IiBzdG9wLW9wYWNpdHk9IjAuNzciLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3MTZhNjUiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #1c5ee1), color-stop(50%, rgba(65, 138, 233, 0.77)), color-stop(100%, rgba(113, 106, 101, 0))); background-image: -moz-linear-gradient(left, #1c5ee1, rgba(65, 138, 233, 0.77), rgba(113, 106, 101, 0)); background-image: -webkit-linear-gradient(left, #1c5ee1, rgba(65, 138, 233, 0.77), rgba(113, 106, 101, 0)); background-image: linear-gradient(to right, #1c5ee1, rgba(65, 138, 233, 0.77), rgba(113, 106, 101, 0)) } .solu_group_list .group_wrapper .gradient_grayblue:after { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcyOWNiNCIgc3RvcC1vcGFjaXR5PSIwLjg3Ii8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiM2MTg1OTkiIHN0b3Atb3BhY2l0eT0iMC43MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM5NGU1YSIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(114, 156, 180, 0.87)), color-stop(50%, rgba(97, 133, 153, 0.72)), color-stop(100%, rgba(57, 78, 90, 0))); background-image: -moz-linear-gradient(left, rgba(114, 156, 180, 0.87), rgba(97, 133, 153, 0.72), rgba(57, 78, 90, 0)); background-image: -webkit-linear-gradient(left, rgba(114, 156, 180, 0.87), rgba(97, 133, 153, 0.72), rgba(57, 78, 90, 0)); background-image: linear-gradient(to right, rgba(114, 156, 180, 0.87), rgba(97, 133, 153, 0.72), rgba(57, 78, 90, 0)) } .solu_group_list .group_wrapper .gradient_wathetblue:after { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAzMDkwYyIgc3RvcC1vcGFjaXR5PSIwLjk0Ii8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiMyMTI4MmQiIHN0b3Atb3BhY2l0eT0iMC43NyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzJjMzMzNyIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(3, 9, 12, 0.94)), color-stop(50%, rgba(33, 40, 45, 0.77)), color-stop(100%, rgba(44, 51, 55, 0))); background-image: -moz-linear-gradient(left, rgba(3, 9, 12, 0.94), rgba(33, 40, 45, 0.77), rgba(44, 51, 55, 0)); background-image: -webkit-linear-gradient(left, rgba(3, 9, 12, 0.94), rgba(33, 40, 45, 0.77), rgba(44, 51, 55, 0)); background-image: linear-gradient(to right, rgba(3, 9, 12, 0.94), rgba(33, 40, 45, 0.77), rgba(44, 51, 55, 0)) } .solu_group_list .group_wrapper .gradient_purple:after { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlMGZkOSIgc3RvcC1vcGFjaXR5PSIwLjg4Ii8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiMyYTBmYzIiIHN0b3Atb3BhY2l0eT0iMC41OCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzJhMGZjMSIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(46, 15, 217, 0.88)), color-stop(50%, rgba(42, 15, 194, 0.58)), color-stop(100%, rgba(42, 15, 193, 0))); background-image: -moz-linear-gradient(left, rgba(46, 15, 217, 0.88), rgba(42, 15, 194, 0.58), rgba(42, 15, 193, 0)); background-image: -webkit-linear-gradient(left, rgba(46, 15, 217, 0.88), rgba(42, 15, 194, 0.58), rgba(42, 15, 193, 0)); background-image: linear-gradient(to right, rgba(46, 15, 217, 0.88), rgba(42, 15, 194, 0.58), rgba(42, 15, 193, 0)) } .solu_group_list .group_wrapper .gradient_wathetpurple:after { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA0MTQ1OCIgc3RvcC1vcGFjaXR5PSIwLjg2Ii8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiMwOTE5NTgiIHN0b3Atb3BhY2l0eT0iMC44NSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzFjMzQ4YiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(4, 20, 88, 0.86)), color-stop(50%, rgba(9, 25, 88, 0.85)), color-stop(100%, rgba(28, 52, 139, 0))); background-image: -moz-linear-gradient(left, rgba(4, 20, 88, 0.86), rgba(9, 25, 88, 0.85), rgba(28, 52, 139, 0)); background-image: -webkit-linear-gradient(left, rgba(4, 20, 88, 0.86), rgba(9, 25, 88, 0.85), rgba(28, 52, 139, 0)); background-image: linear-gradient(to right, rgba(4, 20, 88, 0.86), rgba(9, 25, 88, 0.85), rgba(28, 52, 139, 0)) } .solu_group_list .group_wrapper .gradient_wathetorange:after { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M5NTAyMiIgc3RvcC1vcGFjaXR5PSIwLjgiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2I1MzgwOSIgc3RvcC1vcGFjaXR5PSIwLjQ0Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmNhNjgwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(201, 80, 34, 0.8)), color-stop(50%, rgba(181, 56, 9, 0.44)), color-stop(100%, rgba(252, 166, 128, 0))); background-image: -moz-linear-gradient(left, rgba(201, 80, 34, 0.8), rgba(181, 56, 9, 0.44), rgba(252, 166, 128, 0)); background-image: -webkit-linear-gradient(left, rgba(201, 80, 34, 0.8), rgba(181, 56, 9, 0.44), rgba(252, 166, 128, 0)); background-image: linear-gradient(to right, rgba(201, 80, 34, 0.8), rgba(181, 56, 9, 0.44), rgba(252, 166, 128, 0)) } .solu_group_list .group_wrapper .blank .img_thumbnail { top: 50%; left: auto; width: 94.75%; -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%) } .btn_vido_play { display: block; width: 70px; height: 70px; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .btn_vido_play:before { content: ""; display: block; width: 100%; height: 100%; background-color: #fff; -moz-transform: scale(0.7, 0.7) rotate(45deg); -ms-transform: scale(0.7, 0.7) rotate(45deg); -webkit-transform: scale(0.7, 0.7) rotate(45deg); transform: scale(0.7, 0.7) rotate(45deg); -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .btn_vido_play:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; border-left: 12px solid #DC5F00; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-top: -8px; margin-left: -3px; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .page_title { font-size: 36px; letter-spacing: 1px; line-height: 60px; line-height: 36px; color: #333; font-weight: 400 } .page_title span { display: block; font-size: 14px; color: #DC5F00; font-family: "GothamBook"; letter-spacing: 0 } .title_page { font-size: 36px; letter-spacing: 1px; line-height: 60px; line-height: 36px; color: #333; font-weight: 400; font-size: 36px; line-height: 56px; letter-spacing: 1px; color: #333 } .title_page span { display: block; font-size: 14px; color: #DC5F00; font-family: "GothamBook"; letter-spacing: 0; display: block; line-height: 20px } .orange { color: #DC5F00 !important } .text_wrapper { font-size: 0; min-height: 50px } .text_wrapper .text-muted { position: relative } .text_wrapper .text-muted:after { content: ""; display: block; position: absolute; top: 2px; left: -50px; width: 1px; height: calc(100% + 20px); background-color: #E8E8E8; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1 } .group_list { font-size: 0; margin-right: -4.16667%; margin-left: -4.16667% } .group_list li { padding-right: 4.16667%; padding-left: 4.16667% } .group_list li .desc { font-size: 14px; color: #DC5F00; line-height: 24px; margin-top: 20px; height: 100px } .group_list li .icon { width: 30px; height: auto } .group_list li:nth-child(1) article, .group_list li:nth-child(2) article, .group_list li:nth-child(3) article, .group_list li:nth-child(4) article { border-bottom: 1px solid #F2F2F2 } .group_list li:nth-child(n+5) { margin-top: -1px } .group_list li:nth-child(n+5) article { padding-top: 60px; border-top: 1px solid #F2F2F2 } .scien { padding-top: 70px; padding-bottom: 80px } .scien > h3 { text-align: center; color: #fff !important } .column li figure { height: 90px } .column li figure .icon { display: inline-block; max-width: 100% } .column li figcaption { font-size: 16px; line-height: 30px; color: #fff; letter-spacing: 1px } .related { padding-top: 100px; padding-bottom: 100px } .pro_list { margin-left: -.83333%; margin-right: -.83333% } .pro_list li { padding-left: .83333%; padding-right: .83333%; margin-bottom: 30px } .pro_list li > a { display: block; background-color: #fff; position: relative } .pro_list li > a > h4 { font-size: 14px; letter-spacing: 1px; color: #B9B9B9; -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); position: absolute; top: 40px; left: 25px } .pro_list li > a .btn_shape { display: block; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; -moz-transition: all .6s ease; -o-transition: all .6s ease; -webkit-transition: all .6s ease; transition: all .6s ease; -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; visibility: hidden } .pro_list li > a .btn_shape:after { content: ""; display: block; width: 100%; height: 100%; -moz-transform: rotate(45deg) scale(0.7); -ms-transform: rotate(45deg) scale(0.7); -webkit-transform: rotate(45deg) scale(0.7); transform: rotate(45deg) scale(0.7); background-color: #DC5F00 } .pro_list li > a .btn_shape i { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 200 } .pro_list li > a .btn_shape i:after, .pro_list li > a .btn_shape i:before { content: ""; display: block; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff } .pro_list li > a .btn_shape i:after { width: 12px; height: 2px } .pro_list li > a .btn_shape i:before { width: 2px; height: 12px } .pro_list li > a > .img-box:before { padding-top: 88.82979% } .pro_list li > a > .img-box .icon_link { display: block; position: absolute; top: 50%; left: 50%; width: 87px; height: 62px; font-size: 62px; text-align: center; line-height: 62px; color: #333; margin-top: -31px; margin-left: -43px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; visibility: hidden; -moz-transform: translate(-10px, -10px); -ms-transform: translate(-10px, -10px); -webkit-transform: translate(-10px, -10px); transform: translate(-10px, -10px) } .pro_list li > a > figcaption { position: relative; padding-bottom: 20px } .pro_list li > a > figcaption h3 { font-size: 14px; line-height: 26px; color: #DC5F00; padding: 0 20px; height: 80px; overflow: hidden } .pro_list li > a > figcaption h1 { font-size: 28px; letter-spacing: 1px; line-height: 26px; font-weight: 400; color: #333; padding: 0 20px; height: 66px } .pro_list .poster { width: 50% } .poster .server { display: block; padding-top: 0; padding-bottom: 0; position: relative; text-align: left; overflow: hidden } .poster .img-box:before { padding-top: 63.77551%; padding-top: 68.20513%; padding-top: 42.82051% } .poster figcaption { position: absolute; top: 50%; left: 60px } .poster figcaption .tel { font-size: 16px; font-weight: 400; letter-spacing: 1px; line-height: 55px; color: #fff } .poster figcaption h3 { font-size: 34px; font-weight: 400; letter-spacing: 1px; line-height: 55px; color: #fff; margin-bottom: 25px } .works_mod_list { margin-left: -1px; margin-right: -1px } .works_mod_list li { padding: 0 1px } .works_mod_list li a { display: block } .works_mod_list li .img-box:before { padding-top: 57.14286% } .works_mod_list li figcaption { background-color: #F7F7F7; padding-top: 30px; padding-left: 7.5188%; padding-right: 13.15789%; padding-bottom: 50px } .works_mod_list li figcaption h3 { font-size: 24px; font-size: 22px; color: #333; line-height: 34px; font-weight: 400; margin-bottom: 5px; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease; height: 68px; overflow: hidden; display: table-cell; vertical-align: top } .works_mod_list li figcaption .text { font-size: 0; height: 60px } .works_mod_list li figcaption .text p { display: inline-block; vertical-align: top; font-size: 16px; color: #333; width: 49%; line-height: 30px } .works_mod_list li figcaption .read_more { color: #999; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .works_mod_list li .text-muted { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: 50px } .case-video--list .item_box figcaption { background-color: #fff; padding-top: 30px; padding-left: 7.5188%; padding-right: 13.15789%; padding-bottom: 50px } .case-video--list .item_box h3 { font-size: 24px; font-size: 22px; color: #333; line-height: 34px; font-weight: 400; margin-bottom: 5px; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease; height: 68px; overflow: hidden; display: table-cell; vertical-align: top } .case-video--list .item_box .text { font-size: 0 } .case-video--list .item_box .text p { display: inline-block; vertical-align: middle; font-size: 16px; color: #333; width: 49% } .page { font-size: 0 } .page .btn { line-height: 80px; height: 80px; color: #fff; font-size: 24px; font-weight: 400; letter-spacing: 2px; text-align: center; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .page .btn_prev { background-color: #DC5F00 } .page .btn_next { background-color: #171715 } .hot { padding-top: 150px } .hot_group { font-size: 0; margin-left: -.83333%; margin-right: -.83333% } .hot_mod { padding-left: .83333%; padding-right: .83333%; overflow: hidden } .hot_mod figcaption { width: 278px; padding-top: 12% } .hot_mod figcaption h1 { font-size: 30px; font-weight: 400; letter-spacing: 1.5px; line-height: 56px; color: #DC5F00; color: #333; margin-bottom: 10px } .hot_mod figure { width: calc(100% - 278px); vertical-align: middle } .hot_mod > a { display: block; font-size: 0; padding-left: 60px; background-color: #fff; position: relative } .hot_mod > a > h4 { font-size: 14px; letter-spacing: 1px; color: #B9B9B9; -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); position: absolute; top: 40px; right: 40px } .hot_mod .param { font-size: 14px; font-weight: 300; line-height: 26px; letter-spacing: 1.5px; color: #999 } .hot_mod .param strong { font-weight: 400; color: #333; margin-left: 30px } .hot_mod .img-box:before { padding-top: 100% } .hot_mod .tig { display: block; position: absolute; top: 0; left: 0; width: 138px; height: 40px; background-color: #333; line-height: 40px; text-align: center; color: #fff; font-size: 14px; letter-spacing: 1px } .product_mod { padding-top: 100px; padding-bottom: 160px } .nav-tabs_wrapper .nav-tabs li { padding-left: 2.60417vw; margin-bottom: 0 } .nav-tabs_wrapper .nav-tabs li a { font-size: 18px; color: #333; line-height: 39px; letter-spacing: 1.5px; background: none } .nav-tabs_wrapper .nav-tabs li:hover a, .nav-tabs_wrapper .nav-tabs .active a { color: #DC5F00; font-weight: 400 } .nav-tabs_wrapper form { font-size: 0 } .nav-tabs_wrapper .select-wrapper { position: relative; display: inline-block; vertical-align: top; margin-left: 2.60417vw; margin-bottom: 0 } .nav-tabs_wrapper .select-wrapper .select-button { padding: 0; margin: 0; border: none; background: none; font-size: 18px; color: #333; line-height: 39px; letter-spacing: 1.5px; cursor: pointer } .nav-tabs_wrapper .select-wrapper .select-button:focus { outline: none } .nav-tabs_wrapper .select-wrapper .select-list { display: none; position: absolute; top: 39px; border-top: 2px solid #fff; left: 0; background-color: #fff; background-color: #161616; z-index: 200; text-align: left; width: 128px } .nav-tabs_wrapper .select-wrapper ul { padding: 10px 20px } .nav-tabs_wrapper .select-wrapper ul li { font-size: 14px; color: #999; line-height: 14px; padding: 10px 0; letter-spacing: .6px } .nav-tabs_wrapper .measure_select ul li { width: 96px } .nav-tabs_wrapper .region_select ul li { width: 60px } .nav-tabs_wrapper .region_select .select-list .scrollBar { height: 30vh } .loading { display: block } .loading .label { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 20 } .loading .label:before, .loading .label:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff } .loading .label:before { width: 12px; height: 2px } .loading .label:after { width: 2px; height: 12px } .loading .text { display: inline-block; font-size: 14px; line-height: 30px; font-family: "GothamBook"; color: #333; vertical-align: 26px; margin-left: 28px; text-transform: uppercase } .btn-primary .shape { display: inline-block; width: 86px; height: 86px; width: 60px; height: 60px; position: relative } .btn-primary .shape:before, .btn-primary .shape:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -moz-transform: scale(0.7, 0.7) rotate(45deg); -ms-transform: scale(0.7, 0.7) rotate(45deg); -webkit-transform: scale(0.7, 0.7) rotate(45deg); transform: scale(0.7, 0.7) rotate(45deg); z-index: 10 } .btn-primary .shape:before { background-color: #DC5F00; z-index: 20 } .btn-primary .shape:after { background-color: #212121; z-index: 10; margin-left: -10px } .productbanner:before { padding-top: 41.66667% } .productbanner .pagetitle { top: 16%; left: 4% } .pro_swiper { padding-left: 80px } .pro_swiper .arrow { display: block; margin-top: 40px; margin-bottom: 40px } .pro_swiper .arrow .shape { width: 58px; height: 58px; text-align: center; line-height: 58px } .pro_swiper .arrow .shape i { position: relative; z-index: 30; color: #fff } .pro_swiper .arrow_slick { position: absolute; top: 50%; right: 10px; z-index: 200 } .pro_swiper .pro_js_slick { width: 60% } .pro_text { padding-left: 0; padding-right: 0 } .pro_text figcaption { width: 380px; padding-top: 6%; margin-left: 22.5% } .pro_text figcaption h1 { color: #333 } .pro_text .param span { color: #333; font-weight: 400 } .pro_picture ul li { overflow: hidden } .pro_picture figure { width: 50% } .pro_picture figure:before { padding-top: 62.5% } .pro_picture figcaption { width: 50%; position: relative } .pro_picture figcaption:before { padding-top: 62.5% } .pro_picture figcaption h3 { font-size: 30px; line-height: 34px; letter-spacing: 1.5px; color: #fff; font-weight: 400; margin-bottom: 10px } .pro_picture figcaption h4 { font-size: 14px; line-height: 24px; letter-spacing: 2px; color: #fff } .pro_picture .description { font-size: 14px; line-height: 36px; letter-spacing: 2px; color: #fff; margin-top: 30px } .pro_picture .description img { display: inline-block; width: 20px; height: 20px; vertical-align: -5px; margin-right: 20px } .pro_picture .description p { position: relative; padding-left: 40px } .pro_picture .description p img { position: absolute; top: 8px; left: 0 } .pro_picture .text-info, .pro_picture .text_primary { position: absolute; top: 50% } .pro_picture .text_lead { position: absolute; top: 110px; left: 8.33333%; margin-left: 17px; z-index: 200 } .pro_picture .text_lead h3 { font-size: 30px; letter-spacing: 1.5px; line-height: 34px; color: #333; font-weight: 400 } .pro_picture .text_lead h4 { font-size: 14px; line-height: 34px; color: #DC5F00; font-family: "GothamBook" } .pro_picture .list li.block_left figure { float: left } .pro_picture .list li.block_left figcaption { float: right; background-color: #DC5F00 } .pro_picture .list li.block_left .text-info { left: 17.70833%; width: 70% } .pro_picture .list li.block_right figure { float: right } .pro_picture .list li.block_right figcaption { float: left; background-color: #DC5F00 } .pro_picture .list li.block_right .text-info { right: 17.54167%; width: 70%; right: 27.08333%; width: 62% } .pro_picture .list li.block_pull figure { float: right } .pro_picture .list li.block_pull figure img { width: 106.4%; left: auto; right: 0; background: none } .pro_picture .list li.block_pull figcaption { float: left } .pro_picture .list li.block_pull figcaption h3 { color: #333 } .pro_picture .list li.block_pull figcaption h4 { color: #999 } .pro_picture .list li.block_pull .text-info { right: 27.08333%; width: 62% } .pro_picture .list li.block_pull .description { color: #DC5F00 } .pro_picture .list li.block_center { position: relative } .pro_picture .list li.block_center:before { content: ""; display: block; padding-top: 33.33333% } .pro_picture .list li.block_center .text_primary { right: 34.95833%; right: 24.95833%; margin-top: 90px; width: 34% } .pro_picture .list li.block_center .text_primary:before { content: ""; display: block; width: 163px; width: 51%; height: 40px; background: url(../assets/img/icon_03.svg) no-repeat center center; position: absolute; top: 62%; left: -73%; background-size: cover } .pro_picture .list li.block_center figure { position: absolute; left: 0; right: 0; bottom: 0; margin-left: auto; margin-right: auto } .pro_picture .list li.block_center figure:before { padding-top: 66.66667% } .pro_picture .list li.block_center figcaption { position: absolute; top: 0; right: 0 } .pro_picture .list li.block_center figcaption .icon { margin-bottom: 40px } .pro_picture .list li.block_center figcaption h3 { color: #333; font-size: 18px; margin-bottom: 20px } .pro_picture .list li.block_center figcaption p { font-size: 12px; color: #999 } .work_module { padding-top: 100px; padding-bottom: 120px } .work_module li figcaption { background-color: #fff } .related_video { padding-bottom: 100px; padding-top: 110px; overflow: hidden; position: relative } .video_wrapper .img-box:before { padding-top: 31.25% } .video_wrapper figcaption { font-size: 24px; letter-spacing: 1.5px; line-height: 34px; color: #DC5F00; font-weight: 400 } .video_wrapper .videopopup { display: none; overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 500 } .video_wrapper .videopopup video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%; z-index: 20 } .video_wrapper .videopopup .btn_video_pause { position: absolute; top: 0; right: 0; width: 50px; height: 50px; line-height: 50px; text-align: center; z-index: 600 } .work_wrapper { padding-top: 150px; padding-bottom: 130px } .pagination { text-align: center } .pagination a { display: inline-block; vertical-align: top; width: 38px; height: 38px; text-align: center; line-height: 38px; margin: 0 7px } .pagination .btn { color: #DC5F00; font-size: 16px } .pagination .pg { font-size: 14px; letter-spacing: 1px; color: #333; font-family: "GothamBook" } .pagination .current, .pagination .pg:hover { background-color: #DC5F00; color: #fff } .area_column { padding-top: 95px; padding-bottom: 95px; text-align: center } .area_column figure { height: 62px } .area_column figure img { height: 62px; width: auto } .area_column figcaption { margin-top: 20px; font-size: 16px; letter-spacing: 1px; color: #333; line-height: 30px; font-weight: 400 } .panel-body { width: 52.08333%; margin-left: auto; margin-right: auto; font-size: 14px; letter-spacing: 1px; color: #999; line-height: 26px; font-weight: 400 } .panel-body h1 { font-size: 30px; letter-spacing: 1px; line-height: 42px; color: #333; font-weight: 400 } .panel-body img { display: block; max-width: 100%; margin-left: auto; margin-right: auto; width: auto !important; height: auto !important } .panel-body h3 { font-size: 24px; letter-spacing: 1.5px; line-height: 34px; color: #DC5F00; font-weight: 400; font-size: 18px; letter-spacing: 1px; font-weight: 400 } .panel-body p a { color: #2980b9 !important } .backlist { font-size: 14px; letter-spacing: .4px; color: #333; line-height: 17px; font-family: "GothamBook"; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .backlist i { color: #DC5F00; margin-right: 5px; vertical-align: -2px; font-size: 20px } .share { font-size: 14px; letter-spacing: .4px; color: #333; line-height: 17px; font-family: "GothamBook" } .share span { margin-right: 8px } .share a { color: #333; margin: 0 10px !important } .share .btn-youku { font-size: 48px !important; vertical-align: -14px } .pagings { font-size: 0 } .pagings a { display: inline-block; vertical-align: top; width: 49.9%; height: 60px; line-height: 60px; font-size: 14px; letter-spacing: 1.5px; color: #E4E4E4; position: relative } .pagings a span { color: #fff } .pagings a .bt { position: absolute; top: 50%; margin-top: -30px } .pagings a .txt { display: inline-block; overflow: hidden } .pagings .prev { background-color: #171715; text-align: left; padding-left: 40px } .pagings .prev span { margin-right: 10px } .pagings .prev .txt { padding-left: 52px } .pagings .prev .bt { left: 40px } .pagings .next { background-color: #DC5F00; text-align: right; padding-right: 40px } .pagings .next span { margin-left: 10px } .pagings .next .txt { padding-right: 52px } .pagings .next .bt { right: 40px } .hot_news { font-size: 0; padding-top: 150px } .hot_news figure:before { padding-top: 62.5% } .hot_news figcaption { font-size: 14px; letter-spacing: 1px; color: #999; line-height: 26px; font-weight: 400; background-color: #fff } .hot_news figcaption:before { padding-top: 62.5% } .hot_news figcaption time { font-size: 14px; letter-spacing: 1px; color: #999; line-height: 26px; font-weight: 400 } .hot_news figcaption h3 { font-size: 24px; letter-spacing: 1.5px; line-height: 34px; color: #DC5F00; font-weight: 400; color: #333; margin-bottom: 20px; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease; margin-top: 10px } .hot_news article { position: absolute; top: 50%; left: 10%; right: 10% } .news_mod_list { padding-top: 100px; margin-left: -.83333%; margin-right: -.83333% } .news_mod_list li { padding-left: 1%; padding-right: 1%; position: relative; margin-bottom: 30px } .news_mod_list a { display: block; background-color: #fff } .news_mod_list figure:before { padding-top: 64.89362% } .news_mod_list figcaption { padding-left: 10.6383%; padding-right: 10.6383%; padding-top: 30px; padding-bottom: 60px; background-color: #fff; height: 230px } .news_mod_list figcaption .desc { font-size: 24px; letter-spacing: 1.5px; line-height: 34px; color: #DC5F00; font-weight: 400; font-size: 18px; color: #333; line-height: 30px; height: 130px; border-bottom: 1px solid rgba(51, 51, 51, 0.1); overflow: hidden } .news_mod_list figcaption time { display: block; font-size: 14px; letter-spacing: 1px; color: #999; line-height: 26px; font-weight: 400; margin-top: 20px; letter-spacing: 0 } .news_mod_list .category { position: absolute; bottom: 0; left: 0; width: 135px; font-size: 14px; letter-spacing: 1px; color: #999; line-height: 26px; font-weight: 400; line-height: 40px; text-align: center; background-color: #333; color: #fff } .news_mod_list .empty .category { top: 0; bottom: auto } .news_mod_list .empty figcaption h3 { position: absolute; top: 80px; left: 13.6383%; right: 10.6383% } .news_module { padding-top: 100px; padding-bottom: 150px } .know_module { padding-top: 80px } .know_module .news_mod_list { padding-top: 0 } .related_news { padding-top: 106px; padding-bottom: 70px } .related_news .news_mod_list { padding-top: 0 } .aboutbanner:before { padding-top: 41.66667% } .aboutbanner .mask { height: 120px } .aboutbanner .mask h1 { line-height: normal; padding-top: 30px; padding-bottom: 30px; font-size: 22px; line-height: 32px; padding-left: 16.66667%; font-weight: 400 } .text_title { font-size: 30px; letter-spacing: 1px; line-height: 42px; color: #333; font-weight: 400; font-size: 36px; line-height: 60px; color: #DC5F00 } .text_title h3 { font-size: 30px; letter-spacing: 1px; line-height: 42px; color: #333; font-weight: 400; font-size: 36px; line-height: 60px; color: #DC5F00 } .global { padding-top: 180px; padding-bottom: 150px; position: relative } .global .list { position: relative; z-index: 300 } .global .list li { float: left; position: relative } .global .list .box { padding-top: 100%; position: relative; font-size: 20px; line-height: 37px; letter-spacing: 1px; font-weight: 400; color: #333; text-align: center } .global .list .box p { position: absolute; top: 50%; left: 0; width: 100%; padding: 0 20px } .global .list .box span { display: block; font-size: 12px; line-height: 28px; color: #989898; color: #333; font-family: "GothamBook"; font-weight: 300; letter-spacing: -0.2px } .global .list .box:after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } .global .list li:nth-child(odd) .box:after { display: none; border-top: 1px dashed transparent; border-left: 1px solid #DC5F00; border-right: 1px dashed transparent; border-bottom: 1px solid #DC5F00; left: 1px; width: calc(100% - 2px); height: calc(100% - 2px) } .global .list li:nth-child(even) .box:after { display: none; border-top: 1px solid #DC5F00; border-left: 1px dashed transparent; border-right: 1px solid #DC5F00; border-bottom: 1px dashed transparent } .global .list li:first-child:after, .global .list li:first-child:before { display: none; display: block } .global .list li:first-child .box:after { display: none; border-top: 1px dashed #DC5F00; border-right: 1px dashed #DC5F00 } .global .bg { position: absolute; top: 50%; left: 0; right: 0; margin-left: auto; margin-right: auto; max-width: 100% } .global .chart-desktop { margin-top: 80px } .global .tt_container { position: relative } .global .tt_container svg { position: absolute; top: 0; left: 0; width: 100% } .global .globalMap figure { margin-top: 80px; width: 87.5%; margin-left: auto; margin-right: auto } .global .globalMap .img-box:before { padding-top: 46.21429% } .history { padding-top: 150px; padding-bottom: 150px; position: relative } .history .history_slick { position: relative } .history .arrow_slots { width: 10%; height: 40px } .history .arrow { position: absolute; top: 2px; font-size: 20px; color: #333; cursor: pointer; z-index: 400; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .history .btn_arrow_prev, .history .btn_arrow_next { top: 50% } .history .arrow_prev { left: 0; text-align: left } .history .btn_arrow_prev { left: 0px } .history .arrow_next { right: 0; text-align: right } .history .btn_arrow_next { right: 0px } .history .month_spot { position: absolute; top: 148px; left: 0; width: 100% } .history .slot { font-size: 0; line-height: 12px; text-align: center; position: absolute; top: 50%; margin-top: -28px } .history .slot span { display: inline-block; vertical-align: middle; width: 8px; background-color: #E8E8E8; border-radius: 50%; margin: 0 8px; text-align: center } .history .slot span:after { content: ""; display: block; padding-top: 100% } .history .slot .pointer { width: 12px; height: 12px } .history .slot_left { left: 0; text-align: left } .history .slot_right { right: 0; text-align: right } .history_wrapper { position: relative; padding-left: 2%; padding-right: 2%; cursor: ew-resize } .history_slick_swiper .slick-slide .slick_item_box { background-color: #fff; text-align: center; padding-top: 60px; padding-bottom: 80px; margin-left: 8.51064%; margin-right: 8.51064%; padding-left: 16.66667%; padding-right: 16.66667% } .history_slick_swiper .slick-slide .text-muted { height: 130px; height: 184px; height: 240px } .history_slick_swiper .slick-slide .month { font-size: 36px; line-height: 1.4; color: #333; font-family: "GothamBook" } .history_slick_swiper .slick-slide .year { font-size: 12px; line-height: 15px; color: #333; font-family: "GothamBook"; margin-top: 8px } .history_slick_swiper .slick-slide em { display: block; width: 12px; height: 2px; background-color: #333; margin-left: auto; margin-right: auto } .history_slick_date .slick_item { cursor: pointer; position: relative } .history_slick_date .slick_item em { display: block; width: 20px; height: 20px; background-color: #333; border-radius: 50%; margin-left: auto; margin-right: auto } .history_slick_date .slick_item time { display: block; font-size: 24px; line-height: 24px; color: #333; font-family: "GothamBook"; margin-top: 20px; text-align: center } .history_slick_date .slick-current em { background-color: #DC5F00 } .history_slick_date .slick-current time { color: #DC5F00 } .location { font-size: 0 } .location .img-box:before { padding-top: 53.33333%; background-color: #DC5F00 } .location .order { font-size: 50px; letter-spacing: 1px; line-height: 97px; color: #fff; font-family: "GothamBook" } .location figcaption { position: absolute; top: 50%; left: 16.66667% } .location figcaption h3 { font-size: 30px; line-height: 32px; letter-spacing: 2px; color: #fff; font-weight: 400 } .location figcaption p { font-size: 20px; line-height: 44px; color: #fff; letter-spacing: 2px; font-weight: 400 } .honor_module { padding-top: 160px; padding-bottom: 150px } .honor_mod_list { font-size: 0; margin-left: -.83333%; margin-right: -.83333% } .honor_mod_list li { margin-bottom: 30px; padding: 0 .83333% } .honor_mod_list li .img-box:before { padding-top: 115.42553% } .honor_mod_list li figcaption { font-size: 22px; font-size: 18px; letter-spacing: 1px; line-height: 40px; color: #333; font-weight: 400; padding: 30px 0; text-align: center } .innerbanner .address { height: auto; padding-top: 30px; padding-bottom: 60px; background-image: url(../upload/contact/bgcover.svg); background-repeat: no-repeat; background-position: center center; background-size: cover } .innerbanner .address h1 { left: 16.66667%; font-size: 36px; letter-spacing: 2px; line-height: 39px } .address { font-size: 20px; font-size: 18px; line-height: 32px; letter-spacing: 1px; color: #fff } .address h1 { font-size: 36px; line-height: 40px; letter-spacing: 2px; color: #fff; padding-top: 0; padding-bottom: 0 } .address address, .address .tel, .address .email { padding-left: 80px; position: relative; margin-left: 16.66667% } .address address i, .address .tel i, .address .email i { display: inline-block; width: 42px; height: 42px; text-align: center; line-height: 47px; position: absolute; top: 50%; left: 0; margin-top: -21px; font-size: 26px } .address address i:after, .address .tel i:after, .address .email i:after { display: block; content: ""; width: 100%; height: 100%; border: 1px solid rgba(255, 255, 255, 0.1); position: absolute; top: 0; left: 0; -moz-transform: scale(0.7, 0.7) rotate(45deg); -ms-transform: scale(0.7, 0.7) rotate(45deg); -webkit-transform: scale(0.7, 0.7) rotate(45deg); transform: scale(0.7, 0.7) rotate(45deg) } .address address i:before, .address .tel i:before, .address .email i:before { margin-left: 4px } .address .line { display: block; position: relative; width: 2px; height: 20px; margin-left: 16.66667%; margin-top: 0px; margin-bottom: 6px } .address .line:after, .address .line:before { content: ""; display: block; width: 2px; height: 6px; background-color: rgba(224, 223, 229, 0.2); position: absolute; left: 20px } .address .line:before { top: 0px } .address .line:after { top: 12px } .address .tel { line-height: 42px } .address .tel + .line { margin-top: 8px } .address .email { line-height: 42px } .office .img-box:before { padding-top: 64.89362% } .office figcaption { padding-top: 30px; padding-right: 94px; margin-bottom: 20px } .office figcaption h3 { font-size: 22px; letter-spacing: 1px; line-height: 40px; color: #333; font-weight: 400; margin-bottom: 10px } .office figcaption p { position: relative; padding-left: 28px; padding-bottom: 10px } .office figcaption p i { position: absolute; top: 1px; left: -5px; font-size: 26px } .office ul { margin-left: -.83333%; margin-right: -.83333% } .office ul li { padding-left: .83333%; padding-right: .83333%; margin-bottom: 30px } .sales { margin-bottom: 130px } .sales .img-box:before { padding-top: 31.25% } .sales .pos { position: absolute; width: 1px; height: 1px } .sales .point { display: block; width: 8px; height: 8px; background-color: #fff; border-radius: 50%; position: absolute; top: 50%; left: 50%; margin-top: -4px; margin-left: -4px } .sales .spot { display: block; position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; margin-top: -40px; margin-left: -40px; -moz-animation: scale 1.6s ease infinite alternate both; -webkit-animation: scale 1.6s ease infinite alternate both; animation: scale 1.6s ease infinite alternate both } .sales .rad { position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3) } .sales .rad-80 { width: 80px; height: 80px } .sales .rad-44 { width: 44px; height: 44px } .sales .rad-25 { width: 25px; height: 25px } .sales .pos1 { left: 11.875%; top: 20% } .sales .pos2 { left: 13.17708%; top: 56% } .sales .pos3 { left: 28.28125%; top: 18% } .sales .pos4 { left: 37.65625%; top: 38% } .sales .pos5 { left: 47.44792%; top: 22% } .sales .pos6 { left: 49.58333%; top: 51% } .sales .pos7 { right: 40.625%; top: 86% } .sales .pos8 { right: 32.1875%; top: 78% } .sales .pos9 { right: 21.61458%; top: 71% } .sales .pos10 { right: 23.69792%; top: 35% } .sales .pos11 { right: 15.3125%; top: 50% } .sales .pos12 { right: 5.72917%; top: 77% } .sales .pos13 { right: 15.88542%; top: 21% } .sales ul { margin-left: -3.125%; margin-right: -3.125% } .sales ul li { padding-left: 3.125%; padding-right: 3.125%; margin-bottom: 40px } .sales ul li h3 { font-size: 22px; letter-spacing: 1px; line-height: 30px; color: #333; font-weight: 400; height: 60px; overflow: hidden } .sales ul li .text-muted { padding-bottom: 40px; margin-top: 5px; border-bottom: 2px solid #f2f2f2; padding-top: 0px } .sales ul li .text-muted i { font-size: 26px; display: none } @-webkit-keyframes scale { from { -webkit-transform: translate3d(0, 0, 0) scale(0.6); transform: translate3d(0, 0, 0) scale(0.6) } to { -webkit-transform: translate3d(0, 0, 0) scale(1.04); transform: translate3d(0, 0, 0) scale(1.04) } } @keyframes scale { from { -webkit-transform: translate3d(0, 0, 0) scale(0.6); transform: translate3d(0, 0, 0) scale(0.6) } to { -webkit-transform: translate3d(0, 0, 0) scale(1.04); transform: translate3d(0, 0, 0) scale(1.04) } } .contact { font-size: 0; padding-top: 100px; padding-bottom: 100px } .contact article { display: inline-block; width: 43.75%; vertical-align: top; padding-right: 8.875% } .contact .form { display: inline-block; width: 56.25%; vertical-align: top } .validate_form { margin-right: -4.44444%; font-size: 0 } .validate_form legend { display: block; width: 100%; font-size: 36px; letter-spacing: 1px; line-height: 60px; color: #DC5F00 } .validate_form .form-group { width: 50%; display: inline-block; vertical-align: top; padding-right: 4.44444%; margin-bottom: 40px; position: relative } .validate_form .col_form_group { width: 100% } .validate_form .form-control { display: block; padding: 0; margin: 0; border: none; background: none; height: 50px; font-size: 14px; letter-spacing: 2px; color: #333; font-weight: 400; width: 100%; border: 1px solid #EAEAEA; padding: 0 20px; text-align: left; cursor: pointer } .validate_form .form-group_msg { width: 100% } .validate_form .form-group_msg .form-control { height: 180px; resize: none; padding: 20px } .validate_form .form-control + label { display: block !important; font-size: 14px; letter-spacing: 2px; color: #333; position: absolute; top: 18px; left: 20px; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease; cursor: pointer } .validate_form label.error { position: absolute; bottom: -26px; right: 40px; font-size: 14px; letter-spacing: 2px; color: #DC5F00 } .validate_form .form-control.active { border: 1px solid #DC5F00 } .validate_form .form-control:focus { outline: none } .validate_form .form-group.on .form-control + label, .validate_form .form-control.active + label { -moz-transform: translate(0, -40px); -ms-transform: translate(0, -40px); -webkit-transform: translate(0, -40px); transform: translate(0, -40px); font-size: 12px } .validate_form button { margin-right: 4.44444% } .validate_form button:focus { outline: none } .validate_form .select { display: none; position: absolute; top: 50px; left: 0; width: calc(100% - 4.44444%); background-color: #F7F7F7; background-color: #161616; z-index: 300; padding: 10px 0; border-top: none } .validate_form .select .scrollBar { height: 220px } .validate_form .select ul { padding: 0 20px } .validate_form .select li { font-size: 14px; letter-spacing: 2px; color: #999; padding: 10px 0; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease; cursor: pointer } .validate_form i.icon { position: absolute; top: 50%; right: 55px; margin-top: -15px; font-size: 28px; color: #DC5F00; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease; -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); cursor: pointer } .validate_form .form-group.on i.ico { -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg) } .popover .validate_form .select { width: calc(100% - 8.88888%) } .popover .btn_default { margin-top: -18px } .service { font-size: 0 } .service .area { font-size: 14px; color: #333; line-height: 24px; letter-spacing: 1px; font-weight: 400 } .service .img-box { position: relative } .service .img-box:before { padding-top: 83.33333%; background-color: #DC5F00; background-image: url(../upload/server/bgcover.svg); background-repeat: no-repeat; background-position: center center; background-size: cover } .service .caption { position: absolute; top: 50%; left: 16.66667%; right: 0; font-size: 14px; line-height: 26px; color: #fff; letter-spacing: 1px } .service .caption h3 { font-size: 30px; line-height: 39px; color: #fff; letter-spacing: 2px; font-weight: 400 } .service .caption h4 { font-size: 12px; font-size: 14px; line-height: 24px; letter-spacing: 1px; color: #fff; margin-top: 4px } .service .caption h6 { font-size: 16px; font-weight: 400; letter-spacing: 1px; line-height: 26px; color: #fff } .service .caption article { display: inline-block; vertical-align: top; float: left; width: 50%; margin-top: 60px; padding-right: 15% } .service .caption article i { display: block; border-top: 1px solid #fff; margin-bottom: 20px } .service .btns { margin-bottom: 10px } .service .btns a { display: inline-block; vertical-align: top; color: #fff; margin-right: 40px; position: relative } .service .btns article { font-size: 14px; line-height: 30px; letter-spacing: 1px; position: absolute; top: 0; left: 50%; padding-top: 20px; margin-top: -60px; margin-left: 20px } .serverbanner h1 { padding: 0 27.08333% } .panel_default { padding-top: 0; padding-bottom: 0 } .panel_default table { width: 100% } .panel_default table thead th { font-size: 18px; color: #DC5F00; letter-spacing: 1px; line-height: 39px; font-weight: 400; text-align: center; padding-top: 26px; padding-bottom: 26px; background-color: #F9FAFC } .panel_default table tbody td { font-size: 14px; letter-spacing: 1px; line-height: 24px; color: #666; text-align: center; padding-top: 26px; padding-bottom: 26px } .panel_default table tbody tr:nth-child(odd) td { background-color: #fff } .panel_default table tbody tr:nth-child(even) td { background-color: #F9FAFC } .popover { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 3000 } .popover .container { width: 72.91667%; position: absolute; top: 50%; left: 0; right: 0; background-color: #fff; padding-top: 95px; padding-bottom: 110px } .popover .form { width: 64.28571% } .popover .validate_form legend { margin-bottom: 70px } .popover p { font-size: 14px; letter-spacing: 1px; color: #999; line-height: 26px; font-weight: 400 } .popover .btn_close { position: absolute; top: 40px; right: 40px; font-size: 14px; letter-spacing: 1px; line-height: 20px; color: #333; letter-spacing: 1px; font-weight: 400 } .popover .btn_close i { margin-left: 20px } .support { padding-top: 160px; padding-bottom: 110px } .support ul li { margin-bottom: 40px } .support ul li a { display: block; background-color: #fff } .support ul li i { position: absolute; left: 36px; font-size: 20px; color: #999 } .support ul li p { -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .support ul li p span { -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .support ul li .quest { font-size: 18px; line-height: 84px; color: #333; font-weight: 400; padding: 0 82px; position: relative } .support ul li .quest i { top: 32px } .support ul li .quest .icon_arrow { -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); line-height: 30px } .support ul li .active .quest .icon_arrow { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg) } .support ul li .answer { display: none; border-top: 1px solid rgba(51, 51, 51, 0.1); padding: 0 82px; position: relative; padding-top: 32px; padding-bottom: 60px } .support ul li .answer i { top: 42px } .support ul li .icon_arrow { display: block; width: 30px; height: 30px; position: relative; text-align: center; line-height: 26px; position: absolute; top: 50%; right: 30px; margin-top: -15px } .support ul li .icon_arrow:after, .support ul li .icon_arrow:before { content: ""; display: block; position: absolute; top: 0; left: 0; border-radius: 50% } .support ul li .icon_arrow:after { width: 100%; height: 100%; background-color: rgba(220, 95, 0, 0.2) } .support ul li .icon_arrow:before { top: 3px; bottom: 3px; left: 3px; right: 3px; background-color: #DC5F00 } .support ul li .icon_arrow em { position: relative; z-index: 300; color: #fff; margin-left: -2px } .download ul { margin-left: -2.08333%; margin-right: -2.08333% } .download ul li { padding: 0 2.08333% } .download ul li a { padding: 22px 0; position: relative; padding-left: 28px } .download ul li a img { display: inline-block; vertical-align: top; margin-right: 14px; width: 30px } .download ul li a p span { -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .download ul li .icon_arrow { line-height: 32px } .download ul li .icon_arrow em { margin-left: 2px } .knowledge { padding-top: 160px } .knowledge .img-box:before { padding-top: 31.25% } .knowledge .banner { overflow: hidden } .knowledge .banner figcaption { padding-top: 30px; padding-bottom: 30px; width: 62.5%; font-size: 24px; letter-spacing: 1.5px; line-height: 34px; font-weight: 400 } .knowledge .banner .video_wrapper { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100% } .knowledge .banner video { display: block; object-fit: cover; object-position: center center; height: 100%; width: 100%; z-index: 20 } .knowledge .banner .btn_video_pause { position: absolute; top: 0; right: 0; width: 50px; height: 50px; color: #DC5F00; background-color: #fff; text-align: center; line-height: 50px; font-size: 20px; cursor: pointer; z-index: 300 } .video_list { padding-bottom: 160px } .video_list ul { margin-left: -1px; margin-right: -1px; font-size: 0 } .video_list ul li { margin-bottom: 30px } .video_list ul li .item_box { display: block; margin: 0 1px } .video_list ul li .img-box:before { padding-top: 57.14286% } .video_list ul li figcaption { padding-top: 30px; padding-bottom: 30px; font-size: 22px; letter-spacing: 1.5px; line-height: 34px; font-weight: 400; color: #333 } .video_list ul li .video_wrapper { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100% } .video_list ul li video { display: block; object-fit: cover; object-position: center center; height: 100%; width: 100%; z-index: 20 } .video_list ul li .btn_video_pause { position: absolute; top: 0; right: 0; width: 50px; height: 50px; color: #DC5F00; background-color: #fff; text-align: center; line-height: 50px; font-size: 20px; cursor: pointer; z-index: 300 } .innerbanner .mask-ace { background-color: #212121; height: auto; padding-top: 150px; padding-bottom: 180px } .innerbanner .mask-ace h1 { font-size: 36px; letter-spacing: 2px; line-height: 39px; color: #fff; font-weight: 400; padding-top: 0; padding-bottom: 0 } .innerbanner .mask-ace .text-muted { color: #C9C9C9; width: 300px; vertical-align: top; margin-left: 16.66667% } .innerbanner .mask-ace img { width: 185px; height: 185px; position: absolute; top: 140px; right: 10.41667% } .counter { background-color: #212121 } .counter li { padding: 90px 0; text-align: center; border-right: 1px solid rgba(255, 255, 255, 0.1) } .counter li:nth-child(3n+3) { border-right: none } .counter h5 { font-size: 40px; letter-spacing: .4px; line-height: 48px; color: #DC5F00; font-family: "GothamBook" } .counter h5 span { font-family: "GothamBook" } .counter p { font-size: 12px; letter-spacing: .4px; line-height: 20px; color: #fff } .row h3 { font-size: 30px; letter-spacing: 1px; line-height: 60px; color: #333; font-weight: 400 } .ace_list .img-box:before { padding-top: 62.86837% } .ace_list figcaption { font-size: 20px; line-height: 29px; letter-spacing: 1px; color: #333; font-weight: 400; padding: 30px 0 } .ace_list ul { margin-left: -1.04167%; margin-right: -1.04167% } .ace_list ul li { padding-left: 1.04167%; padding-right: 1.04167% } .tip_list li { margin-bottom: 40px } .tip_list img { display: inline-block; vertical-align: top } .tip_list article { display: inline-block; vertical-align: top; background-color: #F6F6F6; margin-left: 76px; padding: 0 20px; width: 77.8125%; padding-bottom: 14px; position: relative } .tip_list article:before { content: ""; display: block; position: absolute; top: 12px; left: -16px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 16px solid #F6F6F6 } .tip_list article h5 { font-size: 16px; font-weight: 400; letter-spacing: 2px; line-height: 48px; color: #DC5F00 } .relative ul li { padding-right: 7.70833% } .relative ul li i { display: inline-block; vertical-align: -4px; width: 34px; font-size: 24px } .relative ul li .icon-icon_emails:before { margin-left: -10px } .relative ul li .icon-icon_tel1:before { margin-left: -4px } .relative ul li .icon-icon_location1:before { margin-left: -5px } .relative ul li .icon-icon_date1:before { margin-left: -4px } .relative ul li article { display: inline-block; vertical-align: top } .relative ul li article h5 { font-size: 22px; letter-spacing: 1px; line-height: 30px; color: #333; font-weight: 400; margin-bottom: 15px } .relative ul li article em { display: block; padding-bottom: 35px; border-bottom: 1px solid #F2F2F2 } .relative ul li figure { display: inline-block; vertical-align: top; margin-left: 16.66667%; font-size: 14px; letter-spacing: 1px; line-height: 30px; color: #333; font-weight: 400; text-align: center } .innerbanner { overflow: hidden } .allmap { height: 800px; height: calc(100vh - 138px); width: 150% } .search_wrapper { margin-bottom: 150px } .search_wrapper .search-header h3 { margin-bottom: 5px } .search_wrapper .search-header h3, .search_wrapper .search-header p { font-size: 14px; letter-spacing: 1px; line-height: 20px; color: #333; font-weight: 400 } .search_wrapper .list-search { margin-bottom: 110px } .search_wrapper .list-search li { padding-bottom: 20px; margin-bottom: 40px; border-bottom: 1px solid #E8E8E8 } .search_wrapper .list-search li h4 { font-size: 20px; letter-spacing: 1px; line-height: 28px; font-weight: 400; color: #333; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease; margin-bottom: 5px } .search_wrapper .list-search li p { font-size: 16px; line-height: 26px; color: #999 } .search_wrapper .list-search li time { font-family: "GothamBook" } .bdshare-button-style0-16 a, .bdshare-button-style0-16 .bds_more { float: none !important; font-size: 16px !important; background: none !important; padding-left: 0 !important } @media only screen and (min-width: 1921px) { .navbar .nav > li > a { font-size: 18px } .header .btn_search { font-size: 22px } .header .btn_lang { font-size: 16px } .header .btn_inquiry { font-size: 22px } .header .btn_lang > a { font-size: 18px } .dropnav_wrapper li a, .navbar .dropdown li a { font-size: 16px } .formsearch .button { font-size: 22px } .text_info > h3 { font-size: 24px } .information > h3, .pagetitle h1, .pagetitle h2 { font-size: 42px } .information > h4 { font-size: 26px } .text-muted, .pagetitle p, .btn_default { font-size: 16px; line-height: 30px } .work_list li .text_desc h3, .news_list .text_desc h3 { font-size: 26px } .work_list li .text_desc h4, .news_list .text_desc p, .read_more { font-size: 16px; line-height: 30px } .work_list li .text_desc .btn_shape { width: 44px; height: 44px } .server h2 { font-size: 34px } .server p { font-size: 14px } .footer dl dt, .footer dl dt a { font-size: 18px } .footer dl dd, .footer dl dd a { font-size: 16px } .footer .share a { font-size: 18px } .footer .link dd { line-height: 36px } .btn_backtop { width: 70px; height: 70px } .footer .copyringht span { font-size: 14px } .footer .copyringht a { font-size: 16px } .page_title { font-size: 38px; line-height: 38px } .page_title span { font-size: 16px } .group_list li .desc { font-size: 16px; line-height: 26px } .crumbs ul li a { font-size: 16px } .crumbs ul .home a i { font-size: 22px } .hot_mod .tig { font-size: 16px } .hot_mod figcaption h1 { font-size: 32px; line-height: 58px } .hot_mod .param { font-size: 16px; line-height: 28px } .nav-tabs_wrapper .nav-tabs li a { font-size: 20px } .pro_list li > a > figcaption h3 { font-size: 16px; line-height: 28px } .pro_list li > a > figcaption h1 { font-size: 30px; line-height: 28px } .pro_swiper .arrow .shape { width: 76px; height: 76px; line-height: 76px } .pro_picture figcaption h3 { font-size: 32px; line-height: 36px } .pro_picture figcaption h4 { font-size: 16px; line-height: 26px } .pro_picture .description { font-size: 16px; line-height: 38px } .pro_picture .description p img { top: 10px } .pro_picture .list li.block_center .text_primary:before { width: 57%; height: 64px } .area_column figcaption { font-size: 18px } .panel-body, .hot_news figcaption time, .hot_news figcaption { font-size: 16px; line-height: 28px } .pagings a, .backlist, .news_mod_list .category, .hot_news figcaption { font-size: 16px } .backlist i { font-size: 22px } .share { font-size: 16px } .bdshare-button-style0-16 a, .bdshare-button-style0-16 .bds_more { font-size: 18px !important } .news_mod_list figcaption .desc { font-size: 20px; line-height: 32px } .news_mod_list figcaption time { font-size: 16px } .hot_news figcaption h3 { font-size: 26px; line-height: 36px } .panel-body h1 { font-size: 32px; line-height: 44px } .aboutbanner .mask h1 { font-size: 24px; line-height: 34px } .text_title h3 { font-size: 38px; line-height: 62px } .column li figcaption { font-size: 18px; line-height: 32px } .history_slick_swiper .slick-slide .slick_item_box .ellipsis { height: 120px } .global .list .box { font-size: 22px } .global .list .box span { font-size: 14px } .honor_mod_list li figcaption { font-size: 20px } .service .caption h3 { font-size: 32px; line-height: 42px } .service .caption h4 { font-size: 14px } .service .caption h6 { font-size: 18px; line-height: 28px } .service .caption { font-size: 16px; line-height: 28px } .service .btns a { font-size: 18px } .text_muted { font-size: 16px; line-height: 28px } .service .btns article { font-size: 16px; line-height: 28px } .address { font-size: 20px; line-height: 34px } .office figcaption h3 { font-size: 24px } .sales ul li h3 { font-size: 24px } .validate_form .form-control + label { font-size: 16px } .validate_form .form-control { font-size: 16px } .text-muted span { font-size: 20px; line-height: 42px } .knowledge .banner figcaption { font-size: 26px } .counter p { font-size: 14px } .tip_list article h5 { font-size: 18px; line-height: 50px } } @media only screen and (max-width: 1680px) and (min-width: 1025px) { .history_year .slot span { width: 6px; margin: 0 6px } .works_mod_list li figcaption h3 { height: 68px } .pro_swiper figure img { max-width: 100%; width: 100% } .hot_mod figcaption h1, .pro_picture figcaption h3, .pro_picture .text_lead h3 { font-size: 26px; font-weight: 400 } .page_title, .text_title, .title_page { font-size: 26px; font-weight: 400; line-height: 36px } .text_title, .title_page { line-height: 40px } .hot_mod figcaption { padding-bottom: 50px } .pro_list li > a > figcaption h1, .location figcaption h3 { font-size: 22px; font-weight: 400; line-height: 40px } .panel-body h1, .row h3 { font-size: 22px; font-weight: 400 } .row h3 { line-height: 36px } .nav-tabs_wrapper .nav-tabs li:hover a, .nav-tabs_wrapper .nav-tabs .active a { font-weight: 400 } .hot_mod .param strong { font-weight: 400 } .information > h3, .text_title h3 { font-size: 28px; font-weight: 400; line-height: 40px } .custom_paging .currentPage { font-size: 32px; margin-right: 10px } .detailbanenr h1, .detailbanenr h1, .innerbanner h1 { font-size: 28px; font-weight: 400 } .works_mod_list li figcaption h3, .page .btn, .video_wrapper figcaption, .hot_news figcaption h3 { font-size: 18px; font-weight: 400 } .solu_group_list .group_wrapper .img-box h3 { font-size: 26px; line-height: 30px } .news_mod_list figcaption .desc { font-size: 18px; line-height: 24px } .history_slick_date .slick_item time { font-size: 18px } .history_slick_swiper .slick_item .month { font-size: 32px } .location figcaption p { font-size: 16px; font-weight: 400 } .location .order { font-family: 30px; line-height: 80px } .honor_mod_list li figcaption, .relative ul li article h5 { font-size: 18px; font-weight: 400 } .text-muted strong, .text-muted h6 { font-size: 16px; font-weight: 400 } .service figure { width: 40%; overflow: hidden } .service figure:before { padding-top: 124.95164% !important } .service figcaption { width: 60% } .service figure > img { width: auto; height: 100%; left: 50%; -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0) } .office figcaption h3 { font-size: 18px; line-height: 30px; font-weight: 400 } .sales ul li h3 { font-size: 18px; line-height: 30px; height: 60px } .pro_picture .list li.block_center .text_primary:before { width: 163px; width: 73%; height: 40px; top: 54%; left: -78% } .pro_picture .list li.block_center .text_primary { right: 30.95833%; margin-top: 60px; width: 34% } .innerbanner .mask-ace h1 { font-size: 28px; font-weight: 400 } .innerbanner .mask-ace img { width: 120px; height: 120px; top: 50%; margin-top: -60px } .innerbanner .mask-ace { padding-top: 100px; padding-bottom: 130px } .relative .list-4 > li { width: 30% } .allmap { height: calc(100vh - 138px) } .history_slick_swiper .slick-slide .text-muted { height: 250px } .inves_list li .icon { display: block; width: 72px; margin-left: auto; margin-right: auto } .inves_list li .item { height: auto; padding-left: 0; padding-right: 0 } .inves_list li article { width: 100%; text-align: center; margin-left: 0; margin-top: 30px } } @media only screen and (max-width: 1440px) and (min-width: 1025px) { .popover .container { padding-top: 30px; padding-bottom: 30px } .popover .btn_default { margin-top: 20px } .popover .validate_form legend { margin-bottom: 30px } .works_mod_list li figcaption .text p { font-size: .97222vw } .works_mod_list li figcaption { padding-right: 10% } } @media only screen and (min-width: 1025px) { .solu_group_list .group_wrapper .d-inline-block:nth-child(odd) .blank .img_thumbnail { left: 0 } .solu_group_list .group_wrapper .d-inline-block:nth-child(odd) .bd-hd { display: none } .solu_group_list .group_wrapper .d-inline-block:nth-child(even) .blank .img_thumbnail { right: 0 } .solu_group_list .group_wrapper .d-inline-block:nth-child(even) .bd-ft { display: none } .solu_group_list .group_wrapper a:hover .img-box:after { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10); opacity: .1; visibility: hidden } .hot_mod a:hover figcaption h1 { color: #DC5F00 } .hot_mod a:hover .tig { background-color: #DC5F00 } .pro_list li > a:hover > .img-box .icon_link { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; visibility: visible; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0) } .pro_list li > a:hover > .img-box .img_thumbnail { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; visibility: hidden } .pro_list li > a > .img-box .btn_shape { -moz-transform: scale(0.4); -ms-transform: scale(0.4); -webkit-transform: scale(0.4); transform: scale(0.4) } .pro_list li > a:hover > .img-box .btn_shape { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; visibility: visible } .share a:hover { color: #DC5F00 !important } .news_mod_list a:hover figcaption .desc { color: #DC5F00 } .news_mod_list a:hover .category { background-color: #DC5F00; color: #fff } .location figure .img_thumbnail { -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; visibility: hidden } .location > div:hover .img_thumbnail { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; visibility: visible } .location figcaption { z-index: 100 } .location > div .img-box:before { -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .location > div:hover .img-box:before { background-color: rgba(220, 95, 0, 0.5); position: relative; z-index: 50 } .service .btns article { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; visibility: hidden; -moz-transform: translate(0, 20px); -ms-transform: translate(0, 20px); -webkit-transform: translate(0, 20px); transform: translate(0, 20px); -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .service .btns a:hover article { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; visibility: visible; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0) } .crumbs ul li a:hover { color: #DC5F00 } .crumbs ul li.home a:hover i { color: #fff } .news_list .item_box:hover .text_desc h3 { color: #DC5F00 } .news_list .item_box:hover .read_more, .read_more:hover { color: #DC5F00 } .works_mod_list li a { -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .works_mod_list li a:hover figcaption h3 { color: #DC5F00 } .works_mod_list li a:hover .read_more { color: #DC5F00 } .backlist:hover { color: #DC5F00 } .hot_news a:hover figcaption h3 { color: #DC5F00 } .hot_news a:hover .read_more { color: #DC5F00 } .tabs .nav-tabs_wrapper { position: absolute; top: 18px; right: 0; width: 100% } .tabs .nav-tabs_wrapper ul li { margin-left: 50px; padding-left: 0; padding-right: 0 } .validate_form .select li:hover { color: #DC5F00; color: #fff } .history .arrow:hover { color: #DC5F00 } .search_wrapper .list-search li:hover h4 { color: #DC5F00 } .btn_vido_play:hover:after { border-left-color: #fff } .btn_vido_play:hover:before { background-color: #DC5F00 } .btn-primary:hover .shape:after { margin-left: 0 } .pagination a.btn_next:hover, .pagination a.btn_prev:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: .4 } .pagination a.btn_pg:hover { color: #fff; background-color: #DC5F00 } .pagings a:hover { background-color: #ff991e } .pagings .prev:hover { background-color: #333 } .page .btn:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: .8 } .item_wrapper .img-box { overflow: hidden } .item_wrapper img.img_thumbnail { -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .item_wrapper:hover img.img_thumbnail { -moz-transform: scale(1.04); -ms-transform: scale(1.04); -webkit-transform: scale(1.04); transform: scale(1.04) } .download ul li a:hover p span { color: #DC5F00 } .support ul li a:hover .icon_arrow:after { -moz-transform: scale(0.8, 0.8); -ms-transform: scale(0.8, 0.8); -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8) } .support ul li a:hover .quest p span { color: #DC5F00 } .office ul li:nth-last-of-type(1) figcaption, .office ul li:nth-last-of-type(2) figcaption, .office ul li:nth-last-of-type(3) figcaption, .office ul li:nth-last-of-type(4) figcaption { margin-bottom: 0 } .nav-tabs_wrapper .select-wrapper ul li { -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease; cursor: pointer } .nav-tabs_wrapper .select-wrapper ul li:hover { color: #DC5F00; color: #fff } .video_wrapper .videopopup .btn_video_pause:hover { color: #DC5F00 } } .nav-tabs_wrapper .select-wrapper { padding-right: 34px } .nav-tabs_wrapper .select-wrapper .iconfont { display: inline-block; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease; position: absolute; top: 50%; right: 0; margin-top: -3px; width: 34px; height: 6px } .nav-tabs_wrapper .select-wrapper .iconfont:before { position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-left: 6px; line-height: 9px } .nav-tabs_wrapper .select-wrapper.active .iconfont { color: #DC5F00; -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg) } .nav-tabs_wrapper .select-wrapper.active .select-button { color: #DC5F00 } .error-404 { padding: 60px 20px; text-align: center } .error-404 h3 { font-size: 30px; letter-spacing: 1.5px; line-height: 34px; color: #DC5F00; font-weight: 400; color: #333; margin-top: 10px; font-weight: 400; text-align: center } .error-404 p { font-size: 16px; letter-spacing: 1px; color: #999; line-height: 26px; font-weight: 400 } @media only screen and (max-width: 1024px) { .sn-hidden { display: block !important } .sn-visible { display: none !important } .crumbs { top: 100px } .custom_paging { display: none } .controls { display: none } .js_banner_nav { width: 100%; height: auto } .js_banner_nav .slick-slide { width: 100vw; text-align: left } .js_banner_nav .text_info { margin-top: 0; width: 100%; padding: 40px 5.33333% } .text_info > h3 { font-size: 30px; letter-spacing: 1px; line-height: 54px } .information > h3 { font-size: 40px } .information > h4 { font-size: 34px } .work { margin-top: 260px } .information { margin-left: 5.33333%; margin-right: 5.33333% } .ui-mini-mt { margin-left: 5.33333%; margin-right: 5.33333% } .ui-mini-pt { padding-left: 5.33333%; padding-right: 5.33333% } .work_list { margin-top: 100px } .work_list li { width: 100% } .work_list li .text_desc { padding-left: 4%; padding-right: 4%; padding-top: 40px; padding-bottom: 30px } .work_list li .mask { display: none } .work_list li .text_desc h3 { font-size: 34px; position: relative; z-index: 500 } .work_list li .text_desc h4 { font-size: 22px; line-height: 46px; height: 30px; overflow: hidden } .product:before { padding-top: 173.33333% } .pagetitle { width: 100% } .gradient { width: 100%; height: 50% } .pagetitle { left: 0; top: 22px; padding-right: 5.33333%; padding-left: calc(5.33333% + 50px) } .sm_pagetitle { top: 50px } .orange-gradient { top: auto; bottom: 0 } .black-gradient { top: 0 } .pagetitle h2 { font-size: 50px; margin-bottom: 0 } .pagetitle p { font-size: 24px; opacity: 0.7 } .pagetitle article p { display: none } .pagetitle article p:first-child { display: block } .pagetitle .icon { left: 5.33333%; width: 28px; height: 28px; line-height: 28px; top: 5px } .pagetitle .icon:after { width: 24px; height: 24px; border: 2px solid rgba(255, 255, 255, 0.5) } .gradient .text_primary .icon { display: none } .black-gradient .text_primary { bottom: 65px; right: 0; width: 100%; text-align: right; padding-left: 5.33333%; padding-right: 12% } .text_primary h3 { font-size: 28px; line-height: 34px } .text_primary p { font-size: 24px; line-height: 36px } .black-gradient .text_primary:after { content: ""; display: block; position: absolute; width: 40px; height: 206px; background-image: url(../assets/img/icon_15.svg); left: auto; right: 25%; top: 105% } .orange-gradient .text_primary { left: 0; width: 100%; text-align: left; padding-left: 16%; padding-right: 10.66667%; bottom: 60px } .orange-gradient .text_primary:after { content: ""; display: block; position: absolute; width: 40px; height: 214px; background-image: url(../assets/img/icon_17.svg); right: auto; left: 24%; top: -212% } .news { margin-top: 260px } .news_list li { width: 100%; margin-bottom: 140px } .news_list .text_desc h3 { font-size: 34px; font-size: 18px; color: #DC5F00 } .news_list .text_desc .read_more { color: #DC5F00; margin-top: 26px } .news_list .text_desc p { font-size: 24px; line-height: 36px; margin-top: 0 } .news_list .label span { margin-right: 50px } .server { padding: 120px 5.33333%; background-position: 87% center; margin-top: 0 } .col-md-6 { width: 100% } .innerbanner:before { padding-top: 74.4% } .inner-banner .img-box::before { padding-top: 74.4% } .img-box > img { width: auto; height: 100%; left: 50%; -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0) } .solu_group_list { margin-top: 140px } .solu_group_list .group_wrapper .blank .img_thumbnail { height: 70%; width: 100% } .btn_vido_play { width: 80px; height: 80px } .text_wrapper { margin-top: 0; margin-bottom: 150px } .group_list { margin-left: 0; margin-right: 0 } .group_list li { width: 100%; padding-left: 0; padding-right: 0 } .scien .list > li:nth-child(3), .scien .list > li:nth-child(4) { border-bottom: none } .scien .list { margin-top: 0px } .scien { padding-top: 40px; padding-bottom: 10px; margin-top: -30px } .scien .list > li { width: 50%; padding-bottom: 64px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-top: 64px } .column li figure { height: 88px } .column li figure .icon { height: 88px } .column li figcaption { height: 60px } .pro_list li { width: 100%; padding-left: 0; padding-right: 0 } .works_mod_list li { width: 100%; padding: 0 } .page { margin-top: 0px } .page .btn { width: 50% } .hot_mod { padding-left: 0; padding-right: 0; margin-bottom: 112px } .hot_mod > a { padding-left: 4%; position: relative; padding-bottom: 80px } .hot_mod .param strong { display: block; margin-left: 0; display: inline-block } .hot_mod figure { width: 57%; position: absolute; right: -28px; bottom: 8px } .hot_mod figcaption { width: 100%; padding-right: 16%; padding-top: 55px } .pro_list .poster { width: 100% } .poster .img-box:before { padding-top: 89.55224% } .btn-primary .shape { width: 80px; height: 80px } .productbanner:before { padding-top: 173.33333% } .hot_mod figcaption { margin-left: 0 } .pro_swiper { padding-left: 0 } .pro_swiper .slick-slide img { max-width: 100%; width: 100% } .pro_picture figure { width: 100%; padding-left: 5.33333%; padding-right: 5.33333% } .pro_picture figcaption { width: 100%; padding-top: 80px; padding-bottom: 80px } .pro_picture .description p { display: inline-block; vertical-align: top; width: 50%; width: 100%; float: left; padding-left: 30px } .pro_picture .list li.block_left .text-info { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); width: 100% } .pro_picture .text-info, .pro_picture .text_primary { left: 0; padding-left: 5.33333%; padding-right: 5.33333%; position: static; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0) } .pro_picture figcaption:before { padding-top: 0 } .pro_picture .list li.block_center:before { padding-top: 0 } .pro_picture .list li.block_center figure { position: static } .pro_picture .list li.block_center figcaption { position: static; width: 100%; text-align: right; padding: 0 5.33333% } .pro_picture .list li.block_center .text_primary { position: static; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); padding-bottom: 70px; width: 100% } .pro_picture .text_lead { position: static; padding-left: 5.33333%; padding-right: 5.33333%; margin-left: 0; padding-top: 70px } .pro_picture .list li.block_center figure img { width: 100%; height: auto; position: static; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0) } .pro_picture .list li.block_center figure:before { padding-top: 0 } .pro_picture .list li.block_center figcaption .icon { display: none } .pro_picture figcaption { width: 100% } .pro_picture figure img { display: block; max-width: 100% } .pro_picture .text-info, .pro_picture .text_primary { position: static; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0) } .pro_picture .list li.block_pull figure img { -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0) } .pro_picture .list li.block_left figure { padding-left: 0; padding-right: 0 } .pro_picture .list li.block_right figure { padding-left: 0; padding-right: 0 } .pro_picture .list li.block_pull figure { margin-left: 5.33333%; margin-right: 5.33333%; width: 89.33334%; padding-left: 0; padding-right: 0 } .pro_picture .list li.block_pull figure img { width: 98% } .video_wrapper .img-box:before { padding-top: 74.62687% } .work_wrapper { padding-top: 100px; padding-top: 40px } .area_column { padding-bottom: 16px } .area_column ul > li { width: 50%; margin-bottom: 80px } .area_column figure .icon { width: auto; height: 62px } .area_column figcaption { font-size: 24px; line-height: 30px } .panel-body { width: auto; margin-left: 5.33333%; margin-right: 5.33333% } .panel-body .btns { margin-top: 60px } .pagings a { width: 100%; padding: 0 5.33333% !important } .pagings .next { text-align: left } .pagings .next span { float: none; clear: both; margin-left: 0; margin-right: 10px } .hot_news figcaption h3 { font-size: 32px; line-height: 46px } .news_module { margin-top: 0; padding-top: 260px } .news_mod_list { margin-left: 0; margin-right: 0; padding-top: 20px } .news_mod_list li { width: 100%; padding-left: 0; padding-right: 0 } .about .text_wrapper { margin-top: 160px } .history_slick_swiper .list > li { width: 100%; margin-bottom: 60px } .history_slick_swiper .slick_item .slick_item_box { margin-left: 0; margin-right: 0; padding-left: 13.33333%; padding-right: 13.33333% } .location .order { display: none } .address address, .address .tel, .address .email { margin-left: 5.33333%; width: 60%; margin-bottom: 20px } .innerbanner .address { padding-top: 76px } .innerbanner .address h1 { padding-top: 0; padding-bottom: 0; margin-bottom: 60px } .office ul { margin-left: 0; margin-right: 0; margin-top: 30px } .office ul li { width: 100%; padding-left: 0; padding-right: 0 } .office ul li:last-child { margin-bottom: 0 } .office figcaption { padding-top: 15px } .sales { margin-bottom: 80px } .sales .img-box:before { padding-top: 106.66667% } .sales ul { margin-left: 0; margin-right: -11% } .sales ul li { width: 50%; padding-left: 0; padding-right: 0 } .sales ul li h3 { padding-right: 18.66667% } .sales ul li { margin-bottom: 0px !important; padding-right: 11% } .sales ul li .text-muted { padding-right: 18.66667%; height: 96px; margin-bottom: 40px } .sales ul li .text-muted { margin-top: 8px } .contact article { width: 100%; padding-right: 0 } .contact .form { width: 100% } .validate_form { margin-top: 70px } .honor_mod_list li { width: 50% } .service .img-box:before { padding-top: 0 } .service .caption { position: static; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); padding-top: 80px; padding-bottom: 80px } .service figcaption { padding-left: 5.33333%; padding-right: 5.33333%; background-color: #DC5F00 } .service .caption h4 { margin-top: 10px } .service figure:before { padding-top: 133.33333% !important } .ui-mini { margin-left: 5.33333%; margin-right: 5.33333% } .aftersale .text_wrapper { margin-top: 40px } .panel_default { margin-bottom: 80px } .panel_default { padding-top: 0 !important } .aboutbanner:before { padding-top: 133.33333% } .aboutbanner .innerbanner .mask-ace { padding-top: 60px; padding-bottom: 120px; width: 80% } .innerbanner .mask-ace .text-muted { width: 100%; margin-left: 0; padding-left: 5.33333%; padding-right: 5.33333% } .innerbanner .mask-ace img { position: static; width: 108px; height: 108px; margin-left: 5.33333% } .innerbanner .mask-ace h1 { width: 100%; padding-left: 5.33333%; padding-right: 5.33333%; margin-top: 50px } .ace_module .text_wrapper { margin-top: 50px; margin-bottom: 0 } .ace_module .text_wrapper .text-muted { margin-top: 30px } .counter li { width: 50%; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1) } .ace_list ul li { width: 100%; padding-left: 0; padding-right: 0 } .history { padding-top: 80px } .download ul li { width: 100%; padding: 0 } .text-muted span { font-size: 14px; line-height: 24px } .download { margin-top: 20px } .download ul { margin-left: 0; margin-right: 0 } .download ul li { margin-bottom: 20px } .download ul li:last-child { margin-bottom: 0 } .download ul li a img { width: 24px; height: auto; vertical-align: middle; position: absolute; top: 15px; left: 20px } .download ul li a { padding-right: 50px; padding-left: 20px } .support ul li .icon_arrow { right: 20px; line-height: 34px } .support ul li p, .support ul li h3 { padding-left: 40px } .ui-wd { width: auto; margin-left: 5.33333%; margin-right: 5.33333% } .support ul.list { margin-top: 20px } .support ul li .quest { padding: 22px 40px; padding-right: 60px; line-height: normal } .support ul li .quest i, .support ul li .answer i { font-size: 24px } .support ul li i { left: 20px } .support ul li .quest i { top: 50%; -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%) } .support ul li .answer { padding: 30px 40px } .support ul li .answer i { top: 36px } .knowledge .img-box:before { padding-top: 74.62687% } .video_list > ul li { width: 100% } .group_list li:last-child article { border-bottom: none } .hot_mod figcaption h1 { color: #DC5F00 } .productbanner { margin-top: 0 !important } .pro_swiper .arrow .shape { width: 40px; height: 40px; line-height: 40px } .pro_swiper .pro_js_slick { margin-left: 5% } .pro_swiper .arrow_slick { right: 7% } .pro_picture .list li.block_center .text_primary:before { content: ""; display: block; width: 163px; width: 6%; height: 83%; background: url(http://absen.aisuy.com/themes/cn/default/styles/../assets/img/icon_36.svg) no-repeat center center; background-size: cover; position: absolute; top: -94%; right: 18%; left: auto; display: none } .pro_picture .list li.block_right .text-info, .pro_picture .list li.block_pull .text-info { width: 100% } .nav-tabs_wrapper { text-align: left } .nav-tabs_wrapper form { position: relative } .nav-tabs_wrapper .nav-tabs-list li { width: 45%; margin-bottom: 2px; width: 100%; display: block; text-align: center; background-color: #161616; padding-top: 10px; padding-bottom: 10px } .nav-tabs_wrapper .select-wrapper { width: 100%; display: block; width: 33.333333%; display: inline-block; text-align: center; background-color: #161616; padding-top: 10px; padding-bottom: 10px; margin-left: 0; padding-right: 0; margin-bottom: 2px; position: static } .nav-tabs_wrapper .select-wrapper .container { display: inline-block; position: relative; padding-right: 34px; padding-right: 20px } .nav-tabs_wrapper .select-wrapper .select-list { width: 100%; top: 59px } .nav-tabs_wrapper .select-wrapper .iconfont { width: 20px } .nav-tabs_wrapper .measure_select ul li, .nav-tabs_wrapper .region_select ul li { width: 100%; text-align: center } .nav-tabs_wrapper .select-wrapper ul li { text-align: center } .nav-tabs_wrapper .select-wrapper .iconfont { color: #999 } .nav-tabs_wrapper .select-wrapper .select-button { display: inline-block; font-size: 14px; color: #999 } .nav-tabs_wrapper .nav-tabs li a { color: #999 } .works_mod_list li figcaption { padding-bottom: 30px } .works_mod_list li figcaption h3 { display: block; height: auto; margin-bottom: 20px } .works_mod_list li figcaption .text { height: auto } .works_mod_list li figcaption .text p { display: block; width: 100%; font-size: 14px } .works_mod_list li figcaption .read_more { margin-top: 20px } .works_mod_list { margin-top: 20px } .pagings a .bt { position: static; float: left; margin-top: 0 } .pagings a .txt { width: 75% } .pagings .prev .txt { padding-left: 0px; padding-right: 10px; overflow: hidden } .pagings .next .txt { padding-right: 0; overflow: hidden } .panel { margin-top: 60px } .global .chart-desktop svg { display: none } .global .list li:after, .global .list li:before { content: ""; display: block; position: absolute; top: 50%; width: 10px; height: 10px; background-color: #DC5F00; border-radius: 50% } .global .list li:after { left: -5px } .global .list li:before { right: -8px } .global .list li .box:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } .global .list li:nth-child(odd):before { right: -5px } .global .list li:nth-child(odd) .box:before { border-top: 1px dashed #DC5F00; border-right: 1px dashed #DC5F00; border-bottom: 1px solid #DC5F00; border-left: 1px solid #DC5F00 } .global .list li:nth-child(even):after { display: none } .global .list li:nth-child(even) .box:before { border-top: 1px solid #DC5F00; border-right: 1px solid #DC5F00; border-bottom: 1px dashed #DC5F00; border-left: 1px dashed #DC5F00 } .history_year .slot span { width: 4px; margin: 0 4px } .history_year .slot { margin-top: -23px } .history .arrow { top: -5px } .history_slick_swiper .slick-slide .slick_item_box { margin-left: 0; margin-right: 0 } .history_slick_swiper .slick-slide .month { font-size: 30px; line-height: 30px } .tabs .nav-tabs_wrapper { margin-top: 40px } .text_title { font-size: 20px; line-height: 36px } .aftersale .text_title { margin-top: 10px } .aftersale .area { font-size: 14px } .title_page { font-size: 20px; line-height: 36px } .text-muted strong, .text-muted h6 { display: block; margin-bottom: 10px; font-size: 16px } .text_wrapper .text-muted { margin-top: 20px } .row { margin-top: 100px } .support { padding-top: 100px } .knowledge { padding-top: 100px } .video_list { padding-bottom: 80px; margin-top: 80px } .video_list ul { margin-top: 20px } .news_module { padding-bottom: 40px } .allmap { height: 400px } .innerbanner .address { position: static } .office figcaption p i { top: -3px } .validate_form legend { font-size: 26px } .popover .container { width: auto; margin-left: 5.33333%; margin-right: 5.33333%; padding-top: 40px; padding-bottom: 60px } .popover .validate_form { margin-top: 0 } .popover .validate_form legend { margin-bottom: 30px } .popover .form { width: auto; margin-left: 20px; margin-right: 20px } .popover .btn_close { top: 20px; right: 5.33333% } .popover p { margin-right: 4.44444% } .popover .validate_form button { margin-top: 20px } .popover .validate_form .form-group { margin-bottom: 20px } .popover .validate_form i.icon { right: 20px } .popover .validate_form label.error { bottom: -17px } .validate_form .form-control + label { left: 10px } .validate_form label.error { right: 0; left: 0 } .validate_form i.icon { right: 20px } .validate_form .form-group.on .form-control + label, .validate_form .form-control.active + label { -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); font-size: 0; display: none !important } .search_wrapper .search-header { margin-top: 40px } .search_wrapper .list-search li h4 { font-size: 18px } .search_wrapper .list-search li p { font-size: 14px } .search_wrapper .list-search { margin-bottom: 40px } .mt-160 { margin-top: 80px } .service .btns article { position: static; margin-left: 0; margin-left: 0; float: none; clear: both; width: auto; padding-top: 0; margin-top: 5px } .service .btns a { margin-bottom: 20px } .text_muted span, .text_muted h6 { font-size: 14px } .panel_default table thead th { font-size: 14px; padding-left: 25px; line-height: 26px; padding-right: 10px } .panel_default table tbody td { padding-left: 25px; padding-right: 10px } .panel_default table thead th:first-child { width: 20% } .innerbanner .mask-ace { width: 100% } .innerbanner .mask-ace .text-muted { display: none } .acebanner.img-box > img { -moz-transform: translate(-65%, 0); -ms-transform: translate(-65%, 0); -webkit-transform: translate(-65%, 0); transform: translate(-65%, 0) } .innerbanner .mask-ace img { position: absolute; top: 10px; left: 0 } .innerbanner .mask-ace h1 { padding-left: 92px } .page_title { font-size: 22px; line-height: 25px } .history_slick_swiper .slick-slide .text-muted { height: 120px } .js_history_year { display: none } .innerbanner .address { background-position: 73% 20px } .location .img-box:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5) } .tip_list article { position: relative; width: calc(100% - 90px); margin-left: 30px; padding-bottom: 40px } .tip_list article time { display: block; margin-top: 30px } .tip_list article:before { content: ""; display: block; position: absolute; top: 12px; left: -12px; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-right: 12px solid #F6F6F6 } .relative ul li { padding-right: 0 } .relative ul li .text-muted { width: 100% } .relative .list { margin-top: 40px } .relative ul li:last-child { margin-bottom: 0 } .tip_list li:last-child { margin-bottom: 0 } .relative .mtg { margin-top: 150px } .ace_list ul li:last-child { margin-bottom: 0 } .pagination a { width: 30px; height: 30px; line-height: 30px } .knowledge .banner figcaption { padding: 20px } .pagetitle h1, .pagetitle h2 { font-size: 20px; line-height: 30px; margin-bottom: 0; width: 100% } .productbanner .pagetitle { top: 5%; left: 0; width: auto; padding-left: 0; padding-right: 0; padding-left: 5.33333% } .nav-tabs_wrapper .nav-tabs .active { background-color: #DC5F00 } .nav-tabs_wrapper .nav-tabs .active a { color: #fff } .nav-tabs_wrapper .nav-tabs-list li, .nav-tabs_wrapper .nav-tabs-list li a { -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .nav-tabs_wrapper .nav-tabs li:hover a, .nav-tabs_wrapper .nav-tabs .active a { color: #fff } .innerbanner .btn_vido_play { margin-top: -36px } .global .globalMap figure { width: 100% } .inves_list { padding-top: 30px; padding-bottom: 60px } .inves_list li { width: 100%; margin-top: 30px } .inves_list li .icon { display: block; width: 72px; margin-left: auto; margin-right: auto } .inves_list li .item { height: auto; padding-left: 0; padding-right: 0 } .inves_list li article { width: 100%; text-align: center; margin-left: 0; margin-top: 30px } .product_module { margin-top: 100px } .pro_list { margin-top: 20px } .hot_news article { padding-left: 20px; padding-right: 20px } .hot_news .read_more { margin-top: 30px } .hot_news article { padding-bottom: 30px } .sm_relative, .ace_list ul, .sm_tip_list { margin-top: 30px } .innerbanner .mask-ace h1 { padding-left: 92px } .sm_ace_mod, .sm_counter_mod, .serverbanner { margin-top: 100px } .ace_list figcaption { padding-top: 15px; padding-bottom: 30px } .service .caption article { word-break: break-all } .sm_panel_default { margin-top: 50px } .about .text_wrapper { margin-top: 60px } .about .text_wrapper .text-muted, .sm_page_title span { font-size: 14px !important; letter-spacing: 1px; line-height: 24px } .sm_page_title span { display: block; margin-top: 10px } .case-video--list li { width: 100% } .case-video--list li .item_box figcaption { padding-left: 4%; padding-right: 4% } .case-video--list li .item_box h3 { display: block; font-size: 18px; line-height: 26px; height: auto; margin-bottom: 20px } .case-video--list li .item_box .text p { width: 100%; font-size: 14px } .fixed-wrap { position: relative } .nav-tabs_wrapper.fixed { top: 100px; z-index: 1000 } .nav-tabs__placeholder { height: 61px; position: absolute; top: 40px; left: 0; width: 100% } .nav-tabs__placeholder.fix { position: relative; top: 0; left: 0 } } @media only screen and (max-width: 768px) { .crumbs { top: 50px } .text_info > h3 { font-size: 16px; letter-spacing: 1px; line-height: 28px } .js_banner_nav .text_info { margin-top: 0; width: 100%; padding: 20px 5.33333% } .js_banner_lib .slick_item .item_box { height: calc(100vh - 50px) } .information > h3 { font-size: 20px } .information > h4 { font-size: 18px } .sm_information > h4 { padding: 0 30px } .work { margin-top: 130px } .work_list { margin-top: 30px } .work_list li .text_desc { padding-top: 20px; padding-bottom: 15px } .work_list li .text_desc h3 { font-size: 18px } .work_list li .text_desc h4 { font-size: 14px; line-height: 26px } .news_list li { margin-bottom: 70px } .pagetitle h2 { font-size: 22px } .pagetitle p { font-size: 14px } .text_primary h3 { font-size: 18px } .text_primary p { font-size: 12px; line-height: 24px } .news { margin-top: 130px } .news_list .text_desc h3 { font-size: 18px } .news_list .text_desc p { font-size: 14px; line-height: 26px } .news_list .label span { margin-right: 5%; font-size: 12px; color: #333 } .news_list .label i { display: inline-block; font-size: 14px; width: 22px; color: #333 } .news_list li .read_more { margin-top: 40px; color: #DC5F00 } .server { padding: 60px 5.33333% } .server h2 { font-size: 18px; line-height: 30px } .solu_group_list .group_wrapper .bd-hd { display: none } .solu_group_list .group_wrapper .img-box h3 { font-size: 18px; line-height: 20px; top: 15px } .solu_group_list .group_wrapper .img-box h5 { font-size: 14px; line-height: 22px; bottom: 0px; height: 30px; overflow: hidden } .innerbanner h1 { font-size: 20px; line-height: 24px; padding: 24px 5.33333% } .innerbanner .mask { height: 70px; height: auto } .solu_group_list { margin-top: 70px } .btn_vido_play { width: 40px; height: 40px } .btn_vido_play:after { border-left: 6px solid #DC5F00; border-top: 4px solid transparent; border-bottom: 4px solid transparent; margin-top: -4px; margin-left: -3px } .page_title span { font-size: 12px } .text_wrapper { margin-bottom: 80px } .column li figure .icon { height: 44px } .column li figure { height: 44px } .column li figcaption { font-size: 14px; line-height: 20px; height: 40px; margin-top: 15px; padding: 0 10px } .scien { padding-top: 40px; padding-bottom: 10px; margin-top: -30px } .scien .list > li { padding-bottom: 32px; margin-top: 32px } .pro_list li > a > figcaption { padding-bottom: 30px } .pro_list li > a > figcaption h3 { font-size: 14px; line-height: 46px; line-height: 24px; height: auto } .pro_list li > a > figcaption h1 { font-size: 18px; line-height: 30px; height: auto; margin-top: 20px } .works_mod_list li figcaption { padding-left: 4%; padding-right: 4% } .works_mod_list li figcaption h3 { font-size: 18px; line-height: 26px } .text-muted { font-size: 14px; line-height: 20px } .page .btn { line-height: 40px; height: 40px; font-size: 16px } .hot { padding-top: 100px } .hot_mod { margin-bottom: 56px } .hot_mod figcaption h1 { font-size: 20px; line-height: 28px } .hot_mod .param { font-size: 12px; line-height: 20px } .hot_mod > a > h4 { font-size: 12px; right: 4% } .hot_mod .tig { width: 80px; height: 30px; line-height: 30px; font-size: 12px } .nav-tabs_wrapper .nav-tabs { text-align: left } .nav-tabs_wrapper .nav-tabs li a { font-size: 14px; line-height: 20px } .nav-tabs_wrapper .nav-tabs li { padding-left: 0; padding-right: 0 } .poster figcaption { left: 0; width: 100%; padding: 0 6% } .poster figcaption .tel { font-size: 14px; line-height: 26px } .poster figcaption h3 { font-size: 22px; line-height: 24px } .btn-primary .shape { width: 40px; height: 40px } .loading { margin-top: 60px } .loading .text { font-size: 12px; vertical-align: 15px; margin-left: 14px } .product_mod { padding-bottom: 140px } .pro_picture figcaption h3 { font-size: 16px; line-height: 26px } .pro_picture figcaption { padding-top: 40px; padding-bottom: 40px; padding-left: 20px; padding-right: 20px } .pro_picture .list li.block_center figcaption h3 { font-size: 14px; line-height: 20px } .pro_picture .text_lead h3 { font-size: 16px; line-height: 20px } .pro_picture .text_lead h4 { font-size: 14px; line-height: 20px } .btn-primary .shape:after { margin-left: -5px } .video_wrapper figcaption { font-size: 18px; line-height: 22px } .area_column { padding-top: 48px; padding-bottom: 8px } .area_column figure { height: 32px } .area_column figure .icon { width: auto; height: 32px } .area_column figcaption { font-size: 14px; line-height: 20px; margin-top: 14px } .area_column ul > li { margin-bottom: 40px } .share a { font-size: 14px } .share .icon-icon_youku { font-size: 16px } .panel-body .btns { margin-top: 30px } .hot_news { padding-top: 80px } .hot_news figcaption h3 { font-size: 16px; line-height: 24px } .hot_news article { padding-left: 20px; padding-right: 20px; position: static; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); padding-top: 30px; padding-bottom: 30px } .news_module { margin-top: 0; padding-top: 100px } .hot_news figcaption:before { padding-top: 0 } .news_mod_list figcaption .desc { font-size: 16px; line-height: 26px } .panel { margin-top: 60px } .panel-body h1 { font-size: 16px; line-height: 26px } .panel-body h3 { font-size: 14px; line-height: 22px } .pagings a { font-size: 12px } .aboutbanner .mask { height: auto } .aboutbanner .mask h1 { font-size: 16px; line-height: 26px; padding-left: 5.33333%; padding-left: 5.33333% } .text_title h3 { font-size: 18px; line-height: 30px } .about { margin-top: 100px } .about .text_wrapper { margin-top: 60px } .global { padding-top: 140px } .global .list li { width: 50%; margin-bottom: 30px } .global .list .box { font-size: 14px; line-height: 24px } .global .list li:nth-child(even) .box:after { border-top: 1px solid #DC5F00; border-left: 1px dashed #DC5F00; border-right: 1px solid #DC5F00; border-bottom: 1px dashed #DC5F00 } .global .list li:nth-child(odd) .box:after { border-top: 1px dashed #DC5F00; border-left: 1px solid #DC5F00; border-right: 1px dashed #DC5F00; border-bottom: 1px solid #DC5F00; left: 1px; width: calc(100% - 2px); height: calc(100% - 2px) } .history_slick_swiper .slick_item .slick_item_box { padding-top: 50px; padding-bottom: 40px } .history_slick_swiper .slick_item .month { font-size: 30px; line-height: 30px } .history_slick_date .slick_item em { width: 10px; height: 10px } .history_slick_date .slick_item time { font-size: 14px; margin-top: 10px } .history .arrow { top: -5px } .history_slick_swiper .list > li { margin-bottom: 30px } .location .order { font-size: 24px } .location figcaption h3 { font-size: 20px; line-height: 26px } .address { font-size: 14px; line-height: 20px } .innerbanner .address { padding-top: 40px; padding-bottom: 40px } .innerbanner .address h1 { margin-bottom: 30px } .office figcaption h3 { font-size: 16px; line-height: 30px } .sales .point { width: 4px; height: 4px; margin-top: -2px; margin-left: -2px } .sales .rad-80 { width: 40px; height: 40px } .sales .rad-44 { width: 22px; height: 22px } .sales .rad-25 { width: 14px; height: 14px } .sales ul li h3 { font-size: 16px; line-height: 24px; height: 50px } .honor_module { padding-top: 100px; padding-bottom: 100px } .honor_mod_list li figcaption { font-size: 16px; padding: 0; line-height: 26px; margin-top: 20px } .service .caption { padding-top: 60px; padding-bottom: 50px } .service .caption h3 { font-size: 20px; line-height: 20px } .innerbanner .mask-ace .text-muted { margin-top: 20px } .innerbanner .mask-ace { padding-top: 24px; padding-bottom: 24px } .innerbanner .mask-ace img { width: 54px; height: 54px } .innerbanner .mask-ace h1 { margin-top: 0; font-size: 20px; line-height: 24px; padding-left: 90px } .counter li { padding: 40px 0 } .counter h5 { font-size: 30px } .row h3 { font-size: 18px; line-height: 26px } .ace_list figcaption { font-size: 16px; line-height: 26px; padding-top: 15px; padding-bottom: 30px } .ace_list ul li { margin-bottom: 20px } .tip_list img { width: 60px; height: auto } .tip_list article { width: calc(100% - 80px); margin-left: 20px; padding-bottom: 20px } .relative ul li { width: 100%; margin-bottom: 40px; position: relative } .relative ul li article h5 { font-size: 16px; line-height: 26px } .relative ul li figure { font-size: 12px; line-height: 24px; position: absolute; top: 35px; top: 50%; right: 0; -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); margin-top: 5px } .relative ul li figure img { width: 50px; height: auto } .knowledge .banner figcaption { font-size: 16px; line-height: 26px; width: 100%; padding-top: 20px; padding-bottom: 20px } .knowledge .banner figcaption .text-muted { font-size: 14px; line-height: 24px; letter-spacing: 1px } .video_list ul li figcaption { font-size: 16px; line-height: 26px; padding-top: 20px; padding-bottom: 20px } .address address, .address .tel, .address .email { padding-left: 72px; width: 73% } .sales { margin-top: 80px } .address address, .address .tel { margin-bottom: 0 } .office { margin-top: 100px } .address .line { margin-left: 4.66667% } .address address i, .address .tel i, .address .email i { width: 38px; height: 38px; line-height: 38px } .information .line { width: 20px; height: 2px; margin-top: 30px } .btn_button { padding: 15px 20px } .text_wrapper .text-muted { margin-top: 40px; padding-left: 0px } .group_list li .desc { height: auto; padding-bottom: 40px } .group_list li:nth-child(1), .group_list li:nth-child(2), .group_list li:nth-child(3), .group_list li:nth-child(3) { margin-bottom: 40px } .group_list li:nth-child(n+5) article { padding-top: 40px } .address address i:before, .address .tel i:before, .address .email i:before { margin-left: 0px } .inves_list li .item { padding: 40px; padding-left: 0; padding-right: 0 } .inves_list li .icon { width: 50px } .inves_list li .tel { font-size: 18px } } @media only screen and (max-width: 321px) { .pagination a { margin: 0 } } @media (min-width: 1025px) { .history .history_slick .slick-slide:nth-of-type(1) .slot_left { opacity: 0 } .history .history_slick .slick-slide:nth-of-type(4) .slot_right { opacity: 0 } } .cerpage { position: relative } .cerpage .header_bg { height: 0 } .cerpage .sm-col-mod2, .cerpage .sm-col-mod5 { background-color: #DC5F00 } .cerpage .sm-col-mod5 { background-image: url(../upload/certification/icon-bg.svg); background-repeat: no-repeat; background-size: cover } .cerpage .layer-rule { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 60000 } .cerpage .layer-rule .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3) } .cerpage .layer-rule .contents { margin-left: 8.33333%; margin-right: 8.33333%; position: relative; background-color: #fff; height: 100% } .cerpage .layer-rule .contents .icon-close { position: absolute; top: 20px; right: 20px; font-size: 28px; color: #DC5F00 } .cerpage .layer-rule .contents .box { width: 1000px; margin-left: auto; margin-right: auto; height: 85%; padding-top: 10% } .cerpage .layer-rule .contents .mCSB_container { padding-right: 50px } .cerpage .layer-rule .contents h3 { font-size: 2.25em; line-height: 1; letter-spacing: .0625em; color: #DC5F00 } .cerpage .layer-rule .contents p { font-size: .875em; line-height: 2.14286; letter-spacing: .0625em; color: #999 } .certbanner .img-box::before { padding-top: 56.25% } .certbanner .animate-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .certbanner .animate-mask img { display: block; width: 100% } .certbanner .animation { -webkit-animation-duration: 2.8s; animation-duration: 2.8s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: 1; animation-iteration-count: 1 } .certbanner .fadeEarth { -webkit-animation-name: fadeEarth; animation-name: fadeEarth; -webkit-animation-duration: 8.8s; animation-duration: 8.8s; -webkit-animation-delay: .6s; animation-delay: .6s } .certbanner .fadeSunny { -webkit-animation-name: fadeSunny; animation-name: fadeSunny; -webkit-animation-duration: 8.8s; animation-duration: 8.8s; -webkit-animation-delay: 3.8s; animation-delay: 3.8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } .certbanner .animation-fadeText { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.4)), color-stop(100%, rgba(255, 255, 255, 0))); background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%); background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; -webkit-background-size: 100% 100%; background-size: 100% 100% } .certbanner .animation-star { position: absolute; top: 0; width: 120%; height: 100%; left: -10%; transform: skewX(-45deg); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.4)), color-stop(100%, rgba(255, 255, 255, 0))); background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%); background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%); opacity: .5 } .certbanner .animation-title img { display: block; width: 684px; height: 130px } .certbanner .fadeStar { -webkit-animation-name: fadeStar; animation-name: fadeStar; -webkit-animation-duration: 8.8s; animation-duration: 8.8s; -webkit-animation-delay: 3.8s; animation-delay: 3.8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } .certbanner .fadeText { -webkit-animation-name: fadeText; animation-name: fadeText; -webkit-animation-duration: 8.8s; animation-duration: 8.8s; -webkit-animation-delay: 3.8s; animation-delay: 3.8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } .certbanner .fadeEntry-a { width: 556px } .certbanner .fadeEntry-b { width: 364px } .certbanner .delay-title { -webkit-animation-delay: 3.8s; animation-delay: 3.8s } .certbanner .delay-entry { -webkit-animation-delay: 3.8s; animation-delay: 3.8s } .certbanner .fadeInUps { -webkit-animation-name: fadeInUps; animation-name: fadeInUps } .certbanner .fadeTitle { -webkit-animation-name: fadeTitle; animation-name: fadeTitle; -webkit-animation-duration: 8.8s; animation-duration: 8.8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } .certbanner .fadeEntry { -webkit-animation-name: fadeEntry; animation-name: fadeEntry; -webkit-animation-duration: 8.8s; animation-duration: 8.8s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1 } .certbanner .fadeLine { -webkit-animation-name: fadeLine; animation-name: fadeLine; -webkit-animation-duration: 20s; animation-duration: 20s; -webkit-animation-delay: 8.8s; animation-delay: 8.8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } .certbanner .animate-mask--earth { z-index: 100 } .certbanner .animate-mask--earth img { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .certbanner .animate-mask--earth .pic-earth { opacity: .3 } .certbanner .animate-mask--sunny { z-index: 200 } .certbanner .animate-mask--entry { position: absolute; width: 684px; top: 50%; left: 8.33333%; z-index: 400; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%) } .certbanner .animate-mask--entry .title { display: block; margin-bottom: 40px; position: relative; overflow: hidden } .certbanner .animate-mask--entry .title img { display: block; width: 684px; height: 130px } .certbanner .animate-mask--entry .entry-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden } .certbanner .animate-mask--entry .animation-title { left: -9px; top: -9px; overflow: visible } .certbanner .animate-mask--entry .animation-title img { width: 701px; height: 150px } .certbanner .animate-mask--entry .entry { font-size: 2.25em; line-height: 1.38462; position: relative; margin-bottom: 30px; overflow: hidden } .certbanner .animate-mask--entry .line { display: block; width: 196px; height: 4px; position: relative; margin-top: 50px; box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.1); overflow: hidden; background-color: #dc952b } .certbanner .animate-mask--entry .line i { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuNSIgeDI9IjAuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RjOTUyYiIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZjVkYmI1Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZGM5NTJiIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(0%, #dc952b), color-stop(50%, #f5dbb5), color-stop(100%, #dc952b)); background-image: -moz-linear-gradient(right, #dc952b, #f5dbb5, #dc952b); background-image: -webkit-linear-gradient(right, #dc952b, #f5dbb5, #dc952b); background-image: linear-gradient(to left, #dc952b, #f5dbb5, #dc952b); transform: skewX(-45deg) } .certbanner .animate-mask--entry .colorA { color: #fff } .certbanner .animate-mask--entry .colorB { color: #fbd59d } .certbanner .animate-mask--entry .colorC { color: #e4a950 } .certbanner .animate-mask--entry .abso { position: absolute; top: 0; left: 0 } @-webkit-keyframes fadeEarth { 0% { opacity: 0; -webkit-transform: scale3d(1.2, 1.2, 1.2); transform: scale3d(1.2, 1.2, 1.2) } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } } @keyframes fadeEarth { 0% { opacity: 0; -webkit-transform: scale3d(1.2, 1.2, 1.2); transform: scale3d(1.2, 1.2, 1.2) } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } } @-webkit-keyframes fadeSunny { 0%, 100%, 50% { opacity: 0 } 25%, 75% { opacity: 1 } } @keyframes fadeSunny { 0%, 100%, 50% { opacity: 0 } 25%, 75% { opacity: 1 } } @-webkit-keyframes fadeInUps { from { opacity: 0; -webkit-transform: translateY(40px); transform: translateY(40px) } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes fadeInUps { from { opacity: 0; -webkit-transform: translateY(40px); transform: translateY(40px) } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } } @-webkit-keyframes fadeStar { 0%, 100%, 50% { opacity: 0 } 25%, 75% { opacity: 1 } } @keyframes fadeStar { 0%, 100%, 50% { opacity: 0 } 25%, 75% { opacity: 1 } } @-webkit-keyframes fadeText { 0%, 100%, 50% { opacity: 0 } 25%, 75% { opacity: 1 } } @keyframes fadeText { 0%, 100%, 50% { opacity: 0 } 25%, 75% { opacity: 1 } } @-webkit-keyframes fadeTitle { 0%, 100%, 50% { opacity: 0 } 25%, 75% { opacity: 1 } } @keyframes fadeTitle { 0%, 100%, 50% { opacity: 0 } 25%, 75% { opacity: 1 } } @-webkit-keyframes fadeLine { 0%, 100%, 50% { width: 0; left: -10% } 25%, 75% { width: 100%; left: 100% } } @keyframes fadeLine { 0%, 100%, 50% { width: 0; left: -10% } 25%, 75% { width: 100%; left: 100% } } .sm-col-certifi { font-size: 16px } .sm-col-certifi .sm-wd-4 { width: 33.333333% } .sm-col-certifi .sm-wd-6 { width: 50% } .sm-col-certifi .sm-wd-12 { width: 100% } .sm-col-certifi .sm-title { overflow: hidden } .sm-col-certifi .sm-title h3 { height: 80px; line-height: 80px; font-size: 2.25em; letter-spacing: .0625em; width: 940px; padding-left: 8.33333%; position: relative; -webkit-backface-visibility: hidden; backface-visibility: hidden } .sm-col-certifi .sm-title h3::before, .sm-col-certifi .sm-title h3::after { content: ""; position: absolute; top: -20px; height: 120px; -moz-transform: rotate(14deg); -ms-transform: rotate(14deg); -webkit-transform: rotate(14deg); transform: rotate(14deg) } .sm-col-certifi .sm-title h3::before { right: -20px; width: 33px } .sm-col-certifi .sm-title h3::after { right: -60px; width: 20px } .sm-col-certifi .pic { display: block; max-width: 100%; margin-left: auto; margin-right: auto } .sm-col-certifi .bgA { color: #fff; background-color: #DC5F00 } .sm-col-certifi .bgA::before, .sm-col-certifi .bgA::after { background-color: #DC5F00 } .sm-col-certifi .bgB { color: #DC5F00; background-color: #fff } .sm-col-certifi .bgB::before, .sm-col-certifi .bgB::after { background-color: #fff } .sm-col-certifi .register-box { font-size: 0 } .sm-col-certifi .register-box article { display: inline-block; vertical-align: top } .sm-col-certifi .relative { display: inline-block; vertical-align: top; width: 50%; font-size: 16px; text-align: right } .sm-col-certifi .relative p { font-size: 1em; line-height: 2.25; letter-spacing: .0625em; color: #999 } .sm-col-certifi .relative h3 { font-size: 2.5em; line-height: 1.5; color: #DC5F00 } .sm-col-certifi .sm-mod-common { font-size: 16px } .sm-col-certifi .sm-mod-common h3 { font-size: 1.625em; line-height: 1.84615; letter-spacing: .0625em; color: #333; font-weight: 500 } .sm-col-certifi .sm-mod-common h5 { font-size: 1em; letter-spacing: .025em; color: #DC5F00; margin-bottom: 20px; font-family: "GothamBook" } .sm-col-certifi .sm-mod-common p { font-size: 1em; line-height: 1.71429; letter-spacing: .0625em; color: #999 } .sm-col-certifi .sm-mod-common.white p { color: #fff } .sm-col-certifi .pow-list_lists { font-size: 0 } .sm-col-certifi .pow-list_lists li { display: inline-block; vertical-align: top; width: 25%; text-align: left; padding: 0 4.375vw } .sm-col-certifi .prod-list_lists { margin: 0 -.78125vw } .sm-col-certifi .prod-list_lists a { display: block; margin: 0 .78125vw; background-color: #F7F7F7; position: relative } .sm-col-certifi .prod-list_lists .img-box::before { padding-top: 57.25191% } .sm-col-certifi .prod-list_lists figcaption { position: absolute; bottom: 1.5625vw; left: 0; width: 100%; font-size: 16px; text-align: center } .sm-col-certifi .prod-list_lists figcaption h3 { font-size: 2.25em; letter-spacing: .0625em; font-weight: 500; line-height: 1; color: #DC5F00; margin-bottom: 10px } .sm-col-certifi .prod-list_lists figcaption p { font-size: 1em; letter-spacing: .0625em; font-weight: 500; line-height: 2.57143; color: #999; font-family: "GothamBook" } .sm-col-certifi .advan-list_lists { margin: 0 -.78125vw } .sm-col-certifi .advan-list_lists li { font-size: 16px; margin-top: 2.08333vw } .sm-col-certifi .advan-list_lists figcaption { margin: 0 .78125vw; position: relative; background-color: #F7F7F7; padding: 2.08333vw; height: 270px } .sm-col-certifi .advan-list_lists .icon { position: absolute; top: 2.08333vw; left: 2.08333vw; max-width: 100% } .sm-col-certifi .advan-list_lists .desc { display: block; text-align: right; color: #DC5F00; font-size: 1.625em; letter-spacing: .025em; margin-bottom: 20px; font-family: "GothamBook" } .sm-col-certifi .join-list_lists li { font-size: 16px } .sm-col-certifi .join-list_lists .icon { max-width: 100%; margin-left: auto; margin-right: auto } .sm-col-certifi .join-list_lists figcaption { text-align: center } .sm-col-certifi .join-list_lists figcaption h3 { font-weight: 400; margin-top: 40px } .sm-col-certifi .step-list_lists li { font-size: 16px } .sm-col-certifi .step-list_lists figcaption { padding: 0 2.60417vw; position: relative } .sm-col-certifi .step-list_lists .desc { display: inline-block; font-size: 3.75em; line-height: 1; letter-spacing: .025em; color: #fff; font-family: "GothamBook"; margin-bottom: 30px } .sm-col-certifi .step-list_lists .icons-step { font-size: 2.0625em; color: #fff; position: absolute; top: 50%; right: 2.60417vw; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%) } .sm-col-certifi .step-list_lists .icon-icon-step { display: block } .sm-col-certifi .step-list_lists .icon-icon-step-bottom { display: none } .sm-col-certifi .step-list_lists li:last-child figcaption .icons-step { display: none } .sm-col-certifi .step-list_lists h5 { font-size: 1.625em; letter-spacing: .0625em; color: #fff; margin-bottom: 5px } .sm-col-certifi .step-list_lists h6 { font-size: 1em; letter-spacing: .025em; color: #fff; font-family: "GothamBook"; margin-bottom: 20px } .sm-col-certifi .step-list_lists p { font-size: 1em; line-height: 1.71429; letter-spacing: .0625em; color: #fff } .sm-col-certifi .register-table { width: 100%; border-right: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA } .sm-col-certifi .register-table .control-put, .sm-col-certifi .register-table .flatpickr-input { padding: 0; margin: 0; border: none; background: none; height: 60px; font-size: 14px; color: #333; padding: 0 1.04167vw; display: inline-block; vertical-align: middle; width: calc(100% - 190px) } .sm-col-certifi .register-table .control-put:focus, .sm-col-certifi .register-table .flatpickr-input:focus { outline: none } .sm-col-certifi .register-table td { width: 100%; border-top: 1px solid #EAEAEA; font-size: 0 } .sm-col-certifi .register-table label { display: inline-block; vertical-align: top; font-size: 14px; color: #333; letter-spacing: .125em; height: 60px; line-height: 60px; padding: 0 1.04167vw; width: 190px; z-index: -2; padding-right: 0 } .sm-col-certifi .register-table label.error { position: absolute; top: 0; right: 0; color: #DC5F00; text-align: right; width: 300px } .sm-col-certifi .register-table .group-box { display: inline-block; vertical-align: top; width: calc(100% - 190px) } .sm-col-certifi .register-table .control-group { display: inline-block; vertical-align: top; font-size: 0; border-left: 1px solid #EAEAEA; height: 60px; position: relative } .sm-col-certifi .register-table .tel-control-group { position: relative } .sm-col-certifi .register-table .tel-control-group .btn-code { position: absolute; top: 2px; right: 0 } .sm-col-certifi .register-table .tel-control-group label.error { right: 150px } .sm-col-certifi .register-table .border { border-left: 1px solid #EAEAEA } .sm-col-certifi .register-table .border-bottom { border-bottom: 1px solid #EAEAEA } .sm-col-certifi .register-table .no-border { border-left: none } .sm-col-certifi .register-table .select { display: inline-block; width: calc(100% - 190px); position: relative } .sm-col-certifi .register-table select { width: 100%; height: 60px; padding: 0; margin: 0; border: none; background: none; font-size: 14px; color: #333; padding: 0 1.04167vw } .sm-col-certifi .register-table .select { position: relative } .sm-col-certifi .register-table .select::after { display: none \9; content: ""; position: absolute; top: 50%; margin-top: -5px; right: 1.04167vw; width: 10px; height: 10px; background: url("../upload/certification/icon-arrows.svg") no-repeat center center } .sm-col-certifi .register-table select:focus { outline: none } .sm-col-certifi .tfoot { height: 60px; border: 1px solid #EAEAEA; margin-top: 20px } .sm-col-certifi .tfoot label { display: inline-block; vertical-align: middle; width: 60px; height: 60px; border-right: 1px solid #EAEAEA; position: relative } .sm-col-certifi .tfoot label::before { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; background-color: #fff; border: 1px solid #EAEAEA } .sm-col-certifi .tfoot input[type='checkbox']:checked + label::before { background-color: #ff991e; border: 1px solid #ff991e } .sm-col-certifi .tfoot p { display: inline-block; vertical-align: middle; font-size: 14px; color: #333333; letter-spacing: .125em; line-height: 1.71429; padding-left: 20px } .sm-col-certifi .tfoot a { color: #333333; text-decoration: underline } .btn_primaty { background-color: rgba(220, 95, 0, 0.2); color: #fff } .btn_primaty::before { background-color: rgba(220, 95, 0, 0.2) } .btn_primaty::after { background-color: #DC5F00 } .modia-video__wrap { display: none; position: relative; z-index: 60000 } .modia-video__wrap .close-vid { -moz-transition: color 0.4s ease; -o-transition: color 0.4s ease; -webkit-transition: color 0.4s ease; transition: color 0.4s ease; position: fixed; right: 40px; top: 40px; font-size: 24px; color: #fff; z-index: 650 } .modia-video__wrap .modai-video__main, .modia-video__wrap .modia-video__bg { position: fixed; left: 0; top: 0; width: 100%; height: 100% } .modia-video__wrap .modia-video__bg { background-color: rgba(0, 0, 0, 0.8); z-index: 550 } .modia-video__wrap .modai-video__main { z-index: 600 } .modia-video__wrap .modai-video__main .video { position: absolute; left: 50%; top: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .modia-video__wrap .modai-video__main video { max-width: 100% } .modia-video__wrap .modai-video__main h3 { font-size: .875em; line-height: 1.71429; letter-spacing: .0625em; color: #999; margin-top: 20px; text-align: center } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .sm-col-certifi .register-table .select::after { display: none; opacity: 0; visibility: hidden } } @media only screen and (min-width: 1024px) { .sm-col-certifi .tfoot:hover label::before { background-color: #ccc; border: 1px solid #ccc } } @media only screen and (max-width: 1024px) { .pt-150 { padding-top: 70px } .sm-col-certifi .sm-title h3 { padding-left: 5.33333%; width: 70%; height: 60px; line-height: 60px; font-size: 1.25em } .sm-col-certifi .sm-wd-6, .sm-col-certifi .sm-wd-4 { width: 100% } .sm-col-certifi .mt-40 { margin-top: 20px } .sm-col-certifi .mt-80 { margin-top: 40px } .sm-col-certifi .mt-90 { margin-top: 45px } .sm-col-certifi .mt-100 { margin-top: 50px } .sm-col-certifi .mt-110 { margin-top: 55px } .sm-col-certifi .sm-mod-common { font-size: 16px } .sm-col-certifi .sm-mod-common h3 { font-size: 1.125em } .sm-col-certifi .pow-list_lists li { width: 50%; margin-bottom: 30px } .sm-col-certifi .prod-list_lists li { width: 100%; margin-top: 30px } .sm-col-certifi .prod-list_lists figcaption h3 { font-size: 1.125em; margin-bottom: 5px } .sm-col-certifi .advan-list_lists li { width: 50% } .sm-col-certifi .advan-list_lists figcaption { height: 220px; padding: 15px } .sm-col-certifi .advan-list_lists .icon { top: 15px; left: 15px; height: 26px; width: auto } .sm-col-certifi .advan-list_lists .desc { font-size: 1.25em } .sm-col-certifi .join-list_lists li { margin-bottom: 30px } .sm-col-certifi .join-list_lists li .icon { height: 100px; width: auto } .sm-col-certifi .join-list_lists figcaption h3 { margin-top: 20px } .sm-col-certifi .step-list_lists li { width: 100%; margin-bottom: 30px } .sm-col-certifi .step-list_lists li:nth-child { margin-bottom: 0 } .sm-col-certifi .step-list_lists .icons-step { font-size: 1.25em; position: static; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0) } .sm-col-certifi .step-list_lists .icon-icon-step { display: none } .sm-col-certifi .step-list_lists .icon-icon-step-bottom { display: block; text-align: center; margin-top: 30px } .sm-col-certifi .step-list_lists figcaption { padding: 0 } .sm-col-certifi .step-list_lists .desc { font-size: 2.5em; margin-bottom: 15px } .sm-col-certifi .step-list_lists h5 { font-size: 1.125em } .sm-col-certifi .relative { width: 100%; text-align: left; margin-top: 10px } .sm-col-certifi .relative p { font-size: .875em } .sm-col-certifi .relative h3 { font-size: 1.25em } .sm-col-certifi .register-table .control-group { height: 40px } .sm-col-certifi .register-table label { height: 40px; line-height: normal; width: 80px; font-size: 12px; display: table-cell; vertical-align: middle; padding: 0 5px } .sm-col-certifi .register-table label.error { width: 60%; line-height: normal; height: auto; text-align: right; top: 12px } .sm-col-certifi .register-table .tel-control-group label.error { right: 87px } .sm-col-certifi .register-table .control-put, .sm-col-certifi .register-table .flatpickr-input { height: 40px; width: calc(100% - 80px); position: absolute; top: 0; right: 0; padding: 0 15px } .sm-col-certifi .register-table .border-right { width: 81px; border-right: 1px solid #EAEAEA } .sm-col-certifi .register-table .bor-bottom { border-bottom: 1px solid #EAEAEA } .sm-col-certifi .register-table .group-box { display: block; width: 100%; border-top: 1px solid #EAEAEA } .sm-col-certifi .register-table .select { width: calc(100% - 80px); position: absolute; top: 0; right: 0 } .sm-col-certifi .register-table .select::after { right: 15px } .sm-col-certifi .register-table select { height: 40px; font-size: 12px; padding: 0 15px } .sm-col-certifi .register-table .tel-control-group .btn-code { font-size: 12px; padding: 9px 15px } .sm-col-certifi .tfoot { height: 40px } .sm-col-certifi .tfoot label { width: 40px; height: 40px } .sm-col-certifi .tfoot p { font-size: 12px; padding-left: 0 } .sm-col-certifi .tfoot p i { display: none } .cerpage .header_bg { height: 100px } .cerpage .layer-rule .contents { margin-left: 5.33333%; margin-right: 5.33333% } .cerpage .layer-rule .contents .icon-close { font-size: 16px } .cerpage .layer-rule .contents .box { width: auto; padding-right: 0; padding: 20px; height: 100% } .cerpage .layer-rule .contents h3 { font-size: 1.25em } .certbanner .animate-mask--entry { width: auto; left: 5.33333%; right: 5.33333% } .certbanner .animate-mask--entry .title { width: 210px; margin-bottom: 15px } .certbanner .animate-mask--entry .title img { width: 210px; height: 50px } .certbanner .animate-mask--entry .animation-title { left: -3px; top: 2px } .certbanner .animate-mask--entry .animation-title img { width: 215px; height: 47px } .certbanner .animate-mask--entry .entry { font-size: 1em; margin-bottom: 8px } .certbanner .animate-mask--entry .line { margin-top: 20px; width: 96px; height: 2px } .modia-video__wrap .modai-video__main .video { width: 90% } #newBridge .nb-icon-wrap { width: 50px !important; height: 50px !important } #newBridge .nb-icon-wrap-1 .nb-icon-wrap-base { background-size: 34px !important } .cerpage .layer-rule .contents .mCSB_container { padding-right: 16px } .cerpage .layer-rule .contents .icon-close { top: 7px; right: 7px } .cerpage .layer-rule .contents .box { overflow-y: scroll } } @media only screen and (max-width: 768px) { .cerpage .header_bg { height: 50px } .sm-col-certifi .sm-mod-common { font-size: 14px } .sm-col-certifi .sm-title { font-size: 14px } .sm-col-certifi .sm-title h3 { padding-left: 5.33333%; width: 82%; width: 100%; height: 40px; line-height: 40px; font-size: 1.125em } .sm-col-certifi .prod-list_lists figcaption { position: absolute } .sm-col-certifi .prod-list_lists figcaption h3 { margin-bottom: 0 } .sm-col-certifi .prod-list_lists figcaption p { font-size: .75em } .sm-col-certifi .pow-list_lists li { width: 100% } .sm-col-certifi .join-list_lists li { width: 100% } .sm-col-certifi .join-list_lists li .icon { height: 80px; width: auto } } @media (max-width: 500px) { .sm-col-certifi .register-table label { font-size: 10px; letter-spacing: 0 } } input, button { outline: none } .query-banner { position: relative } .query-banner .bg-pic { height: 790px; position: relative } .query-banner .small-pic { display: none } .query-banner .qb-inner h1 { font-size: 85px; color: #fff; letter-spacing: .23529em; font-weight: 700 } .query-banner .hint { margin-top: 1em; font-size: 30px } .query-banner .hint span { display: inline-block; vertical-align: top; color: #DC5F00; letter-spacing: .53333em; padding: 0 1.66667em; position: relative } .query-banner .hint span::after { content: ""; display: block; position: absolute; right: 0; top: 0; width: 1px; height: 100%; background-color: #DC5F00 } .query-banner .hint span:last-child::after { display: none } .query-banner .qb-inner { top: 30.38%; padding: 0 20px } .query-banner .qb-message { bottom: 80px; padding: 0 30px } .query-banner .qb-message .rows { position: relative; display: inline-block; vertical-align: middle; text-align: left; padding-left: 64px; padding-right: 64px } .query-banner .qb-message .rows:after { content: ""; display: block; position: absolute; right: 0; top: 0; width: 1px; height: 100%; background-color: #fff } .query-banner .qb-message .row-1 { padding-left: 200px } .query-banner .qb-message .row-3::after { opacity: 0 } .query-banner .qb-message .row-3 .row-txt span { display: block; letter-spacing: 6px } .query-banner .qb-message .row-cont3 { position: relative; padding-right: 124px } .query-banner .qb-message .row-cont3 .row-wx { position: absolute; right: 0; bottom: 0; max-width: 100% } .query-banner .qb-message .dec-icon { position: absolute; left: 0; top: -30px; max-width: 100% } .query-banner .qb-message .row-hint { font-size: 20px; color: #fff; font-weight: 700; padding-left: 1.75em; position: relative; text-align: left; margin-bottom: 8px; letter-spacing: 2px } .query-banner .qb-message .row-hint i { position: absolute; left: 0; top: 0 } .query-banner .qb-message .row-tel { color: #fff; font-size: 60px; font-family: "Franklin Gothic Demi Cond"; font-weight: 700 } .query-banner .qb-message .row-txt { font-size: 18px; color: #fff; line-height: 26px; font-weight: 700 } .qf-title { font-size: 16px; color: #000; line-height: 1.5 } .query-tab { text-align: center; font-size: 0; border-bottom: 1px solid #d9d9d9 } .query-tab a { -webkit-transition: all .4s; transition: all .4s; display: inline-block; vertical-align: top; padding: 0 .83333em 25px .83333em; position: relative; width: 200px; height: 52px } .query-tab a::after { -webkit-transition: width .4s; transition: width .4s; content: ""; display: block; position: absolute; left: 0; bottom: 0; height: 2px; background-color: #DC5F00; width: 0 } .query-tab a.on::after { width: 100% } .query-tab a.on span { -webkit-transform: scale(1); transform: scale(1); color: #000 } .query-tab a span { -webkit-transition: all .4s; transition: all .4s; position: absolute; left: 0; top: 0; backface-visibility: hidden; width: 100%; text-align: center; font-size: 36px; color: #999; -webkit-transform: scale(0.8); transform: scale(0.8) } .qt-tab__cont { display: none; margin-top: 15px } .qt-tab__cont:first-child { display: block } .qf-title { padding-top: 60px } .query-sec__shade { box-shadow: 0px -2px 12px rgba(0, 0, 0, 0.08) } .query-apply__form { padding: 0 60px 40px 60px } .query-apply__form .register-table label, .query-apply__form .register-table .group-box { vertical-align: middle } .query-apply__form .register-table label { text-align: center; padding-left: 0 } .query-apply__form .register-table .form-fault__group { height: 130px } .query-apply__form .register-table .form-fault__group input, .query-apply__form .register-table .form-fault__group label { height: 130px } .query-apply__form .register-table .form-fault__group label { line-height: 130px } .query-process__full { padding: 0 120px } .query-server__list ul { margin-left: -26px; margin-right: -26px; font-size: 0 } .query-server__list li { display: inline-block; vertical-align: top; width: 100% } .query-server__list .item-cont { margin-left: 26px; margin-right: 26px; height: 285px; position: relative; font-size: 20px; padding: 0 2.5em } .query-server__list .item-cont::after { content: ""; display: block; position: absolute; right: 30px; bottom: 20px; background: url(../upload/query/img-05.png) no-repeat center center; background-size: 12em 9.3em; width: 12em; height: 9.3em } .query-server__list .title { padding-top: 2.2em; -webkit-backface-visibility: hidden; backface-visibility: hidden } .query-server__list .title span { font-size: 36px; color: #000; line-height: 1.5 } .query-server__list .title p { font-size: 16px; line-height: 1.6; color: #DC5F00; font-weight: 700 } .query-server__list .txt { padding-top: 1.5em } .query-server__list .txt p { font-size: 16px; color: #999; line-height: 30px } .query-fault__list ul { font-size: 0; margin-left: -20px; margin-right: -20px } .query-fault__list li { display: inline-block; vertical-align: top; width: 33.33%; font-size: 0 } .query-fault__list .item-cont { margin-left: 20px; margin-right: 20px; text-align: center } .query-fault__list .pic { margin-bottom: 35px } .query-fault__list .title { font-size: 26px; color: #000 } .query-fault__list .txt { font-size: 16px; color: #999; line-height: 1.6; margin-top: 10px } .query-product__full .bg-pic { height: 400px } .query-product__full .bg-pic .sm-title { position: absolute; left: 0; bottom: 0; width: 100% } .query-product__inner { font-size: 14px; color: #999; line-height: 1.6 } .query-product__inner h2 { font-size: 24px; color: #000; line-height: 1.7 } .query-product__inner h3 { font-size: 20px; color: #000; line-height: 1.7 } .query-product__inner table { margin-top: 20px; width: 800px } .query-product__inner table tr { border: 1px solid #d9d9d9 } .query-product__inner table th { text-align: left; font-weight: 700 } .query-product__inner table th, .query-product__inner table td { border-right: 1px solid #d9d9d9; padding: 20px 80px 20px 30px } .query-product__inner table th { color: #000 } .query-code__btn { width: 108px; height: 50px; line-height: 50px; text-align: center; background-color: #f5f5f5; color: #DC5F00; border: none; cursor: pointer; border-radius: 8px; margin-top: 2px; margin-right: 6px; -webkit-transition: all .3s; transition: all .3s } .query-order__input { text-align: center; font-size: 0; padding-top: 70px } .query-order__input input, .query-order__input button { display: inline-block; vertical-align: top; height: 60px } .query-order__input input { width: 480px; border: 1px solid #DC5F00; font-size: 16px; color: #000; padding: 0 20px } .query-order__input input::-webkit-input-placeholder { color: #ccc } .query-order__input input::-moz-input-placeholder { color: #ccc } .query-order__input input::-ms-input-placeholder { color: #ccc } .query-order__input button { -webkit-transition: background .3s; transition: background .3s; line-height: 60px; font-size: 18px; background-color: #DC5F00; padding: 0; border: none; width: 120px; cursor: pointer; color: #fff } .query-process__main { padding-bottom: 75px } .query-result { background-color: #f7f7f7; position: relative } .query-result .serial-num { position: absolute; left: 0; top: 0; width: 100%; line-height: 60px; height: 60px; background-color: #f0f0f0; padding-left: 90px; font-size: 28px; color: #000; font-weight: 700; text-align: left } .qr-inner { font-size: 20px; color: #999; text-align: center; padding-top: 100px; padding-bottom: 120px } .qr-inner span { display: block; margin-top: 1.75em } .qr-none__inner img { height: 120px; width: auto } .qr-none__inner, .qr-error__inner { position: relative; padding-top: 160px } .qr-none__inner:before, .qr-error__inner:before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 60px; background-color: #f0f0f0 } .qr-error__inner img { height: 115px; width: auto } .qr-status__inner { padding: 60px 90px 40px 90px } .qrs-cont { padding-top: 30px } .qrs-left__area, .qrs-right__area { display: inline-block; vertical-align: top } .qrs-left__area { padding-left: 70px; padding-right: 60px; position: relative; margin-right: 56px } .qrs-left__area::after { content: ""; display: block; position: absolute; right: 0; top: 0; width: 1px; height: 100%; background-color: #d9d9d9 } .qrs-left__area i { font-size: 56px; position: absolute; left: 0; top: 0 } .qrs-left__area span { font-size: 45px; font-weight: 700; display: inline-block; margin-bottom: 7px } .qrs-left__area time { display: block; font-size: 16px; color: #000 } .qrs-march i, .qrs-march span { color: #DC5F00 } .qrs-succeed i, .qrs-succeed span { color: #76bd22 } .qrs-succeed i { font-size: 42px } .qrs-right__area > div { font-size: 16px; line-height: 25px; color: #000 } .qrs-right__area > div span { font-weight: 700; display: inline-block; margin-right: 20px } .qr-message__list { font-size: 20px; margin-top: 2em } .qr-message__list .item-cont { background-color: #fff; padding: 1.5em 2.5em; border: 1px solid #d9d9d9; margin-bottom: 2em } .qr-message__list .item-cont:last-child { margin-bottom: 0 } .qr-message__list .qrn-title { font-size: 25px; color: #000; position: relative; font-weight: 700; display: block; cursor: pointer; -webkit-transition: color .3s; transition: color .3s } .qr-message__list .qrn-title i { position: absolute; right: 0; font-size: .64em; color: #DC5F00; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%) } .qr-message__list .qrn-title i::before { -webkit-transition: transform .3s; transition: transform .3s; display: block; -webkit-transform: rotate(-90deg); transform: rotate(-90deg) } .qr-message__list .on .qrn-title i::before { -webkit-transform: rotate(0deg); transform: rotate(0deg) } .qr-server__info { font-size: 16px; color: #000; letter-spacing: 1px } .qr-server__info table { width: 100%; margin-top: 25px } .qr-server__info tr { display: block; padding-top: 14px; padding-bottom: 18px } .qr-server__info tr:nth-child(odd) { background-color: #f7f7f7 } .qr-server__info td { display: inline-block; vertical-align: top; font-weight: 700; line-height: 1.5 } .qr-server__info td:first-child { width: 35%; padding-left: 50px } .qr-server__info td:last-child { width: 62% } .qr-drop__info { display: none } .qr-server__flow { font-size: 0; margin-top: 40px } .qr-server__flow .time, .qr-server__flow .item-detail { display: inline-block; vertical-align: top } .qr-server__flow .time { width: 35%; padding-right: 45px; text-align: right } .qr-server__flow .time span { display: inline-block; margin-right: 14px } .qr-server__flow .txt { font-size: 16px; color: #999; line-height: 1.5; margin-top: 8px; padding-left: 35px } .qr-server__flow .txt time { display: none } .qr-server__flow .txt .item-st { font-size: 20px; color: #000; font-weight: 700; display: block; letter-spacing: 3px } .qr-server__flow .time { font-size: 20px; color: #000; margin-top: 15px; font-weight: 700 } .qr-server__flow .item-detail { position: relative; padding-left: 50px; width: 64%; padding-bottom: 54px } .qr-server__flow .round { width: 45px; height: 45px; border: 1px solid #999; position: absolute; left: 0; top: 0; background-color: #fff; border-radius: 50% } .qr-server__flow .round i { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 22px; color: #999 } .qr-server__flow .line { width: 2px; height: 100%; position: absolute; left: 22px; top: 45px; background-color: #999; display: inline-block } .qr-server__flow .icon-pai::before { display: block; -webkit-transform: scale(1.2); transform: scale(1.2) } .qr-server__flow .on .round { background-color: #DC5F00; border-color: #DC5F00 } .qr-server__flow .on .round i { color: #fff } .qr-server__flow .on.item-succeed .round { background-color: #76bd22; border-color: #76bd22 } @media (min-width: 1921px) { .query-process__main { padding-bottom: 85px } .qt-tab__cont { min-height: 234px } } @media (min-width: 1025px) { .query-tab a:hover span { color: #000 } .qr-message__list .qrn-title:hover { color: #DC5F00 } .query-banner .qb-inner, .query-banner .qb-message { position: absolute; left: 0; width: 100%; text-align: center; z-index: 10 } .query-order__input button:hover { background-color: rgba(220, 95, 0, 0.8) } .query-code__btn:hover { background-color: #DC5F00; color: #fff } } @media (max-width: 1600px) { .query-banner .bg-pic { height: 710px } .query-banner .qb-message { bottom: 60px } .query-banner .qb-message .row-hint { font-size: 18px } .query-banner .qb-message .row-tel { font-size: 52px } .query-banner .qb-message .row-txt { font-size: 16px } .query-banner .qb-message .row-1 { padding-left: 160px } .query-banner .qb-message .dec-icon { max-width: 120px } .query-tab a span { font-size: 26px } .query-tab a.on span { font-size: 32px } .query-result .serial-num { font-size: 24px } .qrs-left__area i { font-size: 50px } .qrs-left__area span { font-size: 38px } .qr-message__list { font-size: 18px } .qr-message__list .qrn-title { font-size: 22px } .query-server__list .title span { font-size: 32px } .query-server__list .item-cont { font-size: 18px } .query-fault__list .item-cont { font-size: 18px } .query-fault__list .pic img { max-width: 140px } .query-fault__list .title { font-size: 24px } .query-fault__list .txt { font-size: 14px } } @media (max-width: 1480px) { .mt-50 { margin-top: 35px } .mt-60 { margin-top: 45px } .mt-100 { margin-top: 85px } .query-process__full { padding: 0 56px } .query-banner .bg-pic { height: 650px } .query-banner .qb-inner h1 { font-size: 60px } .query-banner .hint { font-size: 24px } .query-banner .qb-message .rows { padding-right: 40px; padding-left: 40px } .query-banner .qb-message .row-1 { padding-left: 140px } .query-banner .qb-message .row-hint { font-size: 16px } .query-banner .qb-message .row-tel { font-size: 42px } .query-banner .qb-message .dec-icon { max-width: 94px } .query-banner .qb-message .row-txt { font-size: 14px; line-height: 22px } .query-result .serial-num { font-size: 20px; padding-left: 45px } .qr-status__inner { padding-left: 45px } .qrs-left__area span { font-size: 32px } .qrs-left__area i { font-size: 42px } .qr-message__list { font-size: 15px } .qr-message__list .qrn-title { font-size: 20px } .qr-server__info { font-size: 14px } .qr-server__flow .time { font-size: 16px } .qr-server__flow .txt { font-size: 14px } .qr-server__flow .txt .item-st { font-size: 18px } .qr-server__flow .round i { font-size: 20px } .query-server__list ul { margin-right: -15px; margin-left: -15px } .query-server__list .item-cont { font-size: 16px; margin-left: 15px; margin-right: 15px } .query-server__list .title span { font-size: 28px } .query-fault__list .pic img { max-width: 120px } .query-fault__list .title { font-size: 22px } .query-product__inner h2 { font-size: 22px } .query-product__inner h3 { font-size: 18px } .query-order__input button { font-size: 16px } .qf-title { padding-top: 45px } .qr-inner { font-size: 18px } .qr-inner img { height: 100px } .query-tab a { padding-bottom: 46px } } @media (max-width: 1300px) { .mt-100 { margin-top: 75px } .query-banner .bg-pic { height: 560px } .query-banner .qb-inner h1 { font-size: 48px } .query-banner .hint { font-size: 22px } .query-banner .qb-message .row { padding-left: 30px; padding-right: 30px } .query-banner .qb-message .row-tel { font-size: 34px } .query-banner .qb-message .row-1 { padding-left: 115px } .query-banner .qb-message .dec-icon { max-width: 78px } .query-tab a.on span { font-size: 26px } .query-tab a span { font-size: 22px } .query-server__list .item-cont { height: 220px } .query-process__full { padding: 0 26px } } .subscribe-pop { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 6000 } .subscribe-pop .mask { display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5) } .subscribe-pop .contents { position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 856px; background-color: #fff; z-index: 300 } .subscribe-pop .btn-close { position: absolute; top: 18px; right: 20px; font-size: 20px; color: #dc5f00 } .subscribe-pop .box { margin: 30px 60px 45px 60px } .subscribe-pop .box h3 { line-height: 56px; font-size: 36px; color: #dc5f00; text-align: center } .subscribe-pop .box h3 i { display: inline-block; vertical-align: middle; font-size: 56px; color: #dc5f00; margin-right: 4px } .subscribe-pop .box h4 { font-size: 16px; line-height: 1; color: #000; margin-top: 20px; font-weight: 300 } .subscribe-pop .box ul { border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; margin-top: 30px } .subscribe-pop .box ul li { font-size: 0; padding: 15px 0 } .subscribe-pop .box ul li .th { display: inline-block; vertical-align: middle; width: 190px; font-size: 14px; color: #999; font-weight: 300; padding-left: 16px; line-height: 1.6 } .subscribe-pop .box ul li .td { display: inline-block; vertical-align: middle; width: calc(100% - 190px); font-size: 14px; color: #000; font-weight: 300; line-height: 1.6 } @media (max-width: 1024px) { .mt-50 { margin-top: 25px } .mt-60 { margin-top: 30px } .mt-100 { margin-top: 60px } .qf-title { padding-top: 30px } .query-product__inner h2 { font-size: 20px } .query-product__inner h3 { font-size: 16px } .query-server__list li { display: block; margin-left: auto; margin-right: auto; margin-bottom: 30px } .query-server__list li:last-child { margin-bottom: 0 } .query-server__list .item-cont { height: auto; padding: 30px 20px } .query-server__list .title, .query-server__list .txt { padding-top: 0 } .query-fault__list li { width: 50%; margin-bottom: 40px } .query-fault__list .pic { margin-bottom: 30px } .query-fault__list .pic img { max-width: 100px } .query-product__inner table { width: 100% } .query-apply__form { padding-left: 20px; padding-right: 20px } .query-apply__form .register-table .form-fault__group { height: 100px } .query-apply__form .register-table .form-fault__group label, .query-apply__form .register-table .form-fault__group input { height: 100px } .query-apply__form .register-table .form-fault__group label { line-height: 100px } .qr-message__list .qrn-title { font-size: 18px } .query-process__full { padding: 0 20px } .query-order__input button { font-size: 14px; line-height: 52px } .query-order__input button, .query-order__input input { height: 52px } .query-result .serial-num { padding-left: 30px; font-size: 18px } .qr-status__inner { padding-left: 20px; padding-right: 20px } .qrs-left__area { padding-left: 60px; padding-right: 45px } .qrs-left__area span { font-size: 18px } .qrs-left__area time { font-size: 14px } .qr-message__list { font-size: 12px } .qr-message__list .item-cont { padding: 20px } .qr-message__list .qrn-title i { font-size: 12px } .qrs-right__area > div { font-size: 14px; line-height: 22px } .query-banner .bg-pic { height: auto; padding-top: 41.67% } .query-banner .qb-inner { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; -webkit-transform: translateY(-50%); transform: translateY(-50%) } .query-banner .qb-message { bottom: auto; background-color: #000; padding: 30px } .query-banner .qb-message .dec-icon { position: relative; top: auto; left: auto; max-width: 60px; margin-bottom: 15px } .query-banner .qb-message .row-1 { display: block; margin-bottom: 60px; padding-left: 0 } .query-banner .qb-message .row-1::after { display: none } .query-banner .qb-message .row-2, .query-banner .qb-message .row-3 { padding-left: 0; margin-right: 40px } .query-banner .qb-message .row-tel { font-size: 28px } .qr-server__flow .item-detail { width: 100% } .qr-server__flow .time { display: none } .qr-server__flow .txt time { display: block; font-size: 14px; font-weight: 700; color: #000 } .qr-server__flow .txt time span { display: inline-block; margin-right: 5px } .qrs-succeed i { font-size: 32px } .qr-inner { font-size: 16px } .qr-inner img { height: 85px } .subscribe-pop .contents { left: 0; width: auto; left: 5.33333vw; right: 5.33333vw; -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%) } .subscribe-pop .btn-close { top: 2.4vw; right: 2.66667vw; font-size: 18px } .subscribe-pop .box { margin: 4vw 8vw 6vw 8vw } .subscribe-pop .box h3 { font-size: 20px; line-height: 30px } .subscribe-pop .box h3 i { font-size: 30px } .subscribe-pop .box h4 { font-size: 14px; line-height: 1.8; margin-top: 2.66667vw } .subscribe-pop .box ul { margin-top: 4vw } .subscribe-pop .box ul li { padding: 2vw 0 } .subscribe-pop .box ul li .th { font-size: 12px; width: 25.33333vw; padding-left: 2.13333vw } .subscribe-pop .box ul li .td { font-size: 12px; width: calc(100% - 25.33333vw) } } @media (max-width: 750px) { .query-server__list .title span { font-size: 24px } .query-server__list .txt p { font-size: 14px; line-height: 24px } .query-fault__list .pic img { max-width: 80px } .qf-title { font-size: 14px } .query-order__input input, .query-order__input button { width: 100% } .query-order__input button { margin-top: 12px } .qrs-succeed i { font-size: 26px } .qr-none__inner, .qr-error__inner { padding-top: 120px } .query-order__input { padding-top: 40px } .query-process__main { padding-bottom: 60px } .query-banner .larze-pic { display: none } .query-banner .small-pic { display: block } .query-banner .bg-pic { padding-top: 175.2% } } @media (max-width: 720px) { .query-banner .qb-inner h1 { font-size: 36px } .query-banner .hint { font-size: 18px } .query-banner .qb-message .rows { padding-bottom: 50px; padding-right: 0 } .query-banner .qb-message .rows::after { display: none } .query-banner .qb-message .row-1 { margin-bottom: 0 } .query-banner .qb-message .row-2 { display: block } .query-banner .qb-message .row-cont3 { padding-bottom: 0 } .query-banner .qb-message .row-cont3 .row-wx { position: relative; right: auto; bottom: auto; margin-top: 20px } } @media (max-width: 650px) { .qrs-left__area, .qrs-right__area { display: block } .qrs-left__area { padding-right: 0 } .qrs-left__area::after { opacity: 0 } .qrs-right__area { margin-top: 30px } .query-fault__list li { width: 100% } .query-fault__list li:last-child { margin-bottom: 0 } .query-fault__list .pic { margin-bottom: 20px } .query-server__list .title span { font-size: 22px } .query-product__inner { font-size: 12px } .query-product__inner table th, .query-product__inner table td { padding: 15px } .query-product__full .bg-pic { height: 270px } .query-server__list .txt p { font-size: 12px; line-height: 22px } .query-server__list .title p { font-size: 12px } .qr-server__info td:first-child { padding-left: 15px } .qr-server__flow .round { width: 38px; height: 38px } .qr-server__flow .round i { font-size: 14px } .qr-server__flow .line { left: 17px; top: 38px } .qr-server__flow .txt { margin-top: 5px; font-size: 12px; padding-left: 5px } .qr-server__flow .txt .item-st { font-size: 16px } .qr-server__flow .item-detail { padding-bottom: 30px } .query-order__input input { font-size: 14px } .query-result .serial-num { font-size: 16px } .query-fault__list .pic img { max-width: 65px } .query-server__list .item-cont { font-size: 14px } .query-tab a { width: 50% } .query-tab a.on span { font-size: 20px } .query-tab a span { font-size: 16px } .qr-message__list .qrn-title { font-size: 14px } .qr-server__info { font-size: 12px } .query-fault__list .txt { font-size: 12px } .qr-inner { font-size: 14px } .qr-inner img { height: 65px } } @media (max-width: 500px) { .query-banner .qb-inner h1 { font-size: 20px } .query-banner .hint { font-size: 12px } .qr-server__info td { padding-left: 15px; padding-right: 15px } .qr-server__info td:first-child, .qr-server__info td:last-child { width: 100% } .qr-server__info td:last-child { margin-top: 3px } } /*# sourceMappingURL=main.css.map */