@media only screen and (max-width: 860px){
	
	.container {
        width:100%;
        min-width:640px;
        /* border:1px solid #f00; */
    }

    .mobile-nav {
        display:block;
    }
    .nav {        
        float:right;
        margin-right:10px;
        position: relative;
        width: auto;
        display: inline-block;
        border: none;
        /* border:1px solid #f00; */
    }


      
    .btn-nav {
        
        position: relative;
        /* top: 10px;
        right: 20px; */
        background: transparent;
        border: none;
        padding: 10px;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease;
        cursor: pointer;
        z-index: 99999;
        /* border:1px solid #f00; */

    }
      
    .btn-nav:focus {
        outline: 0;
    }
      
    .icon-bar {
        display: block;
        margin: 5px 0;
        width: 20px;
        height: 2px;
        background-color: #555;
    }
      
    .btn-nav:hover .icon-bar {
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
        background-color: #555;
    }
      
    .nav-content {
        position: fixed;
        top: -100%;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        display: block;
        height: 100%;
        z-index: 99;
        padding:0 20px;
        /* border:1px solid #f00; */
    }
      
    .nav-list {
        list-style: none;
        padding: 0;
        position: relative;
        /* top: 30%; */
        top:50px;
    }
      
    .item-anchor:after {
        content: "";
        position: absolute;
        width: 3px;
        height: 3px;
        left: 0;
        bottom: 0;
        z-index: 9;
        background: transparent;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
    }
      
    .item-anchor {
        
        font-size: 14px;
        text-transform: uppercase;
        position: relative;
        text-decoration: none;
       
        /* border:1px dashed #f00; */
        
    }
      
    .item-anchor:hover,
    .item-anchor:focus {
        color: #0883c7;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
    }
      
    .item-anchor:hover:after,
    .item-anchor:focus:after{
        width: 100%;
        background: #0883c7;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
    }
      
    .nav-item {
        /* margin: 40px auto; */
        /* width:100%; */
        color: #666;
        text-align: right;
        height:50px;
        line-height:50px;
        padding: 0 25px;
        border-top: 1px solid #f2f2f2;
    }
      
    .animated {
        display: block;
        margin: 0 auto;
    }
      
    .animated:hover .icon-bar,
    .animated:focus .icon-bar{
        background-color: #555;
    }
      
    .animated:focus {
        cursor: pointer;
        z-index: 9999;
    }
      
    .middle {
        margin: 0 auto;
    }
      
    .icon-bar {
        -webkit-transition: all .7s ease;
        -moz-transition: all .7s ease;
        -ms-transition: all .7s ease;
        -o-transition: all .7s ease;
        transition: all .7s ease;
        z-index: 999999;
    }
      
    .animated .icon-bar {
        z-index: 999999;
        background-color: #0883c7;
    }
      
    .animated .top {
        -webkit-transform: translateY(6px) rotateZ(45deg);
        -moz-transform: translateY(6px) rotateZ(45deg);
        -ms-transform: translateY(6px) rotateZ(45deg);
        -o-transform: translateY(6px) rotateZ(45deg);
        transform: translateY(6px) rotateZ(45deg);
    }
      
    .animated .bottom {
        -webkit-transform: translateY(-8px) rotateZ(-45deg);
        -moz-transform: translateY(-8px) rotateZ(-45deg);
        -ms-transform: translateY(-8px) rotateZ(-45deg);
        -o-transform: translateY(-8px) rotateZ(-45deg);
        transform: translateY(-8px) rotateZ(-45deg);
    }
      
    .animated .middle {
        width: 0;
    }
      
    @keyframes showNav {
        from {
          top: -100%;
        }
        to {
          top: 0;
        }
    }
      
    @-webkit-keyframes showNav {
        from {
          top: -100%;
        }
        to {
          top: 0;
        }
    }
      
    @-moz-keyframes showNav {
        from {
          top: -100%;
        }
        to {
          top: 0;
        }
    }
      
    @-o-keyframes showNav {
        from {
          top: -100%;
        }
        to {
          top: 0;
        }
    }
      
    .show-nav {
        -webkit-animation: showNav 0.5s ease forwards;
        -moz-animation: showNav 0.5s ease forwards;
        -o-animation: showNav 0.5s ease forwards;
        animation: showNav 0.5s ease forwards;
    }
      
    @keyframes hideNav {
        from {
          top: 0;
        }
        to {
          top: -100%;
        }
    }
      
    @-webkit-keyframes hideNav {
        from {
          top: 0;
        }
        to {
          top: -100%;
        }
    }
      
    @-moz-keyframes hideNav {
        from {
          top: 0;
        }
        to {
          top: -100%;
        }
    }
      
    @-o-keyframes hideNav {
        from {
          top: 0;
        }
        to {
          top: -100%;
        }
    }
      
    .hide-nav {
        -webkit-animation: hideNav 0.5s ease forwards;
        -moz-animation: hideNav 0.5s ease forwards;
        -o-animation: hideNav 0.5s ease forwards;
        animation: hideNav 0.5s ease forwards;
    }

    .header-section {
        width:100%;
        /* border:1px solid #f00; */
    }
	
    .logo {
        /* width:100%; */
        float:none;
        text-align: center;
        margin:0 auto;
        /* border:1px solid #f00; */
    }

    .head {
        /* border:1px solid #f00; */
        /* margin-top:-30px; */
        padding-bottom:10px;
    }

    .navbar {
        display:none;
        /* border:1px solid #f00; */
    }

    .swiper-slide  {
        height: 200px;        
    }

    .swiper-slide-first {

        background: url(/static/index/images/site/banner01.jpg);
        background-size: auto 200px;

    }

    .swiper-slide-second {

        background: url(/static/index/images/site/banner02.jpg);
        background-size: auto 200px;
    }
    .items {
        width: 90%;
    }
    .items .item { 
        width: 50%;
        /* border:1px solid #f00; */
    }

    .game .item {
        display:block;
    }

    /* game */
    .game .item .pic {
        width: 100%;
        /* border:1px solid #f00; */
        
    }

    .game .item .info {
        clear:both;
        flex:none;
        width: 100%;
    }

    /* game-detail */

    .game-detail {
        width: 100%;
    }

    .game-detail .detail-left,  .game-detail .detail-right{ 
        width: 100%;
        /* border:1px solid #f00; */
    }
    .detail-right .name {
        text-align: center;
    }
    .detail-right .down-bar {
        text-align: center;
    }
    .detail-right .open-btn {
        margin: auto;
    }
    .detail-left .cover img {
        width: 80%;
        height:auto;
    }




    .detail-slider-list {
	    width: 100%;
    }






    /* about */

    
   






    .banner-section {
        width:100%;
        /* border:1px solid #f00; */
        max-width:100%;
        min-width:100%;
        height:300px;
    }
    .banner-single {
        margin:auto;
        width:100%;
        /* border:1px solid #ff0; */
        height:250px;
    }

    .banner-list .flexslider .slides li:nth-of-type(1) {
        height:300px;
        /* width:100%;  */
        /* background: url(../images/banner02.jpg) top center;   */
        background-size: auto 300px;
    }
    .banner-list .flexslider .slides li:nth-of-type(2) {
        height:300px;
        /* height:550px;
        width:100%; */
        /* background: url(../images/banner03.jpg) top center;  */
        background-size: auto 300px; 
        /* background:50% 50%; */
    }
    .banner-list .flexslider .slides li:nth-of-type(3) {
        height:300px;
        /* height:550px;
        width:100%; */
        /* background: url(../images/banner01.jpg) top center;  */
        background-size: auto 300px; 
        /* background:50% 50%; */
    }

    /* .banner-single .banner-about {
        margin:auto;
        width:100%;
        height:200px;
        background: url(../images/banner_contact_001.png) top center;   
    } */

    .container {
        /* border:1px solid #f00; */
        /* padding: 0 10px; */
    }

    .service-list .list{padding:0 10px;}
    .service-list .list li{width:32%;height:200px;padding:15px;text-align:center;margin-bottom:10px;}
    .service-list .list li div{margin:0 auto}
    .service-list .list li .p1{margin-top:10px;font-size:16px;color:#2a2a2a;text-align:center;font-weight: bold;}
    .service-list .list li .p2{margin-top:5px;font-size:14px;color:#616060;text-align:center;line-height: 20px;}

	.container-section{
        min-width: 100%;	
    }

    .box-section {
        margin:auto;
        width:100%;
    }

    .example-list .cate-bar ul {
        margin:auto;        
        width:300px;
        padding: 0 10px;
        /* border:1px solid #f00; */
    }
    .example-list .cate-bar li {
        /* float:left; */
        width:73px;        
    }

    .example-list .example-tab{
        margin:0 auto;
        padding: 0 10px;
    }

    .example-list .example-item {
        width:50%;
        margin:5px 0;
        /* padding:0 5px; */
        text-align: center;
    }

    .example-list .example-item img {
        margin:auto;
        width:95%;
        height:250px;
    }



    .customer-txt .scroll-item{
        width:100%;
        /* border:1px #f00 solid; */
    }
    #scroll .item {
        width:90%;
        height:320px;     
        
        /* border:1px #f00 solid; */
    }
    .customer-txt .owl-item {
        width:90%;
        /* border:1px #f00 solid; */
    }


    .customer-list {
        margin:auto 10px;
    }
    .customer-list li {
        width:33%;
    }

    .customer-list li img{
        width:95%;
        border-radius:5px;
    }
    

    
    .news-list {
        /* margin-top:50px; */
        /* margin:auto 10px; */
        padding:auto 10px;
        /* border:1px solid #f00; */
    }
    .news-list .news-item {
        width:50%;
        /* float:none;     */
        /* border:1px solid #ff0; */   
    }
    .news-list .news-item dl {    
        margin:auto;
        width:90%;
        padding:auto 10px;
        /* border:1px solid #f00; */
    }


    .footer {
        min-width:100%;
    }
    .footer-section {
        width:100%;
    }    

    .footer-section .footer-column {
        /* width:33%; */
        width: 50%;
        /* border:1px solid #f00; */
        text-align:center;
        /* margin: 10px auto; */
        /* border: 1px solid #f00; */
    }
    .footer-section .footer-column h2 {
        margin: 10px auto;
        text-align: center;
    }


     /* 商城系统 */
    .cat-list {
        margin:auto 10px;
    }

    .cat-list dl{
        width:30%;
        margin:10px 0;
        padding:20px 5px;
    }
    .cat-list dt {
        font-size:16px;
        font-weight:bold;
    }

    .activity-list ul {
        margin:auto 10px;
    } 

    .industry-list ul {
        margin:auto 10px;        
    }
    .industry-list li {
        padding:10px 0;
        width:25%;
    }
    /* 商城系统 */



    /* news */
    .article-section {
        width:100%;

    }
    .article-section dl {
        margin:10px;
    }

    .category-section {
        margin:auto;
        width:95%;
        /* height:60px;
        line-height:40px;
        text-align:left;	 */
    }

    .category-section .category-bar li{
        padding:5px 20px;
        margin:30px 5px;
        border-radius: 5px;
    
    }    

    


    

    .ad-section {
        width:100%;
        /* margin-bottom:50px; */
    }
    .ad-section .list-item {
        margin:10px auto;
        margin-bottom:30px;
        width:50%;
        float:left;
        /* height:270px; */
        /* color:#fff; */
        /* background:#0883c7; */
        
    }
    
    .ad-section .list-item dt img {
        width:90%;
        border-radius: 5px;
        -moz-box-shadow: 2px 2px 10px #e1e1e1;
        -webkit-box-shadow: 2px 2px 10px #e1e1e1;
        box-shadow:2px 2px 10px #e1e1e1;
    }
    .ad-section .list-item dd {
        height:30px;
        line-height:30px;
    }


    .case-list {
        padding:0 10px;
        /* border:1px #f00 solid; */
        
    }
    
    .case-list .list-item {
        width:50%;
        /* width:100%; */
        /* float:none; */
    }
    .case-list .list-item img {
        /* margin:5px 0; */
        width:95%;
        height:250px;
        /* height:350px; */
        color:#fff;
        /* background:#0883c7; */
        border-radius: 5px;
    }

    /* about */
    .instr-section .instr-image{
        float:none;
        margin:10px 0;
        width:100%;
        height:250px;
        /* background:#0883c7; */
        border-radius: 10px;
        background: url(../images/contact_bg.jpg) no-repeat top center;
    }
    .instr-section .instr-profile {
        float:none;
        width:auto;
        padding:0 10px;
    }
    
    .contact-section dd {
        padding: 5px 0;
        font-size:16px;
    }


    
    .image-wall {
        margin:auto;
        padding:0 20px;
        /* border:1px solid #f00; */
    }

    .image-wall .image-right,.image-wall .image-bg, .image-wall .image-md, .image-wall .image-sm {
        float:none;
    }
    .image-wall .image-bg {
        margin:5px auto;        
        width:60%;
        height:350px;      
    }
    .image-wall .image-right {
        width:100%;
    }
    
    .image-wall .image-md {
        float:right;
        margin:5px auto;
        width:50%;
    }
    .image-wall .image-md-02 {        
        width:50%;
    }
    .image-wall .image-sm {
        float:left;
        width:50%;
    }
    .image-wall .image-sm-03 {
        width:100%;
        height:400px;
        background:#0883c7;
        margin:5px 0;
        background: url(../images/wall_02.png) no-repeat top center;
        
    }
    .image-wall .image-md-02-01{
        width:95%;
        margin:5px auto;
        margin-top:0;
        background: url(../images/wall_02_01.png) no-repeat top center;
    }
    .image-wall .image-md-02-02{
        margin:5px auto;
        width:95%;
        background: url(../images/wall_02_02.png) no-repeat top center;
    }

}

@media only screen and (max-width: 479px) {

    
    .container {
        width:100%;
        min-width:320px;
        /* border:1px solid #f00; */
    }

    .banner-section {
        width:100%;
        /* border:1px solid #f00; */
        max-width:100%;
        min-width:100%;
        height:200px;
    }

    .banner-list .flexslider .slides li:nth-of-type(1) {
        height:200px;
        /* height:550px;
        width:100%; */
        /* background: url(../images/banner02.jpg) top center;   */
        background-size: auto 200px;
    }
    .banner-list .flexslider .slides li:nth-of-type(2) {
        height:200px;
        /* height:550px;
        width:100%; */
        /* background: url(../images/banner03.jpg) top center;  */
        background-size: auto 200px; 
        /* background:50% 50%; */
    }
    .banner-list .flexslider .slides li:nth-of-type(3) {
        height:200px;
        /* height:550px;
        width:100%; */
        /* background: url(../images/banner01.jpg) top center;  */
        background-size: auto 200px; 
        /* background:50% 50%; */
    }

    .banner-single .banner-sub {
        height:200px;     
    }

    

    /* pages */

    
	

    

    .sub-title {
        font-size:18px;
    }

    /* .service-list .list li {
        width:45%;
    } */

    .service-list .list{padding:0 10px;}
    .service-list .list li{width:49%;height:200px;padding:15px;text-align:center;margin-bottom:10px;}
    .service-list .list li div{margin:0 auto}
    .service-list .list li .p1{margin-top:10px;font-size:16px;color:#2a2a2a;text-align:center;font-weight: bold;}
    .service-list .list li .p2{margin-top:5px;font-size:14px;color:#616060;text-align:center;line-height: 20px;}

    

    

    .example-list .example-item img {
        margin:auto;
        width:95%;
        height:135px;
    }



    .customer-txt .scroll-item{
        width:90%;
    }
    #scroll .item {
        width:90%;
        height:280px;        
    }
    .customer-txt .owl-item {
        width:90%;
    }

    

    
    .customer-list {
        margin:auto 10px;
    }
    .customer-list li {
        width:50%;
    }

    .customer-list li img{
        width:95%;
        border-radius:5px;
    }

     /* 商城系统 */
     .cat-list dl{
        width:45%;
        margin:10px 0;
        padding:20px 5px;
    }
    .cat-list dt {
        font-size:16px;
        font-weight:bold;
    }

    .activity-list li {
        width:30%;
    }
    
    .industry-list li {
        padding:10px 0;
        width:30%;
    }
    /* 商城系统 */


    
    
    .news-list .news-item {
        margin-bottom:10px;
        width:100%;
        float:none;    
        /* border:1px solid #ff0; */   
    } 
    
    .news-list .news-item img {
        width:80%;
        /* float:none;     */
        /* border:1px solid #ff0; */   
    } 

    
    .footer-section .footer-column {
        width:50%;
        /* border:1px solid #f00; */
        text-align:center;
    }
    
    /* news */

    .list-section{
        width:100%;
    } 
    
    .list-section .list-item {

        width:100%;
        margin:10px 0;        
        /* width:300px; */
       
    }
    
    .list-section .list-item dt .list-title {
        width:240px;
    }

    .list-section .article-section {
        text-align:left;
        width:auto;
        padding:10px;
        width:100%;
        /* border:1px solid #f00; */
    }

    .article-section {
        width:100%;
        /* border:1px solid #f00; */
    } 

    .article-section dl{
        margin:10px;
    }

    .article-section img {
        margin:auto;
        width:90%;

    }
    
    .category-section .category-bar li{
        padding:3px 15px;
        margin:10px 5px;
        border-radius: 3px;
    
    }

    .case-list .list-item {
        width:100%;
        /* float:none; */
    }

    /* case */    
    .case-list .list-item img {
        /* height:150px; */
        /* height:280px; */
        height:auto;
        
    }

    /* about */

    .image-wall {
        margin:auto;
        padding:0 10px;
    }

    .image-wall .image-right,.image-wall .image-bg, .image-wall .image-md, .image-wall .image-sm {
        float:none;
    }
    .image-wall .image-bg {
        margin:5px auto;
        
        width:100%;
        height:320px;
    }
    .image-wall .image-right {
        width:100%;
    }
    
    .image-wall .image-md {
        float:none;
        width:100%;
        }
    .image-wall .image-md-02 {
        
        width:100%;
        
    }
    .image-wall .image-sm {
        float:none;
        width:100%;
    }
    .image-wall .image-sm-03 {
        width:100%;
        height:400px;
        
        
    }
    .image-wall .image-md-02-01{
        width:100%;
        
    }
    .image-wall .image-md-02-02{
        width:100%;
    }

    /* .image-wall {
        margin:auto;
        padding:0 10px;
    }
    .image-wall .image-bg {
        margin:5px auto;
        
        width:100%;
        height:400px;
        border-radius: 5px;
        background: url(../images/wall_01.png) no-repeat top center;
    }
    .image-wall .image-right {
        width:100%;
    }
    .image-wall .image-right,.image-wall .image-bg, .image-wall .image-md, .image-wall .image-sm {
        float:none;
    }
    .image-wall .image-md {
        margin:5px auto;
    }
    .image-wall .image-md-02 {
        width:100%;
        height:197px;
        background:#0883c7;
        margin:5px 0;
        border-radius: 5px;
    }
    
    .image-wall .image-sm-03 {
        margin: 5px auto;
        width:100%;
        height:400px;
        background:#0883c7;
        margin:5px 0;
        border-radius: 5px;
        background: url(../images/wall_02.png) no-repeat top center;
        
    }
    .image-wall .image-md-02-01{
        margin:5px auto;
        background: url(../images/wall_02_01.png) no-repeat top center;
    }
    .image-wall .image-md-02-02{
        margin:5px auto;
        background: url(../images/wall_02_02.png) no-repeat top center;
    } */

    
    

}