@charset "utf-8";
/* CSS Document */


@media screen and (max-width:1280px) {
   .header-link a{
   	    font-size: 16px;
   	    width: 80px;
   }
   .index .article01 h1{
   	    font-size: 76px;
   }
   .index .article07 li{
   	    font-size: 18px;
   }
   .index .article08 h2{
   	    font-size: 40px;
   }
   .about .article03 .text{
        font-size: 18px;
   }
   .about .article03 h3{
        font-size: 28px;
        line-height: 40px;
    }
    .about .text p{
        margin: 10px 0 0;
    }

}
@media screen and (max-width:1160px) {
   .footer .foot{
   	    padding: 0 10%;
   }
   .footer .wx-box{
   	   float: left;
   }
   .footer .f-box{
   	    width: 20%;
   	    margin: 12px 0 0;
   	    padding: 0 5% 0  0;
   	    min-height: 238px;
   }
   .footer .copyright{
   	   margin: 0;
   }
   .footer .f-box img{
   	   width: auto;
   }

}
@media screen and (max-width:1024px) {
   .mongodb-navbar{
	    display: none;
	}
	.header .navbar-toggle{
		display: block;
	}
	.header .logo{
		width: 140px;
		padding: 10px 0;
		left: 5px;
		float: left;
		position: relative;
	}
	.header .head{
        height: 64px;
	}
	.section{
		padding: 64px 0 0;
	}
	.navbar-header {
		width: 100%;
		margin: 0 auto;
		background: rgba(0, 0, 0, 0.7);
	}
	.header .nav{
		height: auto;
	}
	.header .nav li{
		width: 100%;
		display: block;
	}
	.header .nav .name{
	    background: none;
	    color: #fff;
	    width: 100%;
	    line-height: 30px;
	    height: auto;
	    vertical-align: top;
	    font-size: 14px;
	    padding: 0;
    }
    .header .nav a:hover{
    	background: none;
    	color: #428bca;
    }
    .subnav{
    	position: relative;
    	background: none;
    	padding: 0;
    	top: 0;
    	width: 100%;
    	left: 0;
    	display: block;
      text-align: left;
    }
    .subnav .cont{
    	background: none;
    }
    .header .subnav a{
    	width: 20%;
    	padding: 0 15%;
    	background: none;
    	font-size: 12px;
    	line-height: 30px;
    }
    .header-link{
        display: none;
    	position: relative;
    	margin: 0 0 10px;
        background: rgba(0, 0, 0, 0.7);
      width: auto;
        padding-bottom: 10px;
    }
    .header-link .btn{
    	margin: 5px auto 0;
    	width:100%;
    	-webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    box-sizing: border-box;
	    line-height: 30px;
	    border: 1px solid #3dbce5;
      font-size: 18px;
    }
	.header .navbar-toggle {
		display: block;
		padding-top: 7px;
	}
	.header .mongodb-navbar {

		padding-top: 64px;
		width: 100%;
		display: none;
		/*background: rgba(55,174,173,0.8);*/
		
		background: rgba(0, 0, 0, 0.7);
	}
   .article .box{
   	    padding: 0 10px;
   }
   .index .article01 h1{
   	    font-size: 60px;
   }
    .index .article07 h2 {
      font-size: 30px;
    }
   .subpage .article01 .text{
     padding: 100px 10px 40px;
   }
   .subpage .article01 h1{
        font-size: 36px;
   }
   .subpage .article01{
       padding: 0;
   }
   .subpage .article01 h3{
       font-size: 20px;
       line-height: 30px;
   }
   .subpage .text h2{
       font-size:28px; 
       line-height: 40px;
   }
   .subpage .text p{
       margin: 10px 0 0;
       padding: 0 0 20px;
    }
    .subpage01 .article03 .right{
       width: 48%;
    }
    .about .article03 ul{
       margin: 0;
    }
    .about .article03 li{
        float: none;
        width: 310px;
        display: inline-block;
        *display: inline;
        _display: inline;
    }
    .about .article02 h3{
      font-size: 26px;
    }
    .about .article06 h2,
    .about .article05 .box01 h2{
        font-size: 38px;
    }
    .about .article05 li{
        font-size: 16px;
    }
    .about .article05 .box02 h2{
      font-size: 20px;
      margin: 0 0 10px;
      padding: 0 0 0 55px;
    }
    .about .article05 .box02 .iocn01{
       background: url(../images/ico_29.png) left center no-repeat;
       background-size: 44px 44px;
    }
    .about .article05 .box02 .iocn02{
       background: url(../images/ico_30.png) left center no-repeat;
       background-size: 44px 44px;
    }
    .about .article05 .box02 .iocn03{
       background: url(../images/ico_31.png) left center no-repeat;
       background-size: 44px 44px;
    }
    .about .article05 .box02 .iocn04{
       background: url(../images/ico_32.png) left center no-repeat;
       background-size: 44px 44px;
    }
    .city .tab a{
       width: 21%;
    }
    #signin{
       position: fixed;
       left: 0;
       right: auto;
       top: 64px;
       height: 100%;
    }

}
@media screen and (max-width:960px) {
   .index .article02 h2{
   	    font-size: 30px;
   }
   .index .article04 li{
   	    font-size: 16px;
   }
	.index .article05 .box{
		padding: 0 10px 0 158px;
	}
	.index .article05 .img{
		left: 10px;
	}
	.index .article07 h2{
		font-size: 26px;
	}
	.index .article07 .list p{
		margin: 0 3%;
	}
	.index .article07 li{
		font-size: 16px;
	}
	.index .article07 .btn{
		font-size: 20px;
		line-height: 36px;
    margin: 0 0 0 -60px;
	}
	.index .article08 h2{
		font-size: 30px;
	}
	.footer .foot{
   	    padding: 0 0 0 3%;
   }
   .footer .copyright{
   	   line-height: 20px;
   }
   .internet .tab-cont{
      height: 44px;
      line-height: 44px;
      background: url(../images/tab_01.png) no-repeat;
      background-size: 100% 44px;
      font-size: 22px;
   }
   .internet .tab02 .tab-cont{
      background: url(../images/tab_02.png) no-repeat;
      background-size: 100% 44px;
    }
   .internet .article03 h1{
      font-size:28px; 
   }
   .internet table .name{
      font-size:18px; 
   }
   .internet th{
      font-size: 22px;
   }
   .internet .article05 h2{
      font-size: 28px;
   }
   .internet .article05{
      font-size:20px; 
   }
   .price .article02 td{
      font-size: 16px;
   }
   .price .item{
      width: 26.36%;
   }
   .price .yellow{
      left: 21%;
   }
   .price .article02 h1{
       font-size: 24px;
       padding: 0 0 14px;
       line-height: 34px;
    }
    .price .article02 h2{
       font-size: 20px;
       line-height: 57px;
    }
    .price .article04 h1{
       padding: 0;
       line-height: 245px;
    }
   .price .article04 .btn{
       font-size: 16px;
   }
}

@media screen and (max-width:768px) {
   .index .article01 h1{
   	    font-size: 50px;
   }
   .index .article02 h2{
   	    font-size: 30px;
   }
   .index .article03 .point{
   	    font-size: 18px;
   }
   .index .article04 .two,
   .index .article04 .three{
		max-width: 320px;
		margin: 0 auto;
   }
   .index .article04 .two li,
   .index .article04 .three li{
   	    width: 94%;
   	    background: #595758;
   	    margin: 0 0 10px;
   }
   .index .article04 li p{
      width: 54%;
    }
    .index .article04 li .img{
      margin: 0 3% 0 0;
    }

   .index .article04 p span{
    display: inline-block;
   }
   .index .article04 .arrow{
   	    display: none;
   }
   .index .article06 .logo{
   	    width: 33.33%;
   }
   .index .article07 li{
   		width: 80%;
   		float: none;
   		margin: 0 auto 20px;
   		max-width: 331px;
      padding: 0;
      min-height: 200px;
   }
   .index .article07 .btn{
      position: relative;
      bottom: auto;
      margin: 10px auto 30px;
      left: auto;
   }
   .footer .f-box{
   	    width: 28.33%;
   }
   .footer .wx-box{
	   	float: none;
	   	margin: 0 auto;
   }

   .price .share {
      text-align: left;
   }
   .price .article02 .table02{
      display: none;
   }
   .price .article02 .box{
      margin: 30px 0;
   }
   .price .item{
      position: relative;
      bottom: auto;
      left: auto;
      right: auto;
      width: 100%;
      margin: 0 auto;
   }
   .iphone-name{
      display: inline-block;
      padding: 0 10px 0 0;
   }
   .price .article02 .one,
   .price .article02 .two{
      padding: 0;
   }
   .price .item td{
      padding: 12px 4%;
      line-height: 20px;
   }
   .price .article03 h3{
      font-size: 26px;
   }
   .price .article03 a {
        border: 4px solid #FEEB60;
        line-height: 51px;
        font-size: 18px;
        margin:4% 0 0 ;
   }
   .price .article04 .table02{
        display: block;
   }
   .price .article04 .box {
        margin: 330px auto 0;
        padding: 0 0 50px;
   }
   .price .article04 .item{
        position: absolute;
   }
    .price .article04 .box02,
    .price .article04 .box03{
        display: block;
    }

   .price .article04 .box01 .blue,
   .price .article04 .box01 .green,
   .price .article04 .box02 .yellow,
   .price .article04 .box02 .green,
   .price .article04 .box03 .yellow,
   .price .article04 .box03 .blue{
       display: none;
   }
   .price .article04 .item{
       min-width: 100px;
       width: 26.5%;
       right: 0;
   }
   .price .article04 .block{
       width: 73%;
       right: auto;
   }
   .price .article04 .box td{
      padding: 12px 2%;
      font-size: 12px;
   }
   .price .article04 .look{
      padding: 30px 0 0;
   }
   
   .about .article06 h2,
   .about .article05 .box01 h2{
      font-size: 28px;
   }
   .about .article05 li,
   .about .article05 .last{
      width: 44%;
      padding: 0 2%;
      min-height: 242px;
   }
   .about .article .box02{
      max-width: 560px;
   }
   .about .article05 .btn{
      font-size: 18px;
   }
   .city .tab a,
   .map-box{
      font-size: 16px;
   }
   .map-box .dress span{
      font-size: 15px;
   }
}


@media screen and (max-width:640px){
	.index .article01 h1{
		 font-size: 30px;
	}
	.index .article01 h3{
		 font-size: 22px;
	}
	.index .article01 .play{
		background-size: 14%;
		padding: 0 0 0 40px;
        font-size: 18px;
	}
	.article01 .btn{
		 font-size: 22px;
		 line-height: 44px;
		 padding: 0 20px;

	}
    .index .article03 li{
		 width: 29%;
	}
	.index .article03 .point02 p{
		  margin: 0;
	}
	.index .article03 .point02 span{
		  display: inline-block;
	}

  .footer .f-box{
    	width: 45%;
  }
  .subpage .article01 .text{
      min-height: 200px;
  }
  .subpage .article01{
      margin: 0;
  }
  .subpage .article01 h1{
      font-size: 22px;
      line-height: 40px;
  }
  .subpage .article01 h3{
      font-size: 18px;
  }
  .subpage .article .left,
  .subpage .article .right{
      float: none;
      width: 100%;
      padding: 0;
  }
  .subpage .article .right{
      padding: 20px 0 0;
  }

  .subpage .text h2{
      font-size: 18px;
      margin: 5px 0 0;
  }
  .subpage .text{
      font-size: 16px;
      line-height: 24px;
  }

  .internet .article03 h1{
      font-size:20px; 
   }
   .internet table .name{
      font-size:14px; 
   }
   .internet th{
      font-size: 18px;
   }
   .internet .article05 h2{
      font-size: 22px;
      line-height: 30px;
   }
   .internet .article05{
      font-size:16px; 
   }
   .about .article01 .text{
      min-height: 100px;
   }
   .about .text h2{
      margin: 7% 0 0;
   }
   .price .article02 h2{
      font-size: 16px;
   }
   .internet .article05 p span{
      display: inline;
   }
   .internet .article05 .contact span{
      font-size: 18px;
      background: url(../images/ico_35.png) no-repeat;
      background-size: 35px 35px;
      line-height: 35px;
      padding: 0 0 0 40px;
    }
    .internet .article05 a{
      font-size: 16px;
    }
    .internet .article05 .relation{
       margin: 0;
    }

}

@media screen and (max-width:480px) {
   .index .article02 h2{
		font-size: 22px;
   }
   .index .article03 li{
   	    width: 46%;
   }
   .index .article04{
   	padding: 30px 0;
   }
   .index .article05 .box{
   	    padding: 0 10px;
   	    text-align: center;
   }
   .index .article05 .img{
	   	position: relative;
	   	margin: 0 auto;
   }
   .index .article05 p{
   		padding: 10px 0 0;
   }
   .index .article06 .logo{
   	    width: 50%;
   }
   .index .article08 h2{
   	    font-size: 24px;
   }
   .index .article08 .btn{
   	   font-size: 18px;
   	   line-height: 50px;
   }
   .footer .foot{
   	    padding: 0 3%;
    }
    .footer .f-box{
    	width: 90%;
    	max-width: 150px;
    	margin: 0 auto 10px;
    	min-height:100px;
    	float: none;
    	padding: 0;
    }

    .subpage .article01 h1{
        font-size: 18px;
        line-height: 30px;
    }
    .subpage .article01 h3{
        font-size: 14px;
    }
    .subpage .article01 h3 span{
       display: inline;
    }
    .internet .article03 h1{
      font-size:16px; 
   }
   .price .article03 h3{
      font-size: 20px;
   }
   .price .article03 a {
        margin:40px 0 0 ;
        width: 150px;
   }
   .price .article04 .box td{
      padding: 12px 0;
   }
   .price .article04 .look{
      font-size: 12px;
      padding: 30px 10px;
      margin: 0;
   }
   .about .article05 li,
   .about .article05 .last{
      width: 94%;
      padding: 0 2%;
      min-height: 110px;
      float: none;
      max-width: 180px;
      margin: 0 auto 10px;
   }
    .internet .tab-cont{
      height: 34px;
      line-height: 34px;
      background: url(../images/tab_01.png) no-repeat;
      background-size: 100% 34px;
      font-size: 18px;
   }
   .internet .tab02 .tab-cont{
      background: url(../images/tab_02.png) no-repeat;
      background-size: 100% 34px;
    }
    .internet .article03 h1{
      margin: 22px 0 0;
   }

}
@media screen and (max-width:320px) {
  .index .article07 li{
  	   max-width: 310px;
  }
  .index .article04 li p{
      width: 58%;
    }
    .index .article04 li .img{
      width: 39%;
    }
   .internet th{
      font-size: 13px;
   }
   .internet .article04 .point{
      font-size: 14px;
   }
   .internet table .name{
      font-size: 12px;
   }
   .internet .tab-cont{
      font-size: 18px;
   }
   .price .article02 h3{
      padding: 3px 0 0;
   }
   .price .article04 .item{
      min-width: 89px;
   }
   .price .cont-box,
   .price .article02 h2{
      -moz-border-radius: 0px;
      -webkit-border-radius: 0px;
      border-radius: 0px;
   }
   .price .article04 h1{
      line-height: 226px;
   }
   .price .article04 .box03 .block h1{
      line-height: 240px;
   }
   .price .article02 h3 span{
      font-size: 20px;
   }
   .price .article04 .btn{
      font-size: 14px;
   }

   .about .article02 h3,
   .about .article06 h2,
   .about .article05 .box01 h2{
      font-size: 20px;
   }
}