@charset "utf-8";
/* CSS Document */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin:0; padding:0;font-family:"微软雅黑";font-size:14px;}
table { border-collapse:collapse; border-spacing:0; margin:0; padding:0;}
textarea{resize:none;}
fieldset, img { border:0; }
img{ vertical-align:bottom;}
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }
ol, ul { list-style:none; }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; }
abbr, acronym { border:0; }
em,i{font-style: normal;}
.clear{zoom:1;}
.clear:after{ content:""; display:block; clear:both;}
a{ text-decoration:none; cursor:pointer;
  transition: 0.4s;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4;
  -ms-transition: 0.4s;}
a:hover{ text-decoration:none; cursor:pointer; }
a:focus { outline-style:none;}
body{
  width:100%;
  height:100%;
  overflow:hidden;
}
/*公共*/
.base{width:1200px;height:100%;position: relative;margin:0 auto; }
/*nav*/
.nav{width:100%;background:#000;border-bottom:1px solid #190f19;}
.nav div.base{overflow:visible;height:70px;}
.nav div.base a{position: relative;}
.logo{float:left;}
.nav_list{float: right;}
.logo img{margin:18px 0;}
.nav_list{margin-top:15px;}
.nav_list a{display:inline-block;color: #fff;font-size:14px; margin-left:40px;height:55px; line-height: 55px;}
.nav_list a:nth-child(1){color:#e45454;}
.nav_list a:hover{color:#e45454;}
/*banner*/
.page1 .banner_img1 {opacity: 0; -webkit-transform:scale(0.5, 0.5); transform:scale(0.5, 0.5); transition: all 1s;}
.page1.active .banner_img1 { opacity: 1; -webkit-transform:scale(1, 1); transform:scale(1, 1); transition-delay: 0.1s;}

.page1 .btn1 { bottom: -100px;opacity: 0; transition: all 0.8s;}
.page1.active .btn1 {bottom: 24%;opacity: 1; transition-delay: 0.5s;}

.page1{background:url(../img/h5_study/banner_bg.jpg) no-repeat; background-size:cover;}
.page1 .base{ height:90%;}
.page1 img,.page1 a{position: absolute;}
.page1 .banner_img1{left:10px;top:14%;}
.page1 .btn1{display:inline-block;padding:0 45px;left:50%; margin-left:-111px; margin-bottom:45px; height:50px; line-height: 50px;background: #f77d3b; color:#fff;font-size:22px; box-shadow:0px 2px 4px #000;}
.page1 .arrow{
    width:87px;
    height:87px;
    z-index:20;
    line-height:87px;
    text-align:center;
    position:absolute;
    left:50%;
    margin-left:-44px;
    bottom:110px;
    cursor:pointer;
    display:block;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
}
.page1 .arrow img {
    position:relative;
    top:24px;
    left:3px;
}
.arrow a{position: relative;}
.page1 .arrow:before, .page1 .arrow:after {
    content:'';
    position:absolute;
    left:0;
    top:0;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
    pointer-events:none
}
.page1 .arrow:before {
    width:88px;
    height:88px;
    border:1px solid #fff;
    -moz-transition:all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -o-transition:all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transition:all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition:all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955)
}
.page1 .arrow:after {
    width:86px;
    height:86px;
    border:2px solid #fff;
    background-color:rgba(255, 255, 255, 0.1);
    opacity:0;
    -moz-transform:scale(0.5, 0.5);
    -ms-transform:scale(0.5, 0.5);
    -webkit-transform:scale(0.5, 0.5);
    transform:scale(0.5, 0.5);
    -moz-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    transition:all 0.8s cubic-bezier(0.77, 0, 0.175, 1)
}
.page1 .arrow:hover:before {
    opacity:0;
    -moz-transform:scale(1.5, 1.5);
    -ms-transform:scale(1.5, 1.5);
    -webkit-transform:scale(1.5, 1.5);
    transform:scale(1.5, 1.5);
    -moz-transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -o-transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}
.page1 .arrow:hover:after {
    opacity:1;
    -moz-transform:scale(1, 1);
    -ms-transform:scale(1, 1);
    -webkit-transform:scale(1, 1);
    transform:scale(1, 1)
}
.page2{background:url(../img/h5_study/con1_bg.jpg) no-repeat center bottom; background-size:cover;}
.page2 h2,.page2 p,.page2 img{position: absolute;left:50%;}
.page2 h2,.page2 p{display:inline-block;color:#000;}

.page2 h2{font-size:56px;top:-200px;margin-left:-168px;transition: all 1s;opacity: 0; }
.page2 p{font-size:22px;top:-100px;margin-left:-132px;transition: all 1s;opacity: 0; }
.page2 .con1_img1{left:-1000px;bottom:8.5%;transition: all 1.2s;opacity:0;}
.page2 .con1_img2{left:auto;right:-1000px;bottom:11.5%;transition: all 1.2s;opacity:0;}
.page2.active h2{ top:6%; opacity:1;transition-delay: 0s;}
.page2.active p{ top:15.8%; opacity:1;transition-delay: 0s;}
.page2.active .con1_img1{left:133px;transition-delay:0s;opacity:1;}
.page2.active .con1_img2{right:130px;transition-delay: 0s;opacity:1;}

.page3{background:#000;}
.page3 .base{height:70%;}
.con3_top{background:#e45454;padding:40px 0; text-align: center;}
.con3_word{margin-bottom:10px;}
.con3_title img:nth-child(1){margin-left:30px;}
.con3_title img:nth-child(2){margin-right:30px;float:right;}
.con3_title{padding:30px 0; background:rgba(255,255,255,0.5);}

.fwxm ul {
    width:100%;
    height:100%;
}
.fwxm li {
    width:25%;
    height:100%;
    float:left;
    position:relative;
    text-align:center;
    color:#fff;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;

}
.fwxm li .fwxm_bg {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:0;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.fwxm li.li1{left:-300px;opacity:0;transition: all 1s;}
.active .fwxm li.li1{left:0;opacity:1;transition-delay: 0s;}
.fwxm li.li2{left:-200px;opacity:0;transition: all 1s;}
.active .fwxm li.li2{left:0;opacity:1;transition-delay: 0s;}
.fwxm li.li3{right:-200px;opacity:0;transition: all 1s;}
.active .fwxm li.li3{right:0;opacity:1;transition-delay: 0s;}
.fwxm li.li4{right:-300px;opacity:0;transition: all 1s;}
.active .fwxm li.li4{right:0;opacity:1; transition-delay: 0s;}


.fwxm li.li1 .fwxm_bg {
    background:#e45454;
}
.fwxm li.li2 .fwxm_bg {
    background:#09ad91;
}
.fwxm li.li3 .fwxm_bg {
    background:#97a913;
}
.fwxm li.li4 .fwxm_bg {
    background:#dd4a38;
}
.page3{background:url(../img/h5_study/con3_bg.jpg) no-repeat center center;background-size:cover;}
.fwxm li:hover .fwxm_bg{height:100%;}
.fwxm li .fwxm_main {
    position:absolute;
    left:25px;
    right:25px;
    top:35%;
    margin-top:-145px;
}
.fwxm li .ljzx {
    width:145px;
    height:35px;
    margin:35px auto 0 auto;
}
.fwxm li .ljzx a {
    width:143px;
    height:33px;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    display:none;
    line-height:33px;
    text-align:center;
    font-size:17px;
    color:#fff;
    border:1px solid #fff;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transition-delay:400ms;
    -moz-transition-delay:400ms;
    transition-delay:400ms;
}
.fwxm li:hover .ljzx a {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    display:block;
}
.fwxm li.li1:hover .ljzx a:hover {
    color:#ba292e;
    background:#fff;
}
.fwxm li.li2:hover .ljzx a:hover {
    color:#1599a5;
    background:#fff;
}
.fwxm li.li3:hover .ljzx a:hover {
    color:#5e904d;
    background:#fff;
}
.fwxm li.li4:hover .ljzx a:hover {
    color:#5d4378;
    background:#fff;
}
.fwxm li .fwxm_ico {
    width:110px;
    height:110px;
    margin:0 auto;
    overflow:hidden;
    border-radius:110px;
    -webkit-border-radius:110px;
    -moz-border-radius:110px;
    -webkit-transition: all 0.3s;
    - moz-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transition-delay:400ms;
    -moz-transition-delay:400ms;
    transition-delay:400ms;
}
.fwxm li.li1 .fwxm_ico {
    background:url(../img/h5_study/con3_ico1.png) no-repeat;
}
.fwxm li.li1:hover .fwxm_ico {
    background:url(../img/h5_study/con3_ico1.png) no-repeat 0 -110px;
}
.fwxm li.li2 .fwxm_ico {
    background:url(../img/h5_study/con3_ico2.png) no-repeat;
}
.fwxm li.li2:hover .fwxm_ico {
    background:url(../img/h5_study/con3_ico2.png) no-repeat 0 -110px;
}
.fwxm li.li3 .fwxm_ico {
    background:url(../img/h5_study/con3_ico3.png) no-repeat;
}
.fwxm li.li3:hover .fwxm_ico {
    background:url(../img/h5_study/con3_ico3.png) no-repeat 0 -110px;
}
.fwxm li.li4 .fwxm_ico {
    background:url(../img/h5_study/con3_ico4.png) no-repeat;
}
.fwxm li.li4:hover .fwxm_ico {
    background:url(../img/h5_study/con3_ico4.png) no-repeat 0 -110px;
}
.fwxm li h2 {
    margin-top:16px;
    line-height:44px;
    font-size:19px;
    font-weight:normal;
}
.fwxm li p {
    line-height:30px;
    font-size:15px;
}
.fwxm li .fwxm_des {
    line-height:26px;
    margin-top:20px;
    font-size:14px;
    text-align:left;
}
.page3 .tableCell{display: block;}
.page4{background:url(../img/h5_study/con4_bg.jpg) no-repeat center top; background-size:cover;}
.page4 .base{overflow:hidden;}
.page4 .tableCell{display:block;}
.page4 .con3_title,.page5 .con3_title,.page6 .con3_title{padding-top:100px; background:rgba(255,255,252,0.2);}

div.section4_base{display:table-cell;vertical-align:middle;height:750px;width:1200px;}
.section4_base span{display:block;width:190px; height:124px; padding-top:80px; background: url(../img/h5_study/con4_word_bg.png) no-repeat center bottom;color:#fff;font-size:22px; text-align:center; line-height: 34px; margin-bottom:18px;-webkit-transition:0.3s;-ms-transition:0.3s;-moz-transition:0.3s;-o-transition:0.3s;transition:0.3s;}
.section4_base span.on{background-position:center top;}
.section4_base li:nth-child(1){float:left;margin-left:80px;display:inline;}
.section4_base li:nth-child(2){width:728px;float:left;margin-left:90px;min-height:340px;display:inline;position: relative;}
.section4_base p{text-align:center;width:100%;margin-top:80px; font-size:14px; color:#fff;line-height: 32px;display:none;}
.section4_base p em{display:inline-block; text-align: left;}
.section4_base .img2{position: absolute;top:-220%;-webkit-transform:scale(2, 2); transform:scale(2, 2);transition: all 0.5s;}
.section4_base .img1{position: absolute;top:2%;left:60px;width:0;height:0; overflow:hidden; transition: all 0.8s;}

.active .section4_base .img2{top:10%;left:0px;-webkit-transform:scale(1,1); transform:scale(1,1);transition-delay: 0.8s;}
.active .section4_base .img1{top:2%;left:60px;width:607px;height:419px; overflow:hidden;transition-delay: 0s;}

.page5{background:url(../img/h5_study/con5_bg.jpg) no-repeat center top;background-size:cover;}
.page5 .tableCell{display:block;}
.page5 ul{position:relative;overflow:hidden;height:610px;margin-left:90px;opacity:0;-webkit-transform:scale(0); transform:scale(0);transition: all 1s;}
.page5.active ul{-webkit-transform:scale(1); transform:scale(1);opacity:1;transition-delay: 0.2s;}
.con5_h{height:800px; display:table-cell;vertical-align:middle;}
.page5 li{float:left; position: relative;}
.page5 li div{width:355px; height:203px;color:#fff;}
.page5 li div:nth-child(1){background: url(../img/h5_study/con5_word_bg1.png) no-repeat 0 43px; margin-bottom:90px;margin-top:55px;}
.page5 li div:nth-child(2){background: url(../img/h5_study/con5_word_bg2.png) no-repeat 0 top;padding-top:108px; height:56px;}
.page5 li div span{display:inline-block;font-size:22px;margin-left:15px;}
.page5 li div.on2 span{background:#d55256; padding:2px 10px;}
.page5 li div.on2{ background-position: 0 bottom;}
.page5 li:nth-child(1){z-index:2;}
.page5 li:nth-child(2){z-index:1;background: url(../img/h5_study/con5_word_bg3.png) no-repeat 0 top;left:-10px;width:607px;height:607px; }
.page5 li p{font-size:14px; color:#fff; text-align: center;padding-left:80px; padding-top:110px;line-height:28px;display:none;}
.page5 li:nth-child(2) p:nth-child(2){padding-top:36px; padding-left:100px;}
.page5 li em{display:inline-block;text-align:left;}

.page6{background: url(../img/h5_study/con6_bg.jpg) no-repeat center top; background-size:cover;}
.page6 .tableCell,.section7 .tableCell{display:block;}
.page6 ul{height:366px;}
.con6_h{position: absolute;bottom:40%;}
.con6_h li:nth-child(1){top:-100%;opacity:0;transition: all 1s;}
.active .con6_h li:nth-child(1){top:0; opacity:1;transition-delay: 0.3s;}
.con6_h li:nth-child(2){top:100%;opacity:0;transition: all 1s;}
.active .con6_h li:nth-child(2){top:0; opacity:1;transition-delay: 0.3s;}
.con6_h li:nth-child(3){top:-100%;opacity:0;transition: all 1s;}
.active .con6_h li:nth-child(3){top:0; opacity:1;transition-delay: 0.3s;}
.con6_h li{-webkit-transition: all 0.3s;position: relative;margin:0 59px;display:inline; float:left;height:364px;overflow:hidden;}
.con6_h li:after{content:"";-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;position: absolute; width:280px; height:175px; background:url(../img/h5_study/con6_img_bg.png) no-repeat; left:0; top:-175px;}
.con6_h em{display:block;position: absolute; bottom:0;width:100%;height:190px; background: #fff;}
.con6_h em i{width:100%;display:block;height:0px; background: #e45454;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;bottom:0;position: absolute;}
.con6_h div{width:250px;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;z-index:3;padding:15px;height:160px;position:absolute;bottom:0;color:#272727;border-bottom:3px solid #e45454;}
.con6_h h2{font-size:18px; margin-bottom:5px;font-size:18px;}
.con6_h p{font-size:14px; line-height: 26px;}
.con6_h li:hover:after{top:0;}
.con6_h li:hover i{height:190px;}
.con6_h li:hover div{color:#fff;}

.page7{background:url(../img/h5_study/con7_bg.png) no-repeat center top; background-size:cover;}
.page7 h3{text-align:center;font-size:54px;padding-top:20px;font-weight:bold;color:#272727; margin-bottom:15px;}
.con7_p1{text-align:center;font-size:34px; color:#5c5c5c; margin-bottom:30px;}
.page7 a{display:block;width:218px; height:65px; line-height: 55px; text-align:center; font-size:19px;color:#fff; background:url(../img/h5_study/con7_word_bg1.png) no-repeat center top; margin:0 auto; margin-bottom:50px;}

.con7_center{background:rgba(0,0,0,0.05);padding:35px;height:220px;margin-bottom:30px;}
.con7_center div{float:left; }
.con7_left1{width:410px;margin-right:70px;}
.con7_left1 h6,.con7_r2 h6{font-size:24px; padding-top:8px; color:#1d1d1d; margin-bottom:5px;}
.con7_left1 p,.con7_r2 p{font-size:14px; color:#3b3b3b; line-height: 32px; text-indent: 28px;}
.con7_r1,.con7_left2{position: relative;}
.con7_r1 img,.con7_left2 img{position:absolute;left:0; top:0;}
.con7_r1 p{font-size:30px; color:#e45454;font-weight:bold; position:absolute;left:450px;top:90px;}
.con7_bottom{height:255px;}
.con7_bottom div{float:left;}
.con7_left2{width:464px; height:250px; margin-right:30px; display:inline;}
.con7_left2 p{color:#fff;position:absolute;font-size:50px;left:45px; top:88px;}
.con7_left2 span{color:#f8e61e;font-weight:bold;}
.con7_r2{width:680px;}
.con7_r2 h6{padding-top:50px;}

.page8{background:url(../img/h5_study/con8_bg.jpg) repeat;}
.page8 h2{text-align:center; padding:80px 0;}
.page8 ul{height:560px;margin-left:120px;}
.page8 ul li{float:left;}
.page8 li:nth-child(2){padding-top:50px;}
.page8 .con8_p{width:612px;margin-bottom:20px;background:url(../img/h5_study/con8_word_bg.png);height:187px;padding-top:5px; text-align: center;font-size:22px; line-height: 42px; color:#fff;}
.con8_i{color:#fff;font-weight:bold;font-size:36px;margin-left:38px;}
.con8_i span{color:#fee433; font-size:50px; line-height: 80px;}
.zx{margin-left:155px;}

/*.section9 .tableCell{display:block;}
.base_bottom{position: absolute;bottom:0;width:100%;}
.c_bot{height:251px;overflow:hidden;}*/
@media screen and (min-height: 100px) and (max-height:800px){
       .page1.active .banner_img1{width:1000px;left:50%;margin-left:-500px;top:8%;}
       .page1.active .btn1{bottom:18%;}
       .page1 .arrow{bottom:5%;}
       .page3 .base{height:80%;}
       .page2.active .con1_img1{width:500px;height:auto;bottom:5%;left:210px;}
       .page2.active .con1_img2{width:350px;height:auto;bottom:3%;right:230px;}
       .page2.active h2{top:6%;font-size:40px;margin-left:-120px;}
       .page2.active p{top:15%;}
       .con3_top{display:none;}
       div.section4_base{height:500px;}
       .con5_h{height:400px;padding-top:50px;display:block;overflow-y:scroll;}
       .con6_h{bottom:34%;}
       .page7 .base,.page8 .base{height:600px;overflow-y:scroll;}
}