.cNav{ background: #2051bf; width: 88px; position: fixed; right: 0; top: 25%; z-index: 99; padding: 1% 0;}
.cNav ul li{ writing-mode: vertical-lr; color: #fff; text-align: center; width: 100%; padding: 20% 33%; letter-spacing: 2px; font-size: 16px; text-transform: uppercase; position: relative; cursor: pointer; transition: 0.3s;}
.cNav ul li i{ display: inline-block;}
.cNav ul li a{ color: #fff; transition: 0.3s;}
.cNav ul li:before{ position: absolute; left:40%; bottom: 0; content: ''; width: 20%; height: 1px; background:rgba(255,255,255,0.2); }
.cNav ul li a:hover{ color: #ff5537;}
.cNav ul li:hover{ color: #ff5537;}

#cMenu-bg{ display: none; width: 100vw; height: 100vh; background: #00000080; position: fixed;z-index: 1000; top: 0; }
#cMenu{ background: #2051bf; position: fixed; width: 80vw; top: 50vh; left: 10vw;  color: #fff;
    z-index: 1300;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    right: 0;
    bottom: 0;
    opacity: 0;
    height: 0;
}
.cMenu-nr{ margin: 6% 10% 0;}
#cMenu:before{ position: absolute; left: 0; bottom: 0; width: 100%; height: 10%; content: 'henan jianyuan'; text-transform: uppercase; color: rgba(255,255,255,0.05); font-size: 170px; text-align: center;}
#cMenu ul{ height: 60px; line-height: 60px; }
#cMenu ul li{ width: 18%; text-align: center; cursor: pointer; font-size: 16px;}
#cMenu ul li.tit{ display: inline-block; font-size: 18px; font-weight: bold; position: relative;}
#cMenu ul .tit p{ position: relative; z-index: 1;}
#cMenu ul .tit:before{ position: absolute; left: 20%; top: 33%; content: ''; width: 25px; height: 25px; background: url("../images/end_tit_hover.png") no-repeat left center; opacity: 0; transition: 0.3s;}
#cMenu ul li a{ color: #fff; position: relative;}
#cMenu ul:hover .tit:before{ left: 10%; opacity: 1;}
#cMenu a:after{z-index:1;content: ''; position: absolute; left: 0; bottom: 0; display: block; height:5px; background-color: rgba(255, 85, 55, .6);width:100%; -webkit-transition: transform .5s; -moz-transition: transform .5s; -ms-transition: transform .5s; -o-transition: transform .5s; transition: transform .5s; -webkit-transform: scaleX(0); transform: scaleX(0);-webkit-transform-origin: right center;transform-origin: right center;}
#cMenu a:hover::after{ -webkit-transform-origin: left center;transform-origin: left center;  -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1);}

#cMenu ul li.tit a:after{ display: none !important;}
#cMenu .close{ text-align: right; position: relative; z-index: 1;}
#cMenu .close img{ max-width: 100%; max-height: 100%; transition:1s;}
#cMenu .close:hover img{ transform: rotate(360deg);}

#cMenu1{
    display: flex;
    pointer-events: auto;
    transform: scale(1, 0);
    opacity:0;
}

@media screen and (max-width:1800px){
    #cMenu:before{ font-size: 140px;}
    #cMenu .close{ display: none;}
}
@media screen and (max-width:1600px){
    #cMenu:before{ font-size: 130px;}
}
@media screen and (max-height:800px){
    .cMenu-nr{ margin: 2% 10% 0;}
    #cMenu .close{ height: 90px;}
}