@charset "utf-8"; /* * Project Name:99905银河 * Author:浅浅 * Date:2019-8-23 */ @font-face { font-family: 'DINCond-bold'; src: url('DINCond-Bold.eot'); src: url('DINCond-Bold.eot?#iefix') format('embedded-opentype'), url('DINCond-Bold.woff2') format('woff2'), url('DINCond-Bold.woff') format('woff'), url('DINCond-Bold.ttf') format('truetype'), url('DINCond-Bold.svg#DINCond-Bold') format('svg'); font-weight: bold; font-style: normal; } @font-face { font-family: 'DIN-Regular'; src: url('DIN-Regular.eot'); src: url('DIN-Regular.eot?#iefix') format('embedded-opentype'), url('DIN-Regular.woff2') format('woff2'), url('DIN-Regular.woff') format('woff'), url('DIN-Regular.ttf') format('truetype'), url('DIN-Regular.svg#DIN-Regular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'DINPro-L'; src: url('DINPro-Light.eot'); src: url('DINPro-Light.eot?#iefix') format('embedded-opentype'), url('DINPro-Light.woff2') format('woff2'), url('DINPro-Light.woff') format('woff'), url('DINPro-Light.ttf') format('truetype'), url('DINPro-Light.svg#DINPro-Light') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'DINPro-BIA'; src: url('DIN-BoldItalicAlt.eot'); src: url('DIN-BoldItalicAlt.eot?#iefix') format('embedded-opentype'), url('DIN-BoldItalicAlt.woff2') format('woff2'), url('DIN-BoldItalicAlt.woff') format('woff'), url('DIN-BoldItalicAlt.ttf') format('truetype'), url('DIN-BoldItalicAlt.svg#DIN-BoldItalicAlt') format('svg'); font-weight: normal; font-style: normal; } @font-face {font-family: "iconfont"; src: url('iconfont.eot?t=1566549665854'); /* IE9 */ src: url('iconfont.eot?t=1566549665854#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('iconfont.woff2?t=1566549665854') format('woff2'), url('iconfont.woff?t=1566549665854') format('woff'), url('iconfont.ttf?t=1566549665854') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('iconfont.svg?t=1566549665854#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} html, body, div, span, applet, object, iframe, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0px; border: 0; font-size: 100%; outline: none; } table, caption, tbody, tfoot, thead, tr, th, td,h1, h2, h3, h4, h5, h6, p{ margin: 0; padding: 0px; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; overflow-x: hidden;-webkit-tap-highlight-color:rgba(0,0,0,0);} html::-webkit-scrollbar {width:8px;background:none;} html::-webkit-scrollbar-thumb {width:8px;background:#0d88be;} html::-webkit-scrollbar-corner {background:none;} html::-webkit-scrollbar:horizontal{height:9px;} body { font: 14px/1.8 "Microsoft Yahei","微软雅黑","DINPro-L","微软正黑体","Microsoft JhengHei","SimHei","黑体",Arial,Helvetica,sans-serif; font-weight: lighter; margin: 0 auto; color: #666; background-color: #fff; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;} strong { font-weight: bold; } img { border: 0; } input { outline: none; } input[type="text"], input[type="button"], input[type="submit"], input[type="reset"] { -webkit-appearance: none; border-radius: 0; } textarea { -webkit-appearance: none; border-radius: 0; outline: none;} ::-moz-selection { background: #8b8b8b; color: #fff; text-shadow: none; } ::selection { background: #8b8b8b; color: #fff; text-shadow: none; } select{ outline: none;} select::-ms-expand { display: none; } table, tbody, tfoot, thead, tr, th, td{ margin: 0; padding: 0;} table{border-collapse:collapse;} a { text-decoration: none; blr: expression(this.onFocus=this.blur()); cursor: pointer; -webkit-transition: 0.3s; transition: 0.3s; } a:link, a:visited { text-decoration: none; } a:active, a:hover { text-decoration: none; } .clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0px; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } .enf1{font-family: 'DINPro-L';} .enf2{font-family: 'DINPro-BIA';} .fc { text-align: center; } .fr { text-align: right; } .l { float: left; display: inline-block; } .r { float: right; display: inline-block; } .vt { vertical-align: top; } .vm { vertical-align: middle; } .inner{ width: 1200px; margin: 0px auto;} .w900{ width: 900px; margin: 0px auto;} .top a:link, .top a:visited { color: #fff;} .top a:active, .top a:hover { color: #fff;} .pageH{ height: 80px;} .top{ position: fixed; left: 0; top: 0; width: 100%; z-index: 1000; height: 80px; color: #fff; -webkit-transition: 0.3s; transition: 0.3s;} .logo{ float: left; display: block; margin-top: 18px;} .logo a{ display: block; height: 44px;} .logo img{ height: 100%; display: block;} .logo img.img2{ display: none;} .site-lang{ float: right; display: none; position: relative; text-align: center; margin: 25px 0 0 12px; font-size: 12px;} .lang-act{ border: 1px solid #CCCCCC; width: 60px; height: 28px; line-height: 28px; display: block;} .lang-act span{ position: relative; display: inline-block; padding-right: 12px;} .lang-act span:before{ content: ""; position: absolute; right: 0; top: 50%; margin: -3px 0 0 -3px; width: 0; display: block; border: 3px solid; border-width: 5px 3px 0 3px; border-color: #fff transparent transparent transparent ; transition: 0.3s; -webkit-transition: 0.3s; } .lang-list{ position: absolute; left: 0; top: 100%; width: 100%; background-color: #fff; display: none; } .top .lang-list a{ color: #666; padding: 5px 0; display: block;} .top .lang-list a:hover{ background-color: #00A2E9; color: #fff;} .site-lang:hover .lang-list{ display: block;} .nav{ float: right; display: block;} .nav>ul>li{ position: relative; float: left; display: inline-block; margin-right: 25px;} .nav>ul>li>a{ display: block; line-height: 80px; height: 80px;} .nav>ul>li>a.active{ color: #00A2E9;} .nav .sub-nav{ position: absolute; left: 50%; top: 80%; width: 86px; margin-left: -68px; background-color: #fff; padding: 25px; box-shadow: 0 0 3px rgba(0,0,0,0.1); display: none;} .nav .sub-nav:before{ content: ""; position: absolute; left: 50%; top: -5px; margin: -5px 0 0 -6px; width: 0; display: block; border: 6px solid; border-width: 0 6px 12px 6px; border-color: transparent transparent #fff transparent ; transition: 0.3s; -webkit-transition: 0.3s;} .nav .sub-nav a:link, .nav .sub-nav a:visited { color: #333;} .nav .sub-nav a:active,.nav .sub-nav a:hover { color: #00A2E9;} .nav .sub-nav p{ margin-bottom: 10px;} .nav .sub-nav2{ text-align: center;} .nav .sub-nav1 dt{ margin-bottom: 10px;} .nav .sub-nav1 dd{ border-left: 1px solid #EAEAEA; padding-left: 10px; margin-bottom: 10px;} .nav .sub-nav1 dd a{ display: block; font-size: 12px; margin-bottom: 4px;} .ptop a:link, .ptop a:visited { color: #333;} .ptop a:active, .ptop a:hover { color: #00A2E9;} .ptop .logo img.img1{ display: none;} .ptop .logo img.img2{ display: block;} .ptop .nav>ul>li>a.hov{ color: #00A2E9;} .ptop{ background-color: #fff; color: #333; box-shadow: 0 0 3px rgba(0,0,0,0.1); } .ptop .lang-act span:before{ border-color: #666 transparent transparent transparent;} .menu-handler{ position: absolute; right: 0; top: 0; width:54px;height: 54px; display:none; cursor: pointer; background-color: ; z-index: 1010;} .menu-handler span { position: relative; display: block; margin: 26px auto 0; width: 18px; height: 2px; background-color: #333; -webkit-transition-duration: .3s,.3s; -moz-transition-duration: .3s,.3s; -ms-transition-duration: .3s,.3s; -o-transition-duration: .3s,.3s; transition-duration: .3s,.3s;-webkit-transition-delay: .3s,0s; -moz-transition-delay: .3s,0s; -ms-transition-delay: .3s,0s; -o-transition-delay: .3s,0s; transition-delay: .3s,0s;} .menu-handler span:after, .menu-handler span:before { content: ""; position: absolute; display: inline-block; width: 100%; height: 2px; left: 0; background-color: #333; -webkit-transition-duration: .3s,.3s; -moz-transition-duration: .3s,.3s; -ms-transition-duration: .3s,.3s;-o-transition-duration: .3s,.3s; transition-duration: .3s,.3s;-webkit-transition-delay: .3s,0s;-moz-transition-delay: .3s,0s;-ms-transition-delay: .3s,0s;-o-transition-delay: .3s,0s; transition-delay: .3s,0s} .menu-handler span:before {top: -6px;-webkit-transition-property: top,transform;-moz-transition-property: top,transform;-ms-transition-property: top,transform;-o-transition-property: top,transform;transition-property: top,transform;} .menu-handler span:after {bottom: -6px;-webkit-transition-property: bottom,transform;-moz-transition-property: bottom,transform;-ms-transition-property: bottom,transform;-o-transition-property: bottom,transform; transition-property: bottom,transform;} .menu-handler.active span {background-color: transparent;-webkit-transition-delay: 0s,0s;-moz-transition-delay: 0s,0s;-ms-transition-delay: 0s,0s;-o-transition-delay: 0s,0s;transition-delay: 0s,0s} .menu-handler.active span:after,.menu-handler.active span:before { -webkit-transition-delay: 0s,.3s;-moz-transition-delay: 0s,.3s; -ms-transition-delay: 0s,.3s; -o-transition-delay: 0s,.3s; transition-delay: 0s,.3s} .menu-handler.active span:before {top: 0;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg)} .menu-handler.active span:after {bottom: 0;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);} .menuBox { background-color: #fafafa; color: #333; position: fixed; display: none; left: 0px; top: 0px; width: 70%; height: 100%; height:100vh; overflow-x:hidden; overflow-y:auto; -moz-transform:translateX(-100%);-ms-transform:translateX(-100%);-webkit-transform:translateX(-100%);transform:translateX(-100%); -webkit-overflow-scrolling:touch; z-index: 1080; -webkit-transition:all .5s cubic-bezier(.25,.46,.45,.94); -moz-transition:all .5s cubic-bezier(.25,.46,.45,.94);-ms-transition:all .5s cubic-bezier(.25,.46,.45,.94); -o-transition:all .5s cubic-bezier(.25,.46,.45,.94);transition:all .5s cubic-bezier(.25,.46,.45,.94);} .menu-close{ padding: 15px; float: right; margin-right: 0; line-height: 1;} .menu-close .iconfont{ font-size: 22px;} .menuBox a:link, .menuBox a:visited { color: #333;} .menuBox a:active, .menuBox a:hover { color: #333;} .menubar{ padding:60px 0 80px;} .menubar a{ display: block;} .menubar>li{ border-bottom: 1px solid #d9d9d9;} .menubar>li>a{ position: relative; font-weight: 700; font-size: 15px; padding: 10px 5%;} .menubar>li>a:before{ content: "\e601"; font:normal 18px/1 "iconfont" !important; webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; right: 5%; top: 50%; width: 18px; height: 18px; margin-top: -9px; transform: rotate(-90deg);-webkit-transform: rotate(-90deg); transition: 0.3s; -webkit-transition: 0.3s;} .menubar>li>.sub-menu{ padding: 0px 5%; background-color: #f5f5f5; border-top: 1px solid #d9d9d9; display: none;} .menubar>li>.sub-menu>li{ padding: 5px 15px; border-bottom: 1px solid #e8e8e8;} .menubar>li>.sub-menu>li:last-child{ border-bottom: 0px none;} .menubar>li>.sub-menu>li>a{ padding: 10px 0;} .menubar>li>.sub-menu>li>.sub-menu>li>a{ padding: 5px 0; margin: 0px 15px;} .menubar>li>.sub-menu>li>.sub-menu>li>a:before{ content: "– ";} .pusher-black { position: fixed; width: 100%; height: 100%; left: 0px; top: 0px; z-index: 1050; background-color: rgba(0,0,0,0.4); visibility:hidden; filter:alpha(Opacity=0);opacity:0;-webkit-transition:all .2s cubic-bezier(.02,.01,.47,1) 0s; -moz-transition:all .2s cubic-bezier(.02,.01,.47,1) 0s; -ms-transition:all .2s cubic-bezier(.02,.01,.47,1) 0s; -o-transition:all .2s cubic-bezier(.02,.01,.47,1) 0s; transition:all .2s cubic-bezier(.02,.01,.47,1) 0s;} .menuOpen .pusher-black { visibility:visible;filter:alpha(enabled=false); opacity:1;} .menuOpen .menuBox { -moz-transform:translateX(0%); -ms-transform:translateX(0%); -webkit-transform:translateX(0%); transform:translateX(0%);} .menuOpen .body-right{ -moz-transform:translateX(70%); -ms-transform:translateX(70%); -webkit-transform:translateX(70%); transform:translateX(70%);} .menuOpen .top{ -webkit-transform:translateX(70%); transform:translateX(70%); } .foot a:link, .foot a:visited { color: #a9a8a8; } .foot a:active, .foot a:hover { color: #fff; } .foot{ background-color: #333333; padding: 80px 0 50px; color: #a9a8a8; font-size: 12px;} .foot-erm-box { margin-bottom: 50px;} .foot-erm-box .item{ float: left; display: inline-block; width: 120px; margin-right: 15px;} .foot-erm-box .item img{ display: block; margin-bottom: 4px;} .foot-sharp{ margin-bottom: 20px;} .foot-sharp .iconfont{ position: relative; top: 5px; font-size:28px; line-height: 1; margin-left: 8px;} .ermbox{ cursor: pointer;} .ermbox .img{ position: absolute; left: 50%; bottom: 102%; width: 100px; border-radius: 8px; padding: 10px; background-color: #fff; margin-left: -64px; box-shadow: 0 0 7px rgba(0, 0, 0, 0.16); opacity: 0; display: none; transition: 0.3s; -webkit-transition: 0.3s;} .ermbox .img:before{ content: ""; position: absolute; left: 50%; top: 100%; border:4px solid; margin-left: -4px; border-color: #fff transparent transparent transparent;} .ermbox .img img{ width: 100%; display: block;} .ermbox:hover .img{ display: block; opacity: 1;} .foot-l{ float: left; display: inline-block; } .foot-r{ float: right; display: inline-block; width: 50%; text-align: right;} .foor-topr{ float: right; display: block;} .foot-nav li{ position: relative; float: left; padding-left: 60px; margin-left: 60px;} .foot-nav li:before{ content: ""; position: absolute; left: 0; top: 4px; width: 1px; height: 15px; background-color: #555555;} .foot-nav .title a{ color: #fff; font-size: 14px;} .foot-nav .title { margin-bottom: 15px;} .foot-nav .sub-nav p{ margin-bottom: 4px;} .link-select-box a:link, .link-select-box a:visited { color: #fff;} .link-select-box a:active,.link-select-box a:hover { color: #fff;} .link-select-box { position: relative; float: right; width:224px; height: 38px; line-height: 38px; text-align: left; border: 1px solid #a9a8a8; transition: 300ms; -webkit-transition: 300ms; z-index: 200; margin-bottom: 5px;} .link-select-box .mt { padding: 0 40px 0 20px; position: relative; cursor: pointer; line-height: 38px; color: #fff;} .link-select-box .mt .aw { position: absolute; top: 50%; margin-top: -4px; right: 22px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid #B1B1B1; transition: 0.3s; -webkit-transition: 0.3s; } .link-select-box .mc { padding-bottom: 3px; position: absolute; left: 0px; right: 0px; bottom: 100%; z-index: 100; display: none; } .link-select-box ul { background-color: #616161; padding: 15px 0; overflow: hidden; } .link-select-box a { display: block; padding: 8px 15px; line-height: 1.4; font-size: 12px;} .link-select-box a:hover { background-color: #0D88BE; } .link-select-box.act .mt .aw { transform: rotate(-180deg); -webkit-transform: rotate(-180deg); } .fixedImg { background-position: center top; background-repeat: no-repeat; background-size: cover;} .imgw{ width: 100%; display: block;} .ellipsisT{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;} .align-vertical { height: 100%; width: 100%; position: relative; display: table; } .vertical-inner { display: table-cell; vertical-align: middle; } .linkA{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/w0.png) no-repeat;} .pageC a:link, .pageC a:visited { color: #333;} .pageC a:active, .pageC a:hover { color: #00A2E9;} .pageC img{ max-width: 100% !important; height: auto !important; } .pageC{ overflow: hidden; text-align: justify;} /* Slider */ .vwrap { display: none; z-index: 1040; width: 100%; position: fixed; } .vwrap .videobtg { z-index: 900; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: #000; opacity: 0.8; filter: alpha(opacity=80); overflow: hidden; } .vwrap .videobox { z-index: 990; width: 800px; height: 450px; background-color: #fff; position: fixed; left: 50%; top: 50%; margin-top: -225px; margin-left: -400px; } .vwrap .videobox #videobox { width: 100%; display: inline-block; height: 100%; background: #80abde; } #videobox_wrapper { height: 100%!important; } .vwrap .close { z-index: 999; width: 31px; height: 31px; cursor: pointer; position: absolute; top: 0px; right: -42px; background-color: #00A2E9;} .vwrap .close i { display: block; width: 31px; height: 31px; font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 31px;text-align: center;color: #fff;-webkit-transition: 400ms; transition: 400ms;} .vwrap .close i:before { content: "\e64c"; } .vwrap .close:hover i { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } #videobox_display_button,#videocontainer_display_button { background: none no-repeat!important; } .jwplayer .jwicon { opacity: 0.8; filter: alpha(opacity=80); cursor: pointer; } .jwplayer .jwicon:hover { opacity: 1; filter: alpha(opacity=100); } .jwlogo, .jwclick { display: none!important; } .jwdisplayIcon{ background: none no-repeat!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; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-loading .slick-list { background: #f1f1f1 url(../images/loader.gif) center center no-repeat; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-list, .slick-track, .slick-slide, .slick-slide img { -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; left: 0; top: 0; display: block; zoom: 1; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } .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; } /* Arrows */ .slick-prev, .slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; padding: 0; border: none; outline: none; } /* Dots */ .slick-dots { position: absolute; bottom: -45px; list-style: none; display: block; text-align: center; padding: 0px; width: 100%; } .slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0px 5px; padding: 0px; cursor: pointer; } @-webkit-keyframes scaleUpDown { from { -webkit-transform: scale(1.08); transform: scale(1.08); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1);} } @keyframes scaleUpDown { from { -webkit-transform: scale(1.08); transform: scale(1.08);} to { opacity: 1; -webkit-transform: scale(1); transform: scale(1);} } .pswp { display: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; -ms-touch-action: none; touch-action: none; z-index: 1500; -webkit-text-size-adjust: 100%; -webkit-backface-visibility: hidden; outline: 0 } .pswp * { -webkit-box-sizing: border-box; box-sizing: border-box } .pswp img { max-width: none } .pswp--animate_opacity { opacity: .001; will-change: opacity; -webkit-transition: opacity 333ms cubic-bezier(.4,0,.22,1); transition: opacity 333ms cubic-bezier(.4,0,.22,1) } .pswp--open { display: block } .pswp--zoom-allowed .pswp__img { cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in } .pswp--zoomed-in .pswp__img { cursor: -webkit-grab; cursor: -moz-grab; cursor: grab } .pswp--dragging .pswp__img { cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing } .pswp__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/black_90.png) repeat; background: none rgba(0,0,0,.9); opacity: 0; transform: translateZ(0); -webkit-backface-visibility: hidden; will-change: opacity } .pswp__scroll-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden } .pswp__container, .pswp__zoom-wrap { -ms-touch-action: none; touch-action: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0 } .pswp__container, .pswp__img { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none } .pswp__zoom-wrap { position: absolute; width: 100%; -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; -webkit-transition: -webkit-transform 333ms cubic-bezier(.4,0,.22,1); transition: transform 333ms cubic-bezier(.4,0,.22,1) } .pswp__bg { will-change: opacity; -webkit-transition: opacity 333ms cubic-bezier(.4,0,.22,1); transition: opacity 333ms cubic-bezier(.4,0,.22,1) } .pswp--animated-in .pswp__bg, .pswp--animated-in .pswp__zoom-wrap { -webkit-transition: none; transition: none } .pswp__container, .pswp__zoom-wrap { -webkit-backface-visibility: hidden } .pswp__item { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden } .pswp__img { position: absolute; width: auto; height: auto; top: 0; left: 0 } .pswp__img--placeholder { -webkit-backface-visibility: hidden } .pswp__img--placeholder--blank { background: #222 } .pswp--ie .pswp__img { width: 100% !important; height: auto !important; left: 0; top: 0 } .pswp__error-msg { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; font-size: 14px; line-height: 16px; margin-top: -8px; color: #CCC } .pswp__error-msg a { color: #CCC; text-decoration: underline } .pswp__button { width: 44px; height: 44px; position: relative; background: 0 0; cursor: pointer; overflow: visible; -webkit-appearance: none; display: block; border: 0; padding: 0; margin: 0; float: right; opacity: .75; -webkit-transition: opacity .2s; transition: opacity .2s; -webkit-box-shadow: none; box-shadow: none } .pswp__button:focus, .pswp__button:hover { opacity: 1 } .pswp__button:active { outline: 0; opacity: .9 } .pswp__button::-moz-focus-inner { padding: 0; border: 0 } .pswp__ui--over-close .pswp__button--close { opacity: 1 } .pswp__button { background: url(../images/default-skin.png) 0 0 no-repeat; background-size: 264px 88px; width: 44px; height: 44px } @media (-webkit-min-device-pixel-ratio:1.1),(-webkit-min-device-pixel-ratio:1.09375),(min-resolution:105dpi),(min-resolution:1.1dppx) { .pswp--svg .pswp__button { background-image: url(../images/default-skin.svg); } .pswp__button--close { color: #fff } } .pswp__button--close { background-position: 0 -44px } .pswp__button--share { background-position: -44px -44px } .pswp__button--fs { display: none } .pswp--supports-fs .pswp__button--fs { display: block } .pswp--fs .pswp__button--fs { background-position: -44px 0 } .pswp__button--zoom { display: none; background-position: -88px 0 } .pswp--zoom-allowed .pswp__button--zoom { display: block } .pswp--zoomed-in .pswp__button--zoom { background-position: -132px 0 } .pswp--touch .pswp__button--arrow--left, .pswp--touch .pswp__button--arrow--right { visibility: hidden } .pswp__button--arrow--left, .pswp__button--arrow--right { top: 50%; width: 48px; height: 48px; line-height: 48px; margin-top: -24px; position: absolute; background: none #767676; color: #fff; display: block; font-family: "iconfont" !important; font-size: 14px; text-align: center; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .pswp__button--arrow--left { left: 2% } .pswp__button--arrow--right { right: 2%; } .pswp__button--arrow--left:before { content: "\e7d7"; } .pswp__button--arrow--right:before { content: "\e637"; } .pswp__button--arrow--left:hover, .pswp__button--arrow--right:hover { color: #fff; background-color: #00A2E9; } .pswp__counter, .pswp__share-modal { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .pswp__share-modal { display: block; background: rgba(0,0,0,.5); width: 100%; height: 100%; top: 0; left: 0; padding: 10px; position: absolute; z-index: 1600; opacity: 0; -webkit-transition: opacity .25s ease-out; transition: opacity .25s ease-out; -webkit-backface-visibility: hidden; will-change: opacity } .pswp__share-modal--hidden { display: none } .pswp__share-tooltip { z-index: 1620; position: absolute; background: #FFF; top: 56px; border-radius: 2px; display: block; width: auto; right: 44px; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.25); box-shadow: 0 2px 5px rgba(0,0,0,.25); -webkit-transform: translateY(6px); -ms-transform: translateY(6px); transform: translateY(6px); -webkit-transition: -webkit-transform .25s; transition: transform .25s; -webkit-backface-visibility: hidden; will-change: transform } .pswp__share-tooltip a { display: block; padding: 8px 12px; color: #000; text-decoration: none; font-size: 14px; line-height: 18px } .pswp__share-tooltip a:hover { text-decoration: none; color: #000 } .pswp__share-tooltip a:first-child { border-radius: 2px 2px 0 0 } .pswp__share-tooltip a:last-child { border-radius: 0 0 2px 2px } .pswp__share-modal--fade-in { opacity: 1 } .pswp__share-modal--fade-in .pswp__share-tooltip { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } .pswp--touch .pswp__share-tooltip a { padding: 16px 12px } a.pswp__share--facebook:before { content: ''; display: block; width: 0; height: 0; position: absolute; top: -12px; right: 15px; border: 6px solid transparent; border-bottom-color: #FFF; -webkit-pointer-events: none; -moz-pointer-events: none; pointer-events: none } a.pswp__share--facebook:hover { background: #3E5C9A; color: #FFF } a.pswp__share--facebook:hover:before { border-bottom-color: #3E5C9A } a.pswp__share--twitter:hover { background: #55ACEE; color: #FFF } a.pswp__share--pinterest:hover { background: #CCC; color: #CE272D } a.pswp__share--download:hover { background: #DDD } .pswp__counter { float: left; height: 44px; font-size: 13px; line-height: 44px; color: #FFF; opacity: .75; padding: 0 10px } .pswp__caption { position: absolute; left: 0; bottom: 0; width: 100%; min-height: 44px } .pswp__caption__center { text-align: center; max-width: 600px; font-size: 15px; margin: 0 auto; padding: 20px 10px; color: #fff } .pswp__caption__center .xzy-zan { float: right; display: block } .pswp__caption--empty { display: none } .pswp__caption--fake { visibility: hidden } .pswp__preloader { width: 44px; height: 44px; position: absolute; top: 0; left: 50%; margin-left: -22px; opacity: 0; -webkit-transition: opacity .25s ease-out; transition: opacity .25s ease-out; will-change: opacity; direction: ltr } .pswp__preloader__icn { width: 20px; height: 20px; margin: 12px } .pswp__preloader--active { opacity: 1 } .pswp__preloader--active .pswp__preloader__icn { background: url(preloader.gif) 0 0 no-repeat } .pswp--css_animation .pswp__preloader--active { opacity: 1 } .pswp--css_animation .pswp__preloader--active .pswp__preloader__icn { -webkit-animation: clockwise .5s linear infinite; animation: clockwise .5s linear infinite } .pswp--css_animation .pswp__preloader--active .pswp__preloader__donut { -webkit-animation: donut-rotate 1s cubic-bezier(.4,0,.22,1) infinite; animation: donut-rotate 1s cubic-bezier(.4,0,.22,1) infinite } .pswp--css_animation .pswp__preloader__icn { background: 0 0; opacity: .75; width: 14px; height: 14px; position: absolute; left: 15px; top: 15px; margin: 0 } .pswp--css_animation .pswp__preloader__cut { position: relative; width: 7px; height: 14px; overflow: hidden } .pswp--css_animation .pswp__preloader__donut { -webkit-box-sizing: border-box; box-sizing: border-box; width: 14px; height: 14px; border: 2px solid #FFF; border-radius: 50%; border-left-color: transparent; border-bottom-color: transparent; position: absolute; top: 0; left: 0; background: 0 0; margin: 0 } @media screen and (max-width:1024px) { .pswp__preloader { position: relative; left: auto; top: auto; margin: 0; float: right } } @-webkit-keyframes clockwise { 0% { -webkit-transform: rotate(0); transform: rotate(0) } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } @keyframes clockwise { 0% { -webkit-transform: rotate(0); transform: rotate(0) } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } @-webkit-keyframes donut-rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0) } 50% { -webkit-transform: rotate(-140deg); transform: rotate(-140deg) } 100% { -webkit-transform: rotate(0); transform: rotate(0) } } @keyframes donut-rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0) } 50% { -webkit-transform: rotate(-140deg); transform: rotate(-140deg) } 100% { -webkit-transform: rotate(0); transform: rotate(0) } } .pswp__ui { -webkit-font-smoothing: auto; visibility: visible; opacity: 1; z-index: 1550 } .pswp__top-bar { position: absolute; left: 0; top: 0; height: 44px; width: 100% } .pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right, .pswp__caption, .pswp__top-bar { -webkit-backface-visibility: hidden; will-change: opacity; -webkit-transition: opacity 333ms cubic-bezier(.4,0,.22,1); transition: opacity 333ms cubic-bezier(.4,0,.22,1) } .pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right { visibility: visible } .pswp__caption, .pswp__top-bar { background-color: rgba(0,0,0,.5) } .pswp__ui--fit .pswp__caption, .pswp__ui--fit .pswp__top-bar { background-color: rgba(0,0,0,.3) } .pswp__ui--idle .pswp__top-bar { opacity: 1 } .pswp__ui--idle .pswp__button--arrow--left, .pswp__ui--idle .pswp__button--arrow--right { opacity: 0 } .pswp__ui--hidden .pswp__button--arrow--left, .pswp__ui--hidden .pswp__button--arrow--right, .pswp__ui--hidden .pswp__caption, .pswp__ui--hidden .pswp__top-bar { opacity: .001 } .pswp__ui--one-slide .pswp__button--arrow--left, .pswp__ui--one-slide .pswp__button--arrow--right, .pswp__ui--one-slide .pswp__counter { display: none } .pswp__element--disabled { display: none !important } .pswp--minimal--dark .pswp__top-bar { background: 0 0 } /*base style end*/ /*index style*/ .btn-more{ position: relative; display: block; width: 92px; height: 40px; line-height: 40px; border: 1px solid #fff; padding: 0px 14px;} .btn-more i{ position: absolute; right: 14px; width: 13px; height: 13px; top: 50%; margin-top: -6px; transition: 0.4s;-webkit-transition: 0.4s;} .btn-more i:before,.btn-more i:after{ content: ""; position: absolute; background-color: #fff;} .btn-more i:before{ left: 0; top: 6px; width: 100%; height: 1px;} .btn-more i:after{ top: 0; left: 6px; width: 1px; height: 100%; opacity: 0; visibility: hidden; transition: 0.4s;-webkit-transition: 0.4s;} .btn-more .jt{ float: right; display: inline-block; color: #fff; font-size: 18px;} .btn-more:before{ content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background-color: #00A2E9; transform-origin:100%; -webkit-transform-origin:100%; -webkit-transition:-webkit-transform .5s cubic-bezier(.4,0,.2,1); transition:transform .5s cubic-bezier(.4,0,.2,1); transform:scaleX(0); -webkit-transform:scaleX(0); visibility:hidden\9; } .btn-more:hover,.btnHov:hover .btn-more { /* -webkit-animation: bubbles 1s forwards ease-out; animation: bubbles 1s forwards ease-out; background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 20%, #eeeeff 50%, #eeeeff 55%, rgba(0, 0, 0, 0) 60%) 80% 80% / 0.78em 0.78em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 20%, #eeeeff 50%, #eeeeff 55%, rgba(0, 0, 0, 0) 60%) 13% 131% / 0.71em 0.71em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 20%, #eeeeff 50%, #eeeeff 55%, rgba(0, 0, 0, 0) 60%) 7% 80% / 0.58em 0.58em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 20%, #eeeeff 50%, #eeeeff 55%, rgba(0, 0, 0, 0) 60%) 5% 84% / 1.02em 1.02em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 20%, #eeeeff 50%, #eeeeff 55%, rgba(0, 0, 0, 0) 60%) 32% 116% / 0.76em 0.76em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 20%, #eeeeff 50%, #eeeeff 55%, rgba(0, 0, 0, 0) 70%) 102% 120% / 0.58em 0.58em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 12% 121% / 0.67em 0.67em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 20%, #eeeeff 50%, #eeeeff 55%, rgba(0, 0, 0, 0) 60%) 59% 77% / 1.08em 1.08em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 20%, #eeeeff 50%, #eeeeff 55%, rgba(0, 0, 0, 0) 60%) 22% 89% / 0.69em 0.69em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 20%, #eeeeff 50%, #eeeeff 55%, rgba(0, 0, 0, 0) 60%) 74% 119% / 0.69em 0.69em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 20%, #eeeeff 50%, #eeeeff 55%, rgba(0, 0, 0, 0) 60%) 40% 89% / 0.62em 0.62em; */ background-color: #00A2E9; background-repeat: no-repeat; border-color: #00A2E9; } @-webkit-keyframes bubbles { 100% { background-position: 92% -220%, 31% -185%, 24% 6%, 16% -328%, 39% -366%, 110% -375%, 5% -60%, 59% -365%, 41% -363%, 82% -8%, 37% -224%; box-shadow: inset 0 -6.5em 0 #00A2E9; } } @keyframes bubbles { 100% { background-position: 92% -220%, 31% -185%, 24% 6%, 16% -328%, 39% -366%, 110% -375%, 5% -60%, 59% -365%, 41% -363%, 82% -8%, 37% -224%; box-shadow: inset 0 -6.5em 0 #00A2E9; } } .btn-more:hover i,.btnHov:hover .btn-more i,.btn-more2 i{ transform: rotate(180deg);-webkit-transform: rotate(180deg);} .btn-more:hover i:after,.btnHov:hover .btn-more i:after,.btn-more2 i:after{ opacity: 1; visibility: visible;} .btn-more2{ background-color: #00A2E9; border-color: #00A2E9;} .btn-more3{ border-color: #F1F1F1;} .btn-more3 .name{ color: #999;} .btn-more3 i:before{ background-color: #999;} .btn-more3 .jt{ color: #999; } .btn-more3:hover i:before,.btnHov:hover .btn-more3 i:before{ background-color: #fff;} .btn-more3:hover .name,.btnHov:hover .btn-more3 .name,.btn-more3:hover .jt,.btnHov:hover .btn-more3 .jt{ color: #fff;} .btn-more4{ background-color: #00A2E9; border-color: #00A2E9;} .item-span2 i{ font-style: inherit;} @-webkit-keyframes wordsRFade{ 0%{-webkit-transform:translateX(50px);transform:translateX(50px);opacity:0;visibility:hidden} 100%{-webkit-transform:none;transform:none;opacity:1;visibility:visible} } @-moz-keyframes wordsRFade{ 0%{-moz-transform:translateX(50px);transform:translateX(50px);opacity:0;visibility:hidden} 100%{-moz-transform:none;transform:none;opacity:1;visibility:visible} } @keyframes wordsRFade{ 0%{-webkit-transform:translateX(50px);-moz-transform:translateX(50px);transform:translateX(50px);opacity:0;visibility:hidden} 100%{-webkit-transform:none;-moz-transform:none;transform:none;opacity:1;visibility:visible} } .banner a:link, .banner a:visited { color: #fff; } .banner a:active, .banner a:hover { color: #fff; } .banner { position: relative; overflow: hidden; width: 100%; height: 100vh; background-color: #f7f7f7;overflow: hidden; opacity: 0;visibility: hidden; transition: 0.4s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition: 0.4s cubic-bezier(0.7, 0, 0.3, 1); color: #fff;} .banner.slick-initialized {visibility: visible;opacity: 1;} .banner-video{ content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; height: 100vh;} .banner-video:after{ content: ""; background-image: linear-gradient(45deg, #2c7fcd, rgba(67, 153, 209, 0.35));background-repeat: repeat-x;position: absolute; top: 0; right: 0;bottom: 0; left: 0;} .banner-video video{position: absolute;left: 0; top: 0;width: 100%; height: 100%; object-fit: cover; background-color: #000;} .banner .item { position: relative; width: 100%; overflow: hidden;} .banner .pimg { width: 100%; display: block; position: absolute; overflow: hidden;} .banner .desc{ position: absolute; left: 10%; top: 0; bottom: 0; height: 480px; margin: auto; width: 80%; } .banner .txt{ position: relative; padding:0 0 8px 28px; } .banner .txt:before{ content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background-color: #fff; -webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:bottom center;transform-origin:bottom center;-webkit-transition:-webkit-transform .6s;transition:-webkit-transform .6s;transition:transform .6s;transition:transform .6s,-webkit-transform .6s} .banner .en{ font-size: 68px; line-height: 1; margin-bottom: 28px;} .banner .zh{ font-size: 30px; line-height: 1.5;} .banner .btn-more{ margin: 65px 0 0 29px;} .banner .slick-active .pimg{-webkit-animation: scaleUpDown 5s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94); animation: scaleUpDown 5s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94); } .banner .slick-active .txt:before{ -webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:top center;transform-origin:top cente} .banner .slick-dots{ left: 10%; width: 80%; bottom: 8%; text-align: left; z-index: 104;} .banner .slick-dots li{ position: relative; margin: 0 15px 0 0; width: 25px; height: 6px; border-radius: 3px; padding: 0; cursor: pointer; background-color: #fff;} .banner .slick-dots li a{ position: absolute; height: 6px; border-radius: 3px; width: 0; left: 0; top: 0; background-color: #00A2E9; text-indent: -10em; display: block; overflow: hidden; padding: 0px; margin: 0;} .banner .slick-dots li.slick-active { background-color: #00A2E9;} .banner .item-span2 i{ visibility: hidden; display: inline-block;} .banner .slick-active .item-span span,.banner .slick-active .item-span2 i{visibility: visible; -webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-backface-visibility:visible!important; backface-visibility:visible!important; -webkit-animation-name:wordsRFade; animation-name:wordsRFade; } .iboxT{ margin-bottom: 35px;} .iboxT .zh{ font-size: 36px; line-height: 1.5;} @-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}} .ibox-padding{ padding: 140px 0 175px;} .ibox-advantages{ width: 830px; margin: 0px auto; padding: 80px 0;} .ibox-advantages .pageC{ text-align: center;} .ibox-advantages-list{ margin-top: 102px;} .ibox-advantages-list li{ float: left; display: block; width: 18%; padding: 0px 1%; text-align: center; margin-bottom: 25px;} .ibox-advantages-list figure{ margin-bottom: 14px;} .ibox-advantages-list figure img{ width: 56px; display: block; margin: 0px auto;} .ibox-solution a:link, .ibox-solution a:visited { color: #fff;} .ibox-solution a:active, .ibox-solution a:hover { color: #fff;} .ibox-solution{ position: relative; overflow: hidden; height: 700px; color: #fff;} .ibox-solution .item{ position: absolute; height: 100%; top: 0; background-size: cover; -webkit-transition:all .5s cubic-bezier(.02,.01,.47,1) 0s; transition:all .5s cubic-bezier(.02,.01,.47,1) 0s;} .ibox-solution .item:before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: url(../images/balck_50.png) repeat; background: none rgba(0,0,0,0.5); -webkit-transition:all .3s cubic-bezier(.02,.01,.47,1) 0s; transition:all .3s cubic-bezier(.02,.01,.47,1) 0s;} .ibox-solution .title{ position: absolute; left: 5%; right: 5%; bottom: 6%; font-size: 18px; text-align: center;} .ibox-solution .title .bot{ background-color: #fff; width: 30px; height: 3px; display: block; margin: 10px auto 0;} .ibox-solution .desc{ position: absolute; left: 8%; right: 8%; top: 14%; transform: translateY(50px); -webkit-transform: translateY(50px); opacity: 0; visibility: hidden; transition: transform 600ms,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: transform 600ms,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out;} .ibox-solution h4{ position: relative; padding-left: 16px; font-size: 28px; font-weight: normal; line-height: 1.2; margin-bottom: 25px;} .ibox-solution h4:before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background-color: #fff;} .ibox-solution .c{ margin-bottom: 50px; text-align: justify;} .ibox-solution .item1{ left: 0; right: 83.3%;} .ibox-solution .item2{ left: 16.66%; right: 66.64%;} .ibox-solution .item3{ left: 33.32%; right: 49.98%;} .ibox-solution .item4{ left: 49.98%; right: 33.32%;} .ibox-solution .item5{ left: 66.64%; right: 16.66%;} .ibox-solution .item6{ left: 83.3%; right: 0;} .solutionim1 .item1{ right: 60%;} .solutionim1 .item2{ left: 40%; right: 48%;} .solutionim1 .item3{ left: 52%; right: 36%;} .solutionim1 .item4{ left: 64%; right: 24%;} .solutionim1 .item5{ left: 76%; right: 12%;} .solutionim1 .item6{ left: 88%;} .solutionim2 .item1{ right: 88%;} .solutionim2 .item2{ left: 12%; right: 48%;} .solutionim2 .item3{ left: 52%; right: 36%;} .solutionim2 .item4{ left: 64%; right: 24%;} .solutionim2 .item5{ left: 76%; right: 12%;} .solutionim2 .item6{ left: 88%;} .solutionim3 .item1{ right: 88%;} .solutionim3 .item2{ left: 12%; right: 76%;} .solutionim3 .item3{ left: 24%; right: 36%;} .solutionim3 .item4{ left: 64%; right: 24%;} .solutionim3 .item5{ left: 76%; right: 12%;} .solutionim3 .item6{ left: 88%;} .solutionim4 .item1{ right: 88%;} .solutionim4 .item2{ left: 12%; right: 76%;} .solutionim4 .item3{ left: 24%; right: 64%;} .solutionim4 .item4{ left: 36%; right: 24%;} .solutionim4 .item5{ left: 76%; right: 12%;} .solutionim4 .item6{ left: 88%;} .solutionim5 .item1{ right: 88%;} .solutionim5 .item2{ left: 12%; right: 76%;} .solutionim5 .item3{ left: 24%; right: 64%;} .solutionim5 .item4{ left: 36%; right: 52%;} .solutionim5 .item5{ left: 48%; right: 12%;} .solutionim5 .item6{ left: 88%;} .solutionim6 .item1{ right: 88%;} .solutionim6 .item2{ left: 12%; right: 76%;} .solutionim6 .item3{ left: 24%; right: 64%;} .solutionim6 .item4{ left: 36%; right: 52%;} .solutionim6 .item5{ left: 48%; right: 40%;} .solutionim6 .item6{ left: 60%;} .ibox-inner{ width: 86%; margin: 0px auto; max-width: 1600px;} .ibox-case-demo{ position: relative; border: 1px solid #F1F1F1; height: 500px; box-sizing: initial;} .ibox-case-demo .item{ position: relative;} .ibox-case-demo .imgBox{ position: relative; float: left; display: block; width: 50%; height: 500px; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center center;} .ibox-case-demo .imgBox .imgw{ visibility: hidden;} .ibox-case-demo .desc{ float: left; display: block; width: 35%; margin-left: 5%; padding-top: 5%;} .ibox-case-demo .type{ margin-bottom: 15px;} .ibox-case-demo .title{ font-size: 26px; line-height: 1.5; font-weight: 300; color: #333333; margin-bottom: 15px;} .ibox-case-demo .c{ height: 75px; overflow: hidden; margin-bottom: 40px;} .ibox-case-demo .by{ position: absolute; right: 2%; top: 10%;} .ibox-case-demo .item:hover .title{ color: #0D88BE;} .ibox-case-demo .slick-arrow{ width: 50px; height: 50px; line-height: 50px; text-align: center; display: block; position: absolute; bottom: 0; color: #fff; background-color: #fff; z-index: 500;} .ibox-case-demo .slick-prev{ right: 50%; background-color: #fff; color: #999;} .ibox-case-demo .slick-next{ left: 50%; background-color: #00A2E9; color: #fff;} .ibox-case-demo .slick-arrow i { display: block; font-family:"iconfont" !important;font-size:14px; font-style:normal; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; } .ibox-case-demo .slick-prev i:before{ content: "\e7d7";} .ibox-case-demo .slick-next i:before{ content: "\e637";} .ibox-case-demo .slick-arrow:hover { background-color: #666666; } .ibox-case-demo .slick-arrow:hover i{ color: #fff;} .ibox-new{ padding-bottom: 140px;} .ibox-new a:link, .ibox-new a:visited { color: #666; } .ibox-new a:active, .ibox-new a:hover { color: #00A2E9; } .ibox-new-demo .item{ float: left; display: block; width: 33.33%; margin-bottom: 28px;} .nitem-box{ position: relative; padding: 35px 8%; border:1px solid #F1F1F1; margin-left: -1px; transition: .3s;-webkit-transition: .3s;} .nitem-box .time{ padding: 4px 7px; background-color: #00A2E9; color: #fff; font-size: 12px;} .nitem-box h4{ font-weight: 400; margin: 8px 0; font-size: 20px; line-height: 1.5; color: #333;} .nitem-box .c{ height: 75px; overflow: hidden; margin-bottom: 25px;} .nitem-box .more{ position: relative; display: inline-block; font-size: 12px;} .nitem-box .more:before{content:""; width:100%; height:1px; background-color:#00A2E9; position:absolute; left:0; bottom:0; transform-origin:100%; -webkit-transform-origin:100%; -webkit-transition:-webkit-transform .3s cubic-bezier(.4,0,.2,1); transition:-webkit-transform .3s cubic-bezier(.4,0,.2,1); transition:transform .3s cubic-bezier(.4,0,.2,1); transform:scaleX(0);-webkit-transform:scaleX(0);visibility:hidden\9} .nitem-box:hover{ box-shadow: 0 0 18px rgba(0,0,0,0.1);} .nitem-box:hover .more{ color: #00A2E9;} .nitem-box:hover .more:before{ transform:scaleX(1); -webkit-transform:scaleX(1); transform-origin:0; -webkit-transform-origin:0; visibility:visible\9;} .led-more .btn-more{ margin: 0px auto;} /*index style end*/ /*product style*/ .pbanner { position: relative; overflow: hidden;/* background: url(../images/loader.gif) no-repeat scroll center center #fff; */ color: #fff; } .pbanner a:link, .pbanner a:visited { color: #fff; } .pbanner a:active, .pbanner a:hover { color: #fff; } .pbanner .load-img { display: block; width: 100%; opacity: 0; transform-origin: center top; transform: scale(1.1); transition: opacity 0.8s linear .0s, transform 1.3s cubic-bezier(0.075, 0.82, 0.165, 1); } .active .load-img { opacity: 1; transform: scale(1); } .pbanner-c a:link, .pbanner-c a:visited { color: #fff; } .pbanner-c a:active, .pbanner-c a:hover { color: #fff; } .pbanner-c { position: absolute; left: 50%; top: 50%; width: 1200px; margin: -10px 0 0 -600px; line-height: 1.5;} .pbanner-c .zh { position: relative; font-size: 40px; padding-left: 28px; line-height: 1.2;} .pbanner-c .zh:before{ content: ""; width: 5px; height: 100%; position: absolute; left: 0; top: 0; background-color: #fff;} .pbanner-c .zh span { visibility: visible; display: inline-block; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: bounceIn; animation-name: bounceIn; } .pro-nav-box{ background-color: #333;} .pro-nav-box a:link, .pro-nav-box a:visited { color: #999;} .pro-nav-box a:active,.pro-nav-box a:hover { color: #fff;} .pro-nav-btn{ text-align: center;} .pro-nav-btn li{ position: relative; float: left; display: block; width: 50%;} .pro-nav-btn li:first-child>a{ border-left: 1px solid #555;} .pro-nav-btn>ul>li>a{ position: relative; border-right: 1px solid #555;} .pro-nav-btn a{ height: 50px; line-height: 50px; display: block;} .pro-nav-btn .hov>a{ color: #fff;} .sub-barnav{ position: absolute; left: 0; top: 100%; width: 100%; background-color: #333; box-shadow:0px 3px 6px rgba(0,0,0,0.16); display: none; z-index: 999;} .sub-barnav a{ display: block;} .sub-barnav a.active,.sub-barnav a:hover{ color: #fff; background-color: #444; box-shadow:0px 3px 6px rgba(0,0,0,0.16);} .page-padding{ padding:60px 0;} .bgf1{ background-color: #F1F1F1;} .transition6{ transition: 0.6s; -webkit-transition: 0.6s;} .scaleO:hover .imgw{ transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05);} .scaleO2:hover .imgw{ transform: scale(1.04); -webkit-transform: scale(1.04); -moz-transform: scale(1.04);} .product-list dd{ position: relative; background-color: #fff; margin-bottom: 32px; transition: .3s;-webkit-transition: .3s;} .product-list figure{ float: right; display: block; width: 48%; overflow: hidden;} .product-list .desc{ padding: 7% 0 5%; margin-left: 5%; float: left; display: block; width: 40%;} .product-list .t{ font-size: 30px; font-weight: 400; line-height: 1.5; margin-bottom: 12px; color: #333; transition: .3s;-webkit-transition: .3s;} .product-list .c{ height: 75px; overflow: hidden; margin-bottom: 40px;} .product-list dd:hover{ box-shadow: 0 0 18px rgba(0,0,0,0.1);} .product-list dd:hover .t{ color: #00A2E9;} .paging { padding: 40px 0; text-align: center; } .paging a:link, .paging a:visited { color: #a4a4a4; } .paging a:active, .paging a:hover { color: #fff; background-color: #00A2E9;} .paging a{ display: inline-block; padding: 12px 17px; background-color: #fff;} .paging a.act{ background-color: #00A2E9; color: #fff;} .paging a.prev{ margin-right: 15px;} .paging a.next{ margin-left: 15px;} .p-img {opacity: 0;filter: grayscale(100%); transition: opacity 0.8s linear .0s,filter 0.6s cubic-bezier(0.075, 0.82, 0.165, 1) 0.6s;} .action .p-img { opacity: 1; filter: grayscale(0%);} .pro-padding{ padding: 100px 0;} .f30{ font-size: 30px;} .pboxT{ text-align: center; margin-bottom: 35px;} .pboxT2{ margin-bottom: 20px;} .c333{ color: #333;} .bgfa{ background-color: #FAFAFA;} .pro-list{ text-align: center;} .pro-list li{ display: inline-block;*display: inline; *zoom: 1; margin:0 3% 35px;} .pro-list .ico{ width: 60px; display: block; margin: 0px auto 15px;} .pro-view-list dd{ display: -webkit-flex; display: flex; } .pro-view-list figure{ float: left; width: 50%;} .pro-view-list .desc{ float: left; width: 40%; padding: 5%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-direction: column;flex-direction: column; justify-content: center; -webkit-box-align: center;} .pro-view-list h4{ margin-bottom: 15px; line-height: 1.2;} .pro-view-list dd:nth-child(even){ flex-flow: row-reverse;} .pro-view-list dd:nth-child(even) figure{ float: right;} .pro-view-list dd:nth-child(even) .desc{ float: left;} .solution-box{ position: relative;} .img-demo{ margin-left: -15px; color: #999;} .img-demo .item{ margin-left: 15px; float: left; display: block; padding: 15px 5px 0;} .img-demo .item figure{ margin-bottom: 15px; transition: .3s;-webkit-transition: .3s;} .img-demo .txt{ overflow: hidden; line-height: 1.5; color: #333; transition: .3s;-webkit-transition: .3s;} .img-demo figure{ overflow: hidden; margin-bottom: 10px;} .img-demo .slick-dots { position: relative; bottom: auto; margin-top: 30px; z-index: 104;} .img-demo .slick-dots li { position: relative; display: inline-block; padding: 0; width: auto; height: auto; margin: 0px 10px; cursor: pointer;} .img-demo .slick-dots li a {text-indent: -10em; display: block; overflow: hidden; padding: 0px; cursor: pointer; border-radius: 50%; width: 10px; height: 10px; margin: 0px auto; background-color: #f1f1f1; } .img-demo .slick-dots li a:focus { outline: none; } .img-demo .slick-dots li.slick-active a { background-color: #00A2E9;} .solution-box .slick-arrow { position: absolute; width: 49.5%; height: 40px; line-height: 40px; z-index: 106; top: auto; bottom: 0; background: none rgba(0,0,0,0.3); text-align: center;} .solution-box .slick-prev{ left: 0;} .solution-box .slick-next{ right: 0;} .solution-box .slick-arrow i { display: block; font-family:"iconfont" !important;font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; color: #fff;} .solution-box .slick-prev i:before{ content: "\e7d7";} .solution-box .slick-next i:before{ content: "\e637";} .pro-info-box{ padding: 170px 0 125px;} .pro-info-box .img{ float: left; display: block; width: 48%;} .pro-info-box .desc{ float: right; display: block; width: 45%;} .pro-info-box .txt{ margin-top: 15px; font-size: 14px;} .pro-info-box .txt p{ position: relative; padding-left: 25px; margin-bottom: 5px;} .pro-info-box .txt p:before{ content: "\e6e7"; color: #00A2E9; position: absolute; left: 0; top: 0;} .pro-page-tab table{ width: 100% !important;} .pro-page-tab table tr td{ border: 1px solid #ccc; text-align: center; padding:8px;} .pro-solution{ padding: 100px 0;} .pro-down{ padding: 60px 0 80px;} .pro-down .down-list li{ border:1px solid #ccc; background-color: transparent;} .pro-down .down-list .itemA{ border-left: 1px solid #ccc; color: #ccc; background-color: transparent;} /*product style end*/ /*solution style*/ .page-nav-box{ position: relative; height: 50px; overflow: hidden;} .page-nav-btn a:link, .page-nav-btn a:visited { color: #333333;} .page-nav-btn a:active,.page-nav-btn a:hover { color: #fff;} .page-nav-btn{ text-align: center; border-left: 1px solid #F1F1F1;} .page-nav-btn li{ position: relative; width: 16.66%; float: left; display: inline-block;} .page-nav-btn a{ position: relative; padding: 0px 6px; font-size: 16px; height: 50px; line-height: 50px; display: block; border-right: 1px solid #F1F1F1; z-index: 1;} .page-nav-btn a:before{ content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background-color: #00A2E9; transform-origin:100%; -webkit-transform-origin:100%; -webkit-transition:-webkit-transform .5s cubic-bezier(.4,0,.2,1); transition:transform .5s cubic-bezier(.4,0,.2,1); transform:scaleX(0); -webkit-transform:scaleX(0); visibility:hidden\9; z-index: -1;} .page-nav-btn a.active:before,.page-nav-btn a:hover:before{ transform:scaleX(1); -webkit-transform:scaleX(1); -moz-transform:scaleX(1); transform-origin:0; -webkit-transform-origin:0; visibility:visible\9; } .page-nav-btn a.active{ color: #fff;} .page-nav-box2{ background-color: #333333;} .page-nav-box2 .page-nav-btn a:link,.page-nav-box2 .page-nav-btn a:visited { color: #999;} .page-nav-box2 .page-nav-btn a:active,.page-nav-box2 .page-nav-btn a:hover { color: #fff;} .page-nav-box2 .page-nav-btn{ border-left-color: #555555;} .page-nav-box2 .page-nav-btn a{ border-right-color: #555555; } .page-nav-box2 .page-nav-btn a:before{ background-color: #444444;} .page-num3 li{ width: 33.33%;} .page-num4 li{ width: 25%;} .page-num5 li{ width: 20%;} .page-num6 li{ width: 16.66%;} .page-num7 li{ width: 14.2%;} .page-num8 li{ width: 12.5%;} .solution-list dd{ position: relative; background-color: #fff; margin-bottom: 32px; transition: .3s;-webkit-transition: .3s;} .solution-list figure{ float: left; display: block; width: 45%; overflow: hidden;} .solution-list .desc{ padding: 6% 0 0; margin-left: 7%; float: left; display: block; width: 41%;} .solution-list .t{ font-size: 22px; font-weight: 400; line-height: 1.5; margin-bottom: 12px; color: #333; transition: .3s;-webkit-transition: .3s;} .solution-list .c{ height: 50px; overflow: hidden; margin-bottom: 40px;} .solution-list dd:hover{ box-shadow: 0 0 18px rgba(0,0,0,0.1);} .solution-list dd:hover .t{ color: #00A2E9;} .solution-bannerC{ position: absolute; left: 50%; top: 35%; width: 900px; margin-left: -450px; text-align: center; } .solution-bannerC .zh{ font-size: 46px; line-height: 1.5;} .solution-bannerC .en{ font-size: 80px; line-height: 1.2; color: #00A2E9; text-transform: uppercase; font-style: italic; font-weight:400; margin-bottom: 5%;} .solution-bannerC .c{ margin-bottom: 30px;} .solution-bannerC .bot{ width: 34px; height: 5px; display: block; margin: 0 auto; background-color: #fff;} .soution-pbox{ background: none #161616; background:linear-gradient(343deg,rgba(22,22,22,1) 0%,rgba(46,46,46,1) 100%); color: #fff;} .soution-pbox .pageC{ color: #fff; text-align: center;} .soution-pbox .pageC a:link,.soution-pbox .pageC a:visited { color: #fff;} .soution-pbox .pageC a:active,.soution-pbox .pageC a:hover { color: #fff;} .soution-ico-list{ text-align: center;} .soution-ico-list li{ display: inline-block; *display: inline; *zoom: 1; width: 21%; padding: 0px 2%; margin-top: 20px;} .soution-ico-list .ico{ width: 60px; display: block; margin: 0px auto 15px;} .soution-ico-list .txt{ height: 50px; overflow: hidden;} .characteristic-page{ color: #fff;} .characteristic-page a:link,.characteristic-page a:visited { color: #fff;} .characteristic-page a:active,.characteristic-page a:hover { color: #fff;} .characteristic-list .item{ float: left; display: block; width: 31.33%; padding: 0px 1%; margin-top: 50px; text-align: center;} .characteristic-list .img{ position: relative; width: 138px; height: 138px; display: block; margin: 0px auto; background-color: #00A2E9; border-radius: 50%; margin-bottom: 58px;} .characteristic-list .img:before{ content: ""; position: absolute; left: -26px; top: -26px; right: -26px; bottom: -26px; background-color: rgba(0,162,233,0.6); border-radius: 50%;} .characteristic-list .img img{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 70px; height: 70px; margin: auto;} .characteristic-list .txt{ /* height: 50px; */overflow: hidden;} .characteristic-list .slick-dots { position: relative; bottom: auto; margin-top: 30px; z-index: 104;} .characteristic-list .slick-dots li { position: relative; display: inline-block; padding: 0; width: auto; height: auto; margin: 0px 10px; cursor: pointer;} .characteristic-list .slick-dots li a {text-indent: -10em; display: block; overflow: hidden; padding: 0px; cursor: pointer; border-radius: 50%; width: 10px; height: 10px; margin: 0px auto; background-color: #f1f1f1; } .characteristic-list .slick-dots li a:focus { outline: none; } .characteristic-list .slick-dots li.slick-active a { background-color: #00A2E9;} .solution-prodemo{ text-align: center;} .solution-prodemo .item{ position: relative; /* margin: 0px 18px; */ display: inline-block; *display: inline; *zoom: 1; width: 29.33%; padding: 0px 2%; text-align: left;} .solution-prodemo .imgBox{ box-sizing: border-box; border: 1px solid #F1F1F1; margin-bottom: 15px;transition: .3s;-webkit-transition: .3s;} .solution-prodemo .txt{ height: 50px; overflow: hidden; text-align: center;} .solution-prodemo .slick-dots { position: relative; bottom: auto; margin-top: 30px; z-index: 104;} .solution-prodemo .slick-dots li { position: relative; display: inline-block; padding: 0; width: auto; height: auto; margin: 0px 10px; cursor: pointer;} .solution-prodemo .slick-dots li a {text-indent: -10em; display: block; overflow: hidden; padding: 0px; cursor: pointer; border-radius: 50%; width: 10px; height: 10px; margin: 0px auto; background-color: #f1f1f1; } .solution-prodemo .slick-dots li a:focus { outline: none; } .solution-prodemo .slick-dots li.slick-active a { background-color: #00A2E9;} .solution-prodemo .item:hover .imgBox{ border-color: #00A2E9;} .solution-prodemo .item:hover .txt{ color: #00A2E9;} .solution-casedemo figure{ float: left; display: block; width: 50%; overflow: hidden;} .solution-casedemo .desc{ float: left; display: block; width: 40%; margin-left: 5%; padding: 35px 0;} .solution-casedemo .bot{ width: 20px; height: 3px; background-color: #ccc; display: block; margin:5px 0 25px;} .solution-casedemo .title{ font-size: 26px; line-height: 1.5; color: #333; margin-bottom: 10px;} .solution-casedemo .c{ height: 75px; overflow: hidden; } .solution-casedemo .item{ position: relative; overflow: hidden;} .solution-casedemo .slick-arrow{ width: 50px; height: 50px; line-height: 50px; text-align: center; display: block; position: absolute; bottom: 0; color: #fff; background-color: #fff; z-index: 500;} .solution-casedemo .slick-prev{ right: 50%; background-color: #fff; color: #999;} .solution-casedemo .slick-next{ left: 50%; background-color: #00A2E9; color: #fff;} .solution-casedemo .slick-arrow i { display: block; font-family:"iconfont" !important;font-size:14px; font-style:normal; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; } .solution-casedemo .slick-prev i:before{ content: "\e7d7";} .solution-casedemo .slick-next i:before{ content: "\e637";} .solution-casedemo .slick-arrow:hover { background-color: #666666; color: #fff;} /*solution style end*/ /*down style*/ .down-list li{ position: relative; display: block; height: 60px; line-height: 60px; overflow: hidden; background-color: #fff; margin-bottom: 15px; transition: .3s;-webkit-transition: .3s;} .down-list .name{ display: block; margin-right: 120px; padding:0 8px 0 30px; color: #666;} .down-list .name i{ font-size: 26px; position: relative; top: 5px; line-height: 1; margin-right: 15px; color: #ccc;} .down-list .itemA{ position: absolute; right: 0px; top: 0; width: 60px; height: 60px; line-height: 60px; text-align: center; font-size: 28px;} .down-list .open{ right: 60px; color: #f1f1f1;} .down-list .down{ background-color: #EAEAEA; color: #fff;} .down-list .name:hover,.down-list .name:hover i{ color: #00A2E9;} .down-list .itemA:hover{ background-color: #00A2E9; color: #fff;} .down-list li:hover{ box-shadow: 0 0 18px rgba(0,0,0,0.1);} .down-tbox{ margin-bottom: 48px;} .down-select a:link,.down-select a:visited { color: #fff;} .down-select a:active,.down-select a:hover { color: #fff;} .down-select{ position: relative; float: left; display: block; width: 160px; margin-right: 15px; border-bottom: 1px solid #ccc;} .down-select .mt{ padding: 0px 16px; height: 44px; line-height: 44px;} .down-select .mt .aw { position: absolute; top: 50%; margin-top: -4px; right: 22px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid #B1B1B1; transition: 0.3s; -webkit-transition: 0.3s; } .down-select .mc { padding-bottom: 3px; position: absolute; left: 0px; right: 0px; top: 100%; z-index: 100; display: none; } .down-select ul { background-color: #00A2E9; padding: 10px 0; overflow: hidden; } .down-select a { display: block; padding: 8px 16px; line-height: 1.4; font-size: 12px;} .down-select a:hover { background-color: #666; } .down-select.act{ background-color: #00A2E9;} .down-select.act .mt{ color: #fff;} .down-select.act .mt .aw { transform: rotate(-180deg); -webkit-transform: rotate(-180deg); border-top: 6px solid #fff;} .down-search{ position: relative; float: right; display: inline-block; width: 320px; border-bottom: 1px solid #ccc; padding-right: 44px;} .down-search .txt{ display: block; width: 100%; border: 0px none; margin: 0; padding: 0; background-color: transparent; height: 44px; line-height: 44px; } .down-search .btn{ position: absolute; right: 0; bottom: 0; width: 44px; height: 44px; line-height: 44px; text-align: center; font-size: 20px; color: #CCCCCC;} .down-search .btn:hover{ background-color: #00A2E9; color: #fff;} /*down style end*/ /*video style*/ .video-list{ margin-left: -3%;} .video-list li{ position: relative; float: left; display: block; width: 47%; margin-left:3%; margin-bottom: 32px; color: #fff; cursor: pointer;} .video-list figure{ position: relative; overflow: hidden;} .video-list .yy{ background: url(../images/yy.png) repeat-x scroll left bottom; position: absolute; left: 0; bottom: 0; right: 0; top: 0; transition: .3s;-webkit-transition: .3s;} .video-list .vico{ position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; width: 38px; height: 38px; background-color: #00A2E9; border-radius: 50%; text-align: center; color: #fff; line-height: 38px; font-size: 12px; z-index: 1; transform: scale(0); -webkit-transform: scale(0); opacity: 0; transition: .3s;-webkit-transition: .3s;} .video-list .vico:before{ content: ""; position: absolute; left: -8px; top: -8px; right: -8px; bottom: -8px; background-color: #00A2E9; opacity: 0.5; filter: alpha(opacity=50); border-radius: 50%; z-index: -1; animation: bannerbuIn infinite linear 1s normal;-webkit-animation: bannerbuIn infinite linear 1s normal;} .video-list .desc{ position: absolute; left: 5%; width: 90%; bottom: 5%;} .video-list .t{ font-size: 20px; line-height: 1.5; margin-bottom: 4px;} .video-list li:hover .yy{ background: url(../images/balck_70.png) repeat scroll left bottom; background: none rgba(0,0,0,0.7);} .video-list li:hover .vico{ opacity: 1; transform: initial; -webkit-transform: initial;} @keyframes bannerbuIn { 0% { opacity: 1; filter: alpha(opacity=100); transform: scale(0.7); } 100% { opacity: 0; filter: alpha(opacity=0); transform: scale(1.3); } } @-webkit-keyframes bannerbuIn{ 0% { opacity: 1; filter: alpha(opacity=100); transform: scale(0.7); } 100% { opacity: 0; filter: alpha(opacity=0); transform: scale(1.3); } } /*video style end*/ /*service style*/ .service-box{ background: #161616; background:linear-gradient(343deg,rgba(22,22,22,1) 0%,rgba(46,46,46,1) 100%); color: #fff;} .service-box .pageC{ text-align: center; color: #fff;} .service-box .pageC a:link,.service-box .pageC a:visited { color: #fff;} .service-box .pageC a:active,.service-box .pageC a:hover { color: #fff;} .service-list{ padding-top: 30px;} .service-list li{ float: left; display: block; margin-left: 5%; width: 40.5%; padding-right: 2%; margin-top: 60px;} .service-list figure{ float: left; display: inline-block; width: 80px;} .service-list .desc{ padding-left: 110px;} .service-list .t{ font-size: 20px; line-height: 1.5; margin-bottom: 12px;} .service-list li:nth-child(odd){ clear: both;} .service-map{ background-position: center bottom; background-repeat: no-repeat; background-size:100% auto; padding: 100px 0 20%;} .service-map .pageC{ text-align: center;} .service-maplist{ padding-top: 50px; text-align: center;} .service-maplist li{ width: 20%; text-align: center; margin-top: 60px; display: inline-block; *display: inline; vertical-align: top;} .service-maplist .name{ position: relative; width: 100px; height: 100px; display: block; margin: 0px auto; background-color: #00A2E9; border-radius: 50%; color: #fff; font-weight: bold; font-size: 16px; line-height: 100px; z-index: 1;} .service-maplist .name:before{ content: ""; position: absolute; left: -10px; top: -10px; bottom: -10px; right: -10px; background-color: #00A2E9; opacity: 0.23; filter: alpha(opacity=23); border-radius: 50%; z-index: -1;} .service-address{ margin-left: -3%;} .service-address li{ float: left; display: block; width: 47%; margin: 35px 0 0 3%;} .service-address li:nth-child(odd){ clear: both;} .service-address .item{ border: 1px solid #f1f1f1; padding: 25px 30px; font-weight: 400; transition: .3s;-webkit-transition: .3s;} .service-address h5{ font-size: 20px; color: #333; font-weight: normal; line-height: 1.5; margin-bottom: 10px;} .service-address .c p{ position: relative; padding-left: 25px; margin-bottom: 5px;} .service-address .c .iconfont{ width: 18px; height: 18px; display: inline-block; position: absolute; left: 0; top: 4px; border-radius: 50%; color: #fff; text-align: center; line-height: 18px; font-size: 12px; background-color: #ccc; border-radius: 50%;} .service-address li:hover .item{ box-shadow: 0 0 18px rgba(0,0,0,0.1);} .service-hot{ padding: 10% 0; color: #fff;} .service-hot a:link,.service-hot a:visited { color: #fff;} .service-hot a:active,.service-hot a:hover { color: #fff;} .service-hot .pboxT{ margin-bottom: 0;} .service-hot .tel{ font-family: "DINPro-L"; font-size: 66px; font-weight: bold;} .service-hot .bot{ width: 30px; height: 3px; display: block; margin: 30px auto 0; background-color: #fff;} .service-form{ font-weight: 400;} .service-form ::-webkit-input-placeholder { color: #999;} .service-form ::-moz-placeholder {color: #999;} .service-form :-ms-input-placeholder { color: #999;} .service-form li{ float: left; display: block; width: 100%; margin-bottom: 7px; color: #999;} .service-form .w49{ width: 49%;} .service-form .mr2{ margin-right: 2%;} .service-form .item{ border: 1px solid #F1F1F1; padding: 15px 20px;} .service-form .item.active{ border-color: #00A2E9;} .service-form .stxt{ width: 100%; border: 0px none; padding: 0; margin: 0; font: 14px/1.8 "Microsoft Yahei","微软雅黑","DINPro-L","微软正黑体","Microsoft JhengHei","SimHei","黑体",Arial,Helvetica,sans-serif; color: #999;} .service-form .stxt2{ resize: none; height: 100px;} .service-form .slabel{ margin-left: 5%; cursor: pointer;} .service-form-btn{ display: block; width: 120px; height: 40px; line-height: 40px; text-align: center; margin: 35px auto; background-color: #00A2E9; color: #fff;} .service-form-btn:hover{ background-color: #0D88BE;} input[type=radio] { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; position: relative; height: 14px; width: 14px; transition: all .15s ease-out 0s; color: #fff; cursor: pointer; display: inline-block; outline: none; border-radius: 10%; top: 2px; margin-right: 5px; } input[type=radio] { border-radius: 50%; } input[type=radio]:before { content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; margin: 2px; transform: scale(0); transition: all ease-out 250ms; } input[type=radio]:checked:before { transform: scale(1); background: #00A2E9; } .service-form input[type=radio] { border: 1px solid #CCCCCC; } /*service style end*/ /*about style*/ .about-bannerC{ width: 1100px; margin-left: -550px;} .about-bannerC .en2{ font-size: 60px; line-height: 1.2; color: #00A2E9; text-transform: uppercase; margin: 8px 0 45px;} .about-bannerC .cfff{ color: #fff;} .page-padding2{ padding: 120px 0;} .about-box-l{ float: left; width: 60%; padding-top: 55px;} .about-box-l .f30{ line-height: 1.2;} .about-box-l .pageC{ margin-top: 45px; line-height: 2;} .about-box-r{ position: relative; float: right; width: 380px; height: 380px; -webkit-animation: 12s linear 0s infinite running Turnico;animation: 12s linear 0s infinite running Turnico;} @-webkit-keyframes Turnico { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 25% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 75% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes Turnico { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 25% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 75% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .about-box-r canvas{ position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100% !important ; height: 100% !important;} .strength-box a:link, .strength-box a:visited { color: #fff; } .strength-box a:active, .strength-box a:hover { color: #fff;} .strength-box{ background-color: #000000; color: #fff; padding: 120px 0;} .strength-box .ibox-inner{ position: relative;} .strength-box .btn-more{ position: absolute; right: 0; top: 106px;} .strength-desc{ padding-right: 150px;} .strength-desc .pageC{ margin: 20px 0 80px;} .strength-list li{ float: left; display: block; width: 130px; text-align: center; margin-right: 70px;} .strength-list .sitem{ width: 128px; height: 128px; border: 1px solid #00A2E9; border-radius: 50%; margin: 0px auto 15px;} .strength-list .sitem .t{ position: relative; padding-top:20%;} .strength-list .num,.strength-list .add{ font-size: 50px; line-height: 1.5; font-family: "DINPro-L"; color: #00A2E9; padding-right: 5px;} .strength-list .add{ font-size: 20px; position: absolute;} .strength-list .c{ position: relative; top: -5px; padding-left: 8px;} .about-history{ position: relative; overflow: hidden;} .about-history .imgBox{ position: absolute; right: 0; top: 0; bottom: 0; width: 40%; background-size: cover;} .history-scroll{ margin: 45px 0 0; width: 50%; height: 560px; overflow: hidden;} .history-list{ position: relative;} .history-list:before{ content: ""; position: absolute; left: 6px; top: 8px; bottom: 0; background-color: #F1F1F1; width: 1px;} .history-list li{ position: relative; padding-bottom: 30px; padding-left: 35px;} .history-list li:before{ content: ""; position: absolute; left: 0; top: 4px; width: 13px; height: 13px; background-color: #00A2E9; border-radius: 50%;} .history-list .num{ line-height: 1; font-family: "DINPro-L"; font-weight: bold; margin-bottom: 5px;} .honor-scroll{ margin-top: 52px; overflow: hidden; height: 500px;} .honor-list{ margin-left: -2%;} .honor-list li{ position: relative; float: left; display: block; width: 18%; margin-left: 2%; margin-bottom: 35px; cursor: zoom-in;} .honor-list figure{ overflow: hidden;} .honor-list .yy{ position: absolute; left: 0; bottom: 0; background: url(../images/yy2.png) repeat-x scroll left bottom; width: 100%; height: 100%;} .honor-list .txt{ position: absolute; left: 5%; bottom: 5%; width: 90%; line-height: 1.5; color: #fff;} .partent-box{ margin-top: 45px;} .partent-box .item{ margin: 0px 5px; text-align: center;} .partent-box .img img{ max-width: 100%; display: block; margin: 0px auto;} .partent-box .txt{ line-height: 1.5; padding-top: 10px;} .partent-box .slick-dots { position: relative; bottom: auto; margin-top: 30px; z-index: 104;} .partent-box .slick-dots li { position: relative; display: inline-block; padding: 0; width: auto; height: auto; margin: 0px 10px; cursor: pointer;} .partent-box .slick-dots li a {text-indent: -10em; display: block; overflow: hidden; padding: 0px; cursor: pointer; border-radius: 50%; width: 10px; height: 10px; margin: 0px auto; background-color: #f1f1f1; } .partent-box .slick-dots li a:focus { outline: none; } .partent-box .slick-dots li.slick-active a { background-color: #00A2E9;} .company-list{ margin-left: -2%; margin-top: 45px;} .company-list li{ float: left; display: block; width: 23%; margin-left: 2%; margin-bottom: 2%;} .company-list figure{ position: relative; overflow: hidden; margin-bottom: 10px;} .company-list .black{ position: absolute; left: 0; top: 0; bottom: 0; right: 0; opacity: 0; visibility: hidden\9; background: url(../images/balck_70.png) repeat; background: none rgba(0,0,0,0.7); transition: .3s;-webkit-transition: .3s;} .company-list .desc{ /* position: absolute; left: 10%; width: 80%; top: 34%; color: #fff; opacity: 0; visibility: hidden\9; transform: translateY(50px); -webkit-transform: translateY(50px); transition: transform 0.6s,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: transform 0.6s,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; */} .company-list .desc h4{ font-weight: 300; font-size: 20px; line-height: 1.5; margin-bottom: 10px;} .company-list .desc .bot{ width: 18px; height: 4px; background-color: #fff; display: block; margin-top: 30px;} .company-list .name{ height: 25px; overflow: hidden;} .company-list li:hover .black,.company-list li:hover .desc{ /* opacity: 1; visibility: visible\9; */} .company-list li:hover .desc{ /* transform: translateY(0px); -webkit-transform: translateY(0px); */} /*about style end*/ /*news style*/ .news-list li{ position: relative; background-color: #fff; padding: 22px; margin-bottom: 24px; z-index: 1; -webkit-transition: 0.3s; transition: 0.3s;} .news-list li:before{ content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; background-color: #00A2E9; opacity: 0; visibility: hidden\9; transform: scale(0.98,0.92); -webkit-transform: scale(0.98,0.92); z-index: -1; -webkit-transition: 0.4s; transition: 0.4s;} .news-list figure{ float: left; display: block; width: 286px; margin-right: 4%; overflow: hidden;} .news-list .desc{ float: left; display: block; width: 60%;} .news-list h4{ padding-top: 15px; margin-bottom: 15px; font-size: 24px; color: #333; font-weight: normal; line-height: 1.5;-webkit-transition: 0.3s; transition: 0.3s;} .news-list .c{ height: 75px; overflow: hidden; margin-bottom: 38px;} .infoPage{ float: left; display: block; width: 70%; } .infoT{ line-height: 1.5; margin-bottom: 15px;} .info-time { font-weight: normal; padding-bottom: 35px; margin-bottom: 35px; border-bottom: 1px solid #F1F1F1;} .info-time .iconfont{ margin-right: 5px;} .infoPage .pageC{ margin-bottom: 50px;} .pager a:link, .pager a:visited { color: #666; } .pager a:active, .pager a:hover { color: #00A2E9;} .pager{ border-top: 1px solid #F1F1F1; padding: 25px 0;} .pager a{ position: relative; float: left; display: block; width: 48%;} .pager .next{ float: right; text-align: right;} .share{ padding-bottom: 25px;} .share.bdsharebuttonbox a{ background: none !important; padding: 0 !important; margin: 0 10px 0 0 !important; font-size: 26px !important; line-height: 1 !important; height: auto !important; color: #666;} .share .txt{ margin:0 18px 0 8px;} .share.bdsharebuttonbox a:hover{ color: #164999;} .info-right{ float: right; display: block; width: 23%;} .info-right .title{ font-size: 20px; line-height: 1.5; font-weight: bold; margin-bottom: 30px;} .info-list li{ position: relative; margin-bottom: 35px; -webkit-transition: 0.3s; transition: 0.3s;} .info-list figure{ overflow: hidden;} .info-list .txt{ margin: 8px 0 0; line-height: 1.5;} .info-list li:hover{ color: #00A2E9;} /*news style end*/ /*contact style*/ .contactPage a:link, .contactPage a:visited { color: #fff; } .contactPage a:active, .contactPage a:hover { color: #fff;} .contactPage{ padding: 8% 0; box-sizing: border-box; min-height:calc(100vh - 80px); color: #fff;} .w50{ width: 50%;} .contactPage .pboxT{ text-align: left;} .contact-list dd{ margin-bottom: 25px;} .contact-list dt{ margin-bottom: 15px; font-weight: bold; font-size: 20px;} .mt50{ margin-top: 50px;} .cermbox img{ margin-bottom: 5px;} .cermbox{ float: left; display: block; width: 120px; margin-right: 15px; font-size: 12px;} .contactPage .item{ margin-right: 45px;} /*contact style end*/ /*join style*/ .cfff{ color: #fff;} .join-icolist li{ float: left; display: block; width: 14.66%; padding: 0px 1%; margin-bottom: 5%; text-align: center;} .join-icolist .icon{ width: 92px; margin: 0px auto 10px;} .join-icolist .txt{ line-height: 1.5;} .join-list{ text-align: center; padding-top: 20px;} .join-list li{ display: inline-block; *display: inline; *zoom: 1; text-align: left; margin: 40px 1% 0; width: 31.33%; vertical-align: top;} .join-list .title{ float: left; display: inline-block; font-size: 80px; line-height: 1; font-family: "DINCond-bold"; color: #00A2E9; font-weight: bold;} .join-list .desc{ padding-left: 70px;} .join-list .t{ font-weight: bold; line-height: 1.5; margin-bottom: 10px; font-size: 18px;} .zhao-list{ margin-left: -4%;} .zhao-list li{ float: left; display: inline-block; width: 46%; margin-left: 4%;} .zhao-list a{ display: block; border: 1px solid #F2F2F2; text-align: center;} .zhao-list a img{ width: 100%; display: block; margin: 0px auto;} /*join style end*/ /*social style*/ .w756{ width: 756px; margin: 0px auto;} .social-page{ padding: 12% 0; color: #fff;} .social-page .pboxT{ margin-bottom: 25px;} .social-page .pageC{ color: #fff;} .social-bot{ width: 34px; height: 5px; display: block; margin: 70px auto 0; background-color: #fff;} .strength-demo2 .txt{ color: #666;} .strength-ico-list{ text-align: center;} .strength-ico-list .item{ padding: 0px 5px;} .strength-ico-list .item img{ max-width: 100% !important; margin: 0px auto;} .strength-ico-list li{ /* display: inline-block; *display: inline; *zoom: 1; margin: 0px 25px 20px; */} .strength-ico-list .slick-dots { position: relative; bottom: auto; margin-top: 30px; z-index: 104;} .strength-ico-list .slick-dots li { position: relative; display: inline-block; padding: 0; width: auto; height: auto; margin: 0px 10px; cursor: pointer;} .strength-ico-list .slick-dots li a {text-indent: -10em; display: block; overflow: hidden; padding: 0px; cursor: pointer; border-radius: 50%; width: 10px; height: 10px; margin: 0px auto; background-color: #f1f1f1; } .strength-ico-list .slick-dots li a:focus { outline: none; } .strength-ico-list .slick-dots li.slick-active a { background-color: #00A2E9;} .strength-num a:link, .strength-num a:visited { color: #fff;} .strength-num a:active, .strength-num a:hover { color: #fff;} .strength-num{ text-align: center; color: #fff;} .strength-num-list{ padding-top: 15px; font-size: 12px;} .strength-num-list li{ position: relative; display: inline-block; *display: inline; *zoom: 1; padding:0 5%; font-size: 12px; text-align: left;} .strength-num-list .num{ padding-right: 5px; margin-left: -7px; font-size: 60px; line-height: 1; font-family: "DIN-Regular"; color: #00A2E9;} .strength-num-list .add{ position: relative; top: -30px; line-height: 1; font-family: "DIN-Regular"; font-size: 20px; color: #00A2E9;} .strength-num-list li:before{ content: ""; position: absolute; right: 0; top: 30px; width: 1px; height: 34px; background-color: #3D3870;} .strength-num-list li:last-child:before{ display: none;} /*social style*/ /*404 style*/ .noPage a:link, .noPage a:visited { color: #fff;} .noPage a:active, .noPage a:hover { color: #fff;} .bg404{ background-repeat: no-repeat; background-position: center center; background-size: cover;} .noPage{ position: absolute; left: 50%; top: 50%; margin: -275px 0 0 -600px; color: #fff;} .no-list li{ float: left; display: block;} .no-list .item1{ width: 30%;} .no-list .item2{ width: 55%; float: right;} .no-t{ font-family: "DINPro-BIA"; font-size: 150px; line-height: 1; padding: 50px 0;} .no-by{ font-size: 30px; font-weight: bold;} .no-c{ margin-bottom: 40px;} .no-btn{ width: 160px; height: 50px; line-height: 50px; text-align: center; display: block; background-color: #00A2E9; color: #fff; color: #fff;} .no-btn:hover{ background-color:#2C7FCD;} /*404 style end*/ .dockCon a:link, .dockCon a:visited { color: #fff; } .dockCon a:active, .dockCon a:hover { color: #fff; } .dock { position: fixed; width: 70px; top: 50%; margin-top: -98px; right: 0px; z-index: 1000; } .dockCon li { position: relative; margin-bottom: 1px; } .dockCon li a{ position: relative; display: block; padding:8px 5px; text-align: center; background-color: #00a2e9; z-index: 2;} .dockCon li a .iconfont{ display: block; font-size: 34px; line-height: 1; margin-bottom: 2px;} .dockCon li a.item:hover{ background-color: #222222;} .dockCon li.last { display: none; } .dockCon i { -webkit-transition: 0.3s; transition: 0.3s; } .dockCon .con { background-color: #00a2e9; color: #fff; width: 178px; text-align: center; position: absolute; top: 0; right:0;-webkit-transition: 0.3s; transition: 0.3s; height: 77px; line-height: 77px; font-size: 20px; z-index: -1; opacity: 0; visibility: hidden;} .dockCon li:hover .con { right: 100%; opacity: 1; visibility: visible;} .md-content{background-color:#fff; margin:50px auto; position:relative; transform:translateX(100px); -webkit-transform:translateX(100px); opacity:0; visibility: hidden; -webkit-transition:all .3s linear; transition:all .3s linear;} .md-show, .md-show body { overflow-y: hidden;} .md-show .md-content{ transform:inherit; -webkit-transform:inherit; opacity:1; visibility: visible;} .md-hide .md-content{ transform:translateX(-100px); -webkit-transform:translateX(-100px);} .md-show .md-modal{ opacity:1;visibility:visible; } .md-modal{ position:fixed; left:0; top:0; overflow-y:auto; overflow-x: hidden; right:0px; bottom:0; z-index:1100; opacity:0; background: url(../images/balck_70.png) repeat; background: none rgba(0, 0, 0, 0.7); -webkit-transition:all .3s; -moz-transition:all .3s; transition:all .3s; -webkit-overflow-scrolling:touch;} .form-box-close { background-color: #00A2E9; width: 54px;height: 54px; line-height: 54px; position: absolute; right: -54px;top: 50%; margin-top: -27px; cursor: pointer; transition: 300ms; -webkit-transition: 300ms;} .form-box-close i{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 54px; text-align: center; color: #fff; transition: 300ms; -webkit-transition: 300ms;} .form-box-close:hover { background-color: #333;} .form-box-close:hover i{transform: rotate(90deg);-webkit-transform: rotate(90deg);-o-transform: rotate(90deg);-moz-transform: rotate(90deg);} .messagePage{ width: 700px; padding:60px 80px;} .down-btn{ display: block; width: 100px; margin: 0px auto; color: #fff; text-align: center;} .down-btn i{ display: block; font-size: 56px; line-height: 1; margin-bottom: 4px;} .down-btn:hover{ color: #00A2E9;} .pro-banner{ position: relative;} .pro-banner .down-btn{ position: absolute; left: 19%; bottom: 3%; width: auto;} .downPage{ width: 340px; padding: 40px 30px;} .down-sbox .item{ margin-bottom: 14px;} .down-sbox h4{ font-size: 20px; text-align: center; font-weight: normal; color: #333333; padding-bottom: 20px;} .down-sbox .stxt{ border: 1px solid #dddddd; background-color: #f4f4f4; border-radius: 3px; display: block; width: 90%; padding: 6px 5%; font:14px/1.8 "Microsoft Yahei","微软雅黑","DINPro-L","微软正黑体","Microsoft JhengHei","SimHei","黑体",Arial,Helvetica,sans-serif;} .down-sbox .stxt2{ resize: none;} .down-sbox .stxt3{ float: left; display: inline-block; width: 44%;} .down-item{ position: relative; border: 1px solid #dddddd; background-color: #f4f4f4; border-radius: 3px; padding: 0 5% 0 0;} .down-item .line{ width: 185px; height: 37px; line-height: 37px; text-align: center; border: 0px none; background-color:transparent; text-align: center; float: left; display: inline-block; width: 40%; padding-left: 5%; color: #757575;} .down-item .stxt4{ float: right; width: 50%; display: inline-block; border: 0px none; border-left: 1px solid #dddddd; padding-right: 0;} .down-sbox .sbtn{ float: right; display: block; width: 43%; background-color: #00a2e9; color: #fff; border-radius: 3px; text-align: center; height: 39px; line-height: 39px;} .down-form-btn{ width: 100%; height: 40px; line-height: 40px; display: block; background-color: #00a2e9; color: #fff; border-radius: 3px; text-align: center;} .down-form-btn:hover{ background-color: #0D88BE;} .downclose{ right: 0; top: 0; margin-top: 0; background-color: transparent;} .downclose i{ color: #cccccc; font-weight: bold;}