.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%) } 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: "Microsoft YaHei",Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block } img{ max-width:100%;} 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; -webkit-appearance: none; border-radius: 0 } * { -webkit-tap-highlight-color: transparent; box-sizing: border-box } a { outline: 0; text-decoration: none; color: #333; } a:hover { text-decoration: none } body,input,textarea { font-family: "Microsoft YaHei",Arial, Helvetica, sans-serif; font-size: 14px; } 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: 33.333333%; } .list-3>li { width: 25%; } .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 { 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 } .w840 { width: 840px; } .w850 { width: 850px; } .w1180 { width: 1180px; } .w1280 { width: 1280px; } .w1200 { width: 1200px; } .w1240 { width: 1240px; } .w1450 { width: 1450px; } .w1600 { width: 1500px; } .w840, .w740, .w850, .w1280, .w1200, .w1600, .w1240, .w1450, .w1180, .w1690 { margin-left: auto; margin-right: auto; } @media (max-width: 1640px) { .w1600 { width: 90%; } } .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: #009B4C; 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: #009B4C; -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("/images/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; -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: #009B4C; -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 #009B4C; margin-left: auto; margin-right: auto; text-align: center; line-height: 80px; color: #009B4C; font-size: 24px } .tips p { font-size: 24px; line-height: 30px; color: #333; text-align: center; margin-top: 25px } .tips .btn_close { position: absolute; top: 6px; right: 14px; width: 50px; height: 50px; text-align: center; line-height: 50px; color: #009B4C } @media only screen and (min-width: 1025px) { .btn_backtop:hover:after { margin-left: 0 } .footer dl dd:hover a { color: #009B4C; 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: #009B4C; 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 } } @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: #fff; padding-left: 5%; height: 88px; padding-right: 3%; box-shadow: 0 0 8px #666; } .header .logo { display: block; width: 180px; margin-top: 20px; } .header .btn_tools { font-size: 0; position: relative; z-index: 20 } .header .telphone { display: inline-block; color: #fff; 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: #333; 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: 20px; font-weight: 700; } .header .btn_lang { font-size: 14px } .header .btn_inquiry { font-size: 28px; font-size: 26px; font-size: 20px; background-color: #009B4C } .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: #009B4C; 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: #333; 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% - 180px); position: relative; } .navbar .nav { margin-left: 18%; font-size: 0; position: relative; z-index: 20; } .navbar .nav>li { display: inline-block; margin-right: 50px; position: relative; } .navbar .nav>li>a { display: block; font-size: 16px; color: #333; 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: #009B4C; -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: #009B4C; 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 #009B4C; 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: 0; height: 100px; height: 88px; background-color: #fff; 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(0, 0, 0, 0.6); font-size: 14px; color: #333; 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: #333; font-weight: 700; cursor: pointer; 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: 1600px) { .navbar .nav { margin-left: 130px; } .navbar .nav>li { margin-right: 45px; } } @media only screen and (max-width: 1280px) { .navbar .nav { margin-left: 80px; } .navbar .nav>li { margin-right: 40px; } } @media only screen and (max-width: 1180px) { .navbar .nav { margin-left: 45px; } .navbar .nav>li { margin-right: 25px; } } @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: #009B4C } .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: #009B4C } .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: #009B4C } } @media only screen and (max-width: 1024px) { .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: 50px; } .header .logo { width: 120px; margin-top: 8px; } .header_bg { height: 50px } .button_menu { width: 40px; height: 40px; margin-right: 14px; margin-top: 5px } .navbar { display: none; position: fixed; left: 0; width: 100%; } .navbar .nav { margin-left: 0; position: relative; z-index: 300; float: none; clear: both } .navbar .nav>li { display: inline-block; vertical-align: top; width: 100%; margin-right: 0; padding-left: 5.33333%; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .formsearch .form-control+label { left: 18.79433% } .formsearch .form-control { padding: 0 18.79433% } .navbar .nav>li:last-child { } .navbar .nav>li.on { background-color: #009B4C } .navbar .nav>li>a { color: #333; 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; float: none; clear: both; width: 100%; z-index: 200; display: none; } .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: 10%; font-size: 30px; border-right: none; float: right; border-bottom: 1px solid rgba(0, 0, 0, 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: #009B4C; 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: #009B4C } .header .telphone .icon-icon_tel { height: auto } .navbar .bgcover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #f5f4f4; 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 } .container-full .button_menu { position: absolute; top: 5px; right: 63px; margin-right: 0; margin-top: 0 } .otherpage .header_bg { height: 100px } .header .logo { width: 120px; margin-top: 8px; } .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(5px, 0); -ms-transform: translate(5px, 0); -webkit-transform: translate(5px, 0); transform: translate(5px, 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: #009B4C; -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: #009B4C; } .information>h4 { font-size: 24px; letter-spacing: 1.5px; line-height: 34px; color: #009B4C; font-weight: 400; color: #333; margin-top: 10px; font-weight: 400 } .information .line { display: block; width: 40px; height: 4px; background-color: #009B4C } .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 .text_desc { color: #fff; position: absolute; bottom: 0; left: 0; width: 100%; padding-left: 8.50469%; padding-right: 8.50469%; padding-bottom: 30px; padding-top: 80px; } .work_list li .text_desc h3 { font-size: 24px; font-weight: 400; line-height: 34px; color: #fff; } .work_list li .text_desc h4 { font-size: 14px; line-height: 1.8; margin-top: 18px; } .work_list li .text_desc:before { content: ""; display: block; position: absolute; top: 0; left: -1%; width: 102%; height: 100%; background-image: url("/images/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: #009B4C } .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 } .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 10px; } .news_list .img-box:before { content: ""; } .news_list .text_desc { padding-top: 26px; padding-right: 9.61034% } .news_list .text_desc h3 { font-size: 24px; color: #009B4C; 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; 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: 40px; line-height: 1.6; color: #fff; margin-bottom: 20px; font-weight: 400; max-width: 800px; margin-left: auto; margin-right: auto; } .server p { font-size: 14px; line-height: 24px; max-width: 1000px; margin: 0 auto; color: #fff; } .btn_default { padding: 0; background: none; border: none; display: inline-block; text-align: center; font-size: 14px; color: #009B4C; 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: 2; -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: #009B4C; z-index: 1; -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: 3; -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: #009B4C } @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: #009B4C; 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: #009B4C; } } @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: 22px; font-weight: 400; } .pagetitle h1,.pagetitle h2,.server h2 { font-size: 34px; } } .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% } .innerbanner .mask { position: absolute; bottom: 0; height: 142px; height: 110px; background-color: #009B4C } .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 } .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: #009B4C; letter-spacing: .4px; line-height: 20px } .inves_list li .tel { font-size: 28px; color: #333; letter-spacing: 1px; line-height: 1.42857; } .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; } .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 #009B4C; 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: #009B4C; 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: #009B4C; letter-spacing: 0; display: block; line-height: 20px } .orange { color: #009B4C !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: #009B4C; 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: #009B4C } .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: #009B4C; 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 .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 } .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: #009B4C } .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: #009B4C; 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: #009B4C; 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; 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: #009B4C; 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: #009B4C; } .pro_picture .list li.block_left figure { float: left } .pro_picture .list li.block_left figcaption { float: right; background-color: #009B4C } .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: #009B4C } .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: #009B4C } .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("/images/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: #009B4C; 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: #009B4C; font-size: 16px } .pagination .pg { font-size: 14px; letter-spacing: 1px; color: #333; } .pagination .current,.pagination .pg:hover { background-color: #009B4C; 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: #009B4C; 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; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease } .backlist i { color: #009B4C; margin-right: 5px; vertical-align: -2px; font-size: 20px } .share { font-size: 14px; letter-spacing: .4px; color: #333; line-height: 17px; } .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: #009B4C; 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: #009B4C; 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: #009B4C; 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: #009B4C } .text_title h3 { font-size: 30px; letter-spacing: 1px; line-height: 42px; color: #333; font-weight: 400; font-size: 36px; line-height: 60px; color: #009B4C } .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-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 #009B4C; border-right: 1px dashed transparent; border-bottom: 1px solid #009B4C; left: 1px; width: calc(100% - 2px); height: calc(100% - 2px) } .global .list li:nth-child(even) .box:after { display: none; border-top: 1px solid #009B4C; border-left: 1px dashed transparent; border-right: 1px solid #009B4C; 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 #009B4C; border-right: 1px dashed #009B4C } .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; } .history_slick_swiper .slick-slide .year { font-size: 12px; line-height: 15px; color: #333; 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; margin-top: 20px; text-align: center } .history_slick_date .slick-current em { background-color: #009B4C } .history_slick_date .slick-current time { color: #009B4C } .location { font-size: 0 } .location .img-box:before { padding-top: 53.33333%; background-color: #009B4C } .location .order { font-size: 50px; letter-spacing: 1px; line-height: 97px; color: #fff; } .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("/images/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: #009B4C } .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: #009B4C } .validate_form .form-control.active { border: 1px solid #009B4C } .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: #009B4C; -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: #009B4C; background-image: url("/images/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: #009B4C; 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: #009B4C } .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: #009B4C; 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: #009B4C; 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: #009B4C; } .counter h5 span { } .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: #009B4C } .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 { } .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 } } @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: #009B4C } .hot_mod a:hover .tig { background-color: #009B4C } .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: #009B4C !important } .news_mod_list a:hover figcaption .desc { color: #009B4C } .news_mod_list a:hover .category { background-color: #009B4C; 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: #009B4C } .crumbs ul li.home a:hover i { color: #fff } .news_list .item_box:hover .text_desc h3 { color: #009B4C } .news_list .item_box:hover .read_more,.read_more:hover { color: #009B4C } .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: #009B4C } .works_mod_list li a:hover .read_more { color: #009B4C } .backlist:hover { color: #009B4C } .hot_news a:hover figcaption h3 { color: #009B4C } .hot_news a:hover .read_more { color: #009B4C } .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: #009B4C; color: #fff } .history .arrow:hover { color: #009B4C } .search_wrapper .list-search li:hover h4 { color: #009B4C } .btn_vido_play:hover:after { border-left-color: #fff } .btn_vido_play:hover:before { background-color: #009B4C } .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: #009B4C } .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: #009B4C } .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: #009B4C } .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: #009B4C; color: #fff } .video_wrapper .videopopup .btn_video_pause:hover { color: #009B4C } } .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: #009B4C; -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg) } .nav-tabs_wrapper .select-wrapper.active .select-button { color: #009B4C } .error-404 { padding: 60px 20px; text-align: center } .error-404 h3 { font-size: 30px; letter-spacing: 1.5px; line-height: 34px; color: #009B4C; 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: 40px } .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: 30px } .work_list li { width: 50%; } .work_list li .text_desc { padding-left: 7%; padding-right: 7%; 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 { } .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("/images/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("/images/icon_17.svg"); right: auto; left: 24%; top: -212% } .news { margin-top: 20px } .news_list li { width: 100%; margin-bottom: 140px } .news_list .text_desc h3 { font-size: 34px; font-size: 18px; color: #009B4C } .news_list .text_desc .read_more { color: #009B4C; 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: 80px 5.33333%; background-position: 87% center; margin-top: 0; } .col-md-6 { width: 100% } .innerbanner:before { padding-top: 74.4% } .img-box>img { } .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 } .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: #009B4C } .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: #009B4C } .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(/images/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 .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; text-align: center; background-color: #161616; padding-top: 10px; padding-bottom: 10px; margin-left: 0; padding-right: 0; margin-bottom: 2px } .nav-tabs_wrapper .select-wrapper .container { display: inline-block; position: relative; padding-right: 34px } .nav-tabs_wrapper .select-wrapper .select-list { width: 100%; top: 59px } .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 { height: auto } .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: #009B4C; 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 #009B4C; border-right: 1px dashed #009B4C; border-bottom: 1px solid #009B4C; border-left: 1px solid #009B4C } .global .list li:nth-child(even):after { display: none } .global .list li:nth-child(even) .box:before { border-top: 1px solid #009B4C; border-right: 1px solid #009B4C; border-bottom: 1px dashed #009B4C; border-left: 1px dashed #009B4C } .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 } .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: #009B4C } .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 } } @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: 40px } .work_list { margin-top: 30px } .work_list li .text_desc { padding-top: 20px; padding-bottom: 10px; } .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: 0; } .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: #009B4C } .server { padding: 45px 5.33333%; } .server h2 { font-size: 24px; 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 #009B4C; 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 #009B4C; border-left: 1px dashed #009B4C; border-right: 1px solid #009B4C; border-bottom: 1px dashed #009B4C } .global .list li:nth-child(odd) .box:after { border-top: 1px dashed #009B4C; border-left: 1px solid #009B4C; border-right: 1px dashed #009B4C; border-bottom: 1px solid #009B4C; 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: #009B4C } .cerpage .sm-col-mod5 { background-image: url("/images/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: #009B4C } .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: #009B4C } .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-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 } .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: #009B4C } .sm-col-certifi .bgA::before,.sm-col-certifi .bgA::after { background-color: #009B4C } .sm-col-certifi .bgB { color: #009B4C; 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: #009B4C } .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: #009B4C; margin-bottom: 20px; } .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: #009B4C; 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; } .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: #009B4C; font-size: 1.625em; letter-spacing: .025em; margin-bottom: 20px; } .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; 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; 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% - 180px) } .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: 180px; z-index: -2 } .sm-col-certifi .register-table label.error { position: absolute; top: 0; right: 0; color: #009B4C; text-align: right; width: 300px } .sm-col-certifi .register-table .group-box { display: inline-block; vertical-align: top; width: calc(100% - 180px) } .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% - 180px); 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 { content: ""; position: absolute; top: 50%; margin-top: -5px; right: 1.04167vw; width: 10px; height: 10px; background: url("/images/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: #009B4C } .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 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 { 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 } } .PUBtitle{width: 100%;text-align: center;position: relative;z-index: 5;} .PUBtitle h4{font-size: 40px;color: #000;} .PUBtitle i{display: block;width: 28px;height: 3px;background: #009B4C;margin: 15px auto 0;} .PUBtitle.white h4{color: #fff;} .case{background:url(/images/case-bg.jpg) no-repeat center center / cover fixed;} .Icase-wrap{width:600px;height: 620px;padding: 152px 50px 0;color:#fff;background:rgba(0,0,0,.5);} .Icase-wrap .name{line-height:50px;font-size: 40px;} .Icase-wrap .con{line-height:28px;color: #ffffff;font-size: 14px;margin:25px 0 0;} .Icase-wrap .btn.more-btn{margin:118px 0 0;} .btn.more-btn{display:block;width:160px;height:40px;line-height:38px;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:40px; text-align:center;} .btn.more-btn span{padding:0 26px 0 0;background:url(/images/icon-go2.png) no-repeat right center;} .btn.more-btn:hover{background:#fff;border-color:#fff;color:#009B4C;} .btn.more-btn:hover span{padding:0px;background:none; -moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;} .ab-news-section{ } .ab-news-container{ margin: 0 -1%; } .ab-classify-h3{ font-size: 30px; color: #595959; padding:72px 68px; margin: 0; text-align: center; } .ab-news-item{ background-color: #FFF; overflow: hidden; } .ab-news-item img{ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; width: 100%; } .ab-news-item img:hover{ transform:scale(1.02); } .ab-news-item:hover{ box-shadow: 0 0 10px rgba(0,0,0,.2); transition: box-shadow .3s; } .ab-news-bottom{ padding: 20px 20px 30px 20px; clear: both; } .ab-news-h4{ color:#595959; font-size: 18px; text-align: left; font-weight: 400; line-height: 24px; margin: 5px 0 12px 0; height: 24px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .ab-news-time{ font-size: 13px; color: #A0A0A0; margin: 6px 0 10px 0; } .ab-news-content{ color: #999; font-size: 14px; line-height: 24px; height: 48px; text-align: left; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ac222{width: 23%;margin: 0 1% 2% 1%;float: left;} .home-block { padding: 60px 0 40px 0; } .bgef { background: #f5f5f5; } .z_footer{background: #232323;} .foot_top{padding: 35px 0 15px 0;border-bottom: 1px solid rgba(255,255,255,.1);} .foot_nav{float: left;line-height: 50px;} .foot_nav a{ display: inline-block; color: #fff;padding: 0 35px; position: relative;} .foot_nav a:hover{color: #009B4C;} .foot_nav a:first-child{ padding-left: 0;} .foot_nav a:before{ content: "";display: block; width: 4px; height: 4px; background: #fff; position: absolute; right: 0; top: 50%; transform: translateY(-50%);} .foot_nav a:last-child:before{display: none; } .foot_link{float: right;text-align:center;position:relative;} .foot_link h2{position:relative;font-size:13px;color:#fff;cursor:pointer;background: #313131;} .foot_link h2 .iconfont{ margin-left: 50px;} .foot_link h2 i{position:absolute; right:0; width:40px; height:40px; text-align:center; top:0; background:#333!important; color:#fff;} .foot_link dl{visibility:hidden; opacity:0; transition:all .45s; position:absolute; left:0; top:50px; width:100%; max-height:200px; overflow-y:auto;} .foot_link dd{border-top:1px solid #D9D9D9; background:#fff;} .foot_link dd a{font-size:12px; color:#666; display:block; box-sizing: border-box;} .foot_link:hover dl{visibility:visible; opacity:1;} .foot_link dd a:hover{background:#f5f5f5;} .foot_addre{color: #fff;padding: 30px 0;} .foot_addre span{ display: inline-block; margin-right: 50px;} .foot_code .code_box{ width: 120px; float: left; margin-right: 30px;} .foot_code .code_box img{ width: 100%;} .foot_bottom{padding-bottom: 50px;} .foot_copy{background: #0c0c0c;padding: 20px 0;color: #909090;} .foot_copy a{color: #808099;} @media only screen and (max-width: 1440px) { .PUBtitle h4{font-size: 34px;} .Icase-wrap .name{font-size: 34px;} } @media only screen and (max-width: 1024px) { .Icase-wrap{width:100%;padding: 70px 5%;height:auto;} .Icase-wrap .name{font-size: 26px;line-height: 36px;} .Icase-wrap .con{margin:15px 0 0;} .Icase-wrap .btn.more-btn{margin:80px 0 0;} .foot_nav{display: none;} .foot_top{padding: 20px 0;} .foot_link{ float: none; box-sizing: border-box; margin: 0 auto; width: 100%; text-align: left;} .foot_link .icon-caidan{ float:right} .foot_link h2{padding: 0 20px; box-sizing: border-box;} .foot_addre{ padding: 20px 0;} .foot_bottom{ padding-bottom: 20px;} .foot_addre span{ display: block; margin: 0; line-height: 24px;} .foot_code{ text-align: center; width: 100%;} .foot_code .code_box{ display: inline-block; float: none; margin: 0 20px; width: 100px;} .foot_copy{text-align: center;font-size: 13px;line-height: 1.5;padding: 14px 0;} .foot_copy .fr{ display: block; float: none;} .PUBtitle h4{font-size: 26px;color: #000;} .ac222{ width: 98%; margin: 0 1% 15px 1%; } .home-block { padding: 40px 0; } .mt-30 { margin-top: 20px } .mt-40 { margin-top: 30px } .mt-60 { margin-top: 40px } .mt-90 { margin-top: 60px } } /* FILE ARCHIVED ON 21:39:21 Mar 13, 2022 AND RETRIEVED FROM THE INTERNET ARCHIVE ON 02:19:50 Jul 25, 2024. JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE. ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C. SECTION 108(a)(3)). */ /* playback timings (ms): captures_list: 2.975 exclusion.robots: 0.096 exclusion.robots.policy: 0.067 esindex: 0.025 cdx.remote: 163.649 LoadShardBlock: 333.018 (3) PetaboxLoader3.datanode: 322.866 (4) load_resource: 278.339 PetaboxLoader3.resolve: 191.957 */