/*页面通用样式*/
body{background: #E8F4FF;}
img{display: block;width: 100%;}
.hd{width:96%;margin: 0 auto;}
.hd h2{text-align: center;font-size:1.4em;color: #592CBD;font-weight: bold;} 
.hd h2 span{color: #FF1999;margin-right: 3%;}
.hd .p1{font-size: 1em;color: #502D9E;margin: 2% 0;line-height: 1.4em;text-align: center;}
.hd .p1 span{font-size: .9em;color: #fff;background: #512F9E;padding:1% 3%;border-radius: 8px;}
.hd .p2{width:20%;border-top:5px solid #512F9E ;margin: 0 auto;}
.left{float: left;}
.right{float: right;}
.ofh{overflow: hidden;}
.a_btn{width:35%;color: #fff;text-align: center;display: block;font-size:1em;border-radius: 12px;box-shadow: 3px 3px 10px #8B50A0;margin: 2% auto 4%;padding:1.5% 0 2%; 
	background: #FF4E80;
	background: -webkit-linear-gradient(left, #FF129C 0%, #FF7D67 100%);
	background: -o-linear-gradient(left, #FF129C 0%, #FF7D67 100%);
	background: linear-gradient(to right, #FF129C 0%, #FF7D67 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF129C', endColorstr='#FF7D67',GradientType=0 );}
/*ban开始*/
.ban {position: relative;}
.ban .img1{position: absolute;top: 0;left: 0;z-index: 99;animation: mytop 2s infinite;-moz-animation: mytop 2s infinite;-webkit-animation: mytop 2s infinite;-o-animation: mytop 2s infinite;}
.ban .main{width: 100%; position: absolute;top: 0;left: 0;}
.ban .main .img2{padding: 2% 0 3%;width: 90%;}

/*box1开始*/
.box1{margin-top: 6%;}
.box1 .top{width: 90%;margin:6% auto 0;overflow: hidden;}
.box1 .top .left{width: 50%;}
.box1 .top .right{width: 50%;}
.box1 .top .right p{color: #FF1999;text-align: center;margin-top: 1%;}
.box1 .top .right .p1{font-size: 1.1em;}
.box1 .top .right .p2{font-size: 1em;font-weight:bold;}
.box1 .top .right .p4{font-size: 1em;}
.box1 .a_btn{width:65%;font-size: .9em;}
.box1 .btm{background: url(../images/box1-img2.jpg) no-repeat left 28%;background-size: 100%;position: relative;}
.box1 .btm .img3{width: 68%;}
.box1 .btm ul{width:56%;position: absolute;top: 0;left:22%;padding: 2% 5% 0;}
.box1 .btm ul .li1{font-size: 1.1em;font-weight: bold;color: #fff;padding-left: 2%;}
.box1 .btm ul .li2{font-size:1.8em;font-weight: bold;color: #FF4D81;line-height:1em;}
.box1 .btm ul .li3{font-size: .9em;color: #fff;padding-left: 4%;}
.box1 .btm ul .li3 i{text-decoration: line-through;}
.box1 .btm .img4{position: absolute;width: 25%;right: 2%;top: -20%;}
/*box2开始*/
.box2{margin-top: 8%;}
.box2 .hd .p1{text-align:center;font-size: .9em;}
.box2 .main{width: 96%;background: #584394;height: 7em;margin:15% auto 0;position: relative;}
.box2 .slideBox{ width:88%; position:relative;margin:0 auto;top: -21%;}
.box2 .slideBox .hd{width:30%;overflow:hidden; position:absolute;left:35%; bottom:16%; z-index:1; }
.box2 .slideBox .hd ul{width: 100%;overflow:hidden; zoom:1; float:left; }
.box2 .slideBox .hd ul li{ float:left;margin: 0 3%; width:14%;padding:7% 0;  background:#632BBB; cursor:pointer; }
.box2 .slideBox .hd ul li.on{ background:#B3A3E4;}
.box2 .slideBox .bd{ position:relative;  z-index:0;}
.box2 .slideBox .bd li{ zoom:1; vertical-align:middle; }
.box2 .slideBox .bd img{ width:100%; display:block; margin: 0 auto; }
.box2 .slideBox .bd ul li p{font-size: 1.2em;color: #5938A3;text-align: center;margin-top: 15%;}
/* 下面是前/后按钮代码，如果不需要删除即可 */
.box2 .slideBox .prev,
.box2 .slideBox .next{ position:absolute;width:4%;height: 2em;z-index: 99;}
.box2 .slideBox .next{right:-5%; top:28%;background: url(../images/btn-right.png) no-repeat 0;background-size: 100%;}
.box2 .slideBox .prev{left:-5%; top:28%;background: url(../images/btn-left.png) no-repeat 0;background-size: 100%;}

/*box3开始*/
.box3{margin-top:6%;padding-bottom: 8%;position: relative;
    background: #5B2DBD;
	background: -webkit-linear-gradient(top, #6428BB 0%, #4238C3 100%);
	background: -o-linear-gradient(top, #6428BB 0%, #4238C3 100%);
	background: linear-gradient(to bottom, #6428BB 0%, #4238C3 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6428BB', endColorstr='#4238C3',GradientType=0 );}
.box3 .hd h2{padding-top: 8%;}
.box3 .hd h2,.box3 .hd p,.box5 .hd h2,.box5 .hd p,.box6 .hd h2,.box6 .hd p{color: #fff;border-color: #fff;}
.box3 .img1{width: 90%;margin: 8% auto 6%;}
.box3 .img2{width: 8%;position: absolute;right:2% ;top:3% ;}
.box3 .img3{width: 10%;position: absolute;left:4% ;top:14% ;}
/*box4开始*/
.box4{margin-top: 8%;padding-bottom: 8%;}
.box4 .main{width: 96%;margin:8% auto 0;}
.box4 .main h3{width: 100%;color: #fff;font-size:1.25em;color: #fff;text-align: center;padding: 2% 0;background: #532CBB;	
	background: -webkit-linear-gradient(left, #3F31BF 0%, #6425B7 100%);
	background: -o-linear-gradient(left, #3F31BF 0%, #6425B7 100%);
	background: linear-gradient(to right, #3F31BF 0%, #6425B7 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3F31BF', endColorstr='#6425B7',GradientType=0 );}
.box4 .main img{margin: 8% auto 5%;width: 94%;}	
.box4 .main .p1{ font-size: 1em;color: #4E3B78;line-height: 1.5em;text-align: center;}	
.box4 .main .top .p1{text-align: left;}
.box4 .main .center{margin: 6% 0;}	
.box4 .main .center	.p1{margin-top: 2%;}
.box4 .main .center .P2{text-align: center;font-size: .9em;font-weight: bold;line-height: 1.2em;}
.box4 .a_btn{width: 45%;margin: 4% auto;}

/*box5开始*/
.box5 .top,.box6{position: relative;background: #5B2DBD;
	background: -webkit-linear-gradient(top, #6428BB 0%, #4238C3 100%);
	background: -o-linear-gradient(top, #6428BB 0%, #4238C3 100%);
	background: linear-gradient(to bottom, #6428BB 0%, #4238C3 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6428BB', endColorstr='#4238C3',GradientType=0 );}
.box5 .top .hd{padding: 8% 0;}
.box5 .top .img2{width: 10%;position: absolute;right:1% ;top:11% ;}
.box5 .top .img3{width: 8%;position: absolute;left:4% ;top:30% ;}
.box5 .main{background: #fff;padding-bottom: 5%;}
.box5 .main_hd{background: #328DE1;width: 100%;	box-shadow: 5px 5px 5px #DEDAF0;
	background: -webkit-linear-gradient(left, #10DFFF 0%, #5236C1 100%);
	background: -o-linear-gradient(left, #10DFFF 0%, #5236C1 100%);
	background: linear-gradient(to right, #10DFFF 0%, #5236C1 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#10DFFF', endColorstr='#5236C1',GradientType=0 );}
.box5 .main_hd p{text-align: center;padding: 2% 0;}
.box5 .main_hd  span{font-size: 1.2em;color: #fff;}
.box5 .main_hd  .span1{background: #5430BF;padding:0 2% .5%;font-size: 1.3em;}
.box5 .main_hd  .span2{font-weight: bold;margin-left:2%;}
.box5 .main_top {overflow: hidden;margin-top: 5%;width: 100%;}
.box5 .main_top .left{width: 14%;background: #5430BF;color: #fff;font-size: 1.3em;text-align: center;padding: .5% 0;}
.box5 .main_top .right{width: 86%;padding:0 2%;}
.box5 .main_top .right h3{font-size: 1.05em;color: #595380;margin-top:1%;}
.box5 .main_top .right .p1{font-size:.9em;color: #595380;margin: 2% 0 4%;}
.box5 .main_top .right .p2{font-size: 1em;color: #595380;border: 1px solid #4B32CA;font-size: .9em;font-weight: bold;color: #61559C;padding: 1% ;text-align: center;}
.box5  .lbt{height:16em;overflow: hidden;width: 90%;position: relative;margin:5% auto;}
.box5  .container {width:100%;margin:5% auto;}
.box5  .hub-slider {position: relative;}
.box5  .hub-slider ul {list-style: none;}
.box5  .hub-slider ul li {width:100%;position: absolute;left: 0;top: 0;background-size: cover;}
.box5  .a3 .main_top .right .p2{text-align: left;padding: 1% 2%;}
.box5  .b .main_hd{box-shadow: 5px 5px 5px #FFC1DE;
	background: #FF4286;	
	background: -webkit-linear-gradient(left, #FF169A 0%, #FF7E66 100%);
	background: -o-linear-gradient(left, #FF169A 0%, #FF7E66 100%);
	background: linear-gradient(to right, #FF169A 0%, #FF7E66 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF169A', endColorstr='#FF7E66',GradientType=0 );
}
.box5 .b .main_top .right h3{color: #56309D;}
.box5 .b .main_top .left{background: #FF4286;}
.box5  .c3 .main_top .right .p2{text-align: left;padding: 1% 2%;}
.box5 .b .lbt{margin: 6% auto 5%;}
.box5 .c3 .lbt{margin: 5% auto 3%;}
.box5 .main .btm p{font-size: 1em;color: #61559C;text-align: center;background: #fff;margin-bottom: 4%;} 
/*box6开始*/
.box6{padding-bottom: 6%;}
.box6 .hd{padding: 6% 0;}
.box6 ul{width: 90%;margin: 0 auto 5%;overflow: hidden;}
.box6 ul li{width: 28%;margin: 2% 2.5% 3%;float: left;}
.box6 ul li p{font-size: 1em;color: #fff;text-align: center;margin:5% 0 0;}
/*box7开始*/
.box7{background: #fff;padding-bottom: 10%;}
.box7 p{padding: 3% 2%;font-size: .8em;color: #fff;text-align: center;color: #000;line-height: 1.5em;}
.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}
	.box2{height: 26em;}
}
@media screen and (min-width: 412px) and (max-width: 414px){
	/*.box2{height: 27em;}*/
	.box2 .main{height:8em;}
	.box5  .lbt{height:18em;}
}
@media screen and (min-width: 750px){
	body{font-size: 1.5rem}
	.a_btn{border-radius: 18px;width:30%;}
	.box1 .a_btn{width:60%;}
	.box1 .btm ul{padding-top: 4%;}
	.box1 .btm ul .li2{line-height: 1.2em;}
	.box2 .main{height:9.2em;}
	.box2{height:6em;}
	.box4 .main{width: 80%;}
	.box4 .main .center{margin: 9% 0;}
	.box5  .lbt{height:22em;}
	.bdzx{height: 3.2em; left: 50%; margin-left: -375px;}
	.bdzx a{font-size: 1.3em;} 
}

/*鍔ㄧ敾*/
@keyframes mytop
{0% {top: 0px;}50%{top: 3%;}100%{top:0;}}
@-moz-keyframes mytop /* Firefox */
{0% {top: 0px;}50%{top: 3%;}100%{top:0;}}
@-webkit-keyframes mytop /* Safari 鍜? Chrome */
{0% {top: 0px;}50%{top: 3%;}100%{top:0;}}
@-o-keyframes mytop /* Opera */
{0% {top: 0px;}50%{top: 3%;}100%{top:0;}}