﻿@media screen and (min-width: 47.5em){
	body, html {
	    font-size: 16px;
	}
}
h1{
    font-size: 22px!important;
    margin-bottom: 5px!important;
}
.clear{clear: both;}
.hide{display: none;}
.mr15{margin-right:15px;}
.mg{margin:20px!important}
.auto{width:auto!important}
img{width:100%;border:none;}
.bgnone{background:none!important; box-shadow:none!important;}
.white{background:#fff!important;box-shadow: 0 2px 13px -5px rgba(0,0,0,.2)!important;;}
.back{background:#000!important;}
.carousel-indicators{text-align: right!important;margin-left: -13%;}
.banner_txt{
      position: absolute;
    width: 8%;
    left: 3%;
    bottom: 17%;
    z-index: 3;
}
.index_banner_section{
	/*background-image:url(../img/banner01.jpg);*/
	 -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
   /* min-height:100vh;*/

}
.background-default {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.p_rel {
    position: relative;
}
.fullheight-sctbg-trans {
    /*min-height: 100vh;*/
}
.header_main{
	height: 80px;
   /* padding:0 100px; */
	display: block;
	position: fixed;
	top:0;
	width:100%;
	border: none;
	z-index:1000;
	 box-shadow: 0 2px 13px -5px rgba(0,0,0,.2);

    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.logo{
	float: left;
	margin-top:30px;
	    margin-left: 30px;
	width:100px;
}

@media screen and (min-width: 47.5em){
	.logo {
	      width: 204px;
	}
}
@media screen and (min-width: 47.5em){
	.column, .columns {
	    padding-left: 1.25rem;
	    padding-right: 1.25rem;
	}
}

.code{
	position: absolute;
	top: -110px;
	left:50%;
	margin-left:-49px;
	width:98px;
	height:98px;
	display: none;
}
.arrow-down {
    position: absolute;
    font-size: 44px;
    color: #fff;
    left: 50%;
    top: 90%;
    width:45px;
    -webkit-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -webkit-transition: .2s ease;
    -o-transition: .2s ease;
    transition: .2s ease;
}
@media screen and (max-width: 768px){
	.nav-main-mob{
        width:100%;
         left: 0;
         top:70px;
           padding: 37px 0 200px 0;
    }
    .nav-main-mob ul li {
    	font-size:16px;
    	    padding: 16px 15px;
    }
    .arrow-down {
    	width:17px;
    }
    .banner_txt{
       width: 20%;
        left: 6%;
    }
    .Cpanel ul li p.gray{
        line-height:20px!important;
        font-size: 10px!important;
    }
    .Cpanel ul li h5{
        margin-bottom:5px!important;
    }
    .Cpanel ul li.iblueline::before{
            bottom: -6px!important;
    }
    .Cpanel ul li p{
       line-height: 24px!important;
    }
    .ourteam p{
        line-height: 27px!important;
    }
      .swiper-pagination-bullet{
        width:6px!important;
        height:6px!important;
    }
}

/*server*/
.gray{
        font-size: 10px;
	color:#929292;
	text-transform: uppercase;
}
.our_servers{
	position: relative;
	margin-top:137px;
}
.ourcustom{
    position: relative;
    margin-top:110px;
}
.our_server_desc{
	text-align: center;
	text-transform: uppercase;
}
.desctxt{
    font-size:14px;
	line-height: 33px;
	margin-top: 20px;
}
.tab{
	display: inline-block;
    padding: 12px 42px;
    text-align: center;
    color: #666666;
    border: 1px solid #929292;
    cursor: pointer;
    font-weight:700;
        margin-bottom: 15px;

}
.tab02_Con{
	display: none;
}
.tab.active{
	border: 1px solid #007EFF!important;
    color: #fff!important;
    background: #007EFF!important;
}
@media screen and (max-width:768px){
       .tab{
          padding: 8px 34px!important;
          border: 1.4px solid #A0A0A0!important;
          margin-right: 10px!important;
        }
        .tab.active{
        border: 1px solid #007EFF!important;
        color: #fff!important;
        background: #007EFF!important;
    }
}


.margin_caneter{
	display: block;
	text-align: center;
	margin-top:15px;
}

.tabContain{
    max-width:114rem;
    margin-left: auto;
    margin-right: auto;
}
.service-title{
	color: #242833;
	font-size: 21px;
    margin-bottom: 25px;
    letter-spacing: 3px;
}
.service-title{
	text-align: center;
	-webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    color: #000;
    font-size: 18px;
    letter-spacing: 2px;
}
.service {
	border: 1px solid #eee;
	float: left;
    position: relative;
    margin-top: 30px;
    margin-bottom: 40px;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    text-align: center;
}
.service::before {
    content: '';
    display: block;
    height: 2px;
    background: #9f9f9f;
    position: absolute;
    top: -2px;
    left: 30px;
    width: 80px;
    -webkit-transition: ease .2s;
    -o-transition: ease .2s;
    transition: ease .2s;
}
.service:hover:before{
    background-color: #007EFF;
    width: calc(100% - 60px);
}
.service p{
   line-height:25px;
   text-justify:inter-ideograph;
   text-align: justify;
   color: #9f9f9f;
   -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    margin: 0;
}
@media screen and (min-width: 768px){
	.service{
	   height:360px;
     }
}

.service p:hover{
      color: #646770;
}
	.service.service-welcome {
    padding: 30px;
	}

*, ::after, ::before {
    box-sizing: inherit;
}
.tabContain::before{
    content: ' ';
    display: table;
}
.iconsp{
	display: inline-block;
	margin:10px auto;
   background: url(../img/icon_sp.png) no-repeat;
   background-size:533px 51px;
   height:51px;
}
.i_plaine{
	width:59px;
	background-position:-75px 0;
}
.i_book{
	width:64px;
	background-position:-203px 0;
}
.i_pc{
	 width: 91px;
    background-position: -319px 0;
}
.i_video{
	width:57px;
	background-position:-477px 0;
}

.i_people{
	width:75px;
	background-position:0 0;
}
.i_star{
	width:70px;
	background-position:-134px 0;
}
.i_pencil{
	width:63px;
	background-position:-266px 0;
}
.i_car{
	width:73px;
	background-position:-405px 0;
}
/*our case*/
.ourexample{
	margin-top:150px;
}
.case.isotope-box{
	position: relative;
	padding:0;
	height:216px;
	overflow: hidden;
}
.case.isotope-box img{
	height:216px;
}
.isotope-box a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 12;
}
.isotope-box img {
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
.isotope-box:hover img{
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.21);
    transform: scale(1.2);
}

	.isotope-box:hover .overlay{
       opacity: 1;
     }
     .isotope-box:hover .dsc{
	    opacity: 1;
	}


.isotope-box .overlay {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #242833;
    opacity: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.isotope-box .dsc {
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    text-align: left;
    opacity: 0;
    color: #fff;
    position: absolute;
    top: 25px;
    left: 25px;
    width: calc(100% - 40px);
    z-index: 20;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.isotope-box .dsc::before{
	position: absolute;
	content:'';
	width:45px;
	height:46px;
	background: url(../img/arrow02.png) no-repeat;
    background-size: 100% 100%;
	top:0;
	right:10px;
	 -webkit-transform: scale(.8);
    transform: scale(.8);
}
.isotope-box .dsc span{
	display: inline-block;
    margin-top:105px;
}
.isotope-box .dsc h5 {
    color: #fff;
    letter-spacing: 3px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    margin-bottom: 0;
}
.isotope-box .dsc p {
    letter-spacing: 2px;
    font-size: 12px;
    margin-bottom: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.isotope-box a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 12;
    text-decoration: none;
    cursor: pointer;
}
.isotope-box .dsc a {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    color: #fff;
}
/*ourcustom*/
.Cpanel{
	position: relative;
	margin:45px auto;
}
.customBox{
	display: -webkit-flex; /* Safari */
    display: flex;
	 flex-direction: row;
	 flex-wrap: wrap;
	border-top:1px solid #929292;
	border-bottom:1px solid #929292;
	justify-content:center;
	align-content:center;
}
.client li{
	list-style:none;
	width:138px;
	height:88px;
	line-height: 88px;
	/*margin: 20px;*/
	 text-align: center;
}
.client li a img{
  width: 100%;
}
.client li a{
	width:auto;
	height: auto;
    filter: grayscale(100%);
    opacity: .57;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.scalesm{
	float: left;
	 -webkit-transform: scale(0.1);
    transform: scale(0.1);
	 -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.client li a:hover{
    opacity: 1;
    filter: grayscale(0);
     -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
#c02,#c03{
	 opacity: 0;
	 display: none;
}
/*ourpic*/
.ourpic{
	position: relative;
	margin: 50px auto auto;
}
.insta-feed .overlay {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.65);
}
.insta-feed .cta{
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    text-align: center;
}
.insta-feed h2{
	 color: #fff;
	 font-weight:bold;
    margin-bottom: 0;
    font-size:32px;
        line-height: 56px;
}
.knowmore{
	position: relative;
	border: 1px solid #fff;
    padding: 12px 28px;
    font-size: 20px;
    color: #fff;
    letter-spacing: 2px;
}
.knowmore::after{
	position: absolute;
    content: '';
    width: 11px;
    height: 21px;
    background: url(../img/arrow_more.png) no-repeat;
    background-size: 100% 100%;
    top: 50%;
    margin-top: -10px;
    right: 12px;
}
@media screen and (max-width:768px){
    .our_servers{
        margin-top:39px!important;
    }
	.insta-feed h2{
		font-size:14px;
		line-height: 20px;
		    margin-top: 0px;
	}	
	.knowmore{
		 padding: 3px 11px;
	    font-size: 10px;
	    letter-spacing: 1px;
	}
	.knowmore::after {
	    position: absolute;
	    content: '';
	    width: 11px;
	    height: 21px;
	    background: url(../img/arrow_more.png) no-repeat;
	    background-size: 100% 100%;
	    top: 50%;
	    margin-top: -12px;
	    right: 1px;
	    transform: scale(.5);
	}
    .recruit_cpanel ul li:nth-child(2){
            margin-top:20px;
    }
    .Cpanel ul li h6{
        font-size:14px!important;
            margin-top: 14px!important;
    }
    .ourpic{
            margin: 0px auto!important;
    }
    .our_server_desc h4{
        font-size: 18px!important;
    }
    .Cpanel ul{
      padding: 17px 0px 17px 0px!important;
    }
    .Cpanel{
            margin: 17px auto!important;
    }
    .ourcustom{
        margin-top:40px!important;
        padding-top: 45px!important;
    }
    .address{
        font-size:11px!important;
        line-height: 21px!important;
    }
    .usrTxt{
        margin-top:15px!important;
    }
}
/*tontact us*/
.contactus{
	position: relative;
	margin:100px auto;
}
.mapoverlay{
	position: absolute;
	width:100%;
	height:100%;
	z-index:999;
	top:0;
	left:0;
}
#allmap{
	width:100%;
	height:500px;
}
.contact_info{
	color:#fff;
}
.infotxt{
	position: relative;
	line-height:27px;
		text-transform: uppercase;
}
.coninfo{
	margin-top:25px;
}
.contact_code{
	/*position: absolute;
	width:200px;
	right:15px;
	bottom:0;*/
}

.condeicon{
	position:relative;
	width:74px;
	cursor: pointer;
	float: left;
}
.xcx{
	float: left;
}
.wxcode{
	float: right;
}
._imgcode{
	position: absolute;
	width:98px;
	top: -113px;
    left: -15px;
	height:98px;
	display: none;
}
.xcx:hover .contactxcx_imgcode{
   display: block;
}
.wxcode:hover .contactwx_imgcode{
	display: block;
}
.codebox{
	margin-top:50px;
}
/*ouer team*/
.ourteam{
    display: block;
    text-align: left;
    margin-top: 20px;
}
.ourteam h3{
   display: inline-block;
    background: #007EFF;
    color: #fff;
    text-align: center;
    padding: 11px 24px;
          font-size: 16px;
}
.ourteam p{
   line-height:40px;
   margin-top: 20px;
   text-align: left;
  color: #929292;
}
.ourcustom{
    background:#EEEEEE;
        padding-top: 70px
}
.Cpanel ul{
    padding:50px 0 50px 0;
    border-top: 1px solid #CBCBCB;
    display: inline-block;
}
.Cpanel ul li{
    position: relative;
    list-style: none;
}
.Cpanel ul li h5{
       font-size: 18px;
    font-weight: 700;
}
.Cpanel ul li h6{
     font-size: 16px;
         margin-bottom: 8px;
}
.Cpanel ul li p{
     line-height: 35px;
         font-size: 12px;
             color: #929292;
             margin-bottom: 0;
}
.Cpanel ul li.iblueline::before{
    content: '';
    display: block;
    height: 2px;
    background: #0090FF;
    position: absolute;
    bottom: -2px;
    left: 16px;
    width: 40px;
    -webkit-transition: ease .2s;
    -o-transition: ease .2s;
    transition: ease .2s;
}
.Cpanel ul li.iblueline:hover:before{
    width: calc(42% - 40px);
}
.address{
    color: #4C4C4C;
       line-height: 30px;
       letter-spacing:1px;
      font-size: 14px;
      margin-top: 23px;
}
.email{
    color:#0090FF;
    margin: 10px 0;

}
.BTCopiright{
    background:#252525;
    color:#fff;
    text-align: center;
        text-transform: uppercase;
}
.BTCopiright h6{
    margin-top: 25px;
       font-size: 14px;
}
.BTCopiright p{
 margin-bottom: 15px;
}
/*团队的*/
.recruit_cpanel ul,.ourpic .our_server_desc{
    -webkit-transform: translateY(200px);
    -moz-transform: translateY(200px);
    -ms-transform: translateY(200px);
    -o-transform: translateY(200px);
    transform: translateY(200px);
    opacity:0;
}
.recruit_cpanel ul.active,.ourpic .our_server_desc.active{
    -webkit-animation: recruit_cpanel_move 1s ease-in forwards;
    -o-animation: recruit_cpanel_move 1s ease-in forwards;
    animation: recruit_cpanel_move 1s ease-in forwards;
}

@keyframes recruit_cpanel_move {
    0%{
        -webkit-transform: translateY(200px);
        -moz-transform: translateY(200px);
        -ms-transform: translateY(200px);
        -o-transform: translateY(200px);
        transform: translateY(200px);
        opacity:0;
    }
    100%{
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
        opacity:1;
    }
}
.our_server_desc h4{
    font-size:22px;
}
@media screen and (max-width: 768px){
    .ourteam{
        margin-top: 0px!important;
    }
    .ourteam p{
        font-size: 12px;
    }
}