/*页面通用部分*/
.box_In{width: 94%;margin: 0 auto;}
img{display: block;width: 100%;margin-top: -1px;}
.hd{position: relative;}
.hd h2{position: absolute;width: 100%;color: #fff;font-size: 1.4em;top: 0;left:0;text-align:center;height: 1.8em;line-height: 1.8em;}
.btn{background: #CB3A44;color: #fff;font-size: 1.1em;width: 60%;display: block;margin: 6% auto 0; text-align: center;
padding: 2% 0 2.5%;border-radius: 20px;}
.box4 .btn{margin: 3% auto;width: 40%;}
.box4{padding-bottom: 3%;}

/*box1页面开始*/
.box1{background:#131313  url(../images/box1-bg.jpg) no-repeat top center; background-size: 100%;padding:6% 0 8%;}
.box1 ul{margin-top:5%;width: 100%;}
.box1 ul li{border: 1px solid red;border-radius: 5px;margin-top: 5%;position: relative;color: #fff;padding: 4% 0;}
.box1 ul li span{position: absolute;top:-15%;left: 2%; padding:3% 6% 3.8%;background: #CB3B45;border-radius: 5px;font-size: 1.2em;}
.box1 ul li .span3{ padding:5% 6%  5.8%;}
.box1 ul li p{font-size: 1em;margin-left: 32%;padding-right: 2%;}

.box2 {background:#131313;}
.box2  .top {width: 90%;margin: 0 auto;position: relative;padding-bottom: 1%;}
.box2  .top p{color:#030303;font-size:1.4em;position: absolute;top:0;left: 0;padding:1% 0;text-align: center;width: 100%;}
.box2  .top1{width: 90%;}

 #iframes{padding:2% 0;background:#131313;margin-top: -1px;}
 
 
.box3{background:#131313;padding: 5% 0;margin-top: -2px;}
.box3 ul{overflow: hidden;margin-bottom: 5%;}
.box3 ul li{float: left;width: 32%;text-align: center;}
.box3 ul li:nth-child(2){margin:0 2%;}
.box3 ul li img{width: 20%;margin: 0 auto;}
.box3 ul li .img2{margin-top: 8%;} 
.box3 ul li .img1{margin-bottom: 8%;}
.box3 ul li .btm{background: #FFFDE0;border-radius: 3px;padding: 10% 5%;color: #030303;}
.box3 ul li .btm h3{font-size: 1.2em;font-weight: bold;margin: 2% 0;}
.box3 ul li .btm p{font-size:.9em;}

.box4,.box5{background:#131313;margin-top: -1px;}
.box4 .img1{margin: 5% 0 0;}
.box4 .p1{color: #EDA258;text-align: center;padding: 5% 3% 0; color: #fff;}
.box4 span {font-size:.9em;text-align: center;color: #FFE04F;width: 100%;display: block;padding: 2% 0 3%;}
.box5{overflow: hidden;padding-bottom:3%;}
.box5 .title{padding:1% 0 3%;text-align: center;}
.box5 .title h3{color: #fff;font-size: 1.4em;line-height:1.6em;}
.box5 .title p{color: #EDA258;font-size: .8em;}
.box5 .title span{width: 10%;border-top: 1px solid #EDA258;display:inline-block;padding-top: 1%;}
.box5 ul{overflow: hidden;padding: 3% 0 0;}
.box5 ul li{width: 32%;float: left;position: relative;margin-bottom: 5%;}
.box5 ul .li1{margin: 0 2%;}
.box5 .btn{margin-top:2% ;margin-bottom:6%;width: 40%;}
.box6{background:#131313;margin-top: -2px;}
.box7{background:#131313;padding: 2% 0 5%;}
.box7 h2{width: 100%;color: #fff;font-size: 1.2em;text-align: center;}
.box7 ul{overflow: hidden;padding: 5% 0;}
.box7 ul li{float: left;width: 32%;color: #fff;text-align: center;position: relative;}
.box7 ul li:nth-child(2){margin: 0 2%;}
.box7 ul li a{width: 100%;font-size: 1.2em;color: #fff;position: absolute;left: 0;bottom:5%;text-align: center;display: block;}
.box7 .img1{width: 90%;margin: 2% auto 5%;}
.bdzx{width:100%; height: 2.5em; background: #1BAAF8; position: fixed; bottom:0; left:0; z-index: 99; max-width: 750px;}
.bdzx a{ line-height: 2.5em; color: #fff; display: block; float: left; width:49%; height: 2.5em; text-align: center;}
.bdzx a.zx_btn{border-right: 1px solid #fff; background: url('http://www.itheima.com/templates/subject/images/qq_icon.jpg') no-repeat 20% center; background-size: 10%;}
.bdzx a.tel_btn{ background: url('http://www.itheima.com/templates/subject/images/phone_bg.jpg') no-repeat 17% center; background-size: 12%;}
@media screen and (max-width: 320px){
    body{font-size: .9rem}
    .box7 ul li .p1{font-size: .7em;}   
}  
@media screen and (min-width: 412px) and (max-width: 414px){
	.hd h2{line-height: 2em;height: 2em;}
	.box2  .top p{padding: 1.5% 0;}
    }



/*大屏幕*/
@media screen and (min-width: 750px) {
    body{font-size: 1.5rem}
    .ban img,.box2,.box5,.box7{margin-top: -1px;}
    .hd h2{font-size: 1.6em;height: 2em;line-height: 2em;}
    .box1 ul li{border-radius: 10px;}
    .box1 ul li span{border-radius: 10px;}
    .box1 ul li .span4{padding:3% 6%;}
    .box1 ul li p{margin-left: 28%;}
    .box3 ul li .btm{padding:10% 15%;}
    .box4 .p1{padding:5% 8% 0;}
    .box7 ul li a{bottom:7%;}
    .box2  .top p{font-size: 1.8em;padding: 1% 0;}
     #iframes{height: 395px;margin-top: -1%;}
     .btn{width: 45%;border-radius: 40px;}
     .bdzx{height: 3.2em; left: 50%; margin-left: -375px;}
	 .bdzx a{font-size: 1.3em;} 
}