/*about_sta-----------------*/
.context{width: 100%;text-align: center;}
.banner{width: 100%;max-width: 1920px;height: 620px;margin: 0px auto;position: relative;}
.ban_con{width: 1300px;height: 620px;box-sizing: border-box;margin: 0px auto;padding-top: 250px;}
.con_div{width:100%;height: 220px;text-align: left;position: relative;z-index: 3;}
.con_div h3{font-weight: normal;font-size: 16px;color: #e94829;font-family: arial;}
.con_div h2{font-size: 44px;padding-left: 40px;margin: 50px 0px 30px;}
.con_div p{font-size: 16px;padding-left: 40px;line-height: 25px;}
.pc_imgs{position: absolute;top: 50%;right: 0px;margin-top: -180px;height: 360px;}

/*mode*/
.mode,.mode5{width: 100%;max-width: 1920px;margin: 0px auto;background: #000000;height: 760px;position: relative;}
.mode .canvas_div,.mode5 .canvas_div{z-index: 1;position: absolute;top: -150px;left: 0px;width: 100%;height: 300px;}
.mode_div{z-index: 3;width: 1300px;height: 100%;box-sizing: border-box;margin: 0px auto;padding-top: 100px;position: relative;}
.md_con{float: right;text-align: left;width: 460px;box-sizing: border-box;}
.md_con h2{color: #FFFFFF;font-size: 32px;font-weight: normal;}
.md_con p{color: #b4b4b4;font-size: 14px;line-height: 22px;margin: 20px 0px 50px;}
.md_con h3{color: #fefefe;font-size: 16px;font-weight: normal;margin-bottom: 15px;}
.md_con h3 span{width: 5px;height: 5px;border-radius: 5px;border: 1px solid #e94829;display: inline-block;margin-right: 15px;}

#wa .canvas_div{background: #ffffff;}
#wc .canvas_div{background: #000000;}
#wd .canvas_div{background: #ffffff;}
#wr .canvas_div{background: #e94829;}
#wm .canvas_div{background: #f9f9f9;}

.md_img{float: left;position: relative;width: 50%;height: 100%;}
.md_img img {position:absolute;left: 50%;margin-left: -393px;height: 100%;top: 0px;}

.mode2{background: #FFFFFF;height: 720px;}
.mode2 h2{color: #000000;}
.mode2 p{color: #4f4f4f;}
.mode2 h3{color: #000000;}
.mode2 .md_con{float: left;padding-left: 40px;}
.mode2 .md_img{float: right;}
.num_txt {
    position: relative;
    float: left;margin-right: 50px;margin-top: 40px;
}
.num_txt span {
    color: #000000;
    font-size: 44px;
    font-family: "DIN";
}
.num_txt span.addf {
    font-size: 36px;
    position: absolute;
    top: -6px;
    right: -15px;
}
.num_txt p {
    color: #000000;margin: 10px 0px 0px;
    font-size: 14px;
}


/*mode3*/
.mode3{background: #e94829;height: 760px;}
.mode3 h3 span{border: 1px solid #FFFFFF;}
.mode3 .add_btn{background: rgba(255,255,255,0.15);}
.mode3 .md_con{margin-top: 50px;}
.mode3 p{color: #f4c7c1;}

/**/
.mode4{height: 660px;background:#f9f9f9;}

/**/
.mode5{position:relative;height: 800px;background:url(../images/product5bg.jpg) no-repeat;background-position: top center;background-size: cover;}
.mode5 h2{font-weight: normal;font-size: 32px;color: #FFFFFF;}
.mode5 p{width: 850px;margin: 15px auto 30px;color: rgba(255,255,255,0.5);}
.md5_li {display: inline-block;color: rgba(254,254,254,0.5);font-size: 16px;margin: 0px 45px;}
.md5_li span{width: 5px;height: 5px;border-radius: 5px;border: 1px solid #e94829;display: inline-block;margin-right: 15px;position: relative;top: -2px;}
.md5_img{height: 250px;width: 100%;position: relative;margin-top: 60px;}
.md5_img img{width: 100%;position: absolute;top: 0px;left: 0px;}
.mode5 .add_btn{margin: 0 auto;margin-top: 115px;}

.add_btn{margin-top: 70px;cursor: pointer;text-align:center;width: 150px;height: 50px;background-color: #e94829;color: #FFFFFF;
border-radius: 50px;line-height: 50px;display: block;font-size: 16px;overflow: hidden;position: relative;z-index: 1;top: 0px;}
.add_btn span{position: relative;}
.add_btn3:hover{color: #FFFFFF;box-shadow: 0px 15px 15px 5px rgba(233,72,41,0.3);top:-3px}
/*.mode3 .add_btn:hover{box-shadow: 0px 15px 15px 5px rgba(233,255,255,0.3);}*/
.m_img{display: none;}

.add_btn2 i {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 0px;height: 100%;
    display: none /9;border-radius: 50px;
    background-color: #ffffff;
    /*background-color: #e94829;*/
}
.add_btn2:hover span{color:#e94829;}
.add_btn2:hover i {
    animation: addbtn 0.4s cubic-bezier(.77,0,.175,1) 0s forwards;
-webkit-animation: addbtn 0.4s cubic-bezier(.77,0,.175,1) 0s forwards;
}
@keyframes addbtn {
	0%{width: 0px;}
	100%{width: 100%;}
}


/*移动端*/
@media (max-width: 760px) {
.banner,.mode, .mode5{height: auto;}
.mode{background: #1e1e1e;}
.ban_con {width: 3.5rem;height: auto;padding-top: 0.5rem;}
.con_div {height: auto;padding-bottom: 0.4rem;}
.con_div h3 {font-size: 0.12rem;}
.con_div h2 {
    font-size:0.3rem;text-align: center;
    padding-left: 0;
    margin: 0.3rem 0rem;
}
.con_div p {
    font-size: 0.14rem;
    padding-left: 0;
    line-height: 0.24rem;
}
.con_div p br{display: none;}
.pc_img {
    position: initial;width: 100%;
    top: initial;
    right: initial;
    margin-top: 0;
}
.m_img{display: block;width: 100%;margin-top: 0.25rem;}
.pc_img,.pc_imgs{display: none;}

.mode_div {
    width: 3.5rem;
    height: auto;
    padding-top: 0.5rem;position: relative;
}
.md_con {
    float: none;
    width: 100%;
}
.md_img {
    float: none;
    width: 100%;
    height: auto;
}
.md_con h2 {
    font-size: 0.19rem;text-align: center;
}
.md_con p {
    color: #b4b4b4;
    font-size: 0.12rem;
    line-height: 0.23rem;
    margin: 0.3rem 0rem;
}
.md_con h3 {
    color: #fefefe;
    font-size: 0.14rem;
    margin-bottom: 0.15rem;padding-left: 0.6rem;
}
.md_img img {
    position: inherit;
    left: auto;
    margin-left: 0;
    height: auto;
    top: 0;
    width: 100%;
}
.mode_div .add_btn{position: absolute;bottom: 0.5rem;left: 50%;margin-left: -0.75rem;}
.add_btn {
    margin-top: 0;
    width: 1.5rem;
    height: 0.43rem;
    border-radius: 0.43rem;
    line-height: 0.43rem;
    font-size: 0.15rem;
}
.mode2{background: #FFFFFF;}
.mode2 .md_con {padding-left: 0px;}
.mode2 p {
    color: #4f4f4f;
}
.mode2 h3 {
    color: #000000;
}
.num_txt {
    margin-right: 0.45rem;
    margin-top: 0.25rem;
}.num_txt span {
    font-size: 0.38;
}
.num_txt span.addf {
    font-size: 0.36rem;
    top: -0.05rem;
    right: -0.18rem;
}.num_txt p {
    color: #000000;
    margin: 0.1rem 0 0;
    font-size: 0.12rem;
}
.num_ma1{padding-left: 0.6rem;}
.mode3 {
    background: #e94829;
}
.mode3 p {
    color: rgba(255,255,255,0.5);
}
.mode3 .add_btn {
    background: #FFFFFF;color: #e94829;
}
.mode3 .add_btn:after{background: #e6300d50;}
.mode4 {background: #f9f9f9;}
.mode4 p {
    color: #4f4f4f;
}
.mode5 h2 {
    font-weight: normal;
    font-size: 0.19rem;
    color: #FFFFFF;text-align: center;
}
.mode5 p {
    width: 100%;
    margin: 0.3rem 0rem;
    color: #b4b4b4;font-size: 0.12rem;
}
.md5_li {
    display: inline-block;
    color: #FFFFFF;
    font-size: 0.14rem;
    margin: 0px;
    margin-bottom: 0.15rem;
    padding-left: 0.6rem;
}
.mode5 .mode_div{text-align: left;}
.add_btn{top:auto;}
.md5_img img {
    width: 100%;
    position: relative;
    top: auto;
    left: auto;
}
.md5_img {
    height: auto;
    margin-top: 0.3rem;
    padding-bottom: 1rem;
}
.mp_no{display: block;}
.mp_hot{display: none;}
.div_mhot .mp_no{display: none;}
.div_mhot .mp_hot{display: block;}
.header .div_mhot{background-color: #e94829;}
.div_mhot .nav_btn_small > div{background-color: #ffffff;}
.add_btn3:hover{top: auto;}
.canvas_div{display: none;}
}