@charset "utf-8"; /*css comment*/ body,html { color:#666; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #fff; font-family: Microsoft YaHei, "微软雅黑"; font-size: 14px; line-height:1.72; text-align:justify; overflow-x:hidden; } body{ width: 100%; overflow-x: hidden; font-family:微软雅黑; } img { border:none; display:inline-block; max-width: 100%; height: auto; -ms-interpolation-mode: bicubic; _width:auto; } button, input, textarea ,select{ border:none; background:none; font-size:14px; vertical-align:middle; color:#333; font-family: Microsoft YaHei, "微软雅黑"; } select { border:inherit; background: inherit; } a { text-decoration:none; blr:expression(this.onFocus=this.blur()); outline: none; color:#333; } a:hover,a:active,a:focus { text-decoration:none; } em, i { font-style:normal; } a:focus, input, select { outline:none; } .clearfix { *zoom:1; } .clearfix:after { content:"\200B"; display: block; clear: both; height: 0; } input[type="submit"], input[type="reset"], input[type="button"], button, select { -webkit-appearance: none; } input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, button:hover{ opacity: 0.90; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,label{ font-weight: normal; padding: 0; margin: 0; font-size: 14px; line-height: 1.3; font-family: Microsoft YaHei, "微软雅黑";} p,ul, ol{ margin: 0;} header,main,footer,section{ display:block;} /*browserupgrade*/ .browserupgrade{display:block;position:fixed; top:0; left:0; margin:0;width:100%;height:60px;font-size:15px;line-height:60px;z-index:5000;background-color:#666;color:#fff;text-align:center} .browserupgrade a{color:#eee;text-decoration:underline;font-size:18px;} .browserupgrade a:hover{color:#eee} /*owl-theme*/ .owl-carousel .owl-nav a{ display:inline-block; vertical-align: middle;} .owl-carousel .owl-nav a span{ display:block; width:100%; height: 100%; text-align: center;} .owl-carousel .owl-dots{ width:100%; text-align: center; margin-top:20px;} .owl-carousel .owl-dots .owl-dot{ display:inline-block; vertical-align: middle; margin: 0 5px; width:8px; height: 8px; border:1px solid #d2d2d2; background:#d2d2d2; border-radius:50%; } .owl-carousel .owl-dots .owl-dot.active{ background: #096bb5; border-color:#096bb5;} .inner{ width:1400px; margin: 0 auto;} /*===================header========================*/ header{ position:absolute; top:0; left:0; z-index:1003; width:100%;} header, .menu_top{ padding:30px 0;} .logo{ float:left; position:relative; z-index: 1004;} .logo a img{ display:block; height:90px; width:auto;} .header_r{ float:right; margin-top:10px;} .ico_lang, .ico_search, .ico_box{ display:block; float:left; padding:0 10px;} .ico_lang, .ico_search, .ico_menu i{ opacity:.8;} .ico_lang:hover , .ico_search:hover, .ico_menu:hover i{ opacity:.70;} /*ico_menu*/ .ico_box{ padding: 0 0 0 20px; border-left:1px solid rgba(255,255,255,.9); margin-left:10px;} .ico_menu{ display:block; cursor: pointer; width:26px; height:26px; position:relative;} .ico_menu i{ display: block; width:26px; height: 2px; background:#fff; position: absolute; top:0; left:0;} .ico_menu i:nth-of-type(2){ width:18px; top:10px;} .ico_menu i:nth-of-type(3){ top:20px;} .ico_menu:hover i:nth-child(n){ width:26px;} .menu_active i{ background:#000;} .menu_active i:nth-of-type(2){ opacity: 0;} .menu_active i:nth-of-type(1),.menu_active i:nth-of-type(3){ top:20px;} .menu_active i:nth-of-type(1){ transform:rotate(-45deg);} .menu_active i:nth-of-type(3){ transform:rotate(45deg);} /*menu_warp*/ .menu_warp{ position:fixed; top:0; right:-100%; opacity: 0; z-index:1002; width:100%; height:100%;} .menu_warp:before{ content:""; position: absolute; top:0; right:-100%; z-index: 1; width:100%; height:100%; max-width: 850px; background: url(../images/header_01.png) left top no-repeat; background-size:cover;} .menu_warp:after{ content:""; position: absolute; top:0; right:-100%; z-index: 0; width:100%; height:100%; max-width: 570px; background: url(../images/header_02.png) left top no-repeat; background-size:cover;} .menu_block{ float:right; text-align: right; position: relative; z-index:2;} .menu_top{ } #ico_menu02{ width:40px; height:40px;} #ico_menu02 i{ width:40px;} .menu_list a.a_item0{ display:block; font-size:28px; opacity: .70; margin-bottom: 20px; font-family:微软雅黑;} .menu_list a.a_item0:hover, .menu_list a.a_item0.on, .menu_list a.a_item0.menu_cur{ opacity:1;} .subclass{ padding-bottom: 30px; display:none;} .subclass a{ display:block; line-height:1.9; color: #747474; font-size: 20px;} .subclass a span{ display:inline-block; padding-left: 30px; position:relative;} .subclass a span:before{ content:""; position:absolute; top:0; left:0; width:16px; height: 100%; overflow: hidden; background: url(../images/dec_01.png) -16px center no-repeat;} .subclass a:hover, .subclass a.subclass_cur{ color:#096bb5;} .subclass a:hover span:before, .subclass a.subclass_cur span:before{ background-position:left center;} .menu_show{ } .menu_show:before{ right:0; animation: 1s .2s fadeInRight both;} .menu_show:after{ right:8.5%; animation: 1s .8s fadeInRight both;} .menu_show .menu_block{ animation: 1s .6s fadeInUp both;} .digg4{ padding:3px; margin-top:12px; text-align:center; font-family: 微软雅黑, Arial, Helvetica, sans-serif; font-size: 14px; } .digg4 span{ border:1px #ccc solid; padding:2px 5px; margin:5px; color:#999} .digg4 span:hover{ color:#f60;border:1px #f60 solid; padding:2px 5px; cursor:pointer; } .digg4 a,.digg4 span.miy{ margin:2px; padding:2px 5px; text-decoration:none; border:1px #CCCCCC solid; } .digg4 .disabledfy{ font-family: Tahoma, Verdana;} /*==============tan_warp*/ .tan_warp{ position: fixed; top:0; left:0; width: 100%; height: 100%; z-index: 4000; display:none;} .tan_warp .table{ position:absolute; top:0; left:0; height: 100%;} .tan_bg{ background: rgba(0,0,0,.80); position: absolute; top:0; left:0; z-index: 1; width: 100%; height: 100%;} .tan_closed{ display: block; position:absolute; top:0; right:0; z-index: 10; width:120px; line-height:120px; text-align: center; background:rgba(0,0,0,.10) url(../images/dec_05.png) center center no-repeat; background-size:40px; font-size:0;} .tan_closed:hover{ background-color:#096bb5;} .tan_box{ position: relative; z-index: 2;} /*search_warp*/ #search_warp{ text-align: center; } #search_warp .tan_bg{ background: url(../images/header_03.jpg) center center no-repeat; opacity: .90;} .search_box{ max-width: 910px; margin: 0 auto; border-bottom:1px solid rgba(0,0,0,.30);} .search_btn{ cursor: pointer; width:70px; height:70px; float: right; font-size: 0; background: url(../images/header_ico02.png) center center no-repeat; opacity: .90; } .search_fill{ overflow:hidden;} .search_txt{ width:100%; font-size:24px; height: 70px; padding: 20px 0 20px 0;} /*===================footer========================*/ footer{ position: relative; z-index: 2; background: #4d4d4d; /*border-bottom: 18px solid #ddd;*/ padding-top:50px; padding-bottom:40px;} img.footer_dec01{ display:block; position:absolute; bottom:0; left:57%; width:20%; max-width:352px;} .footer_l{ float:left;} .footer_logo{ display:block; max-width:350px; max-height:70px;} .footer_nav{ margin:35px -30px 10px;} .footer_nav a{ display:inline-block; position:relative; padding: 0 30px;color: #fff;} .footer_nav a:before{ content:""; position:absolute; top:50%; right:-2px; margin-top:-2px; width:5px; height: 5px; border-radius:50%; background: rgba(255,255,255,.20);} .footer_nav a:last-child:before{ display:none;} .footer_nav a:hover{ color:#096bb5;} .copyright{ opacity:.50;color: #fff;} .copyright a{color: #fff;} .copyright a:hover{ color:#096bb5;} .footer_r{ float:right; padding-top: 24px;} .back_top, .notice{ display:inline-block; vertical-align: bottom; margin-left: 20px;} .back_top i{ display:block; margin:0 auto 10px; position:relative; width:40px; height:40px;} .back_top i:before{ content:""; position: absolute; top:0; left:0; width:100%; height: 100%; border-radius:50%; border:1px solid #ddd;} .back_top i:after{ content:""; position: absolute; top:50%; left:50%; width:20px; height: 20px; margin:-10px 0 0 -10px; background: url(../images/dec_03.png) center top no-repeat;} .back_top{color: #fff;} .back_top:hover{ color:#096bb5;} .back_top:hover i:before{ background: #096bb5; border-color:#096bb5;} .back_top:hover i:after{ background-position:center bottom;} .notice{} .notice img{ display:block; } #x_weizhi_all{ width:100%; margin:0px auto; overflow:hidden; font-size:14px;color:#666;padding:0px 0px; background-color:#f0f0f0; border-bottom:0px solid #ddd; z-index:50; position:absolute; } #x_weizhi{ overflow:hidden; font-size:14px;color:#666; border-bottom:0px solid #ddd; width:96%; max-width:1400px; height:44px; line-height:44px; margin:0px auto; } .x_newsinfo{ width:100%; } .x_newsinfo h2{ font-size:24px; color:#f06121; text-align:center; } .x_newsinfo h6{ font-size:14px; color:#666; border-bottom:1px solid #ddd; margin:8px 0px 26px 0px; padding:6px 0px 16px 0px; overflow:hidden;text-align:center; } .x_nei_content{ overflow:hidden; font-size:16px; margin-top:20px; } .x_nei_content p{ overflow:hidden; margin-bottom:16px;text-align:left;color:#444;line-height:22px; } .x_contactlist{ overflow:hidden; width:100%; } .x_contactlist ul{ overflow:hidden; width:100%; } .x_contactlist ul li{ overflow:hidden; width:29%; margin:0 2%; float:left; padding:2% 0; border:1px solid #ddd; box-shadow:0px 0px 8px #ccc; text-align:center; } .x_contactlist ul li h3{ font-size:18px; } .x_contactlist ul li img{ margin:2% 0; } .x_contactlist ul li p{ font-size:14px; } a.button_3:link,a.button_3:visited{ display:block; margin:40px auto 0px auto; width:140px; height:35px; line-height:35px; background-color:#f06121; border-radius:0px; font-weight:normal; cursor:pointer; text-align:center; letter-spacing:0px;border-radius:30px; font-size:14px; text-indent:0px; color:#fff;border:1px solid #f06121; } a.button_3:hover{ color:#f06121;border:1px solid #f06121; text-decoration: none; font-size:14px; background-color:#fff; text-align:center; } .digg4{ padding:3px; margin-top:42px; text-align:center; font-family: 微软雅黑, Arial, Helvetica, sans-serif; font-size: 16px; } .digg4 span{ border:1px #ccc solid; padding:3px 8px; margin:5px; color:#999} .digg4 span:hover{ color:#f06121;border:1px #ccc solid; padding:3px 8px; cursor:pointer;} .digg4 a,.digg4 span.miy{ margin:2px; padding:3px 8px; text-decoration:none; border:1px #CCCCCC solid; } /*===================main========================*/ main{ padding: 4% 0; position: relative; z-index: 2; background:#fff;} main.main_index{ padding:0; z-index: auto;} /*bgImg*/ .bgImg{ width:100%; height: 100%; background-position:center center; background-repeat:no-repeat; background-size:cover; transition:all .5s ease-in-out;} .bgImg img{display:none;} /*table*/ .table{ display:table; width:100%; height: 100%; text-align:center;} .cell{ display:table-cell; vertical-align:middle;} /*============== focus_warp*/ .focus_warp{ width:100%; height: 100vh; overflow: hidden;} .slide{ position: relative; z-index: 1;} .slide,.slide .owl-stage-outer,.slide .owl-stage,.slide .owl-item,.slide li, .slide_item img.focus_img{ width: 100%; height: 100%; overflow: hidden;} .ico_video{ display:block; cursor:pointer; position:absolute; top:50%; left:50%; width:11.198%; margin:-0.6% 0 0 -5.7%;} .ico_video img{ display:block;} .slide li.slide_item .bgImg{ position:absolute; top:0; left:0; width:100%; height: 100%;} .slide .owl-nav a{ width:40px; height:80px; position:absolute; top:50%; left:5.20%; margin-top: -40px; background:url(../images/arrow_01.png) left top no-repeat;} .slide .owl-nav a span{ font-size:0;} .slide .owl-nav a.owl-prev:hover, .slide .owl-nav a.owl-prev.disabled{ background-position:right top;} .slide .owl-nav a.owl-next{ left:auto; right:5.20%; background-position:right bottom;} .slide .owl-nav a.owl-next:hover, .slide .owl-nav a.owl-next.disabled{ background-position:left bottom;} .slide .owl-dots{ position:absolute; left:0; bottom: 6%; margin: 0;} .slide .owl-dots .owl-dot{ width:16px; height:16px; border:none; background:url(../images/focus_dot_a.png) center center no-repeat;} .slide .owl-dots .owl-dot.active{ background:url(../images/focus_dot_b.png) center center no-repeat;} /*slide_text*/ .slide_text{ position:absolute; top:35%; left:0; z-index: 1; width:100%; text-transform:uppercase; text-align:center;} .slide_text h3{ margin-bottom:20px; color: #fff; line-height: 1; font-size:64px;} .slide_text h3 img{ display:inline-block; vertical-align:middle; margin: 0 12px; display:none;} .slide_text p{ margin-bottom:35px; color:rgba(255,255,255,.8); line-height: 1; letter-spacing:0.06em; font-size: 24px;} .slide_text .text_dec{ display:block; margin: 0 auto; width:0; height:1px; background:#c6c6c6; opacity:0; transition: all 1s .5s ease-in-out; } /*focus01_pro*/ .focus01_pro01{ display:block; position: absolute; top:50%; left:-5.5%; margin-top: -4%; width: 48%; max-width: 670px;} .focus01_pro02{ display:block; position: absolute; top: 50%; right: -12%; margin-top: -15%; width: 51%; max-width: 720px;} .focus01_inner{ height:100%; position:relative;} .slide .owl-item.active .slide_text h3{ animation: 1s .2s fadeInUp both; } .slide .owl-item.active .slide_text p{ animation: 1s .5s fadeInUp both; } .slide .owl-item.active .slide_text .text_dec{ width:40px; opacity:1;} .slide .owl-item.active .ico_video{ animation: 2s .8s zoomIn both; } .slide .owl-item.active .bgImg{ animation: 1s .2s fadeIn both; } .slide .owl-item.active .focus01_pro01{ animation: 1s .3s fadeInLeft both; } .slide .owl-item.active .focus01_pro02{ animation: 1s .5s fadeInRight both; } .video_focus{ background:#000; height: 600px; } /*===================index========================*/ .sec_index{ padding:4% 0; position: relative;} .coverage .bgImg{ position:absolute; top:0; left:0;} .sec_index .inner{ position:relative; z-index: 1;} /*========================product*/ .product{ background: url(../images/product_01.jpg) center center no-repeat; background-size:cover;} #canvas01_box{ position:absolute; top:0; left:0; width:100%; height: 100%;} .title01{ text-align:center; text-transform:uppercase; position: relative; padding-bottom: 25px; margin-bottom: 40px;} .title01:before{ content:""; position: absolute; bottom: 0; left:50%; width:50px; margin-left:-25px; height: 3px; background: #096bb5;} .title01 i{ display:block;} .title01 em{ display:block; opacity: .50;} .title01_des{ max-width: 870px; margin: 10px auto 0; line-height: 1.65;} .color_white a{ color:#fff;} .color_white:before{ background-color:#fff;} .product_rec{} .product_rec li{ float:left;} .product_rec li a{ display:block; height: 100%; position: relative; top:0;} .product_rec li a .bgImg img{ display:block; border:1px solid #ddd;} .p_rec_info{ position:absolute; bottom:12%; right:6%;} .p_rec_info h4{ margin-bottom:5px;} .p_rec_des{ opacity:.80; margin-bottom: 20px;} .p_rec_more{ display:inline-block; width:122px; line-height:36px; border-radius:20px; text-align: center; background:#096bb5; color: #fff; transition: all 0.5s ease-in-out; box-shadow:0 5px 20px 0 #096bb540;} .p_rec_more i{ display:inline-block; padding-right: 14px; background:url(../images/dec_06.png) right center no-repeat;} .product_rec li.p_rec01, .product_rec li.p_rec04{ margin-top:0px; } .product_rec li.p_rec01{ width:31%; border:0px solid #333;} .product_rec li.p_rec02{ width:30.6%; margin:0 0 30px 50px; border:0px solid #f50;} .product_rec li.p_rec02 .p_rec_info{ right:15%;} .product_rec li.p_rec03{ width:30.6%; margin:0px 0 40px 50px; text-align: center; border:0px solid #f10;} .product_rec li.p_rec03 .p_rec_info{ padding-left:45%; border:0px solid #f50; text-align:left;} .product_rec li.p_rec04{ width:31%; float: right; margin-right: 0px;} .product_rec li a:hover{ color:#096bb5; top:-10px;} .product_rec li a:hover .p_rec_more{ background: #f36321} /*========================case*/ .case{ background-color:#f6f6f6;} .case_rec{ margin:-12px; overflow: hidden;display: flex;justify-content: center;} .case_rec li{ width:25%; /*float:left;*/ padding:12px;} .case_rec li a{ display:block; position:relative; background: #fff; border-radius: 8px; text-align: center; -webkit-transition:all 0s ease-in-out; -moz-transition: all 0s ease-in-out; -ms-transition: all 0s ease-in-out; -o-transition: all 0s ease-in-out; transition: all 0s ease-in-out; } .case_rec li a .bgImg{ position: absolute; top:0; left:0; width:100%; height: 100%; opacity: 0;} .case_block{ position:relative; z-index: 2; height: 380px; padding: 60px 10% 0;} .case_ico, .case_ico img{ display:block; margin:0 auto; overflow: hidden; position: relative; transition: all 0.5s ease-in-out;} .case_ico01{ margin-bottom:30px; top:0; opacity: 1;} .case_ico02{ top:40px; opacity: 0;} .case_txt{ position: relative; top:0; transition: all 0.5s ease-in-out;} .case_tit{ margin-bottom: 10px;} .case_des{ line-height:24px; max-height: 72px; overflow: hidden; margin-bottom:30px;} .case_more{ font-size: 0; display:block; margin:0 auto; position: relative; width:36px; height:10px; background: url(../images/dec_02a.png) center center no-repeat;} .case_more:before{ content:""; position: absolute; top:0; left:50%; opacity: 0; width:0; height:100%; background: url(../images/dec_02b.png) center center no-repeat;} .cover_hide{ position:absolute; z-index:1; left:15px; top:15px; width: -webkit-calc(100% - 30px); width: calc(100% - 30px); height: -webkit-calc(100% - 30px); height: calc(100% - 30px); border-radius:8px; background:rgba(9,107,181, 0.92);; opacity:0; transform:scale(.9); transform-origin:bottom; transition:all .5s ease-in-out;} .case_rec li a:hover{ color:#fff;} .case_rec li a:hover .cover_hide{ opacity:1; transform:scale(1)} .case_rec li a:hover .bgImg{ opacity:1;} .case_rec li a:hover .case_ico01{ top:-40px; opacity: 0;} .case_rec li a:hover .case_ico02{ top:-90px; opacity: .50;} .case_rec li a:hover .case_txt{ top:-120px;} .case_rec li a:hover .case_more:before{ left:0; opacity:1; width:100%;} /*========================coverage*/ .coverage{ background-color:#096bb5; color:#fff;} .coverage:before{ content:""; position: absolute; bottom: 0; left:0; z-index: 1; width:100%; height: 230px; background: #f3f3f3;} .coverage .bgImg{ opacity:.10; background-position:center top; background-attachment:fixed;} #coverage_scr{ } #coverage_scr .item{ overflow: hidden; position: relative; padding-top: 30px;} .coverage_block{ display:block; border-radius: 8px; transition: all 0s ease-in-out; -webkit-transition: opacity 0.60s, -webkit-transform 0.60s; transition: opacity 0.60s, transform 0.60s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .coverage_pic{ overflow:hidden; border-top-left-radius:16px;border-top-right-radius:16px; height: 235px;} .coverage_pic img{ display:block; width:100%; height: 100%;} .coverage_info{ height:240px; margin-top: -10px; padding: 20px 10%; border-radius:0 0 8px 8px; background: #fff;} .coverage_time{ opacity:.40; margin-bottom: 5px;} .coverage_tit{ line-height:28px; max-height:56px; overflow: hidden; margin-bottom: 15px;} .coverage_des{opacity:.80; line-height:24px; max-height:48px; overflow: hidden; } .coverage_more{ display:block; position:absolute; bottom: 0; left:50%; font-size: 0; border-radius: 50%; width:60px; height: 60px; margin-left: -30px; opacity:0; transform:scale(.6);} .coverage_more:before{ content:""; position: absolute; top:0; left:0; width:100%; height: 100%; background: url(../images/arrow_02.png) -60px center no-repeat;} #coverage_scr .owl-nav a{ width:42px; height:42px; position:absolute; top:50%; left:-80px; margin-top: -42px; background:url(../images/arrow_03.png) left center no-repeat;} #coverage_scr .owl-nav a.disabled{ opacity:.60;} #coverage_scr .owl-nav a.owl-next{ left:auto; right:-80px; background-position:right center;} #coverage_scr .owl-nav a span{ display:none;} #coverage_scr .owl-dots{ position:absolute; top: -80px; left:0; text-align: right;} #coverage_scr .owl-dots .owl-dot.active{ border-color:#fff; background: #fff;} #coverage_scr .item:hover .coverage_block{ -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); box-shadow:0 7px 30px -2px #096bb514; } #coverage_scr .item:hover .coverage_more{ background-color:#096bb5; opacity:1; transform:scale(1);} #coverage_scr .item:hover .coverage_more:before{ background-position:center center;} /*========================contact*/ .contact{ background-color:#f3f3f3;} .contact_l, .contact_r{ height:420px; background: #fff; overflow: hidden; border-radius:8px;} .contact_l{ width:61.42%; float: left; margin-right: 15px;} .map_spread{ border-radius:8px; overflow: hidden; float: left; position:relative; height: 100%; width:44%; max-width:370px; padding-left:0px;} .contact_info, .contact_r{ padding:30px 40px;} .contact_info{ overflow: hidden;} .contact_tit{ color:#333; } .contact_line{ padding:18px 0; border-bottom: 1px dashed #e5e5e5;border-top: 1px dashed #e5e5e5; margin-top:16px;} /*.contact_line:last-child{ border:none;}*/ .contact_item{ color:#333; margin-bottom:10px;} .contact_txt{} .contact_txt li{ overflow:hidden; text-align:left; line-height:22px; margin-bottom: 4px;} .contact_txt li img{ display:block; float: left; width:20px; height:20px; margin-right: 6px;} .contact_txt li p{ overflow:hidden;} .contact_r{ } .form_message{ margin:35px -5px -5px; overflow: hidden;} .m_line{ width:50%; float: left; overflow: hidden; border:5px solid #fff; background:#f8f8f8; color: #333; transition: all 0.5s ease-in-out;} .m_line label{ display:block; float: left; /*width:85px;*/ line-height: 42px; padding-left: 10px;font-weight: bold;} .line_r{ overflow:hidden;} .m_txt{ width:100%; height:42px; padding:10px 0 10px 0;} .m_txt::-webkit-input-placeholder{ color: rgba(0,0,0,.40);} .m_txt::-moz-placeholder{ color: rgba(0,0,0,.40);} .m_txt:-moz-placeholder{ color: rgba(0,0,0,.40);} .m_txt:-ms-input-placeholder{ color: rgba(0,0,0,.40);} .line_dif{ width: 100%;} .m_line:hover{ background:#f3f3f3;} .m_submit{ cursor:pointer; margin-top:25px; width:132px; height: 42px; border-radius:30px; background:#096bb5; color: #fff;} .m_submit:hover{ background:#f06121;} /*========================partners*/ .partners{ background-color:#fff;} #partners_scr{ overflow: hidden;} #partners_scr .item{ overflow: hidden; margin: -10px;} .partners_block{ width:25%; float:left; padding: 10px;} .partners_block a{ display:table; width:100%; height:180px; text-align:center; border:1px solid #f2f2f2; border-radius:8px;} .img_box{ display:inline-block; position:relative; width:90%; max-width: 200px;} .img_box img{ transition: all 0.5s ease-in-out; -webkit-transform: rotateX(0deg) rotateY(0deg); -moz-transform: rotateX(0deg) rotateY(0deg); transform: rotateX(0deg) rotateY(0deg); } .img_box img.img_color{ position: absolute; opacity: 0;} .partners_block a:hover .img_box img.img_gray{ opacity: 0;} .partners_block a:hover .img_box img.img_color{ opacity: 1; -webkit-transform:rotateY(20deg); -moz-transform:rotateY(20deg); transform:rotateY(20deg); } .partners_block a:hover{ box-shadow:0 6px 18px 3px rgba(0,0,0,.05);} #partners_scr .owl-item.active .partners_block:nth-child(1){ animation: 1s 0.1s fadeIn both;} #partners_scr .owl-item.active .partners_block:nth-child(2){ animation: 1s 0.2s fadeIn both;} #partners_scr .owl-item.active .partners_block:nth-child(3){ animation: 1s 0.3s fadeIn both;} #partners_scr .owl-item.active .partners_block:nth-child(4){ animation: 1s 0.4s fadeIn both;} #partners_scr .owl-item.active .partners_block:nth-child(5){ animation: 1s 0.5s fadeIn both;} #partners_scr .owl-item.active .partners_block:nth-child(6){ animation: 1s 0.6s fadeIn both;} #partners_scr .owl-item.active .partners_block:nth-child(7){ animation: 1s 0.7s fadeIn both;} #partners_scr .owl-item.active .partners_block:nth-child(8){ animation: 1s 0.8s fadeIn both;} #partners_scr .owl-item.active .partners_block:nth-child(9){ animation: 1s 0.9s fadeIn both;} /*banner_warp*/ .banner_warp{ height:450px; position:relative;} .banner_warp .bgImg{ position: absolute; top:0; left:0;} #canvas02_box{ position: fixed; top:0; left:0; z-index:1; width:100%; height: 100%;} #canvas02{ width:100%; height: 100%;} .banner_tit{ text-align: center; text-transform:uppercase; color: #000; padding-bottom: 20px; position:relative; z-index: 3;} .banner_tit i{ display:block;} .banner_tit em{ display:block; opacity: .50;} .banner_tit:before{ content:""; position: absolute; bottom: 0; left:50%; width:36px; height: 1px; margin-left: -18px; background:rgba(0,0,0,.20);} /*product_forewords*/ .sub_warp{ background:#fff; position: relative; z-index: 2;} .product_forewords{ padding-bottom: 5%; border-bottom: 1px solid #e5e5e5; margin-bottom: 5%;} .p_f_img{ width:57.85%; float: left;} .p_f_img img{ display:block; position: relative; left:-5%;} .p_f_info{ overflow:hidden; padding-top:3%;} .p_f_tit{ color: #000; padding-bottom:20px; position: relative; margin-bottom: 40px;} .p_f_tit:before{ content:""; position:absolute; bottom: 0; left:0; width:48px; height: 2px; background:#096bb5;} .p_f_des{ } .product_list{ margin:40px -25px 0px -25px; overflow: hidden;} .product_list li{ width:25%; float:left; padding: 25px;} .product_list li a{ display:block; border-radius: 8px; background:#f8f8f8; text-align:center;/* height: 540px;*/ padding:25px 0;} .product_img{ } .product_img img{ display:block; margin: 0 auto; position:relative; top:0; transition: all 0.5s ease-in-out;} .product_info{ padding:30px 15px 0;} .product_tit{ text-transform:uppercase; margin-bottom: 20px;} .product_tit em{ display:block; opacity:.70; margin-top:5px;height:2rem;} .product_list li a:hover{ border-color:#f2f2f2; box-shadow:0 0 30px -2px rgba(0,0,0,.10);} .product_list li a:hover .product_img img{ top:10px;} .product_list li a:hover .p_rec_more{ background: #f06121} /*page*/ .page{ text-align:center; background: #fff; margin-top: 4%;} .page a{ display:inline-block; vertical-align: middle; text-transform: uppercase; width:35px; line-height: 35px;} .page a.page_cur{ color:#096bb5;} .page a.page_prev,.page a.page_next{ font-size: 0; width:43px; margin: 0 10px; position: relative;} .page a.page_prev:before,.page a.page_next:before{ content: ""; width:14px; height: 14px; position: absolute; top:50%; left:50%; margin: -7px 0 0 -7px; background: url(../images/page_01.png) no-repeat;} .page a.page_prev:hover,.page a.page_next:hover{ background: #096bb5;} .page a.page_prev:hover:before{ background-position:right 0;} .page a.page_next:before{ background-image: url(../images/page_02.png); background-position:right 0;} .page a.page_next:hover:before{ background-position:left 0;} .page a.page_go{ width:43px; background: #096bb5; color: #fff; margin: 0 10px 0 20px;} .page a.page_go:hover{ background: ##109038;} .page a.page_total{ width:auto;} .page_txt{ width:60px; height: 35px; padding: 0 10px; vertical-align: middle; border:1px solid #d5d5d5; margin-right: 10px;} /*common_warp*/ .common_warp{ position: relative; z-index: 2; margin-top: 4%; padding-top:30px;; background:#fff url(../images/common_01.png) center top no-repeat;} .common_box{ background:#eee; border-radius: 8px;} .common_l, .common_r{ width:50%; height:300px; padding:25px 50px; float: left; border-radius: 8px; overflow: hidden; position:relative;} .common_l{ color:#fff;} .contact_con{ position:relative; z-index:1;} .common_tit{ margin-bottom:30px;} .contact_tab{ float:left; margin-right: 8%; width:105px; height:155px; border-right:1px solid rgba(255,255,255,.30);} .contact_tab li a{ cursor:pointer; display:block; position:relative; color: #fff; opacity: .80; height: 40px; line-height: 24px;} .contact_tab li a:before{ content:""; position: absolute; top:0; right:-1px; width:1px; height: 0; background:#fff;} .contact_tab li.active a{ opacity: 1; font-weight:bold;} .contact_tab li.active a:before{ height:24px;} .contact_box{ overflow:hidden; margin-top: -20px;} .contact_block{ display:none;} .contact_bg{ position:absolute; top:0; left:0; width:100%; height: 100%;} .bg_block{ position:absolute; top:0; left:0; width:100%; height: 100%; display:none;} .common_r{ color:#000;} .form_message02{ margin-top:-15px;} .form_message02 .m_line{ background-color:#fff; border-color:#eee; border-radius:8px;} .form_message02 .m_txt{ height:40px;} .form_message02 .m_line label{ line-height:40px;} .form_message02 .m_submit{ margin: 0; width:118px; height: 32px; border-radius: 8px; position:absolute; top:25px; right:50px; } /*article*/ .article{ max-width: 1200px; margin: 0 auto;} .article_top, .article_tit{ line-height: 48px;} .article_top{ padding-bottom:20px; border-bottom:1px solid #e5e5e5; margin-bottom: 4%;} .back_list{ display:block; float:right; color:rgba(0,0,0,.60); padding-right: 30px; background: url(../images/dec_07.png) right center no-repeat; margin-left: 30px;} .back_list:hover{ color:rgba(0,0,0,1);} .top_l{ overflow:hidden;} .article_tit{ overflow:hidden; color: #333; text-align: left;} .article_caption{ color: #333; margin-bottom: 3%;} .article_info{ margin-top:20px;} .article_handle{ margin-top: 4%; padding:3.5% 8%; background: #f8f8f8; line-height:24px;} .article_btn,.back_list02{ display:block; float: left; width:40%;} .article_next{ float:right; text-align: right;} .article_btn em{ display:block; width:30px; height:30px; color:transparent; position: relative;} .article_btn em:before{ content:""; position: absolute; top:50%; left:0; width: 12px; height: 12px; margin-top: -6px;} .article_btn em:after{ content:""; position: absolute; top:50%; right:0; width:1px; height: 14px; margin-top: -7px; background: #e5e5e5;} .article_prev em{ float:left; margin-right: 15px;} .article_prev em:before{ background: url(../images/article_arrow01.png) left center no-repeat;} .article_prev:hover em:before{ background-position: right center;} .article_btn span{ display:block; overflow: hidden; } .article_next em{ float:right; margin-left: 18px;} .article_next em:before{ left:auto; right:0; background: url(../images/article_arrow02.png) right center no-repeat;} .article_next em:after{ right:auto; left:0;} .article_next:hover em:before{ background-position: left center;} .back_list02{ width:20%; text-align: center; height:30px; color:transparent; position: relative;} .back_list02:before{ content:""; position: absolute; top:50%; left:50%; width: 20px; height:20px; margin: -10px 0 0 -10px; background: url(../images/article_ico01a.png) no-repeat;} .back_list02:hover:before{ background-image: url(../images/article_ico01b.png);} .article_handle a.article_btn:hover{ color:#096bb5;} .article_handle a.article_btn:hover em:after{ background-color: #096bb5;} /*.video_area{ max-width:810px; height: 450px; margin: 0 auto;} */ .video_area iframe{ display:block; width:100%; max-width:810px; height: 450px; margin: 0 auto;} /*case_list*/ .case_list{ margin: -15px; overflow: hidden;} .case_list li{ width:25%; float:left; padding:15px;} .case_list li a{ display:block; border:1px solid #e5e5e5; border-radius: 8px;text-align:center; position: relative; top:0; padding:20px; /*height:440px;*/} .case_img{ overflow:hidden; margin-bottom: 30px;} .case_img img{ display:block; width:100%;} .case_item{ margin-bottom: 10px;} .case_overview, .case_xq{ opacity:.80;} .case_overview{ text-align:justify; line-height:24px; height: 72px; overflow: hidden; margin-bottom: 30px;} .case_xq{ display:inline-block; position: relative; padding-top: 10px;} .case_xq:before{ content:""; position:absolute; top:0; left:50%; width:26px; height: 2px; background: #096bb5; margin-left: -13px;} .case_list li a:hover{ top:-15px; border-color:#f2f2f2; box-shadow:0 0 30px 0 rgba(0,0,0,.10);} .case_list li a:hover .case_xq:before{ left:0; margin:0; width:100%;} /*coverage_list*/ .coverage_list{ margin: -20px 0; overflow: hidden;} .coverage_list li{ padding: 20px 0;} .coverage_list li a{ display:block; border-radius: 8px; border:1px solid #e5e5e5; overflow: hidden; padding: 30px;} .coverage_img{ display:block; float:left; overflow: hidden; border-radius: 8px; width:435px; height: 243px; margin-right: 40px;} .coverage_img img{ display:block; width:100%; height:100%;} .coverage_mation{ overflow:hidden; padding-top: 10px;} .coverage_mation h5{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} .coverage_date{ color: #999; padding-left:20px; background: url(../images/dec_08.png) left center no-repeat; margin:10px 0 20px;} .coverage_overview{ color: #666; max-width:830px; max-height: 78px; overflow: hidden;} .coverage_xq{ max-width:830px; text-align: right;} .coverage_xq span{ display:inline-block; font-size: 0; width:65px; height: 65px; position: relative;} .coverage_xq span:before{ content:""; position:absolute; top:0; left:0; width:100%; height: 100%; border-radius:50%; background: #fff; opacity:0; transform:scale(.6);} .coverage_xq span:after{ content:""; position:absolute; top:50%; left:50%; z-index: 1; width:20px; height: 20px; margin: -10px 0 0 -10px; background: url(../images/dec_09.png) right center no-repeat;} .coverage_list li a:hover{ border-color:#f2f2f2; box-shadow:0 4px 30px 0 rgba(0,0,0,.10); color: #096bb5;} .coverage_list li a:hover .coverage_xq span:before{ opacity:2; transform:scale(1); background-color: #096bb5;} .coverage_list li a:hover .coverage_xq span:after{ background-position:left center;} /*about_nav*/ .about_nav{ margin:0px auto;} .nav_list{ border-bottom: 1px solid #e5e5e5;} .nav_list li{ float:left;} .nav_list li a{ display:block; position: relative; color: #757575; line-height: 30px; padding: 0 15px 20px;} .nav_list li a:before{ content:""; position:absolute; bottom:-1px; left:50%; width:0; height:1px; background:#096bb5;} .nav_list li:hover a, .nav_list li.active a{ color: #096bb5;} .nav_list li.active a:before{ left:0; width:100%;} /*intro*/ .intro{} .intro_l{ width:50%; float: left;} .intro_r{ width:50%; float: left; padding-left: 4%; padding-top: 9%; color: #333;} .intro_info{ width:100%; max-width:610px; float: right;} .intro_tit{ margin-bottom: 40px;} .intro_tit span{ display:block; margin-top: 10px;} .intro_des{ line-height:22px; max-height: 154px; overflow: hidden; margin-bottom:10%;} .intro_more{ display:inline-block; width:182px; line-height:48px; border-radius:24px; text-align: center; background:#096bb5; position:relative; color: #fff;} .intro_more i{ position:relative; display:inline-block; padding-right: 14px; background:url(../images/dec_06.png) right center no-repeat;} .intro_more:hover{ background:#00b7d7; } /*development*/ .development{ background: url(../images/development_01.jpg) center center no-repeat; background-size:cover;} .about_tit{ position:relative; padding-bottom: 20px; color: #333; margin-bottom:40px;} .about_tit:before{ content:""; position:absolute; bottom: 0; left:0; width:50px; height:3px; background:#096bb5;} .development .about_tit{ position: absolute; z-index: 2;} .develop_scr{ padding-top: 120px;} .develop_scr .item{ background: #fff; border-radius:8px; padding: 15px;} .develop_block{ border:1px solid #e5e5e5; border-radius:8px; height: 246px; padding: 35px 35px 0;} .develop_date{ color: #333; padding-bottom:15px; border-bottom: 1px dashed #e5e5e5; margin-bottom: 15px;} .develop_date span{ display:inline-block; padding-left:40px; background:url(../images/ico_date.png) left center no-repeat;} .develop_des{ line-height:28px; height: 84px; overflow: hidden;} .develop_block .case_more{ display:inline-block;} .develop_scr .owl-nav{ position:absolute; top:35px; right:-25px;} .develop_scr .owl-nav a{ display:inline-block;position:relative; padding:0 25px!important;} .develop_scr .owl-nav a span{ font-size:0; display:block; width:28px; height:28px; background: url(../images/arrow_04.png) right center no-repeat;} .develop_scr .owl-nav a.owl-prev:hover span, .develop_scr .owl-nav a.owl-prev.disabled span{ background-position:left center;} .develop_scr .owl-nav a.owl-next span{background-image: url(../images/arrow_04b.png); background-position:right center;} .develop_scr .owl-nav a.owl-next:before{ content:""; position:absolute; top:50%; left:0; width:1px; height: 22px; margin-top:-11px; background:#a7a7a7;} .develop_scr .owl-nav a.owl-next:hover span, .develop_scr .owl-nav a.owl-next.disabled{ background-position:left center;} /* timeline */ #timeline, #issues, #issues li{ height:400px; overflow:hidden;} #timeline{ position:relative;} .dates_box{ float:right; text-align:center; overflow: hidden; height:330px; margin-left: 4%;} .dates_box,#next,#prev{ width:140px;} #dates{} #dates li a{ display:block; height:90px; font-size: 30px; color: rgba(0,0,0,.30); line-height:0.9;} #dates li a em{ display:block; text-transform: uppercase; font-size: 12px; line-height: 1; opacity: 0; height:0; overflow: hidden; transition: all 0.5s ease-in-out;} #dates li a.selected{ font-size:60px; color: #096bb5;} #dates li a.selected em{ opacity: 1; height:12px;} #issues{/*width:82.14%; float:left;*/ max-width: 1150px;} #issues li{ width:100%; } #grad_top,#grad_bottom{width:500px;height:80px;position:absolute; display:none;} #next,#prev{position:absolute; right:0; font-size: 0; height:70px;background:#efefef url(../images/arrow_05_a.png) center bottom no-repeat; overflow:hidden;} #next:before,#prev:before{ content:""; position:absolute; top:0; left:50%; width:1px; height:50px; background:#a7a7a7;} #next{bottom:0; background-color: transparent; background-image: url(../images/arrow_05_b.png); background-position:center top; } #next:before{ top:20px;} #prev{top:0; } /*#next.disabled,#prev.disabled{ opacity:0.2; }*/ /*honor*/ .honor{} .gallery_con, .gallery_nav{ width:55%; height: 426px; position:relative; float:left;} .gallery_con{ width:45%;} .slideshow-container{ margin-bottom:20px;} .slideshow{ text-align:center; position:relative; width:90%; max-width: 554px;} .slideshow span.image-wrapper { display: block; position: absolute; top: 0; left: 0; } .advance-link{ display:block; border-radius: 8px; background:#f1f1f1; text-align: center; padding:25px;} .advance-link img{ vertical-align: middle;} .gallery_nav{ max-width:720px; float: right;} .gallery_nav .thumbs{ margin:-15px 0 0 -24px; width:100%; height:310px; overflow: hidden;} .gallery_nav .thumbs li{ width:33.33%; float:left; padding: 15px 0 0 24px;} .gallery_nav .thumbs li a.thumb{ display:block; overflow: hidden; height:140px; background: #f1f1f1; position:relative;} .gallery_nav .thumbs li a.thumb img{ display:block; margin: 0 auto; width:auto; max-height: 100%;} .gallery_nav .thumbs li a.thumb:before{ content:""; position: absolute; top:0; left:0; width:100%; height: 100%; background:rgba(0,0,0,.60) url(../images/ico_search.png) center center no-repeat; background-size:28px; transform:scale(1.1); opacity: 0;} .gallery_nav .thumbs li.selected a.thumb:before{ transform:scale(1); opacity: 1; } .nav-controls{ position:absolute; bottom: 0; right:0; z-index: 2; width: 55%; max-width: 720px;} .nav-controls a{ font-size: 0; margin-right: 5px; border-radius: 5px; display:inline-block; vertical-align: middle; width:96px; height: 72px; background: #f8f8f8; position: relative; } .nav-controls a:hover{ background-color:#f3f3f3;} .nav-controls a:before{ content:""; position:absolute; top:0; left:50%; width:16px; height:100%; margin-left: -8px;} .nav-controls a.prev:before{ background: url(../images/arrow_06_a.png) left center no-repeat;} .nav-controls a.next:before{ background: url(../images/arrow_06_b.png) left center no-repeat;} .caption-container .current .img_tit{ animation: 1s .2s fadeInUp both;} /*intro_detail*/ .intro_detail{} .detail_con{ max-width:1240px; margin: 0 auto; padding-top: 5%;} .detail_con .about_tit{ text-align:center;} .detail_con h3{font-size:20px; color:#154a9a; margin-bottom:16px;} .detail_con p{ line-height:30px; color:#444; margin-bottom:16px;} .detail_con .about_tit:before{ left:50%; margin-left:-25px;} /*join_warp*/ .main_join{ padding-top:0;} .join_warp{ padding: 4% 0; background:#f8f8f8;} .join{ padding-top: 40px;} .join_focus{ overflow: hidden;} .join_focus img{ display:block;} .join_l{ width:49%; float: left; padding-right:5%; padding-top:5.5%;} .join_l .about_tit{ color: #096bb5;} .join_l .about_tit:before{ width:56px; height: 1px;} .join_forewords{ line-height:2.3; color:#757575;} .join_r{ overflow:hidden; padding-right: 40px; position: relative; margin-top: -70px;} .join_tit, .join_list li{ margin-bottom:10px;} .join_tit, .join_list li a{ display:block; line-height: 70px; height: 70px; border-radius: 5px; background: #fff; overflow: hidden; padding:0 6% 0 10%;} .join_tit span{ display:block; padding-left:40px; background:url(../images/dec_10.png) left center no-repeat; color: #333;} .join_list li a{ color:#666;} .join_ico{ display:block; float: right; width:16px; height:16px; margin-top:27px; background: url(../images/dec_11a.png) no-repeat; transition: all 0.5s ease-in-out;} .join_list li a span{ display:block; overflow: hidden;} .join_list li:hover a{ background-color:#096bb5; color: #fff;} .join_list li:hover a .join_ico{ transform:rotate(90deg); background-image: url(../images/dec_11b.png);} /*join_detail*/ .join_detail{ width:100%; } .join_detail{ height:100%; overflow: hidden; padding:6% 0;} .detail_area{ padding:0 10%;} .join_detail .mCSB_scrollTools, .join_detail .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .join_detail .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{ width:6px; border-radius:8px;} .join_item{ color:#000; margin-bottom:20px;} .join_base{ margin-bottom:30px;} .join_base li{ width:33.33%; float:left; line-height: 24px; margin-bottom: 5px;} .join_info{ margin:0 -5% 6%; padding:5%; background: #f8f8f8; border-radius: 8px;} .join_apply{} .apply_way{ line-height: 1.4; color:#096bb5;} .apply_way a{ color:#096bb5; font-weight: normal; text-decoration:underline;} /*join_page*/ .join_page{ text-align:center; line-height: 40px; padding:15px 0; border-radius: 5px; background: #fff;} .j_p_prev, .j_p_next{ display:inline-block; vertical-align: middle;} .j_p_prev, .j_p_next{ font-size: 0; margin:0 50px; width:40px; height:40px; background:url(../images/arrow_10_a.png) center center no-repeat; background-size:contain; opacity: .50;} .j_p_next{ background-image: url(../images/arrow_10_b.png); opacity: .20;} .j_p_prev:hover{ opacity: 1;} .j_p_next:hover{ opacity: 1;} .join_page a.active{ color:#096bb5;} /*contact_warp*/ .contact_warp{ } .contact_forewords{ padding:4% 0; border-bottom:1px dashed #e5e5e5;} .contact_forewords dt, .way_HQ{ width:44%; float: left; padding-right: 4%;} .forewords_con, .other_box{ max-width:760px;/* float: right;*/} .contact_forewords dt img, .HQ_block{ display:block; width:100%; max-width: 510px;} .contact_forewords dd{ overflow:hidden;} .contact_tit02{ margin-bottom: 30px;} .contact_tit02:before{ width:36px; height: 1px;} .contact_way{ padding:4% 0;} .way_HQ{ } .HQ_block{ border-right:1px solid #e5e5e5; padding-right: 5%;} .way_info{ } .way_info li{ overflow:hidden; line-height: 24px; margin-bottom:12px;} .way_info li img{ display:block; float: left; width:26px; height: 26px; margin-right: 14px; opacity: .50;} .way_info li p{ overflow:hidden;} .way_other{ height: 300px; overflow: hidden;} .way_other .mCSB_inside > .mCSB_container{ margin-right:10px;} .other_list{ overflow: hidden; margin:-10px;} .other_list li.li_item0{ width:50%; float: left; padding: 10px; text-align:left;} .other_block{ display:block; height:150px; color: #666;} .other_block h6{ margin-bottom:15px;transition: all 0.5s ease-in-out;} .other_block .contact_txt li{ margin-bottom:6px;} .other_block:hover h6{color:#096bb5;} /*contact_map*/ .map_scr, .load{ height: 486px; overflow: hidden;} .contact_map{ width:100%;height: 400px; float: left; } .map_scr{ border-radius:8px; overflow: hidden; position:relative;} .map_show, .map_show .owl-stage-outer,.map_show .owl-stage,.map_show .owl-item , .map_show .item{ height:100%; } .map_thumbs{ position:absolute; bottom: 0; left:0; z-index: 1; background:rgba(0,0,0,.20); padding:25px 70px;} .map_thumbs .item a{ cursor: pointer; display:block; text-align:center; border-radius:8px; background: rgba(255,255,255,.90); color:#666; line-height: 44px;} .map_thumbs .owl-item:hover .item a, .map_thumbs .current .item a{ background:#096bb5; color: #fff;} .map_thumbs .owl-nav a{ display:block; position:absolute; top:0; left:26px; width:22px; height: 100%; background:url(../images/arrow_11_a.png) right center no-repeat;} .map_thumbs .owl-nav a span{ display:none;} .map_thumbs .owl-nav a.owl-prev:hover, .map_thumbs .owl-nav a.owl-prev.disabled{ background-position:left center;} .map_thumbs .owl-nav a.owl-next{ left:auto; right:26px; background-image:url(../images/arrow_11_b.png); background-position:right center;} .map_thumbs .owl-nav a.owl-next:hover, .map_thumbs .owl-nav a.owl-next.disabled{ background-position:left center;} /*load*/ .load{ border-radius:8px; background:#f5f6f6; text-align:center; padding:60px 15px 0;} .load_tit{ position: relative; padding-bottom:15px; margin-bottom: 30px;} .load_tit:before{ content:""; position:absolute; bottom: 0; left:50%; margin-left:-14px; width:28px; height: 1px; background:#096bb5;} .load_img{ display:inline-block; position: relative; margin-bottom: 30px;} .load_img:before{ content:""; position: absolute; bottom:-5px; left:-2px; width:100%; height: 100%; border-radius:8px; background:#e5e5e5;} .load_img a img{ position: relative; display:block; border-radius:8px;} /*load_scr*/ #load_scr{ margin-bottom: 30px; text-align:center;} /*#load_scr .item a{ display:inline-block; position: relative;} #load_scr .item a:before{ content:""; position: absolute; bottom:-5px; left:-2px; width:100%; height: 100%; border-radius:8px; background:#e5e5e5;} #load_scr .item a img{ position: relative; display:block; border-radius:8px;}*/ #load_scr .owl-nav a{ width:20px; height:40px; position:absolute; top:50%; left:0; margin-top: -40px; background:url(../images/arrow_08.png) left top no-repeat; background-size:40px;} #load_scr .owl-nav a span{ font-size:0;} #load_scr .owl-nav a.owl-prev:hover, #load_scr .owl-nav a.owl-prev.disabled{ background-position:right top;} #load_scr .owl-nav a.owl-next{ left:auto; right:0; background-position:right bottom;} #load_scr .owl-nav a.owl-next:hover, #load_scr .owl-nav a.owl-next.disabled{ background-position:left bottom;} .load_link{ display:block; margin: 0 auto; width:100%; max-width: 218px; line-height: 44px; border-radius: 8px; background:#096bb5; color: #fff;} .load_link span{ display:inline-block; background: url(../images/ico_load.png) left center no-repeat; padding-left: 26px;} .load_link:hover{ background:#00b7d7;} /*result_list*/ .search_box02{ border:1px solid #e5e5e5; border-radius: 8px; box-shadow:0 3px 20px -3px rgba(0,0,0,.10); margin-bottom: 40px;} .search_btn02{ float:right; cursor:pointer; border-radius:8px; background:#096bb5; color: #fff; width:170px; height: 75px;} .search_fill02{ overflow:hidden;} .search_txt02{ width:100%; height:75px; padding:20px 20px 20px 90px; background: url(../images/ico_search02.png) 30px center no-repeat;} .result_box{ } .result_list{ margin: 0 -40px;} .result_list li{ width:50%; float: left; padding:30px 40px;} .result_list .dec_line{ width:100%; clear:both; padding: 0; height:80px; position: relative;} .result_list .dec_line:before{ content:""; position:absolute; top:50%; left:0; width:100%; height: 1px; background: #e5e5e5;} .result_list li a{ display:block; border-radius:8px; height: 160px; padding: 10px;} .result_block{ width:100%; max-width: 520px;} .result_date i{ font-size: 16px; margin-right: 10px;} .result_tit{ margin:20px 0 15px; position:relative; transition: all 0.5s ease-in-out;} .result_tit:before{ content:""; position:absolute; top:50%; left:0; width:0; height: 1px; background: #096bb5;} .result_des{ opacity:.80; line-height:26px; max-height:52px; overflow: hidden;} .result_list li:hover a{ box-shadow:0 0 20px -2px rgba(0,0,0,.15);} .result_list li:hover a .result_tit{ padding-left:60px; color: #096bb5;} .result_list li:hover a .result_tit:before{ width:50px;} /*empty*/ .empty{ padding:6% 0 5%; text-align: center; font-size: 18px; line-height: 2; color: #333;} .empty_img{ display:inline-block; margin-bottom: 20px; max-width: 50%;} /*font*/ .f56{ font-size:56px;} .f52{ font-size:52px;} .f48{ font-size:48px;} .f42{ font-size:42px;} .f36{ font-size:36px;} .f32{ font-size:32px;} .f30{ font-size:30px;} .f28{ font-size:28px;} .f26{ font-size:26px;} .f24{ font-size:24px;} .f22{ font-size:22px;} .f20{ font-size:20px;} .f18{ font-size:18px;} .f16{ font-size:16px;} @media (max-width:1440px){ .inner{ width:1100px;} /*font*/ .f56{ font-size:50px;} .f52{ font-size:46px;} .f48{ font-size:42px;} .f42{ font-size:36px;} .f36{ font-size:30px;} .f32{ font-size:28px;} .f30{ font-size:26px;} .f28{ font-size:24px;} .f26{ font-size:22px;} .f24{ font-size:20px;} .f22{ font-size:18px;} .f20{ font-size:18px;} .f18{ font-size:16px;} .f16{ font-size:14px;} .menu_list a.a_item0{ font-size:32px;} .subclass a{ font-size:18px;} /*index*/ .p_rec_info{ bottom:8%; right:2%;} .product_rec li.p_rec02 .p_rec_info{ right:12%;} .case_block{ padding-top:40px; height:340px;} .contact_info, .contact_r{ padding:20px 30px;} .partners_block a{ height:140px;} .slide_text h3{ margin-bottom:15px; font-size:52px;} .slide_text p{ margin-bottom:25px; font-size:20px;} .coverage_pic{ height:200px;} /*02*/ .product_list{ margin:-15px;} .product_list li{ padding:15px;} .article_top, .article_tit{ line-height:40px;} } @media (max-width:1279px){ .inner{ width:100%; max-width: 1024px; padding-left:15px; padding-right: 15px;} /*font*/ .f56{ font-size:44px;} .f52{ font-size:40px;} .f48{ font-size:36px;} .f42{ font-size:32px;} .f36{ font-size:26px;} .f32{ font-size:24px;} .f30{ font-size:22px;} .f28{ font-size:20px;} .f26{ font-size:18px;} .f24{ font-size:18px;} .f22{ font-size:16px;} .f20{ font-size:16px;} .f18{ font-size:14px;} .f16{ font-size:14px;} /*header*/ header, .menu_top{ padding:30px 0;} /*index*/ .focus_warp{ height:500px;} .slide .owl-nav a{ width:30px; height: 60px; margin-top: -30px; background-size:60px;} .product_rec li.p_rec02{ width:33.996%;} .coverage .bgImg{ background-attachment: inherit;} .coverage_tit, .coverage_des{ line-height: 22px; max-height:44px;} .coverage_tit{ margin-bottom:10px;} .coverage_info{ height:190px;} .coverage:before{ height:180px;} #coverage_scr .owl-nav a{ display:inline-block; margin: 0 5px;} .coverage_more{ width:50px; height: 50px; margin-left: -25px;} .contact_line{ padding:13px 0;} .partners_block a{ height:100px;} .banner_warp{ height:450px;} #canvas01_box, #canvas02_box{ display:none;} /*05*/ .gallery_con, .gallery_nav{ height:326px;} .gallery_nav .thumbs{ margin:-10px 0 0 -10px; height: 250px;} .gallery_nav .thumbs li{ padding:10px 0 0 10px;} .gallery_nav .thumbs li a.thumb{ height:110px;} /*06*/ .search_btn02{ width:125px; height: 55px;} .search_txt02{ height: 55px; padding: 15px 15px 15px 50px; background-size: 20px; background-position: 15px center;} .result_list{ margin:0 -20px;} .result_list li{ padding:20px;} .result_list .dec_line{ height:40px;} .article_top, .article_tit{ line-height:36px;} .tan_closed{ width:60px; line-height: 60px; background-size: 20px;} .search_txt{ font-size:18px;} .search_btn{ background-size:30px;} } @media (max-width:991px){ /*header*/ header, .menu_top{ padding:10px 0;} header{ position:fixed; background:rgba(191,191,191,.60);} .logo a img{ height:40px;} .focus_warp, .banner_warp{ margin-top:60px;} .menu_list a.a_item0{ font-size:24px; margin-bottom: 10px;} .subclass a{ font-size:16px;} /*footer*/ footer{ padding:30px 0; text-align:center; border-width:8px;} .footer_l, .footer_r{ width:100%; float: none;} .footer_logo{ margin:0 auto;} .footer_nav{ margin:20px -10px 10px;} .footer_nav a{ padding: 0 10px;} /*index*/ .slide .owl-nav{ display:none;} .product_rec{ margin:-10px -5px;} .product_rec li:nth-child(n){ float: left; margin: 0; width:50%; padding:10px 5px;} .product_rec li:nth-child(n) a{ max-width:320px; height: 300px; margin: 0 auto;} .product_rec li:nth-child(n) a .bgImg img{ display:none;} .product_rec li a:hover{ top:-5px;} .case_rec{ margin:-5px;} .case_rec li{ padding:5px;} .cover_hide{ top:5px; left:5px; width: -webkit-calc(100% - 10px); width: calc(100% - 10px); height: -webkit-calc(100% - 10px); height: calc(100% - 10px); } .case_ico, .case_ico img{ width:60px; height: 60px;} .case_ico, .case_des{ margin-bottom:20px;} .case_block{ padding-top:30px; height: 270px;} .case_rec li a:hover .case_ico02{ top:-60px;} .case_rec li a:hover .case_txt{ top:-80px;} .contact_l{ width:100%; float: none; margin-right: 0; margin-bottom: 15px;} .contact_r{ height:auto;} #partners_scr .item{ margin:-5px;} .partners_block{ padding:5px;} .p_rec_more{ width:92px; line-height: 28px; font-size: 12px;} /*02*/ .banner_warp{ height:225px;} .common_l, .common_r{ padding: 20px;} .form_message02 .m_submit{ right:20px;} .contact_tab{ width:65px;} .p_f_img{ width:100%; float:none; text-align:center;} .p_f_img img{ display:inline-block; left:0;} .product_list{ margin:20px -5px 0px -5px;} .product_list li{ padding:5px;} .case_list{ margin:-5px;} .case_list li{ padding:5px;} .case_list li a{ padding:10px;} .coverage_list{ margin:-15px 0;} .coverage_list li{ padding:15px 0;} .coverage_list li a{ padding:15px;} .coverage_img{ margin-right:20px;} .intro_l{ width:100%; float: none; text-align:center; margin-bottom: 30px;} .intro_r{ padding:0; width:100%; float: none;} .intro_info{ max-width:100%; float: none;} .intro_tit{ margin-bottom:20px;} .intro_des{ margin-bottom:30px;} .intro_more{ width:122px; line-height: 36px;} /*05*/ .dates_box, #next, #prev{ width:100px;} #dates li a{ font-size: 20px;} #dates li a.selected{ font-size:40px;} .develop_scr{ padding-top:90px;} .develop_scr .item{ padding:10px;} .develop_block{ height: 236px; padding:20px 20px 0;} .develop_scr .owl-nav{ position: inherit; position: initial; margin-top: 30px;} .develop_scr .owl-nav a{ padding:0 10px!important;} .nav-controls a{ width:70px; height: 52px;} .nav-controls a:before{ width:12px; margin-left: -6px;} .nav-controls a.prev:before, .nav-controls a.next:before{ background-size: 24px; } .gallery_nav .thumbs li a.thumb:before{ background-size: 18px;} .other_list li.li_item0{ width:100%; float: none;} .other_block{ height:auto;} .other_box{ float: none;} } @media (max-width:767px){ /*font*/ .f56{ font-size:34px;} .f52{ font-size:30px;} .f48{ font-size:24px;} .f42{ font-size:22px;} .f36{ font-size:20px;} .f32{ font-size:18px;} .f30{ font-size:18px;} .f28{ font-size:16px;} .f26{ font-size:16px;} .f24{ font-size:16px;} .f22{ font-size:16px;} .f20{ font-size:16px;} .f18{ font-size:14px;} .f16{ font-size:12px;} body,html,button, input, textarea, select{ font-size:12px;} /*index*/ .focus_warp{ height:300px;} .ico_video{ width:18%; margin:-2.6% 0 0 -9.2%; } .slide_text{ top:20%;} .slide_text h3{ font-size:32px; } .slide_text h3 img{ width:10px; height: 10px; margin: 0 6px; display:none;} .slide_text p{ font-size: 14px; letter-spacing: 0;} .case_rec li{ width:50%;} .contact_l{ position:relative;} .contact_info, .contact_r{ padding:15px;} .map_spread{ width:100%; max-width:none;} .contact_info{ position:absolute; top:0; left:0; width:100%; height: 100%; background: rgba(255,255,255,.70);} .partners_block a{ height:60px;} .coverage_img{ width:100%; height:auto; float: none; margin: 0;} .coverage_xq{ display:none;} .coverage_pic{ height:120px;} .product_rec li:nth-child(n) a{ height:auto;} .product_rec li:nth-child(n) a .bgImg{ height:180px; margin-bottom: 10px; background-position: center top; } .product_rec li.p_rec01 .p_rec_info, .product_rec li.p_rec02 .p_rec_info, .product_rec li.p_rec03 .p_rec_info, .product_rec li.p_rec04 .p_rec_info{ position:inherit; position: initial; text-align:center;} .product_rec li:nth-child(n) a .p_rec_info .p_rec_des{ margin-bottom:10px;} /*02*/ .nav_list li{ margin-right: 15px;} .nav_list li a{ padding:0 10px 10px;} .common_l, .common_r{ width:100%; height: 100%;} .product_list li{ width:50%;} .case_list li{ width:50%;} /*05*/ .gallery_con, .gallery_nav{ width:100%; float: none; max-width:none; height: auto;} .gallery_nav ,.gallery_nav .thumbs{ height:160px; overflow: hidden;} .slideshow{ width:100%; margin:0 auto;} .advance-link{ padding:15px;} .gallery_con{ margin-bottom:20px;} .gallery_nav .thumbs li a.thumb{ height:70px;} .nav-controls{ position:inherit; width:100%; max-width: none; text-align: center; margin-top: 20px;} .join_l{ width:100%; float: none; padding-right: 0;} .join_r{ padding-right: 0; margin-top:30px;} .join_tit, .join_list li a{ height:50px; line-height: 50px;} .join_ico{ margin-top:17px;} .contact_forewords dt, .way_HQ{ width:100%; float: none; padding: 0; margin-bottom: 20px;} .contact_forewords dt img, .HQ_block{ margin:0 auto;} .HQ_block{ max-width:none; padding: 0 0 20px; border-right:none; border-bottom:1px solid #e5e5e5;} .contact_map{ width:100%; float: none; margin:0 0 20px;} .map_scr{ height: 320px;} .load{ height:auto; padding:30px 15px;} .map_scr .owl-item .bgImg img{ display:block;} .map_thumbs .owl-nav a.owl-prev{ left:0;} .map_thumbs .owl-nav a.owl-next{ right:0;} .map_thumbs{ padding:10px 32px;} /*06*/ .result_list{ margin:-10px;} .result_list li{ width:100%; float:none; padding:10px;} .empty{ font-size:16px;} .article_top, .article_tit{ line-height:30px;} .article_handle{ line-height:22px; padding: 15px;} .article_btn, .back_list02{ width:100%; float: none;} .back_list02{ margin:10px 0;} .article_info{ margin-top:0;} .back_list{ padding-right:20px; background-size:15px;} .video_area iframe{ height: 250px;} } @media (max-width:640px){ .detail_area{ padding:20px;} .join_base li{ width:50%;} .x_contactlist{ overflow:hidden; width:100%; } .x_contactlist ul{ overflow:hidden; width:100%; } .x_contactlist ul li{ overflow:hidden; width:80%; margin:0 10% 5% 10%; float:left; padding:2% 0; border:1px solid #ddd; box-shadow:0px 0px 8px #ccc; text-align:center; } .x_contactlist ul li h3{ font-size:18px; } .x_contactlist ul li img{ margin:2% 0; } .x_contactlist ul li p{ font-size:14px; } } @media (max-width:375px){ .product_rec li:nth-child(n) a .bgImg{ height:160px;} } @media (max-width:359px){ /*header*/ .ico_lang, .ico_search, .ico_box{ padding:0 5px;} .ico_box{ padding:0 0 0 15px; margin-left: 5px;} .product_rec li:nth-child(n) a .bgImg{ height:140px;} .m_line{ width:100%;} } .product_rec li.p_rec03 .p_rec_info{ right:0; width:100%;} .coverage, .honor{ padding-bottom:0;} .m_yu, .form_message02 .m_yu{ height:90px; resize:none;} .slide_text h3,.slide_text p, .title01, .banner_tit, .p_f_tit, .common_tit, .contact_tab, .article_tit, .article_caption, .about_tit, .intro_tit, .develop_date{ font-family:'Microsoft Jhenghei', '微軟正黑體';} /*css控制单行显示*/ aa{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} a,*:before,*:after,input[type="submit"], input[type="reset"], input[type="button"],sup,.owl-carousel .owl-nav a span,.owl-carousel .owl-dots .owl-dot, header, .ico_menu i{ /*-webkit-transition:all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out;*/ transition: all 0.5s ease-in-out; } /*图片由小变大*/ .case_img img, .coverage_pic img{ transition: transform 4s cubic-bezier(.23, 1, .32, 1); transform: scale(1); } .case_list li a:hover .case_img img, .coverage_list li a:hover .coverage_pic img{ transform: scale(1.1); } /*图片横向*/ .aa{ display: block; max-width: none; width: -webkit-calc(100% + 10px); width: calc(100% + 10px); -webkit-transition: opacity 0.60s, -webkit-transform 0.60s; transition: opacity 0.60s, transform 0.60s; -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } .aa{ opacity: 1.0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /*图片纵向*/ aa{ display: block; /* max-width: none;*/ height: -webkit-calc(100% + 10px); height: calc(100% + 10px); -webkit-transition: opacity 0.60s, -webkit-transform 0.60s; transition: opacity 0.60s, transform 0.60s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } aa{ opacity: 1.0; -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); }