@charset "utf-8";
/* CSS Document */

/********reset********/
html, body, div, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, from, input, img, select, button, textarea, iframe, frameset, table, th, tr, td, fieldset { margin: 0; padding: 0; }
/********body********/
* { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
body { font-size: 14px; font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif; color: #0073c0; }
div { vertical-align: top; }
i, em, cite { font-style: normal; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
a { text-decoration: none; color: #666; }
a:hover { color: #333; }
ul, li { list-style: none; display: block; }
img { border: 0 none; max-width: 100% }
img { vertical-align: middle; }
/*h1{font-size:30px; line-height:1.1}
h2{font-size:28px; line-height:1.1}
h3{font-size:24px; line-height:1.1}
h4{font-size:22px; line-height:1.1}
h5{font-size:18px; line-height:1.1}
h6{font-size:14px; line-height:1.1}*/
h1 { font-size: 24px }
h2 { font-size: 24px }
input { -webkit-appearance: none; }
/********base********/
.flex { margin: 0 auto; width: 1200px; }
.clear { clear: both; }
.none { display: none }
.hide { display: none; }
.btn{background:none; border: 1px solid #0078D7; color:#0078D7;display:inline-block; border-radius:4px;  padding: 12px 32px;}
.btn:hover{background:  #0078D7; color: #fff;border: 1px solid #0078D7;}
/*.lazy img{display: none;}*/
.phoneshow{ display:none}
.phonehide{display: block;}

/*index head-box*/
.head-box { background: rgba(0,0,0,.8);/* */ position: fixed; top: 0; left: 0; width: 100%; z-index: 9 }
.head-icon { width: 100%; border-bottom: 1px solid #E6E6E6; }
.head-icon .tel { padding: 10px 0; float: right; font-size: 20px }
.head-icon .tel li { float: left; margin-left: 16px; }
.head-icon .tel li a { padding: 5px; color: #ccc; display: block }
.head-icon .tel li a:hover { color: #0073c0 }
.head-icon .search-box { padding: 10px 0; float: right; font-size: 20px; border-right: 1px solid #ccc; padding-right: 20px }
.head-icon.hide { display: block }
input:focus { outline: none }
.search-keyword { border: 1px solid #ccc; border-radius: 0; box-shadow: none; height: 30px; vertical-align: top; padding: 0 6px }
.search-submit { width: 30px; height: 30px; border-radius: 0; line-height: 30px; background: #ccc; color: #fff; border: none; vertical-align: top; }
.search-submit:hover { background: #0073c0 }
.head-icon .iconfont { font-size: 20px; }
.head-nav { height: 80px; line-height: 80px }
.logo { display: inline-block }
.logo a { display: block; }
.logo a img { }
.hottel { float: right; }
.lang { float: right; color: #fff; font-size: 14px; }
.lang a { color: #fff; display: inline-block }
.lang a:hover { color: #0078D7 }
.menu {  float: right;display: inline-block; margin-left: 40px }
.navbtn { display: none }
.nav {}
.nav.hide { display: block }
.nav li { display: inline-block }
.nav li a { color: #fff; font-size: 16px; padding: 0 20px; line-height: 48px }
.nav li:hover { background: rgba(0,120,215,.7)}
.nav li div.subnav { display: none; position: absolute; z-index: 9; background: rgba(0,0,0,.5); transition: height 0s; -moz-transition: height 0s; /* Firefox 4 */ -webkit-transition: height 0s; /* Safari and Chrome */ -o-transition: height 0s; /* Opera */ }
.nav li div.subnav ul { padding-bottom: 12px }
.nav li:hover ul { text-align: center; background: rgba(0, 0, 0.5) }
.nav li:hover ul li { background: none; display: block }
.nav li ul li.subnavpic { height: 60px; width: 177px; margin-right: 32px; display: none }
.nav li:hover ul li a { display: block; line-height: 60px; font-size: 16px; color: #eee; text-align: center }
.nav li:hover ul li a span { vertical-align: middle; }
.nav li:hover ul li a i { font-size: 20px; margin-right: 6px; vertical-align: middle; }
.nav li:hover ul li a:hover { background: rgba(0,120,215,.7)}
.nav li:hover div.subnav { display: block }
.nav li .iconfont { font-size: 14px; margin-left: 5px; }

/* banner */
.slide { overflow: hidden; background: #ccc; }
.index-box{background-position: center center;color: #333;background-size:cover;padding: 100px 0 160px;text-align: center }
.index-box h2{line-height: 2}
.index-box h3{color: #999;line-height: 2; font-size: 16px}
.index-box .info{margin: 40px auto;}
.index-about { background-image: url(../images/bg1.jpg);}
.index-about .info { width:720px; font-size: 14px; color: #666; text-align:left;line-height: 2;}

.index-server { background-image: url(../images/bg2.jpg);}
.index-server  h2 {color: #fff;}
.index-server  h3 { color: #ccc;}
.index-server .info { margin: 120px auto 120px}
.index-server .info ul{}
.index-server .info ul li{display: inline-block;width: 20%; text-align: center}
.index-server .info ul li a{}
.index-server .info ul li a i{ display: block; margin: 0 auto;width: 100px; height: 100px;text-align: center; line-height: 100px; border: 2px solid #fff; border-radius: 50%; color: #fff; font-size: 48px; }
.index-server .info ul li a span{ display: block;font-size: 16px; padding: 30px 0;color: #fff;}
.index-server .info ul li a:hover i{background: rgba(0,120,215,1); border: 2px solid rgba(0,120,215,1);}

.index-news {background: #eee;}
.index-news .info {}
.index-news ul li { display:inline-block; vertical-align: top;width: 32%; margin-left: 2% }
.index-news ul li:first-child{margin-left: 0;}
.index-news ul li img {}
.index-news ul li a { border: 1px solid #ccc; display: block; padding: 12px; background: #fff;}
.index-news ul li a:hover { box-shadow: 3px 3px 12px 1px  #999}
.index-news ul li div {text-align: left;font-size: 16px;line-height: 2; height: 64px; overflow: hidden}
.index-news ul li span {display: block; color: #999; text-align: right;line-height: 2;}

.index-pic {background: #fff; position: relative}
.index-pic .info{}
.index-pic .swiper-container { margin: 0 auto; position: relative; padding: 12px 0}
.index-pic .swiper-wrapper, .index-pic .swiper-slide { height: auto !important }
.swiper-wrapper img{max-width:none; width: 100%;}
.swiper-pagination { text-align: center; padding: 8px 0 }
.swiper-pagination-switch { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #ccc; display: inline-block; margin: 4px }
.swiper-active-switch { border: 2px solid #0073c0; }
.index-pic .swiper-container img {width: 120%;max-width: none;margin-left: -10%;}
.index-pic .swiper-container img:hover{ box-shadow: 3px 3px 6px 0px  #999}
.index-pic .arrow-left { position: absolute; left: 0; top: 40%; display: none; width: 48px; height: 48px; font-size: 24px; line-height: 48px; text-align: center; border: 1px solid #ccc; color: #ccc }
.index-pic .arrow-right { position: absolute; right: 0; top: 40%; display: none; width: 48px; height: 48px; font-size: 24px; line-height: 48px; text-align: center; border: 1px solid #ccc; color: #ccc }
.index-partner { background: #fff;display: none; }
.index-partner .info{padding: 50px 0 0px;}
.index-partner ul {border-left: 1px dotted #666; border-top: 1px dotted #666; }
.index-partner li { width: 20%; display: inline-block; padding: 1px; background: #fff; border-right: 1px dotted #666; border-bottom: 1px dotted #666; position: relative }
.index-partner li a { display: block; }
.index-partner a img { width: 100% }
.index-partner li:hover { box-shadow: 0 0 12px 0px #666; z-index: 2; }



.aboutpage { background: #787878; }
.aboutpage .banner { height: 1200px }

.aboutpage .main { margin-top: -778px; z-index: 1; position: relative; }
.aboutpage .content{ background:#fff; width:68%; padding:60px; float:right; font-size:15px; line-height:2}
.aboutpage .content h1{ color:#74AC32}
.aboutpage .content h1:before,.aboutpage .content h2:before{ display:none}


.banner { height: 700px; background-size: cover; position: relative; background-position: center center }
.branchbar{position:absolute;bottom: 0;left: 0; width: 100%;background:rgba(0,0,0,.5);}
.branchbar h2 { float: left; line-height: 32px; display: none }
.branch {line-height: 40px;color:#ccc;font-size:14px;}
.branch a { color: #ccc; font-size: 14px }
.branch span { font-size: 14px; }
.branch a:hover { color: #fff }
.bannerbox{ overflow:hidden}

.main { color: #333; padding: 60px 0 72px }
.main-left { float: left; width: 18%; }
.main-left h2 { height: 48px; font-size: 18px; height: 48px; line-height: 48px; padding: 0 12px; border-left: 4px solid #65aae1;background:#0078D7; color: #fff; }
.left-menu {}
.left-menu li {border-left: 4px solid #ccc;text-align:left;  margin-top: 4px;}
.left-menu li:hover { border-left:4px solid #65aae1}
.left-menu li.select{border-left: 4px solid #0078D7;}
.left-menu li.select a{background: #fff;}
.left-menu li.select span { color: #0073c0 }
.left-menu li a { font-size: 16px; color: #333; background: #f0f0f0; height: 44px; display: block; line-height: 44px; padding-left: 10px;  position: relative; z-index: 1 }
/*.left-menu li a:after{ content:""; display:inline-block; width:20px; height:20px; border-radius:50%; border:6px solid #8DC21F; vertical-align:top}*/
.left-menu li a:hover {}
.left-menu li a.select { color: #0073c0; }

.main-right {float: right; width: 80%; min-height: 500px;  }

.index-pic .arrow-left:hover, .index-pic .arrow-right:hover { border: 1px solid #0073c0; color: #0073c0 }
.main-right .title.imgs { text-align: left }
.main-right .title { font-size: 24px; text-align: center; color: #333; padding-bottom: 24px; border-bottom: 1px solid #ccc}
.main-right .tools { font-size: 16px; text-align: center; color: #333; padding-bottom: 16px }
.main-right .content { margin-top: 20px; min-height: 500px; font-size: 14px; line-height: 2; color: #666;  }
.content h1 { color: #333; font-size: 24px; line-height: 36px; vertical-align: middle; }
.content h2 { color: #0073c0; font-size: 24px; vertical-align: middle }
.content h3 { font-size: 18px; color: #fff; background: #0073c0; text-align: center; line-height: 1.5; border-radius: 14px }
.content hr { border: none; border-top: 1px solid #ccc }

.newslist {}
.newslist  h2 { line-height: 2}
.newslist  h3 { color: #999;line-height: 2; font-size: 16px}
.newslist ul li div {
    text-align: left;
    font-size: 16px;
    line-height: 2;
    height: 64px;
    overflow: hidden;
}
.newslist .info {padding: 50px 0 100px }
.newslist ul li { display:inline-block; vertical-align: top;width: 32%; margin-bottom: 20px; margin-left: 2% }
.newslist ul li:nth-child(3n+1){margin-left: 0;}
.newslist ul li img {}
.newslist ul li a { border: 1px solid #ccc; display: block; padding: 12px; background: #fff;}
.newslist ul li a:hover { box-shadow: 3px 3px 12px 1px  #999}

.productlist { min-height: 500px; padding:32px 0 ; }
.productlist li { margin-bottom: 20px; width: 32%; margin-left: 2%; display: inline-block; position: relative; vertical-align: bottom; }
.productlist li:nth-child(3n+1) { margin-left: 0 }
.productlist li a { display: block; background-size: cover; background-position: center center }
.productlist li a img { }
.productlist li a span { font-size: 14px; position: absolute; width: 100%; height: 30px; padding: 0 12px; line-height: 30px; left: 0; bottom: 0; color: #fff; background: rgba(0,0,0,.6); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.productlist li a:hover span { background: rgba(141, 194, 31,.6); }
.productlist li span { font-size: 12px; color: #999 }

#dx-lm-form { }
#dx-lm-form .dx-form-title { font-size: 16px; margin-bottom: 5px; }
#dx-lm-form .dx-form-input { }
#dx-lm-form ul li { margin-bottom: 15px; width: 50%; min-height: 70px; float: left; }
#dx-lm-form .dx-form-input input[type="text"], #dx-lm-form .dx-form-input select { border: 1px solid #ccc; min-width: 220px; padding: 10px; }
#dx-lm-form .dx-form-input input[type=checkbox], #dx-lm-form .dx-form-input input[type=radio] { height: 20px; width: 20px; margin-right: 5px; vertical-align: middle; }
#dx-lm-form .dx-form-input > label { margin-right: 10px; }
#dx-lm-form ul li button { background: #00579c; color: #fff; border: none; font-size: 18px; padding: 12px 46px; }

.contact .map{ width:100%; height:550px;overflow: hidden}
.contact .map iframe{ width:100% !important;height:550px }
.contact .map #dituContent{width:100% !important;}
.contact .info{}	
.contactmap .ueditor_baidumap { margin-top: 20px }

.pages { text-align: right }
.pages a, .pages span { padding: 4px 10px; }

.footmenu{background: #424242;}
	.footlogo{float: left;display:block; padding: 15px;}
.footlogo img{height: 30px;}
.copyright-box { padding: 40px 0; color: #ccc; background: #333;  line-height: 1.8;}
.contactinfo{float: left;}
.copyright { float: right;}
.copyright a { color: #999 }


.foot-icon{float: right;margin-top: 6px;text-align: center;}
	.contact-icon{display: inline-block}
	.contact-icon a{ color:#fff; padding:12px;font-size:24px; text-align: center; display: inline-block;}
	.search-box{ text-align:center}
.phonemenu { position: fixed; right: 20px; bottom: 90px; z-index:5 }
.phonemenu a { font-family: "iconfont"; font-size: 24px; padding:0; display: block; width: 48px; height: 48px; text-align: center; color: #fff; line-height: 48px; background:rgba(0,0,0,.5)  ; border: 1px solid #fff;}
.phonemenu a:hover{background: rgba(0,120,215,.5);}
.totop { position: fixed; right: 20px; bottom: 40px; z-index:5;display: none}
.totop.show{display: inline-block;}
.totop a { font-family: "iconfont"; font-size: 24px; display: block; width: 48px; height: 48px; padding:inherit; text-align: center; color: #fff; line-height: 48px; background:rgba(0,0,0,.5) ; border: 1px solid #fff; }
.totop a:hover{background:rgba(0,120,215,.5) ;}
.phonemenu{ display:none}
#think_page_trace_open{display: none;}





@media only screen and (max-width: 1420px) {
.flex { margin: 0 auto; width: 1200px; }
.banner{ height:640px}
}

@media only screen and (max-width: 1220px) {
.flex { margin: 0 auto; width: 980px; }
	.banner{ height:400px}
	.head-nav{line-height:60px; height: 60px}	
	.logo a img{height: 30px;display: block;}
	.index-box{padding: 40px 0 60px;}
.main-left { width: 20% }
.main-right { width: 77% }
	.copyright-box{padding: 20px 0;}
}

@media only screen and (max-width: 1000px) {
.flex { margin: 0 auto; width: 720px; }
h1 { font-size: 20px }
.head-box{ position:relative;}
.product-img-text { font-size: 18px }
.text-content { width: 46%; }
.menu{ float:right}
.lang{display: none;}
.head-nav { padding: 16px 0; line-height: 36px }
.nav-phone { display: none }
.nav-search { float: right }
a.navbtn { display: inline-block; color: #fff; font-size: 24px; margin-left: 12px }
.nav.hide { display: none }
.nav { position: absolute; right: 4%; height: auto; background: rgba(0,0,0,.6); }
.nav li { display: block; float: none; text-align: center; width: 120px; height: 40px }
.nav li a { color: #fff;  padding: 0 8px ; line-height:40px}
.nav li div.subnav { margin-left: -168px; margin-top: -38px; width: 168px; position: absolute; }
.nav li div.subnav ul { padding: 0; }
.nav>li:hover { background: rgba(0,90,192,.6); }
.nav>li:hover a { color: #fff }
.nav li:hover div.subnav { margin-left: -120px; margin-top: -40px; width: 120px; position: absolute; padding: 0; height: auto }
.nav li:hover ul li { width: 120px; height: 40px }
.nav li:hover ul li:hover { background: rgba(0,90,192,.6); }
.nav li:hover ul li:hover a { color: #fff }
.nav li:hover ul li.subnavpic { width: auto; height: auto; padding: 12px 24px; background: none; margin-right: 0 }
.nav li:hover ul li a { line-height: 40px; padding-right: auto }
.nav li:hover ul li a span { display: none }
.nav>li>a:after { display: none }
.slide { overflow: hidden }
.flex1 { width: 140%; margin-left: -20%; }
	.index-pic .swiper-container img{ width: 160%; margin-left: -30%}
.index-partner li{ width:25%}
.banner { height: 240px }
.news-content li { width: 100%; margin-left: 0; margin-bottom: 20px }
.news-content li .new-img { width: 30%; float: left }
.main-left { display: none; position: fixed; left: 0; top: 0; width: 250px; height: 100%; background: rgba(255,255,255,.95);  z-index: 9 }
.main-left.show { display: block }
.phonemenu { display: block; display: inline-block }
.main-right { width: 100% }
	.contactinfo{display: none;}
	.copyright{text-align: center;margin-top: -20px;float: none;}
	.foot-icon{float: none}
	.footlogo{display: none;}
}
 


@media only screen and (max-width: 720px) {
.phoneshow{display: block;}
.phonehide{display:none;}
#dx-lm-form ul li { float: none; width: 100%; min-height: auto; }
.flex { width: 92% }
.head-nav { padding: 10px 0; height: auto}
	.logo a img{display: inline-block;li}
.index-about .info{width:auto}
	.banner{height: 200px;}
.index-box{ padding:32px 0;} 
.index-box .info{padding: 20px 0}
	.index-server .info{margin: 32px auto; text-align: left}
	.index-server .info ul li{width:50%; text-align: center; margin-bottom: 20px}
	.index-server .info ul li a i{}
	.index-server .info ul li a span{ display: inline-block; padding:24px 0}
	.index-pic .swiper-container img{ width: 200%; margin-left: -50%}
	.main{padding: 32px 0 64px;}
.newslist ul li:nth-child(3n+1) { margin-left: 4%; }
.newslist ul li { width: 48%; margin-left: 4% }
.newslist ul li:nth-child(2n+1) { margin-left: 0; }
	
.productlist li:nth-child(3n+1) { margin-left: 4%; }
.productlist li { width: 48%; margin-left: 4% }
.productlist li:nth-child(2n+1) { margin-left: 0; }

.main-right .content{ min-height:200px}
.main-right .content .iconfont{display: none;}

.content h1{ font-size:18px}
.content h1:before{display: none;}
.content h2{ font-size:16px}
	
.foot-icon{ position: fixed; bottom: 0; left: 0; width: 100%; z-index: 10; background: rgba(0,0,0,.6) }
.footnav { padding-bottom: 50px }
.footnav { display: none }
.footnav ul li a { text-align: center }
.footnav ul li a .iconfont { display: block; margin-right: 0 }
.copyright-box { padding: 0 0; text-align: center }
.copyright { float: none; margin-top: 12px; display: none }
.foot-icon { float: none; display: block }
.contact-icon {}
.contact-icon a { color: #fff; font-size: 24px; width: 46px; height: 46px; line-height: 46px; padding: inherit; }
.contact-icon a:hover { background: rgba(0,0,0,.6) }
.totop { position: relative; right: auto; bottom: auto; z-index: 5 }
.totop a { font-family: "iconfont"; font-size: 24px; display: block; width: 46px; height: 46px; padding: inherit; text-align: center; color: #fff; line-height: 46px; background: none; border: none }
.totop a:hover { background: rgba(0,0,0,.6) }
.phonemenu { position: relative; right: auto; bottom: auto; z-index: 5 }
.phonemenu a { font-family: "iconfont"; font-size: 24px; display: block; width: 46px; height: 46px; padding: inherit; text-align: center; color: #fff; line-height: 46px; background: none; border: none }
.phonemenu a:hover { background: rgba(0,0,0,.6) }
	.footlogo{display: none;}
	.foot-box{margin-bottom: 40px}
}

@media only screen and (max-width: 480px) {
.index-news ul li { width: 48%; margin-left:4%;margin-bottom: 20px }
	.index-news ul li:last-child{display: none;}
	.banner{height: 160px;}
/* .newslist ul li { width: 100%; margin-left:0 } */
	.productlist ul li{ width: 100%; margin-left:0 }
	.productlist li:nth-child(3n+1){ width: 100%; margin-left:0}
}
