/*初始化样式*/
*{/* margin:0; */padding:0;box-sizing:border-box;}
.clear{ clear:both; overflow:hidden; height:0; }
ul li{list-style: none;}
.mobile{
    display:block;
}
.pc{
    display:none;
}
/*导航开始*/
.navbar-custom {
    background: rgba(41, 60, 85, .4);
    height: 65px;
    border: 0px;
    font-size: 15px;
    width: 100%;
    position: fixed;
    z-index: 1000;
    top: 0;
    border-radius: 0px;
}

.scrolledDown{
    background: rgba(41, 60,85,1);
    color: #ddd;
}

.navbar-custom .logo{
    float:left;
    padding-top:0;
    padding-left:0;
    padding-right:2%;
    /*height: 50px;*/
}

@media (min-width: 950px){
    .navbar-custom .logo{
    float:left;
    padding-top:0;
    padding-left:2%;
    padding-right:10%;
    height: 65px;
    }
}

.navbar-custom .logo img{
    height: 100%;
}

.navbar-custom .navbar-nav>li>a {
    color: #ccc;
    height: 65px;
    padding-top: 25px;
}


.navbar-custom .navbar-nav>.active>a, .navbar-custom .navbar-nav>.active>a:focus, .navbar-custom .navbar-nav>.active>a:hover {
    color: #fff;
    background: rgba(26, 38, 54, 0.4);
}

.navbar-custom .navbar-nav>li>a:focus, .navbar-custom .navbar-nav>li>a:hover {
    color: #fff;
    /*background-color: transparent;*/
    background: rgba(66, 153, 203,0.4);
}

.navbar-custom .navbar-nav>.open>a, .navbar-custom .navbar-nav>.open>a:focus, .navbar-custom .navbar-nav>.open>a:hover {
    color: #fff;
    background: rgba(66, 153, 203,0.4);
}

.dropdown-menu {
    /*color: #fff;*/
    background: rgba(0, 0, 0, 0.4);
    font-size: 14px;
}
.dropdown-menu>li>a {
    color: #ccc;
    height: 50px;
    padding-top: 18px;

}

.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
    color: #fff;
    text-decoration: none;
    background-color: rgba(66, 153, 203,0.4);
}
.dropdown-menu .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: rgba(11, 16, 23, 0.4);
}

/*导航结束*/



/*news--weixieyj*/
.newxie{

    width:100%;height:600px;padding-top:60px;}
.newxie .new_c{width:100%;}
.newxie .newtil{width:100%;height:100px;font-size:25px;font-weight:600;padding-top:10px;
    text-align:center;}
.newxie .news,.add,.wx{float:left;width:100%;height:360px;overflow:hidden;
    /*border:2px solid #000;*/
}
.newxie  .newtop{width:80%;height:330px;margin-left:10%;
    /*border:2px solid #000;*/
}
.newxie  .tnews{float:left;width:100%;height:210px;background-color:#fff;border:1px solid #dcdcdc;}
.newxie  .tnews:hover{box-shadow:4px 4px 6px #e6e6e6;}
.newxie  .nimg{width:100%;height:140px;overflow:hidden;}
.newxie  .nimg img{max-width:100%;width: 100% ;height:100%;}
.newxie  .nimg img:hover{
    transform: scale(1.05, 1.05);
    transition: 1.6s transform;}
.newxie  .ntil{float:left;font-size:16px;padding:14px;text-align:left;}
.newxie  .ninf{color:#b8b8b8;padding-top:17px;text-align:left;}
.newxie  .ninf a{color:#b8b8b8}
.newxie  .nc{float:left;width:100%;height:70px; margin-top:16px;list-style: none;
    /*border:2px solid #000;*/
}
.newxie  .nc .nlist{float:left;width:100%;padding:6px 1px;color:#373d41;}
.newxie  .nc .nlist a{float:left;width:100%;padding:3px 1px;color:#373d41;}


/*server*/
.aq{width:100%;height:2320px;text-align:center; }
.aq .at{font-size:25px;font-weight:600;padding-top:40px;}
.aq .aq_c{margin:20px;}
.aq .at .bz{color:#4299cb;}
.aq ul{display:inline-block;width:90%;height:780px;text-align:center; list-style: none;}
.aq ul li{position:relative;float:left;margin:10px 1%;width:98%;height:380px;background-color:#fff;  }
.aq ul li:hover{box-shadow:10px 10px 14px #e6e6e6;}
.aq ul li .imgt{position:absolute;top:40px;left:35%;opacity:1;}
.aq ul li .imgb{position:absolute;top:10px;left:35%;opacity:0;}
.aq ul li:hover .imgt{opacity:0;}
.aq ul li:hover .imgb{opacity:1;
    transform: scale(1.1, 1.1);
    transition: .6s transform;
}
.aq ul li .atitle{font-size:18px;font-weight:600;padding-top:160px;}
.aq ul li .acont{padding:20px;text-align:justify;line-height:29px;}

/*icase*/
.icase{width:100%;height:640px;padding-top:100px;text-align:center;
    /*border:2px solid #000;*/
}
.icase .ictil{font-size:25px;font-weight:600;}
.icase ul{padding-top:40px;}
.icase li{float:left;width:98%;height:360px;
    position: relative;
    -ms-transform: rotateY(180deg);
    transform-style: preserve-3d;
    transition: 1s transform;  }
.icase .casep{padding-top:90px;}
.icase .casetil{padding-top:60px;font-size:22px;font-weight:600;color:#fff;}
.icase li figcaption {
    position: absolute;
    width: 100%; height: 100%; top: 0;
    transform: rotateY(.5turn) translateZ(1px);
    /*background: rgba(0,193,222,1);*/
    text-align: center;
    opacity: 1;
    transition: 1s .5s opacity;
    color:#fff;
}
.icase li .f1{background: url("../images/cpb_1.jpg") no-repeat center center;}
.icase li .f2{background: url("../images/cpb_2.jpg") no-repeat center center;}
.icase li .f3{background: url("../images/cpb_3.jpg") no-repeat center center;}
.icase li .f4{background: url("../images/cpb_4.jpg") no-repeat center center;}
.icase li .f5{background: url("../images/cpb_5.jpg") no-repeat center center;}
.icase li figcaption .cpbt{font-size:26px;font-weight:600;padding-top:40px;padding-bottom:20px;text-align:center;}
.icase li figcaption .cpbp{text-align:center;line-height:27px;}
.icase li:hover{ transform: rotateY(.5turn); }
.icase li:hover figcaption { opacity: 1; }
.icase li .rm a span{display:inline-block;margin-top:20px;padding:6px 26px;color:#fff;border:1px solid #fff;}
.icase li:after {
    content: " "; display: block;
    height: 8vw; width: 100%;
    transform: rotateX(90deg);
    background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
}
.icase .cp_1{background: url("../images/cp_1.jpg") no-repeat center center;}
.icase .cp_2{background: url("../images/cp_2.jpg") no-repeat center center;}
.icase .cp_3{background: url("../images/cp_3.jpg") no-repeat center center;}
.icase .cp_4{background: url("../images/cp_4.jpg") no-repeat center center;}
.icase .cp_5{background: url("../images/cp_5.jpg") no-repeat center center;}

/*costomer*/
.cos{width:100%; text-align:center;}
.cos .ct{font-size:40px;font-weight:600;padding-top:40px;}
.cos .ct .gre{color:#4299cb;}
.cos .c_c{margin:20px;}
.tabbox{float:right;width:100%;height:580px;margin:0 auto;
    /*border:2px solid #000;*/
}
.tabbox .tab{width:100%;height:140px;padding:0 10%;
    overflow:hidden;text-align:center;
/*border:2px solid #000;*/
}
.tabbox .tab a{
    width:18%;height:80px;display:block;padding-top:48px;float:left;font-size:16px;
    border:1px dotted #4299cb;text-decoration:none;color:#808080;
    border-radius:6px;margin-left:1.5%;}
.tabbox .tab .tab1{background:#fff url("../images/c_1.png") no-repeat 50% 20%;}
.tabbox .tab .tab2{background:#fff url("../images/c_2.png") no-repeat 50% 20%;}
.tabbox .tab .tab3{background:#fff url("../images/c_3.png") no-repeat 50% 20%;}
.tabbox .tab .tab4{background:#fff url("../images/c_4.png") no-repeat 50% 20%;}
.tabbox .tab .tab5{background:#fff url("../images/c_5.png") no-repeat 50% 20%;}
.tabbox .tab a:hover{background:#4299cb;color:#fff;text-decoration:none;}
.tabbox .tab a.on{
    background:#4299cb url("../images/c_0.png") no-repeat 50% 20%;color:#fff;text-decoration:none;}
.tabbox .content{display:inline-block;overflow:hidden;width:1000px;height:360px;margin-top:10px;
    background-color:#fff;position:relative;}
.tabbox .content ul{position:absolute;left:0;top:0;}
.tabbox .content li{width:1000px;height:320px;float:left;
    /*border:2px solid #000;*/
}
.tabbox .content li .limg{height:290px;float:left;}
.tabbox .content li .cr{
    float:right;width:56%;height:400px;
    overflow:hidden;}
.tabbox .content li .cr .crimg{float:left;width:31%; height:60px;margin:1%;
   /*border:1px solid #000;*/
}
.tabbox .content li .cr .crimg img{max-width:100%;overflow:hidden;}

/*supervision*/
.sv{width:100%;height:440px;text-align:center;
    /*border:2px solid #000;*/
}
.sv .svt{font-size: 40px;font-weight: 600; padding-top: 40px}
.sv .svc{color: #4299cb;}
/*.sv .svt{font-size:27px;padding-top:40px;}
.sv .svtil{width:80%;margin-left:10%;;padding-top:20px;color:#808080;}*/
.tab{margin-top:60px;padding: 0.9rem 0 0 0;}
.tab .tab-title  h3{ background: #FFFFFF;}
.tab .maquees{width:100%;overflow:hidden;}
.tab ul li{ position: relative; float:left; display:inline-block;font-size:16px; padding:0 5px;  text-align: center;}
.tab ul li img{ width:190px; height: 66px;}
.tab ul li .span-hide{  position: absolute;left:0; bottom:0; display: none; width: 100%; height: 100%; padding: 5% 0 0 0;
    background:rgba(255,255,255,0.5); color: #000;}
.tab ul li .span-hide a{ display: inline-block; padding:10px 60px; border:2px solid #dcdcdc; color: #000;}
/*map*/
.Cootion{ width:100%; background-color:#f5f5f5; padding:50px 0px;}
.imap{width:100%;height:720px;text-align:center;background-color:#f6f6f6;}
.imap .mtil{font-size:40px;font-weight:600;padding-top:40px;}
.m_map{ float:left;width:760px; height:520px;
    margin:40px 24%;
    position:relative;
    background: url(../images/diru2.png) no-repeat 0 0 ;
/*border:2px solid #000;*/
}
.tait{ font-size:36px; font-weight:bold; color:#666666; text-align:center;  left:100px;}
.tait span{ color:#ff6d3b;}
.tait2{font-size:36px; font-weight:bold; color:#666666; text-align:center; padding:50px 0px;}
.mp{ position:absolute; cursor:pointer; background:url(../images/fi1.png) no-repeat 4px 20px; width:24px; height:63px; -webkit-transition:all .2s ease-out; -moz-transition: all .2s ease-out; -ms-transition:all .2s ease-out; -o-transition:all .2s ease-out; transition:all .2s ease-out;}
.mp:hover{ background:url(../images/fi2.png) no-repeat 4px 20px; -webkit-transition:all .2s ease-out; -moz-transition: all .2s ease-out; -ms-transition:all .2s ease-out; -o-transition:all .2s ease-out; transition:all .2s ease-out;}
.hover_tu{background:url(../images/fi2.png) no-repeat 4px 20px;}
.mp .mito{ position:absolute; left:0px; bottom:0px; font-size:12px; color:#666666;}
.mp .find_mi1{ left:-12px; width:55px;}
.mp .find_mi2{ left:-5px; width:55px;}
.feng{ position:absolute; display:none; width:347px; height:85px; left:-230px; top:-78px; background:url(../images/vf1.png) no-repeat 0 top; z-index:10;}
.feng .sang{ position:absolute; left:235px; bottom:0px; background:url(../images/vf2.png) no-repeat 0 0; width:14px; height:8px;}
.feng .tree{ height:62px; width:330px; margin:9px; }
.feng .tree .boou{ width:86px; height:62px; float:left;}
.feng .tree .du_size{ float:right; height:62px; width:230px;}
.feng .tree .du_size p{ font-size:12px; color:#FFF; line-height:20px;}
.mp23{left:410px; top:155px; }
.mp24{left:476px; top:148px; }
.mp25{left:456px; top:137px; }
.mp26{left:475px; top:100px; }
.mp27{left:490px; top:68px; }



/*navbottom*/
.navbot{width:100%;height:320px;background-color:#293c55;}
.navbot .part{float:left;margin-top:60px;width:25%;height:260px;padding-left:2%;}
.navbot .part ul li{padding-top:10px;}
.navbot .part ul .navt{color:#fff;font-weight:800;font-size:14px;}
.navbot .part ul li a{color:#979b9f;font-size:12px;}
.navbot .part ul li a:hover{color:#fff;}
.navbot .logo img{width: 100%}
/*footer*/
.footer{font-size:12px;}
.footer .fb{width:100%;height:60px;background-color:#293c55;}
.footer .fbc{padding-top:10px;font-size:14px;color:#979b9f;letter-spacing:1px;text-align:center;}








/*-------------------------------------------------------part costomer--------------------------------------------------*/
.kban-er{width:100%;height:220px;
    background: url("../images/kh.png") no-repeat center center;
    text-align:center;}

.sponsorListHolder{
    margin-bottom:30px;
}
.sponsor{
    width:48%;

    height:180px;
    float:left;
    margin:4px;

    /* Giving the sponsor div a relative positioning: */
    position:relative;
    cursor:pointer;
}

.sponsorFlip{
    /*  The sponsor div will be positioned absolutely with respect
        to its parent .sponsor div and fill it in entirely */

    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    border:1px solid #ddd;
}

.sponsorFlip:hover{
    border:1px solid #999;

    /* CSS3 inset shadow: */
    -moz-box-shadow:0 0 30px #999 inset;
    -webkit-box-shadow:0 0 30px #999 inset;
    box-shadow:0 0 30px #999 inset;
}

.sponsorFlip img{
    /* Centering the logo image in the middle of the sponsorFlip div */
    position:absolute;
    top:50%;
    left:50%;
    margin:-70px 0 0 -70px;
}

.sponsorData{
    /* Hiding the .sponsorData div */
    display:none;
}
.sponsorDescription{
    font-size:18px;
    font-style:italic;
    color:#fff;
    text-align:center;
    padding-top:70px;
}

.sponsorURL{
    font-size:10px;
    font-weight:bold;
    padding-left:20px;
}

.clear{
    /* This class clears the floats */
    clear:both;
}


/* The styles below are only necessary for the styling of the demo page: */

#main{
    position:relative;
    margin:0 auto;
    width:100%;
}
 /*a:visited {*/
    /*color:#0196e3;*/
    /*text-decoration:none;*/
    /*outline:none;*/
/*}*/
a img{
    border:none;
}






/*-------------------------------------------------about us-------------------------------------------*/
/*ban-er*/
.aban-er{width:100%;height:220px;
    background: url("../images/aub.png") no-repeat center center;
    text-align:center;}
 .bantil{font-size:28px;padding-top:60px;}
 .banc{font-size:16px;padding-top:30px;color:#fff;}
 .banE{color:#fff;}
/*profile*/
.pf{width:100%;height:300px;margin-top:0;}
.pft{float:left;  width:100%;height:400px;  text-align:center;}
.pft .ptitle{padding-top:20px;padding-bottom:20px;font-size:24px;color:#979898;}
.pft .pcont{padding:1px  60px;line-height:31px;color:#646565;text-align:left;text-indent:2em;}
.pfr{float:left;width:30%;height:400px;color:#f8f8f8;text-align:center;}
.pfr img{padding-top:40px;}
.aus{
    /*background:rgba(108,120,136, 0.05);*/
    width:100%;height:380px;padding-top:60px;}
.aus ul{width:100%;padding-left:8%;}
.aus ul li{float:left;width:25%;height:160px;
    /*background-color:#f4f5f6;*/
    margin-left:5%;}
.aus ul li:hover{box-shadow:10px 10px 14px #e6e6e6;}
.aus .ust{font-size:16px;font-weight:600;padding-top:20px;padding-bottom:20px;letter-spacing:1px;}
.aus .usc{color:#99999a;}

/*culture*/
.culture{width:100%;height:260px;
    background: url("../images/culb.png") no-repeat 100% 100%;
    text-align:center;}
.cultil{padding-top:40px;padding-bottom:10px;font-size:26px;color:#979898;}
.culimg{float:left;width:40%;padding-top:80px;}
.culimg img{max-width:100%;}
.culp{float:right;width:100%;height:260px;}
.culp .cult{padding-top:20px;font-size:18px;}
.culp .culc{padding-top:10px;font-size:13px;color:#808080;}


/*team*/
.team{width:100%;height:550px;}
/*ÊÓ²î¹ö¶¯*/
html * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body, html {height: 100%;}
.cd-main-content {
    /* you need to assign a min-height to the main content so that the children can inherit it*/
    height: 100%; position: relative;z-index: 1;  }
.cd-fixed-bg {position: relative; min-height: 100%; background-size: cover; background-repeat: no-repeat;
    background-position: center center; z-index: 1;  }
.cd-fixed-bg h1{ position: absolute;  left: 50%;  top: 30%;bottom: auto;  right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 90%;
    max-width: 1170px;
    text-align: center;
    font-size: 30px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    color: white;
}
.cd-fixed-bg .teamm{ position: absolute;  left: 50%; bottom: auto;  right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 90%;
    max-width: 1170px;
    text-align: center;
    font-size:16px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    color: white;
}

.cd-fixed-bg .teamm_1{ top: 40%;}
.cd-fixed-bg .teamm_2{ top: 60%;}
.cd-fixed-bg .teamm_3{ top: 80%;}

.cd-fixed-bg.cd-bg-1 {background-image: url("../images/tdcy.png");  }
.cd-scrolling-bg {position: relative;height:auto;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); z-index: 2;}
.cd-scrolling-bg.cd-color-1{background-color: #3d3536;color: #a6989a;}
.cd-container{position:absolute;width:100%;height:260px;border:2px solid #000;}
@media only screen and (min-width: 1170px) {
    .cd-fixed-bg {background-attachment: fixed;}
}
.kh{width:100%;height:360px;}
/*--------------------------------------------------contact us------------------------------------------------------*/
.cban-er{width:100%;height:220px;
    background: url("../images/contact_ban.jpg") no-repeat center center;
    text-align:center;}
.lx{width:100%;height:1120px;text-align:center;}
.lx .lxtitle{font-size:18px;font-weight:400;color:#6c7888;padding-top:30px;}
.lx .method{display:inline-block;width:100%;height:300px;padding-top:40px;}
.lx .method  ul li{display:inline-block;width:300px;height:200px;}
.lx .method  ul li  .imgb{display:inline-block;width:80px;height:80px;border-radius:40px;background-color:#6c7888;}
.lx .method  ul li  .imgb img{padding-top:26px;}
.lx .method  ul li .me{padding-top:20px;font-weight:600;color:#6c7888;}
.lx .method  ul li .mc{padding:10px 60px;color:#989898;}
.lx .map{margin-top:30px;}



/*------------------------------------------------joinus------------------------------------------------------------*/
.jban-er{width:100%;height:220px;
    background: url("../images/join_ban.jpg") no-repeat center center;
    text-align:center;}
.join{
    /*padding-top:160px;*/
    width:100%;height:auto;margin-top:40px;}
.join .work{width:90%;margin-bottom:60px;margin-left:4%;}
.work .wtil{width:100%;height:66px;padding-top:20px;font-size:18px;color:#434343;border-bottom:1px solid #ff511a;}
.work .wE{font-size:18px;color:#ff511a;}
.work .wc{width:100%;height:auto;color:#808080;}
.work .wc .wct{padding-top:40px;}
.work .wc .wcc{padding-top:20px;}
.work .joinbtn{
    margin-top: 30px;
    width: 110px;
    height: 32px;
    border-radius: 4px;
    background-color: #ff511a;
    color: #fff;
    border: 2px solid #ff511a;
}


/*otherpart*/
.op{background-color:#808080;
    width:100%;height:360px;}
.op .opt{font-size:24px;padding-top:20px;padding-left:10%;color:#f8f8f8;}
.op .opp{width:90%;padding-top:10px;padding-left:10%;color:#f8f8f8;}
/*navbottom*/
.navbotr{width:100%;height:300px;background-color:#6c7888;}
.navbotr .part{float:left;margin-top:60px;width:20%;height:240px;}
.navbotr .part ul li{padding-top:15px;}
.navbotr .part ul .navt{color:#fff;font-weight:800;font-size:16px;}
.navbotr .part ul li a{color:#dcdcdc;font-size:14px;}
.navbotr .part ul li a:hover{color:#fff;}
/*footerr*/
.footerr .fb{width:100%;height:40px;background-color:#6c7888;}
.footerr .fbc{padding-top:10px;font-size:14px;color:#fff;letter-spacing:1px;text-align:center;}


/*--------------------------------------------------------case---------------------------------------------------------*/
.jjfab{width:100%;}
.jjfab img{max-width:100%;}
.case .fa{width:100%;height:1220px;text-align:center;}
.fa .fatil{padding-top:80px;font-size:24px;}
.fa .bz{float:left;width:86%;height:360px;margin-left:7%;padding-top:20px;}
/*.bz .jtbz{height:340px;padding:20px 10px;border:1px solid #dcdcdc;}*/
.bz .jtbz:hover{height:340px;padding-top:20px;border:1px solid #de3b25;border-radius:6px;}
.bz .jtbz .fat{font-size:20px;padding-top:20px;padding-bottom:20px;}
.bz .jtbz .fac{font-size:14px;line-height:33px;color:#808080;}

/*ƽ̨Ìصã*/
.ptad{width:100%;height:460px;
    background:url("../images/ptadb.jpg") no-repeat center center;
    }
.ptad .ptimg{float:left;width:42%;padding-top:0;}
.ptad .pt{float:left;width:46%;height:90px;margin:2% 2%;}
.ptad .pt:hover{background-color:#fff;box-shadow:10px 10px 14px #e6e6e6;}
.ptad .ptr{float:left;padding-top:80px;width:100%;font-size:13px;}
.ptad .ptt{padding:20px 6px;font-size:13px;}
.ptad .ptc{padding:4px 6px;font-size:12px;color:#808080;}


.casem{width:100%;height:660px;padding-top:40px;
    background:url("../images/caseb.png") no-repeat center center;text-align:center;
}
.caset{font-size:34px;color:#4490b0;}
.ccont{width:100%;height:450px;}
.ccont ul{padding-top:40px;}
.ccont ul li{width:28%;height:200px;}
.ccont .caset{padding-bottom:20px;font-size:26px;}
.ccont .casec{display:inline-block;width:280px;height:120px;text-align:left;color:#fff;border-radius:20px;}
.ccont .case_1{float:left;}
.ccont .caset_1{color:#44b088;}
.ccont .casec_1{background-color:#44b088;padding:10px;}
.ccont .case_2{float:right;}
.ccont .caset_2{color:#f76c17;}
.ccont .casec_2{background-color:#f76c17;padding:7px;}
.ccont .case_3{float:left;}
.ccont .caset_3{color:#e93257;}
.ccont .casec_3{background-color:#e93257;padding:16px;}
.ccont .case_4{float:right;}
.ccont .caset_4{color:#9c55c7;}
.ccont .casec_4{background-color:#9c55c7;padding:18px;}


/*----------------------------------------------------news------------------------------------------------------------*/
.new{width:100%;height:auto;margin:40px 0;}
.new .ernav{width:100%;height:60px;}
.new .ernav .enavt{float:left;width:100%;height:60px;text-align:center;font-size:16px;}
.new .ernav .enavt .entitle{float:left;width:28%;height:40px;font-size:20px;
    padding-top:6px;margin-left:4%;color:#000;}
.nban-er{width:100%;height:220px;
    background: url("../images/news_ban.jpg") no-repeat center center;
    text-align:center;}
.new .npart{width:100%;height:340px;padding:2%;border-bottom:1px solid #dcdcdc;}
.new .npimg{width:100%;height:150px;}
.new .npimg img{width:100%;height:100%;}
.new .npc{width:100%;height:150px;}
.npc .nptil{padding:10px 0;font-size:16px;color:#000;}
.npc .nptime{color:#808080;}
.npc .npcont{line-height:27px;color:#000;font-size:12px;}
    .new .view-more{text-align:center;font-size:14px;}
    .new .view-more a{background:#31708f;color:#fff;display:inline-block;padding:0 50px;height:35px;line-height:35px;}
    .new .view-more a:hover{text-decoration:none;}
    .new .news-list-container{margin-bottom: 30px;min-height: 600px;}



/*----------------------------------------------------news-er-------------------------------------------------------*/
.newer{width:90%;height:auto;margin:5%;}
.newer .nertil{font-size:20px;padding-bottom:20px;}
.newer .nert{color:#808080;padding-bottom:20px;}
.newer .nerc{line-height:31px;text-align:left;text-indent:2em;}
.newer .nerimg{width:100%;height:410px;}
.newer .nerimg img{float:left;width:48%;padding:2%;height:400px;}



/*----------------------------------------------------service--------------------------------------------------------*/

.sban-er{width:100%;height:220px;
    background: url("../images/service_ban.jpg") no-repeat center center;
    text-align:center;}
.ser{width:100%;height:1680px;text-align:center;}
.ser .sertitle{font-size:28px;padding-top:50px;}

.jc{width:100%;height:880px;
    background: url("../images/jcb.jpg") no-repeat center center;
    text-align:center;}
.jctil{font-size:28px;padding-top:80px;}

.jc ul{width:80%;/*margin:10%;*/
    /*border:1px solid #000;*/
}
.jc ul li{float:left;width:28%;height:340px;margin:2%;
    /*border:1px solid #dcdcdc;*/
    border-radius:20px;
}

.jc ul li:hover{
    transform: rotate(360deg);
    transition: 1.2s transform;
    border:1px solid #f76c17;
    border-radius:0;}
.jc ul li .jct{font-size:18px;color:#808080;padding:18px;}
.jc ul li .jcc{padding:6px;color:#bababa;line-height:27px;}
.khbz{width:100%;height:520px;
    text-align:center;}
.khbz .khbzt{font-size:28px;padding-top:40px;}
.khbzl{width:72%;height:280px;
    margin:6% 14%;}
.khbzl .khbzt{font-size:18px;padding:16px;}
.khbzl .khbzc{color:#808080;padding:4px;}



/*-----------------------------------------------------honor----------------------------------------------------------*/
.navbar-default{z-index:999;}
.hban-er{position:absolute;
    top:60px;
    width:100%;height:220px;
    background: url("../images/honor_ban.jpg") no-repeat center center;  text-align:center; }
.picture{width:100%;height:auto;margin-top:300px;text-align:center;}
.picture .ppart{width:100%;height:220px;text-align:center;}
.picture .pimg{max-width:220px;height:160px;}
.picture .pname{width:100%;}



@media screen and (min-width: 768px) {
    .mobile{ display:none;}
    .pc{display: block;}
    .navbar-custom {
        background: rgba(0, 0, 0, 0.4);
        height: 65px;
        border: 0px;
        font-size: 15px;
        width: 100%;
        /*position: fixed;
        z-index: 1000;*/
        top: 0;
        border-radius: 0px;
    }
    .scrolledDown {
    background: rgba(41, 60,85,1);
    color: #ddd;
    }
    .newxie .newtil{height:160px;font-size:40px;}
    .newxie .news,.add,.wx{float:left;width:33.33%;height:335px;overflow:hidden;}
    .newxie  .newtop{width:400px;height:320px;margin-left:0;padding-left:10px;padding-right:10px;
        /*border:2px solid #000;*/
    }
    .newxie  .tnews{float:left;width:360px;height:250px;background-color:#fff;border:1px solid #dcdcdc;}
    .newxie  .tnews:hover{box-shadow:4px 4px 6px #e6e6e6;}
    .newxie  .nimg{width:358px;height:180px;overflow:hidden;}
    .newxie  .ntil{padding:16px;}
    .newxie  .ninf{padding:18px;}



/*server*/
    .aq{width:100%;height:670px;text-align:center; }
    .aq .at{font-size:40px;font-weight:600;padding-top:80px;}
    .aq .aq_c{margin:20px;}
    .aq .at .bz{color:#4299cb;}
    .aq ul{display:inline-block;width:96%;height:800px;text-align:center;list-style: none; }
    .aq ul li{position:relative;float:left;margin:30px 1%;width:23%;height:500px;background-color:#fff;  }
    .aq ul li:hover{box-shadow:10px 10px 14px #e6e6e6;}
    .aq ul li .imgt{position:absolute;top:40px;left:30%;opacity:1;}
    .aq ul li .imgb{position:absolute;top:20px;left:30%;opacity:0;}
    .aq ul li:hover .imgt{opacity:0;}
    .aq ul li:hover .imgb{opacity:1;
        transform: scale(1.1, 1.1);
        transition: .6s transform;
    }
    .aq ul li .atitle{font-size:18px;font-weight:600;padding-top:160px;}
    .aq ul li .acont{padding:20px;text-align:justify;line-height:29px;}


    .icase li{;width:20%;height:360px;
        }

    .icase .ictil{font-size:40px;font-weight:600;}
    /*navbottom*/

    .navbot .part{float:left;width:20%;height:240px;}
    .navbot{width:100%;height:300px;background-color:#293c55;}
    .navbot .part ul{padding-top:20px;}
    .navbot .part ul li{padding-top:10px;padding-left:20%;}
    .navbot .part ul .navt{color:#fff;font-weight:800;font-size:16px;}
    .navbot .part ul li a{color:#979b9f;font-size:14px;}
    .navbot .part ul li a:hover{color:#fff;}
    /*footer*/
    .footer{font-size:12px;}
    .footer .fb{width:100%;height:60px;background-color:#293c55;}
    .footer .fbc{padding:10px;font-size:12px;color:#979b9f;letter-spacing:1px;text-align:center;}








/*case*/
    .case .fa{width:100%;height:640px;text-align:center;}
    .fa .fatil{padding-top:80px;font-size:34px;}
    .fa .bz{float:left;width:24%;height:400px;margin-left:7%;padding-top:100px;}
    .ptad .ptr{width:50%;}
    .ptad{width:100%;height:560px;
        background:url("../images/ptadb.jpg") no-repeat center center; }
    .ptad .ptimg{float:left;width:42%;padding-top:80px;}

/*----------------------------------------------------------profile-------------------------------------------------------------------------------*/

    /*ban-er*/
    .aban-er{width:100%;height:360px;
        background: url("../images/aub.png") no-repeat center center;
        text-align:center;}
    .bantil{font-size:30px;padding-top:160px;color:#f6f6f6;}
    .banc{font-size:16px;padding-top:30px;color:#fff;}
    .banE{color:#fff;} .pf{width:100%;height:400px;margin-top:60px;}
    .pft{float:left;  width:70%;height:400px;  text-align:center;}
    .pft .ptitle{padding-top:40px;padding-bottom:30px;font-size:36px;color:#979898;}
    .aus{
        /*background:rgba(108,120,136, 0.05);*/
        width:100%;height:280px;padding-top:60px;}
    .culture{width:100%;height:700px;
        background: url("../images/culb.png") no-repeat center center;
        text-align:center;}
    .cultil{padding-top:40px;padding-bottom:30px;font-size:36px;color:#979898;}
    .culp{float:right;width:60%;height:500px;}
    .culp .cult{padding-top:80px;font-size:24px;}
    .culp .culc{padding-top:30px;font-size:16px;color:#808080;}
    .cd-fixed-bg .teamm_1{ top: 40%;}
    .cd-fixed-bg .teamm_2{ top: 50%;}
    .cd-fixed-bg .teamm_3{ top: 60%;}
    .op{background:url("../images/opb.png") no-repeat center center;
        width:100%;height:550px;
        background-size: auto 550px;
    }
    .op .opt{font-size:36px;padding-top:60px;padding-left:10%;padding-bottom: 23px;color:#f8f8f8;}
    .op .opp{width:48%;padding-top:10px;padding-left:10%;color:#f8f8f8;line-height: 31px;}




    /*----------------------------------------------------news------------------------------------------------------------*/
    .new{width:100%;height:auto;margin:60px 0;}
    .new .ernav{width:100%;height:41px;border-bottom: 1px solid #dcdcdc;}
    .new .ernav .enavt{float:left;width:50%;height:60px;text-align:center;font-size:16px;}
    .new .ernav .enavt .entitle{float:left;width:20%;height:40px;font-size:18px;color:#31708f;
        padding-top:6px;margin-left:10%;

    }
    .new .ernav .enavt .active{font-weight:600;color:#31708f;border-bottom:2px solid #31708f;}
    .new .ernav .zwhx{float:left;width:25%;height:1px;margin-top:16px;
        /*border:1px solid #000;*/
    }
    .nban-er{width:100%;height:360px;
        background: url("../images/news_ban.jpg") no-repeat center center;
        text-align:center;}
    .new .npart{width:100%;height:200px;padding:2%;border-bottom:1px solid #dcdcdc;}
    .new .npimg{float:left;width:30%;height:150px;}
    .new .npimg img{width:100%;height:100%;}
    .new .npc{float:right;width:65%;height:150px;}
    .npc .nptil{padding:10px 0;font-size:18px;font-weight: bold;color:#000;line-height: 25px;}
    .npc .nptime{color: #999;font-size: 12px;line-height: 32px;}
    .npc .npcont{color: #999;font-size: 14px;line-height: 21px;}






    /*----------------------------------------------------news-er-------------------------------------------------------*/
    .newer{width:90%;height:auto;margin:5%;}
    .newer .nertil{font-size:20px;padding-bottom:20px;text-align: center;}
    .newer .nert{color:#808080;padding-bottom:20px;text-align: center;}
    .newer .nerc{line-height:31px;text-align:left;text-indent:2em;}
    .newer .nerimg{width:100%;height:410px;}
    .newer .nerimg img{float:left;width:48%;padding:2%;height:400px;}

    /*-----------------------------------------------------honor----------------------------------------------------------*/
    .hban-er{position:absolute;top:0;
        width:100%;height:360px;
        background: url("../images/honor_ban.jpg") no-repeat center center;  text-align:center; }
    .picture{width:100%;height:auto;margin:400px 5%;text-align:center;}
    .picture .ppart{float:left;width:240px;height:200px;margin:1%;}
    .picture .pimg{max-width:220px;height:160px;}
    .picture .pname{width:220px;margin-left:10px;}

    /*-----------------------------------------------------solution----------------------------------------------------------*/
    .slban-er{position:absolute;top:0;
        width:100%;height:360px;
        background: url("../images/solution_ban.jpg") no-repeat center center;  text-align:center; }



    /*--------------------------------------------------contact us------------------------------------------------------*/
    .cban-er{width:100%;height:360px;
        background: url("../images/contact_ban.jpg") no-repeat center center;
        text-align:center;}
    .lx{width:100%;height:840px;text-align:center;}
    .lx .lxtitle{font-size:28px;font-weight:400;color:#6c7888;padding-top:60px;}
    .lx .method{display:inline-block;width:910px;height:300px;padding-top:80px;}
    .lx .method  ul li{display:inline-block;float:left;width:300px;height:200px;}
    .lx .method  ul li  .imgb{display:inline-block;width:80px;height:80px;border-radius:40px;background-color:#6c7888;}
    .lx .method  ul li  .imgb img{padding-top:26px;}
    .lx .method  ul li .me{padding-top:20px;font-weight:600;color:#6c7888;}
    .lx .method  ul li .mc{padding:10px 60px;color:#989898;}
    .lx .map{margin-top:30px;}
    /*------------------------------------------------joinus------------------------------------------------------------*/
    .jban-er{width:100%;height:360px;
        background: url("../images/join_ban.jpg") no-repeat center center;
        text-align:center;}
    .join{
        /*padding-top:160px;*/
        width:100%;height:auto;margin-top:100px;}
    .join .work{width:90%;margin-bottom:60px;margin-left:10%;}
    .work .wtil{width:380px;height:66px;padding-top:20px;font-size:18px;color:#434343;border-bottom:1px solid #ff511a;}
    .work .wE{font-size:18px;color:#ff511a;}
    .work .wc{width:100%;height:auto;color:#808080;}
    .work .wc .wct{padding-top:40px;}
    .work .wc .wcc{padding-top:20px;}

    /*-------------------------------------------------------part costomer--------------------------------------------------*/
    .kban-er{width:100%;height:360px;
        background: url("../images/kh.png") no-repeat center center;
        text-align:center;}
  .sponsorListHolder{
        margin-bottom:30px;
    }
    .sponsor{
        width:180px;
        height:180px;
        float:left;
        margin:4px;

        /* Giving the sponsor div a relative positioning: */
        position:relative;
        cursor:pointer;
    }

    .sponsorFlip{
        /*  The sponsor div will be positioned absolutely with respect
            to its parent .sponsor div and fill it in entirely */

        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        border:1px solid #ddd;
    }

    .sponsorFlip:hover{
        border:1px solid #999;

        /* CSS3 inset shadow: */
        -moz-box-shadow:0 0 30px #999 inset;
        -webkit-box-shadow:0 0 30px #999 inset;
        box-shadow:0 0 30px #999 inset;
    }

    .sponsorFlip img{
        /* Centering the logo image in the middle of the sponsorFlip div */
        position:absolute;
        top:50%;
        left:50%;
        margin:-70px 0 0 -70px;
    }

    .sponsorData{
        /* Hiding the .sponsorData div */
        display:none;
    }
    .sponsorDescription{
        font-size:18px;
        font-style:italic;
        color:#fff;
        text-align:center;
        padding-top:70px;
    }

    .sponsorURL{
        font-size:10px;
        font-weight:bold;
        padding-left:20px;
    }

    .clear{
        /* This class clears the floats */
        clear:both;
    }


    /* The styles below are only necessary for the styling of the demo page: */

    #main{
        position:relative;
        margin:40px auto;
        width:960px;
    }
    /*a:visited {*/
    /*color:#0196e3;*/
    /*text-decoration:none;*/
    /*outline:none;*/
    /*}*/
    a:hover{
        text-decoration:underline;
    }

    a img{
        border:none;
    }



    /*----------------------------------------------------service--------------------------------------------------------*/

    .sban-er{width:100%;height:360px;
        background: url("../images/service_ban.jpg") no-repeat center center;
        text-align:center;}
    .ser{width:100%;height:650px;text-align:center;}
    .ser .sertitle{font-size:28px;padding-top:50px;}

    .jc{width:100%;height:800px;
        background: url("../images/jcb.jpg") no-repeat center center;
        text-align:center;}
    .jctil{font-size:28px;padding-top:80px;}

    .jc ul{width:100%;/*margin:10%;*/margin-top: 180px;
        /*border:1px solid #000;*/
    }
    .jc ul li{float:left;width:20%;height:300px;margin:2%;
        /*border:1px solid #dcdcdc;*/
        border-radius:20px;
    }

    .jc ul li:hover{
        transform: rotate(360deg);
        transition: 1.2s transform;
        border:1px solid #f76c17;
        border-radius:0;}
    .jc ul li .jct{font-size:18px;color:#808080;padding:18px;}
    .jc ul li .jcc{padding:6px;color:#bababa;line-height:27px;}
    .khbz{width:100%;height:620px;
        background: url("../images/khbzb.jpg") no-repeat center center;
        text-align:center;}
    .khbz .khbzt{font-size:28px;padding-top:40px;}
    .khbzl{width:40%;height:400px;
        margin:6% 14%;}
    .khbzl .khbzt{font-size:18px;padding:16px;}
    .khbzl .khbzc{color:#808080;padding:4px;}



    .new .view-more{text-align:center;font-size:14px;}
    .new .view-more a{background:#31708f;color:#fff;display:inline-block;padding:0 50px;height:35px;line-height:35px;}
    .new .view-more a:hover{text-decoration:none;}
    .new .news-list-container{margin-bottom: 30px;min-height: 600px;}
}
@media screen and (min-width: 1170px) {
.mobile{ display:none;}
.pc{display: block;}
    /*----------------------------------------------------news------------------------------------------------------------*/
    .new{width:100%;height:auto;margin:60px 0;}
    .new .ernav{width:100%;height:41px;border-bottom: 1px solid #dcdcdc;}
    .new .ernav .enavt{float:left;width:50%;height:60px;text-align:center;font-size:16px;}
    .new .ernav .enavt .entitle{float:left;width:16%;height:40px;font-size:18px;color:#31708f;
        padding-top:6px;margin-left:15%;

    }
    .new .ernav .enavt .active{font-weight:600;color:#31708f;border-bottom:2px solid #31708f;}
    .new .ernav .zwhx{float:left;width:25%;height:1px;margin-top:16px;
        /*border:1px solid #000;*/
    }
    .nban-er{width:100%;height:360px;
        background: url("../images/news_ban.jpg") no-repeat center center;
        text-align:center;}
    .new .npart{width:80%;height:200px;margin-left:10%;padding:2%;border-bottom:1px solid #dcdcdc;}
    .new .npimg{float:left;width:35%;height:150px;}
    .new .npimg img{width:100%;height:100%;}
    .new .npc{float:right;width:60%;height:150px;}
    .npc .nptil{padding:10px 0;font-size:18px;font-weight: bold;color:#000;line-height: 25px;}
    .npc .nptime{color: #999;font-size: 12px;line-height: 32px;}
    .npc .npcont{color: #999;font-size: 14px;line-height: 21px;}


}








/*index.html typical customer part*/

#hexGrid {
    overflow: hidden;
    width: 72%;
    margin: 30px auto;
    padding:0.866% 0;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
}
#hexGrid:after {
    content: "";
    display: block;
    clear: both;
}
.hex {
    position: relative;
    list-style-type: none;
    float: left;
    overflow: hidden;
    visibility: hidden;
    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
    -webkit-transform: rotate(-60deg) skewY(30deg) translatez(-1px);
        -ms-transform: rotate(-60deg) skewY(30deg) translatez(-1px);
            transform: rotate(-60deg) skewY(30deg) translatez(-1px);
}
.hex * {
    position: absolute;
    visibility: visible;
    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hexIn {
    display:block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate(60deg);
        -ms-transform: skewY(-30deg) rotate(60deg);
            transform: skewY(-30deg) rotate(60deg);
}

/*** HEX CONTENT **********************************************************************/
.hex img {
    left: -100%;
    right: -100%;
    width: auto;
    height: 100%;
    margin: 0 auto;
}

.hex h1, .hex p {
    color:#fff;
    width: 102%;
    left:-1%; /* prevent line on the right where background doesn't cover image */
    padding: 12%;
    box-sizing:border-box;
    background-color: rgba(0, 128, 128, 0.8);
    font-weight: 300;
    -webkit-transition:  -webkit-transform .2s ease-out, opacity .3s ease-out;
            transition:          transform .2s ease-out, opacity .3s ease-out;
}
.hex h1 {
    bottom: 35.5%;
    padding-top:50%;
    font-size: 1.2em;
    z-index: 1;
    -webkit-transform:translateY(-100%) translatez(-1px);
        -ms-transform:translateY(-100%) translatez(-1px);
            transform:translateY(-100%) translatez(-1px);
}
.hex h1:after {
    /*content: '';*/
    position: absolute;
    bottom: 0;
    left: 45%;
    width: 10%;
    text-align: center;
    border-bottom: 1px solid #fff;
}
.hex p {
    top: 59.5%;
    padding-bottom:50%;
    -webkit-transform:translateY(100%) translatez(-1px);
        -ms-transform:translateY(100%) translatez(-1px);
            transform:translateY(100%) translatez(-1px);
}


/*** HOVER EFFECT  **********************************************************************/
.hexIn:hover h1, .hexIn:focus h1,
.hexIn:hover p, .hexIn:focus p{
    -webkit-transform:translateY(0%) translatez(-1px);
        -ms-transform:translateY(0%) translatez(-1px);
            transform:translateY(0%) translatez(-1px);
}

/*** SPACING AND SIZING *****************************************************************/
@media (min-width:1201px) { /* <- 5-4  hexagons per row */
    .hex {
        width: 19.2%; /* = (100-4) / 5 */
        padding-bottom: 22.170%; /* =  width / sin(60deg) */
    }
    .hex:nth-child(9n+6),
    .hex:nth-child(9n+7),
    .hex:nth-child(9n+8),
    .hex:nth-child(9n+9) {
        margin-top: -4.676%;
        margin-bottom: -4.676%;
        -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
            -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                transform: translateX(50%) rotate(-60deg) skewY(30deg);
    }
    .hex:nth-child(9n+6):last-child,
    .hex:nth-child(9n+7):last-child,
    .hex:nth-child(9n+8):last-child,
    .hex:nth-child(9n+9):last-child {
        margin-bottom: 0;
    }
    .hex:nth-child(9n+6) {
        margin-left: 0.5%;
        clear: left;
    }
    .hex:nth-child(9n+10) {
        clear: left;
    }
    .hex:nth-child(9n+2),
    .hex:nth-child(9n+ 7) {
        margin-left: 1%;
        margin-right: 1%;
    }
    .hex:nth-child(9n+3),
    .hex:nth-child(9n+4),
    .hex:nth-child(9n+8) {
        margin-right: 1%;
    }
}
@media (max-width: 1200px) and (min-width:901px) {/* <- 4-3  hexagons per row */
    .hex {
        width: 24.25%; /* = (100-3) / 4 */
        padding-bottom: 28.001%; /* =  width / sin(60deg) */
    }
    .hex:nth-child(7n+5),
    .hex:nth-child(7n+6),
    .hex:nth-child(7n+7) {
        margin-top: -6.134%;
        margin-bottom: -6.134%;
        -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
            -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                transform: translateX(50%) rotate(-60deg) skewY(30deg);
    }
    .hex:nth-child(7n+5):last-child,
    .hex:nth-child(7n+6):last-child,
    .hex:nth-child(7n+7):last-child {
        margin-bottom: 0;
    }
    .hex:nth-child(7n+2),
    .hex:nth-child(7n+6) {
        margin-left: 1%;
        margin-right: 1%;
    }
    .hex:nth-child(7n+3) {
        margin-right: 1%;
    }
    .hex:nth-child(7n+8) {
        clear: left;
    }
    .hex:nth-child(7n+5) {
        clear: left;
        margin-left: 0.5%;
    }
}
@media (max-width: 900px) and (min-width:601px) { /* <- 3-2  hexagons per row */
    .hex {
        width: 32.666%; /* = (100-2) / 3 */
        padding-bottom: 37.720%; /* =  width / sin(60) */
    }
    .hex:nth-child(5n+4),
    .hex:nth-child(5n+5) {
        margin-top: -8.564%;
        margin-bottom: -8.564%;
        -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
            -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                transform: translateX(50%) rotate(-60deg) skewY(30deg);
    }
    .hex:nth-child(5n+4):last-child,
    .hex:nth-child(5n+5):last-child {
        margin-bottom: 0;
    }
    .hex:nth-child(5n+4) {
        margin-right: 1%;
        margin-left: 0.5%;
    }
    .hex:nth-child(5n+2) {
        margin-left: 1%;
        margin-right: 1%;
    }
    .hex:nth-child(5n+6) {
        clear: left;
    }
}
@media (max-width: 600px) { /* <- 2-1  hexagons per row */
    .hex {
        width: 49.5%; /* = (100-1) / 2 */
        padding-bottom: 57.158%; /* =  width / sin(60) */
    }
    .hex:nth-child(3n+3) {
        margin-top: -13.423%;
        margin-bottom: -13.423%;
        -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
            -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                transform: translateX(50%) rotate(-60deg) skewY(30deg);
    }
    .hex:nth-child(3n+3):last-child {
        margin-bottom: 0;
    }
    .hex:nth-child(3n+3) {
        margin-left: 0.5%;
    }
    .hex:nth-child(3n+2) {
        margin-left: 1%;
    }
    .hex:nth-child(3n+4) {
        clear: left;
    }
}
@media (max-width: 400px) {
    #hexGrid {
        font-size: 13px;
    }
}