﻿/*=  ============================
    		
           ./ 当前目录
          ../ 父级目录
           / 根目录 
            合并导入 JZ
            
    ============================= */	



/*==



html,body{width:100%;font-family:adobe 黑体 std,微软雅黑,arial}

/*================= padding   用法    ========================

以核心为边界同心框

在网页之中，每一个元素都是由四部分组成的，从内到外分别是：

************************************************************************************
*                     margin   u外围留白留白                                        *
*                                                                                 *
*   ======================================================================        *
*                                                                                 *
*                    border   核心的边界，元素的边界，                                *
*                                                                                 *
*   ======================================================================        *
*                                                                                 *
*                         padding  核心留白                                        *
*                                                                                 *					  
*              ————————————————————————————————————————————————————               *
*          |                                                          |           *
*          |    content  核心 指的就是具体内容  比如说文字 图片等            |           *
*		   |                                                          |           *
*		       ————————————————————————————————————————————————————               *
*                                                                                 *			   
*                         padding  核心留白                                         *
*                                                                                 *
*     ======================================================================      *
*                                                                                 *
*						    margin   外围留白，留白                                  *
*                                                                                 *
************************************************************************************


margin=0 padding=0的意思就是，结构要比较紧凑，周围不要有空白。

*================= padding   用法    ========================*



	假设的你的盒子模型的字体大小为12像素：
<div id="box">
    <p>css代码中padding:1em 0 0 0;是什么意思</p>
</div>

那么：
#box{padding:1em 0 0 0;font-size:12px;}
就是ID为box的盒子模型，上补白为12*1(1em既1倍)=12像素，左右和下补白为0像素；
1em  0  0  0的顺序依次为
 上， 右，下 ，左。
 /* 应用于四个边 *
padding: 1em;

 垂直方向| 水平方向*
padding: 5% 10%;

顶部| 水平方向| 底部
padding: 1em 2em 2em; 

 顶部| 右边| 底部| 左边*
padding: 2px 1em 0 1em;

padding: inherit;
 
 
padding: 5%;                所有边给 5% padding
 padding: 10px;              /* 所有边给 10px padding 
 padding: 10px 20px;         /*  top and bottom 10px padding  
                            /*  left and right 20px padding  
 padding: 10px 3% 20px;      /*  top 10px padding          
                            /*  left and right 3% padding 
                            /*  bottom 20px padding       
 padding: 1em 3px 30px 5px;  /*  top    1em  padding  
                            /*  right  3px  padding  
                            /*  bottom 30px padding 
                            /*  left   5px  padding  
							
							
							
  ======================  padding   用法 ===========================*/						
							
/*=========================================================================
							
							
				语法：background-size: length|percentage|cover|contain;

值	描述
length	设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 “auto”。
percentage	以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 “auto”。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。			
							
											

    ======================  背景图片位置   用法 ============================*/


/*        .banner-1 .swiper-slide{background-position:center center;background-size:cover}  


首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件

swiper-wrapper轮滑组件(多组轮滑界面)

Pagination 分页(组件) - Element UI 

JqueryPagination是一个轻量级的jquery分页插件


      */

/*=========================================================================						
							
				语法：background-size: length|percentage|cover|contain;

值	描述
length	设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 “auto”。
percentage	以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 “auto”。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。			
																

    ======================  背景图片位置   用法 ============================*/
	
	/*--
	Author: W3layouts
	Author URL: http://w3layouts.com
	License: Creative Commons Attribution 3.0 Unported
	License URL: http://creativecommons.org/licenses/by/3.0/

	

/*================= padding   用法    ========================

	假设的你的盒子模型的字体大小为12像素：
<div id="box">
    <p>css代码中padding:1em 0 0 0;是什么意思</p>
</div>

那么：
#box{padding:1em 0 0 0;font-size:12px;}
就是ID为box的盒子模型，上补白为12*1(1em既1倍)=12像素，左右和下补白为0像素；
1em  0  0  0的顺序依次为
 上， 右，下 ，左。
 /* 应用于四个边 *
padding: 1em;

 垂直方向| 水平方向*
padding: 5% 10%;

顶部| 水平方向| 底部
padding: 1em 2em 2em; 

 顶部| 右边| 底部| 左边*
padding: 2px 1em 0 1em;

padding: inherit;
 
 
padding: 5%;                所有边给 5% padding
 padding: 10px;              /* 所有边给 10px padding 
 padding: 10px 20px;         /*  top and bottom 10px padding  
                            /*  left and right 20px padding  
 padding: 10px 3% 20px;      /*  top 10px padding          
                            /*  left and right 3% padding 
                            /*  bottom 20px padding       
 padding: 1em 3px 30px 5px;  /*  top    1em  padding  
                            /*  right  3px  padding  
                            /*  bottom 30px padding 
                            /*  left   5px  padding  
							

    ======================  padding   用法 ============================*/





/*--新导航条--*/


.topNav-ZD{height:1.69rem;background-color:#e30012;color:#fff}

.topNav-ZD .navTop{height:.99rem;overflow:hidden}

.topNav-ZD .navTop .logo{padding-top:.36rem;display:inline-block}

.topNav-ZD .navTop .xzzx{margin-top:.36rem;display:inline-block;font-size:.18rem;padding-left:.4rem;background:url(../iphone.png) no-repeat left center;line-height:1.6em}

.topNav-ZD .NavPc{background-color:#fff;text-align:center;height:.7rem}


/*--ZD--*/


.topNav-ZD .NavPc li.one_nav{position:relative}

.topNav-ZD .NavPc ul.two_nav{position:absolute;left:0;z-index:99}

.topNav-ZD .NavPc ul.two_nav li{line-height:40px;padding:0 26px;border-bottom:1px solid #fff}


.two_nav{background:rgba(255,255,255,.9);width:128px;display:none}

.topNav-ZD .NavPc li.one_nav:hover .two_nav{display:block}

.topNav-ZD .NavPc{position:relative}

.xdlogo{position:absolute;left:14%;top:0;height:70px;line-height:70px;display:none}

.xdtell a{color:#e30012}

.xdtell{position:absolute;color:#e30012;right:14%;top:0;height:70px;line-height:70px;font-size:.18rem;display:none}



/*--ZD--   #e30012 红色*/


.banner-1{height:877px;overflow:hidden;background-color:#e30012;position:relative}


.banner-1 .swiper-slide{background-position:center center;background-size:cover}


.indexBannerPagination{position:absolute;width:100%;text-align:center;z-index:9;bottom:.4rem}

.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:.4rem}

.swiper-pagination-bullet{background-color:#fff;width:12px;height:12px;border-radius:6px;opacity:1}

.swiper-pagination-bullet-active{width:30px}


.banner-1 .btnLeftRight{position:absolute;top:3.14rem;z-index:9}

.banner-1 .btnLeft{left:2.96rem}.banner-1 .btnRight{right:2.96rem}


.indexTitName{text-align:center;font-size:.3rem;font-weight:700;line-height:1em;padding:20px 0;background-color:#f1f1f1}




/*--优势--*/


.ysfw{background-color:#ededed}

.ysfw .contentBox{background-color:#fff;height:5.24rem;text-align:center;font-size:0}

.ysfw .contentBox .item-ZD{display:inline-block;margin:0 1px;height:100%;background-color:#ededed;font-size:.27rem;width:1.48rem;position:relative}

.ysfw .contentBox .item-ZD .word{position:absolute;width:100%;bottom:1.08rem;left:0;line-height:1.6em}

.ysfw .contentBox .item-ZD .imgBox{position:absolute;width:100%;height:.62rem;top:1.14rem;left:0;background-position:center center;background-size:contain;background-repeat:no-repeat}

.ysfw .contentBox .item-ZD:nth-of-type(1) .imgBox{background-image:url(../index_01.png)}

.ysfw .contentBox .item-ZD:nth-of-type(2) .imgBox{background-image:url(../index_02.png)}

.ysfw .contentBox .item-ZD:nth-of-type(3) .imgBox{background-image:url(../index_03.png)}

.ysfw .contentBox .item-ZD:nth-of-type(4) .imgBox{background-image:url(../index_04.png)}

.ysfw .contentBox .item-ZD:nth-of-type(5) .imgBox{background-image:url(../index_05.png)}

.ysfw .contentBox .item-ZD:nth-of-type(6) .imgBox{background-image:url(../index_06.png)}

.ysfw .contentBox .item-ZD:nth-of-type(7) .imgBox{background-image:url(../index_07.png)}

.ysfw .contentBox .item-ZD:nth-of-type(8) .imgBox{background-image:url(../index_08.png)}

.ysfw .contentBox .item-ZD:hover{background-color:#e30012;color:#fff}

.ysfw .contentBox .item-ZD:nth-of-type(1):hover .imgBox{background-image:url(../index_11.png)}

.ysfw .contentBox .item-ZD:nth-of-type(2):hover .imgBox{background-image:url(../index_12.png)}

.ysfw .contentBox .item-ZD:nth-of-type(3):hover .imgBox{background-image:url(../index_13.png)}

.ysfw .contentBox .item-ZD:nth-of-type(4):hover .imgBox{background-image:url(../index_14.png)}

.ysfw .contentBox .item-ZD:nth-of-type(5):hover .imgBox{background-image:url(../index_15.png)}

.ysfw .contentBox .item-ZD:nth-of-type(6):hover .imgBox{background-image:url(../index_16.png)}

.ysfw .contentBox .item-ZD:nth-of-type(7):hover .imgBox{background-image:url(../index_17.png)}

.ysfw .contentBox .item-ZD:nth-of-type(8):hover .imgBox{background-image:url(../index_18.png)}



/*--最新活动--*/


.zxhdjContent{position:relative;height:6.45rem;background:url(../hd_bg1.jpg) no-repeat center center;background-size:cover;overflow:hidden}


.zxhdjContent .layer01{height:.97rem;width:100%;position:absolute;bottom:-.01rem;left:0;background:url(../indexzxhd001.png) no-repeat center top;background-size:cover}


.zxhdjContent .layer02{width:100%;height:100%;box-sizing:border-box;padding:.9rem 0 .2rem;position:absolute;bottom:-100%;left:0;z-index:2;background:url(../indexhdbg.png) no-repeat center top;background-size:cover}


.zxhdjContent .layer02 .item-ZD{float:left;margin-right:.53rem;width:1.97rem;position:relative}

.zxhdjContent .layer02 .item-ZD img{width:100%}.zxhdjContent .layer02 .item-ZD:nth-of-type(5n){float:right;margin-right:0}

.zxhdjContent .layer01.current{animation:zxhdLayer01 2s;animation-fill-mode:forwards}

.zxhdjContent .layer02.current{animation:zxhdLayer01 2s;animation-fill-mode:forwards}

.zxhdjContent:hover .layer01{bottom:-100%;transition:all .5s}

.zxhdjContent:hover .layer02{bottom:0;transition:all 1s}

.zxhdjContent .layer01{display:none}.zxhdjContent .layer02{bottom:unset}

.zxhdjContent .layer02 .index_hd_sj{position:absolute;top:-90px;left:.6rem;display:none}

.zxhdjContent .layer02 .item-ZD:nth-of-type(3) .index_hd_sj{display:block}


/*--历年成绩-*/


.lncjContent{min-height:10.46rem;background:url(../indexBk_03.jpg) no-repeat center center;background-size:cover}

.lncjContent .top{height:1rem;border-bottom:.03rem solid #e30012;margin-bottom:145px;position:relative}.lncjContent .top .conWidth{position:relative;bottom:-.8rem}

.lncjContent .top .item-ZD{margin-left:100px;display:inline-block;cursor:pointer}.lncjContent .top .Icon{width:.36rem;height:.36rem}

.lncjContent .top .year{font-size:.36rem;height:.6rem;line-height:.6rem;color:#4d4d4d}.lncjContent .top .item-ZD.current .Icon{width:100%;background:url(../index_46.png) no-repeat center center;background-size:contain}

.lncjContent .top .conWidth .more{position:absolute;bottom:0;right:.5rem;font-size:.3rem;color:#4d4d4d}

.lncjContent .bottom{position:relative}.lncjContent .bottom .item-ZD{text-align:center;display:none}.lncjContent .bottom .more{position:absolute;bottom:0;right:.2rem;font-size:.16rem;color:#fff;display:inline-block;border-radius:.06rem;padding:.1rem;background-color:#e30012;line-height:1em}.lncj_cont{width:100%}

.lncj_cont li{float:left;width:29.33%;padding:0 2%;text-align:left}.lncj_cont_t{position:relative}

.lncj_cont_t_z{color:#e30012;font-size:.8rem}.lncj_cont_t_f{position:relative;font-size:.16rem;left:0;bottom:15px;font-weight:700;color:#000}.lncj_cont_c{font-size:.13rem;color:#666;line-height:24px;margin-top:10px}



/*--优秀学员战绩--*/


.yxxyzjContent{text-align:center;background:url(../indexBk_07.jpg) no-repeat center center;background-size:cover;padding:.5rem 0 .3rem}

.yxxyzjContent .item-ZD{
	display: inline-block;
	width: 240px;
	height: 424px;
	overflow: hidden;
	position: relative;
	background-color: #fff;
}

.yxxyzjContent .item-ZD .bkImg{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: all 1s;
}.yxxyzjContent .item-ZD:hover .bkImg{
	top: -100%;
}

.yxxyzjContent .item-ZD .PeopleImg{width:100%;display:none}

.yxxyzjContent .item-ZD .hoverIntro{width:100%;position:absolute;bottom:-100%;transition:all 1s;background:rgba(255,255,255,.9);color:#222;padding:.1rem;box-sizing:border-box;text-align:justify;font-size:.13rem}

.yxxyzjContent .item-ZD:hover .hoverIntro{bottom:0}

.yxxyzjContent .item-ZD .hoverIntro .sec1{width:100%}

.yxxyzjContent .item-ZD .hoverIntro .sec1 .name{font-size:.18rem;vertical-align:middle}

.yxxyzjContent .item-ZD .hoverIntro .sec1 .local{margin-top:.04rem}

.yxxyzjSwiper{width:1040px}.bxjj{background:#cbcbcb}




/*--班型简介--    margin外边距  */


.bxjjContent{height:7.42rem;padding:.3px 0;font-size:0}

.bxjjContent .item-ZD{height:100%;width:1.22rem;display:inline-block;background:#e5e5e5;margin:0 .05rem}

.bxjjContent .item-ZD:nth-of-type(1):hover{background:url(../bxjj01.jpg)}

.bxjjContent .item-ZD:nth-of-type(2):hover{background:url(../bxjj02.jpg)}

.bxjjContent .item-ZD:nth-of-type(3):hover{background:url(../bxjj03.jpg)}

.bxjjContent .item-ZD:nth-of-type(4):hover{background:url(../bxjj04.jpg)}

.bxjjContent .item-ZD:nth-of-type(5):hover{background:url(../bxjj05.jpg)}

.bxjjContent .item-ZD:nth-of-type(6):hover{background:url(../bxjj06.jpg)}

.bxjjContent .item-ZD:nth-of-type(7):hover{background:url(../bxjj07.jpg)}

.bxjjContent .item-ZD:nth-of-type(8):hover{background:url(../bxjj08.jpg)}

.bxjjContent .item-ZD:nth-of-type(9):hover{background:url(../bxjj09.jpg)}



/*--最强师资--*/



.zqszContent{height:8.2rem;background:url(../indexBk_05.png) no-repeat center center;background-size:cover;overflow:hidden}

.zqszContent .conWidth{position:relative;height:100%}

.zqszContent .leftCon{position:absolute;bottom:0;left:0;height:100%;width:80%}

.zqszContent .leftCon .zdPhotot{position:absolute;bottom:-1px;left:0;display:block;line-height:0;transition:all 1s}

.zqszContent .leftCon .intro{position:absolute;top:-100%;left:0;height:100%;transition:all 1s}

.zqszContent .leftCon:hover .zdPhotot{bottom:-100%}

.zqszContent .leftCon:hover .intro{top:0}

.zqszContent .rightCon{width:5.44rem;height:9.72rem;overflow:hidden;position:absolute;top:.46rem;right:0}

.zqszContent .swiper-container{width:100%;height:100%}

.zqszContent .swiper-slide{height:auto}

.zqszContent .rightConitem-ZD{width:1.58rem;height:2.34rem;overflow:hidden;position:relative;float:right;margin:0 .12rem .12rem 0;background-color:#25242a}

.zqszContent .rightConitem-ZD>img{width:100%}

.zqszContent .rightConitem-ZD .intro01{position:absolute;bottom:0;left:0;width:100%;box-sizing:border-box;padding:.05rem;background-color:#fff;line-height:1em;transition:all .5s}

.zqszContent .rightConitem-ZD .intro02{position:absolute;bottom:-100%;left:0;width:100%;box-sizing:border-box;background-color:rgba(255,255,255,.9);padding:.06rem .08rem;transition:all .5s}

.zqszContent .rightConitem-ZD .intro02 .name{font-size:.18rem}

.zqszContent .rightConitem-ZD .intro02 .intro{font-size:.13rem}

.zqszContent .rightConitem-ZD:hover .intro01{bottom:-100%}

.zqszContent .rightConitem-ZD:hover .intro02{bottom:0%}



/*--环境--*/


.gdhjTopBtnBox{height:.5rem;border-bottom:.03rem solid #e30012;
	margin-bottom: 20px;
	position: relative;
	text-align: center
}

.gdhjTopBtnBox .item-ZD{margin:0 50px;display:inline-block;cursor:pointer;position:relative;bottom:-.3rem}

.gdhjTopBtnBox .Icon{width:.36rem;height:.36rem}

.gdhjTopBtnBox .name{font-size:.3rem;height:.6rem;line-height:.6rem;color:#4d4d4d}

.gdhjTopBtnBox .item-ZD.current .Icon{width:100%;background:url(../index_46.png) no-repeat center center;background-size:contain}

.gdhjTopBtnBox .item-ZD.current .name{color:#e30012}.gdhjListBox{position:relative;width:1200px}

.certify{position:relative}.certify .swiper-slide{width:870px;box-shadow:0 8px 30px #ddd}.certify .swiper-slide img{width:100%}



/*--按钮图片     hjan-z.png ---   hjan-y.png  --*/


.certify-swiper-button-prev{left:-150px;background:0 0;width:75px;height:75px;background:url(../hjan-z.png) no-repeat center center;background-size:contain}

.certify-swiper-button-next{right:-150px;background:0 0;width:75px;height:75px;background:url(../hjan-y.png) no-repeat center center;background-size:contain}


.zxzxContent{background:url(../indexBk_09.jpg) no-repeat center center;background-size:cover;padding:.42rem 0 0}



/*--班型简介--*/


.NewsBox{display:flex;flex-wrap:wrap;justify-content:space-between}
.NewsBox .NewList{display:block;width:24%;background:#f1f1f1;line-height:1.6em;margin-bottom:.2rem}
.NewsBox .NewList .topImg{width:100%;height:2.06rem;overflow:hidden}
.NewsBox .NewList .topImg img{width:100%;height:100%}
.NewsBox .NewList .bottomBox{box-sizing:border-box;padding:.2rem .18rem;min-height:1.8rem}
.NewsBox .NewList .NameBox{font-size:.2rem;height:.45rem;overflow:hidden}

.NewsBox .NewList .chName{font-size:.2rem}
.NewsBox .NewList .enName{font-size:.2rem;font-family:Arial}
.NewsBox .NewList .intro{font-size:.15rem;color:#666}
.NewsBox .NewList .time{font-size:.13rem}
.moreNewsBox .moreNews{display:inline-block;font-size:.17rem;color:#fff;background-color:#e30012;border-radius:.1rem;padding:.01rem .1rem;margin:.1rem 0 .3rem}
.zbkcContent{background-color:#000;padding:.97rem 0 .58rem;position:relative}


/*--班型简介--*/


.zbkcContent>.conWidth{position:relative}.zbkcContent .swiper-slide a img{width:100%;max-width:100%}.zbk_cont_c{width:1200px}


/*--直播课程左右滚动按钮--*/

.zbkcLeftBtn{width:.24rem;height:.94rem;background:url(../index_78.png) no-repeat center center;background-size:contain;position:absolute;top:40%;left:-.5rem;z-index:2}

.zbkcRightBtn{width:.24rem;height:.94rem;background:url(../index_81.png) no-repeat center center;background-size:contain;position:absolute;top:40%;right:-.5rem;z-index:2}



.websiteBottom{background:url(../indexBk_10.jpg) no-repeat center center;background-size:cover;padding:.76rem 0;text-align:center;font-size:0}.websiteBottom .item-ZD{display:inline-block;font-size:.15rem;vertical-align:top;text-align:left;line-height:.34rem}

.websiteBottom .item-ZD1{width:1.56rem}.websiteBottom .item-ZD2{width:1.56rem;margin:0 1.7rem 0 1.6rem}.websiteBottom .item-ZD3{width:3.48rem}.websiteTit{line-height:1em;padding-bottom:.2rem;border-bottom:1px solid #878787;margin-bottom:.2rem}

.webListBox{}.webListBox a{display:block}.shareBox{margin-top:.3rem}.shareBox a{display:inline-block;width:.27rem;height:.23rem;background-size:contain;background-repeat:no-repeat;background-position:center;margin-right:.2rem}

.shareBox a.weinxin{background-image:url(../index_97.png)}.shareBox a.weibo{background-image:url(../index_99.png)}.shareBox a.qq{background-image:url(../index_101.png)}.zxzx_mobile{display:none}

.erweima{width:34%;float:left;padding-right:10%;font-size:13px;text-align:center}.erweima img{width:100%;max-width:100%}.s_red{color:#e30012}.er_des{border-top:1px solid #666;display:inline-block;margin-top:10px;line-height:20px;width:100%}

.jszf_cont img{}.di_nav{display:none}.tell_tan{display:none}.zxhdjContent .layer02 .item img{width:100%;max-width:100%}




.WY-DIV-FG{text-align: center;font-size:.3rem;font-weight: 700;line-height: 1em;padding: 10px;background-color: #f1f1f1}
