@charset "UTF-8";

* {
    text-decoration: none;
    color: inherit;
    resize: none;
    list-style-type: none;
    outline: none;
    outline: medium;
    font-style: normal;
    margin: 0;
    padding: 0;
    border: 0;
    font-family: "Microsoft YaHei", "iconfont";
    transition: 0.5s;
}

@font-face {
    font-family: 'iconfont';
    /* project id 653069 */
    src: url('./font_653069_b2nbhm7dz5n.eot');
    src: url('./font_653069_b2nbhm7dz5n.eot?#iefix') format('embedded-opentype'),
        url('./font_653069_b2nbhm7dz5n.woff') format('woff'),
        url('./font_653069_b2nbhm7dz5n.ttf') format('truetype'),
        url('./font_653069_b2nbhm7dz5n.svg#iconfont') format('svg');
}

body {
    min-width: 1200px;
    min-width: 1620px;
}


.main_left {}





/*头部导航*/
.nav {
    width: 100%;
    height: 120px;
    position: relative;
    overflow: hidden;
    line-height: 120px;
    font-size: 16px;
    background: #fff;
}

.nav .nav1 {
    width: 70%;
    margin: 0 auto;
}

.nav .nav1 img {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -26.5px;
    width: 143px;
    height: 53px;
}

.nav .nav1 .nav_list {
    float: right;
}

.nav .nav1 .nav_list label {
    float: left;
    padding: 0 20px;
    color: #666;
    position: relative;
    cursor: pointer;
}

.nav .nav1 .nav_list label i {
    position: absolute;
    top: 30px;
    left: 20px;
    height: 60px;
    width: 100px;
    color: #fe4b38;
    display: none;
}

.nav .nav1 .nav_list label:hover {
    color: #fe4b38;
}





/*banner大图*/
.banner {
    width: 100%;
    height: calc(100vh - 120px);
    position: relative;
    overflow: hidden;
}

.banner .box {
    width: 100%;
    height: 100%;
    background: #000;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0.3;
}

.banner .main {
    width: 1200px;
    height: 400px;
    background: rgba(0, 0, 0, 0);
    text-align: center;
    position: absolute;
    left: 50%;
    margin-left: -600px;
    top: 50%;
    margin-top: -200px;
    z-index: 99;
}

.banner .main h1 {
    font-size: 40px;
    color: #fff;
    font-weight: 200;
    user-select: none;
}

.banner .main h2 {
    color: #fff;
    font-weight: 200;
    margin-top: 10px;
    user-select: none;
}

.banner .main dd {
    width: 200px;
    height: 6px;
    background: #fe4b38;
    margin-top: 100px;
    position: absolute;
    left: 50%;
    margin-left: -100px;
}

.banner .main p {
    color: #fff;
    margin-top: 160px;
    font-weight: 300;
}

.banner .main button {
    height: 50px;
    width: 140px;
    margin-top: 50px;
    background: rgba(0, 0, 0, 0);
    border: 1px solid #fff;
    color: #fff;
    font-size: 22px;
    font-weight: 300;
    overflow: hidden;
    position: relative;
}

.banner .main button i {
    position: absolute;
    right: -100px;
    font-weight: bold;
    font-size: 30px;
}

.banner video {
    width: 100%;
}

.banner .main button:hover {
    border: 2px solid #fff;
    background: #fff;
}

.banner .main button:hover i {
    right: 54px;
    top: 4px;
    color: red;
}

.banner .main button:hover span {
    opacity: 0;
}









/*解决方案*/
.service {
    width: 100%;
    height: 900px;
    padding-top: 60px;
    position: relative;
}

.service h1 {
    text-align: center;
    color: #333;
    font-weight: 300;
    font-size: 40px;
    user-select: none;
}

.service p {
    text-align: center;
    color: #666;
    font-weight: 300;
    font-size: 20px;
    user-select: none;
}

.service ul {
    width: 80%;
    height: 500px;
    background: #fcfcfc;
    margin: 0 auto;
    position: relative;
}

.service ul li {
    display: block;
    height: 500px;
    width: 50%;
    float: left;
    text-align: center;
    position: relative;
}

.service ul li dd h2 {
    font-size: 22px;
    color: #dd2e05;
    font-weight: bold;
    padding: 50px 0 40px 0;
}

.service ul li dd h3 {
    font-size: 18px;
    color: #626262;
    font-weight: 400;
}

.service ul li dd i {
    display: block;
    margin: 80px auto;
    font-size: 60px;
    color: #dd2e05;
}

.service ul li dd h4 {
    font-size: 16px;
    color: #626262;
    font-weight: 400;
    padding: 0 20%;
}

.service ul li li {
    display: block;
    width: 100%;
    position: absolute;
    background: rgba(89, 54, 49, 0.7);
    top: 0;
    left: 0;
    height: 440px;
    opacity: 0;
}

.service ul li dl {
    position: absolute;
    display: block;
    height: 500px;
    width: 80%;
    float: left;
    text-align: center;
    top: 0;
    padding: 20px 10%;
    opacity: 0;
}

.service ul li dl dt {
    width: 46%;
    height: 70px;
    float: left;
    text-align: left;
    border-bottom: 1px solid #efe9e9;
    line-height: 70px;
    margin: 0 2%;
    user-select: none;
    color: #626262;
}

.service ul li dl h1 {
    font-size: 22px;
    color: #dd2e05;
    font-weight: bold;
    margin: 20px;
}

.service .btn {
    width: 180px;
    height: 40px;
    position: absolute;
    left: 50%;
    margin: 60px 0 60px -90px;
    line-height: 40px;
    text-align: center;
    border-radius: 24px;
    color: #fe4b38;
    font-size: 18px;
    border: 1px solid #999;
    cursor: pointer;
}



.service ul li:hover dd {
    opacity: 0;
}

.service ul li:hover dl {
    opacity: 1;
}

.service ul:hover li {
    opacity: 0.3;
}

.service ul li:hover {
    opacity: 1;
}

.service ul li dl dt:hover {
    color: #dd2e05;
}

.service .btn:hover {
    color: #fe4b38;
    border: 1px solid #fe4b38;
}



/*我们的优势*/

.hh {
    display: block;
    margin: auto;
    width: 600px;
    text-align: center;
    color: #fff;
    margin-top: 90px;
    font-weight: 300;
    font-size: 40px;
    user-select: none;
}

.pp {
    display: block;
    margin: auto;
    width: 600px;
    text-align: center;
    color: #fff;
    margin-top: 20px;
    font-weight: 300;
    font-size: 20px;
    user-select: none;
}

.ggg {
    width: 100%;
    height: 1000px;
    position: fixed;
    top: 0;
    z-index: -1;
    margin: auto;
}

.ggg img {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    top: -100%;
    bottom: -100%;
    right: -100%;
    left: -100%;
    margin: auto;
}

#la {
    float: left;
    width: 20%;
    font-size: 28px;
    position: relative;
    z-index: 99;
    text-align: center;
    color: #d4d4d4;
    height: 300px;
    padding: 200px 0 100px 0;
    text-align: center;
    user-select: none;
}

#la i {
    display: block;
    font-size: 60px;
    transition: .8s;
}

#la span {
    display: block;
    font-size: 24px;
    margin: 30px;
}

#la p {
    display: block;
    font-size: 18px;
    padding: 0 66px;
    opacity: 0;
    transition: 0;
}

#la:hover {
    color: #fff;
}

#la:hover p {
    opacity: 1;
}

#la:hover i {
    transform: rotatey(180deg);
}





.l1:hover~dl .img1 {
    opacity: 1;
}

.l2:hover~dl .img2 {
    opacity: 1;
}

.l3:hover~dl .img3 {
    opacity: 1;
}

.l4:hover~dl .img4 {
    opacity: 1;
}

.l5:hover~dl .img5 {
    opacity: 1;
}

.l1:hover~dl .img2,
.l1:hover~dl .img3,
.l1:hover~dl .img4,
.l1:hover~dl .img5 {
    opacity: 0;
}


.l2:hover~dl .img1,
.l2:hover~dl .img3,
.l2:hover~dl .img4,
.l2:hover~dl .img5 {
    opacity: 0;
}



.l3:hover~dl .img1,
.l3:hover~dl .img2,
.l3:hover~dl .img4,
.l3:hover~dl .img5 {
    opacity: 0;
}


.l4:hover~dl .img1,
.l4:hover~dl .img2,
.l4:hover~dl .img3,
.l4:hover~dl .img5 {
    opacity: 0;
}


.l5:hover~dl .img1,
.l5:hover~dl .img2,
.l5:hover~dl .img3,
.l5:hover~dl .img4 {
    opacity: 0;
}





/*我们的案例*/
.case {
    width: 100%;
    height: 1300px;
    margin: 0 auto;
    background: #fff;
    overflow: hidden;
    position: relative;
}

.case h1 {
    text-align: center;
    color: #333;
    font-weight: 300;
    font-size: 40px;
    margin-top: 90px;
    user-select: none;
}

.case h2 {
    text-align: center;
    color: #666;
    font-weight: 500;
    font-size: 20px;
    margin: 20px 0 60px 0;
    user-select: none;
}

.case dd {
    display: block;
    width: 100%;
    height: 680px;
    position: relative;
}

.case dd ul {
    width: 100%;
}

.case dd ul li {
    float: left;
    width: calc(33.33333% - 3px);
    height: 340px;
    position: relative;
    margin: 0 3px 3px 0;
    margin-top: 60px;
}

.case dd ul li img {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    top: -100%;
    bottom: -100%;
    right: -100%;
    left: -100%;
    margin: auto;
    z-index: 78;
    opacity: 1;
}

.case dd ul li h3 {
    display: block;
    width: 416px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    bottom: -36px;
    left: 50%;
    margin-left: -208px;
    user-select: none;
    font-weight: normal;
    font-size: 20px;
    position: absolute;
    z-index: 90;
    color: #626262;
}

dd ul li button {
    position: absolute;
    bottom: 80px;
    right: 140px;
    width: 100px;
    height: 30px;
    background: rgba(254, 75, 56, 0.7);
    opacity: 0;
    position: absolute;
    z-index: 88;
    color: #fff;
    cursor: pointer;
}

.case .btn {
    position: absolute;
    bottom: 100px;
    left: 50%;
    margin-left: -90px;
    width: 180px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 24px;
    color: #fe4b38;
    font-size: 18px;
    border: 1px solid #999;
    cursor: pointer;
}



dd ul li:hover img {
    width: 110%;
}

dd ul li:hover button {
    opacity: 1;
}

dd:hover li {
    opacity: 0.3;
}

dd ul li:hover {
    opacity: 1;
}

.case .btn:hover {
    color: #fe4b38;
    border: 1px solid #fe4b38;
}


/*关于我们*/
.about {
    width: 100%;
    background: #fe4b38;
    color: #fff;
}

.about ul li {
    float: left;
    width: 50%;
    font-weight: normal;
}

.about ul li h1 {
    padding: 40px 0 4px 100px;
    font-weight: normal;
    user-select: none;
}

.about ul li h2 {
    padding-left: 100px;
    font-weight: normal;
    user-select: none;
}

.about ul li p {
    padding: 40px 100px;
}

.about ul .ll {
    background: url(/Content/images/91.png) no-repeat center center;
    background-size: 100%;
    position: relative;
}

.about ul .ll dl {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(89, 54, 49, 0.7);
}

.about ul .ll img {
    position: absolute;
    display: block;
    left: 50%;
    margin-left: -174.5px;
    top: 50%;
    margin-top: -43.5px;
}


/*联系我们*/
.contact {
    width: 100%;
    height: 700px;
    background: #fff;
}

.contact h1 {
    text-align: center;
    color: #333;
    font-weight: 300;
    font-size: 40px;
    padding: 40px 0 20px;
    user-select: none;
}

.contact p {
    text-align: center;
    color: #666;
    margin: 14px 0;
    font-size: 18px;
}

.contact p i {
    color: #fe4b38
}

.contact ul {
    width: 64%;
    margin: 80px auto;
    overflow: hidden;
}

.contact ul li {
    float: left;
    width: 48%;
    border: 1px solid #ccc;
    margin-right: 4%;
    box-sizing: border-box;
    padding: 10px 0;
}

.contact ul li input {
    font-size: 18px;
    text-indent: 2em;
    width: 100%;
}

.contact ul dd {
    width: 100%;
    height: 200px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    margin-top: 80px;
}

.contact ul dd input {
    font-size: 18px;
    text-indent: 2em;
    padding: 10px 0;
    width: 100%;
}

.contact ul dl {
    width: 400px;
    margin: auto;
    margin-top: 40px;
}

.contact ul dl dt {
    float: left;
    width: 180px;
    height: 40px;
    cursor: pointer;
    line-height: 40px;
    text-align: center;
    border-radius: 24px;
    color: #fe4b38;
    font-size: 18px;
    border: 1px solid #999;
    box-sizing: border-box;
    margin-left: 40px;
}

.contact ul dl .nn {
    margin-left: 0;
    background: #3893fe;
    color: #fff;
    border: none;
}

.contact ul dl .nn:hover {
    background: #fff;
    color: #3893fe;
    border: 1px solid #999;
    box-sizing: border-box;
}

.contact ul dl .mm:hover {
    background: #fe4b38;
    color: #fff;
    border: none;
}



/*底部*/

.footer {
    background: #252e3a;
    position: relative;
}

.footer ul {
    width: 500px;
    height: 100px;
    margin: auto;
    color: #7f93ad;
    line-height: 100px;
}

.footer ul a {
    margin-left: 50px;
}

.footer dl {
    background: #21282e;
    height: 50px;
    color: #516474;
    font-size: 14px;
    padding: 0 10%;
    line-height: 50px;
    user-select: none;
}

.footer dl p {
    float: left;
}

.footer dl dt {
    float: right;
    padding: 0 10px;
    font-size: 20px;
    color: #f2f2f2;
    position: relative;
}

.footer dl dt img {
    position: absolute;
    bottom: 50px;
    right: 0px;
    width: 80px;
    display: none;
}

.footer .yuan {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #21282e;
    bottom: 16px;
    user-select: none;
    border-radius: 50px;
    color: #fe4b38;
    line-height: 40px;
    text-align: center;
    left: 50%;
    margin-left: -15px;
}

.footer ul a:hover {
    color: #fff;
}

.footer dl dt:hover img {
    display: block;
}


/*右下侧小菜单*/

.minb {
    position: fixed;
    width: 40px;
    height: 200px;
    top: 50%;
    right: 40px;
    z-index: 99;
}

.minb li {
    width: 14px;
    height: 14px;
    border-radius: 16px;
    background: #ddd;
    position: relative;
    margin: 14px 14px;
    cursor: pointer;
}

.minb li span {
    position: absolute;
    left: -70px;
    background: #fe4b38;
    ;
    border-radius: 14px;
    font-size: 14px;
    padding: 0 6px;
    display: none;
    color: #fff;
}

.minb li:hover {
    background: #fe4b38;
    width: 16px;
    height: 16px;
}

.minb li:hover span {
    display: block;
}

.mina {
    display: none;
}







/*右侧分页内容*/
/*一级*/
.page {
    position: fixed;
    top: 0;
    right: 0%;
    width: 0%;
    height: 100%;
    overflow: hidden;
    background: #fff;
    z-index: 100;
    box-shadow: 1px 0 0 #fe4b38;
}

.page em {
    position: absolute;
    right: 100px;
    top: 20px;
    padding: 15px;
    font-size: 34px;
    cursor: pointer;
    color: #333;
}

.page en {
    display: block;
    overflow: hidden;
    margin-left: 60px;
}

.page en label {
    display: block;
    width: 100%;
    height: 60px;
    font-size: 18px;
    color: #494949;
    cursor: pointer;
}

.page en h1 {
    font-size: 26px;
    font-weight: 300;
    padding: 40px 0;
    color: #fe4b38;
    user-select: none;
}

.page en h1 span {
    padding-right: 16px;
}



.p2 en h2,
.p6 en h2 {
    font-size: 24px;
    font-weight: 300;
    padding: 30px 0 40px 0px;
    color: #333;
    user-select: none;
    position: relative;
}

.p2 en h2 b,
.p6 en h2 b {
    display: block;
    position: absolute;
    width: 2em;
    height: 2px;
    background: #fe4b38;
    margin-top: 2px;
}

.p2 en p,
.p6 en p {
    font-size: 16px;
    font-weight: normal;
    text-indent: 2em;
    color: #666;
    padding-right: 50px;
}

.p2 en p {
    line-height: 1.4em;
}

.p6 en p {
    line-height: 2em;
}

.p2 en p span,
.p6 en p span {
    color: #fe4b38;
}

.p6 en li {
    color: #626262;
    font-size: 16px;
    padding: 6px 0;
}

.p6 en h3 {
    color: #fe4b38;
    font-size: 18px;
    font-weight: normal;
    padding: 20px 0 14px 0;
}

.p2 en ul {
    width: 90%;
    background: url(/Content/images/53.png) no-repeat center center;
    background-size: 100% 100%;
    ;
    overflow: hidden;
    margin-top: 20px;
}

.p2 en ul li {
    position: relative;
    float: left;
    width: 50%;
    height: 260px;
    background: rgba(55, 41, 40, 0.5);
    text-align: center;
    overflow: hidden;
    border: 1px solid #ddd;
    box-sizing: border-box;
    display: block;
}

.p2 en ul li i {
    font-size: 42px;
    color: #fff;
    margin-top: 70px;
    display: block;
}

.p2 en ul li h4 {
    color: #fff;
    background: none;
    margin-top: 20px;
    font-weight: normal;
}

.p2 en ul li p {
    position: absolute;
    color: #333;
    ;
    padding: 0 40px;
    bottom: 80px;
    opacity: 0;
}

.p2 en ul li button {
    position: absolute;
    bottom: 30px;
    width: 120px;
    height: 34px;
    left: 50%;
    margin-left: -60px;
    background: #fe4b38;
    color: #fff;
    font-size: 16px;
    opacity: 0;
}


.p6 en .timg {
    position: relative;
    height: 240px;
    width: 100%;
    box-shadow: 0 1px 0 #ddd, 0 -1px 0 #ddd;
}

.p6 en .timg dd {
    position: absolute;
    display: block;
    font-size: 24px;
    width: 300px;
    top: 100px;
    left: 80px;
    z-index: 100;
}

.p6 en .timg dd span {
    color: #fe4b38;
    font-size: 16px;
}

.p6 en .timg .img1 {
    position: absolute;
    left: -20px;
    top: 30px;
}

.p6 en .timg .img2 {
    position: absolute;
    right: 20px;
    bottom: -40px;
    z-index: 100;
    width: 40%;
}

.p6 en dt {
    width: 80%;
    height: 40px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    padding: 10px 0;
    margin: 20px 0;
}

.p6 en h6 {
    font-size: 16px;
    font-weight: normal;
    margin: 20px 0;
    color: #666;
}

.p6 en h6 i {
    color: #fe4b38;
    font-size: 20px;
}

.p6 en dt input {
    font-size: 16px;
    text-indent: 2em;
    width: 100%;
}

.p6 en button {
    width: 160px;
    height: 40px;
    border: 1px solid #666;
    margin: 40px auto;
    display: block;
    background: #fff;
    border-radius: 40px;
    color: #fe4b38;
    cursor: pointer;
}

.p6 en .button {
    width: 160px;
    height: 40px;
    border: 1px solid #666;
    margin: 40px auto;
    display: block;
    background: #fff;
    border-radius: 40px;
    color: #fe4b38;
    cursor: pointer;
}


.page:hover {
    overflow-y: scroll;
    overflow-x: hidden;
}

.p6 en button:hover {
    color: #fff;
    background: #fe4b38;
    border: none;
}

.p6 en .button:hover {
    color: #fff;
    background: #fe4b38;
    border: none;
}

.page em:hover {
    color: #fe4b38;
}


.p2 ul:hover li {
    opacity: 0.7;
}

.p2 ul li:hover {
    opacity: 1;
    background: #fff;
    border-top: 2px solid #fe4b38;
}

.p2 ul li:hover p {
    bottom: unset;
    top: 15px;
}

.p2 ul li:hover p,
.p2 ul li:hover button {
    opacity: 1;
}

.p2 ul li:hover .button {
    opacity: 1;
}

.p2 ul li:hover i {
    color: #fe4b38;
    margin-top: 34px;
    opacity: 0;
}


/*二级*/
.dian {
    position: fixed;
    width: 50%;
    top: 0;
    right: 0%;
    height: calc(100%);
    overflow: hidden;
    padding-bottom: 100px;
    background: #fff;
    box-shadow: 1px 0 0 0 #fe4b38 inset;
    z-index: 100;
    margin-bottom: 100px;
    display: none;
    overflow-y: scroll;
    overflow-x: hidden;
}

.dian>label {
    position: absolute;
    right: 100px;
    top: 20px;
    padding: 15px;
    font-size: 34px;
    cursor: pointer;
    color: #333;
}

.dian dl h1 {
    font-size: 26px;
    font-weight: 300;
    padding: 40px 0;
    color: #333;
    user-select: none;
}

.dian dl {
    display: block;
    margin: 0 60px 60px 50px;
}

.dian dl dt {
    width: 100%;
    color: #626262;
    padding: 0 10px 20px 10px;
}

.dian dl dt span {
    color: #fe4b38;
    font-size: 36px;
    padding: 0 10px;
}

.dian dl dt:nth-of-type(odd) {
    background: #ffeeeb;
}

.dian dl dt:nth-of-type(even) {
    background: #fff;
}

.dian dl img {
    display: block;
    width: 80%;
    margin: 0 auto;
    margin-top: 50px;
}

.dian dl p {
    font-size: 16px;
    text-indent: 2em;
    color: #626262;
    line-height: 2em;
}

.dian dl h6 {
    font-size: 18px;
    font-weight: 300;
    padding: 30px 0 40px 0;
    color: #fe4b38;
    user-select: none;
}



/* .dian:hover {
    overflow-y: scroll;
    overflow-x: hidden;
} */

.dian em:hover {
    color: #fe4b38;
}

/*解决方案的具体内容事件*/


#n1:checked~.p1,
#n2:checked~.p1,
#n3:checked~.p1,
#n4:checked~.p1,
#n5:checked~.p1,
#n6:checked~.p1,
#n7:checked~.p1,
#n8:checked~.p1,
#n9:checked~.p1,
#n10:checked~.p1,
#n11:checked~.p1,
#n12:checked~.p1,
#n13:checked~.p1 {
    right: 50%;
}



#n1:checked~.p1 .b1,
#n2:checked~.p1 .b2,
#n3:checked~.p1 .b3,
#n4:checked~.p1 .b4,
#n5:checked~.p1 .b5,
#n6:checked~.p1 .b6,
#n7:checked~.p1 .b7,
#n8:checked~.p1 .b8,
#n9:checked~.p1 .b9,
#n10:checked~.p1 .b10,
#n11:checked~.p1 .b11,
#n12:checked~.p1 .b12,
#n13:checked~.p1 .b13 {
    color: #fe4b38;
}



#n1:checked~.n1,
#n2:checked~.n2,
#n3:checked~.n3,
#n4:checked~.n4,
#n5:checked~.n5,
#n6:checked~.n6,
#n7:checked~.n7,
#n8:checked~.n8,
#n9:checked~.n9,
#n10:checked~.n10,
#n11:checked~.n11,
#n12:checked~.n12,
#n13:checked~.n13 {
    display: block;
}



#esc2:checked~.n1,
#esc2:checked~.n2,
#esc2:checked~.n3,
#esc2:checked~.n4,
#esc2:checked~.n5,
#esc2:checked~.n6,
#esc2:checked~.n7,
#esc2:checked~.n8,
#esc2:checked~.n9,
#esc2:checked~.n10,
#esc2:checked~.n11,
#esc2:checked~.n12,
#esc2:checked~.n13 {
    display: none;
}



#n1:checked~.p1>label,
#n2:checked~.p1>label,
#n3:checked~.p1>label,
#n4:checked~.p1>label,
#n5:checked~.p1>label,
#n6:checked~.p1>label,
#n7:checked~.p1>label,
#n8:checked~.p1>label,
#n9:checked~.p1>label,
#n10:checked~.p1>label,
#n11:checked~.p1>label,
#n12:checked~.p1>label,
#n13:checked~.p1>label {
    display: none;
}











/*案例*/

#m1:checked~.p3,
#m2:checked~.p3,
#m3:checked~.p3,
#m4:checked~.p3,
#m5:checked~.p3,
#m6:checked~.p3,
#m7:checked~.p3,
#m8:checked~.p3,
#m9:checked~.p3,
#m10:checked~.p3 {
    right: 50%;
}



#m1:checked~.p3 .c1,
#m2:checked~.p3 .c2,
#m3:checked~.p3 .c3,
#m4:checked~.p3 .c4,
#m5:checked~.p3 .c5,
#m6:checked~.p3 .c6,
#m7:checked~.p3 .c7,
#m8:checked~.p3 .c8,
#m9:checked~.p3 .c9,
#m10:checked~.p3 .c10 {
    color: #fe4b38;
}



#m1:checked~.m1,
#m2:checked~.m2,
#m3:checked~.m3,
#m4:checked~.m4,
#m5:checked~.m5,
#m6:checked~.m6,
#m7:checked~.m7,
#m8:checked~.m8,
#m9:checked~.m9,
#m10:checked~.m10 {
    display: block;
}



#esc2:checked~.m1,
#esc2:checked~.m2,
#esc2:checked~.m3,
#esc2:checked~.m4,
#esc2:checked~.m5,
#esc2:checked~.m6,
#esc2:checked~.m7,
#esc2:checked~.m8,
#esc2:checked~.m9,
#esc2:checked~.m10 {
    display: none;
}



#m1:checked~.p3>label,
#m2:checked~.p3>label,
#m3:checked~.p3>label,
#m4:checked~.p3>label,
#m5:checked~.p3>label,
#m6:checked~.p3>label,
#m7:checked~.p3>label,
#m8:checked~.p3>label,
#m9:checked~.p3>label,
#m10:checked~.p3>label {
    display: none;
}






/*事件*/
#p1:checked~.p1,
#p2:checked~.p2,
#p3:checked~.p3,
#p6:checked~.p6 {
    width: 40%;
}

#p1:checked~.main,
#p2:checked~.main,
#p3:checked~.main,
#p6:checked~.main {
    margin-left: -34%;
}

#esc:checked~.p1,
#esc:checked~.p2,
#esc:checked~.p3,
#esc:checked~.p6 {
    width: 0%;
}





/*遮罩*/
.zhezhao {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 10;
    display: none;
}

/*遮罩事件*/
#p1:checked~.zhezhao,
#p2:checked~.zhezhao,
#p3:checked~.zhezhao,
#p6:checked~.zhezhao {
    display: block;
}

#p1:checked~.main_left,
#p2:checked~.main_left,
#p3:checked~.main_left,
#p6:checked~.main_left {}







/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: rgba(254, 75, 56, 0.84);
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 4px rgba(255, 251, 251, 0);
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 1);
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 4px rgba(255, 255, 255, 0);
    background-color: rgba(254, 75, 56, 0.7);
}