:root{
    --primarycolor:#B33435;
    --bgcolor:#333;
    --headerbg:rgba(179,52,53,.3);
    --selected:rgba(179,52,53,.6);
    --devspan:#E6C2C2;
    --warningcolor:#FF595A;
    --swiper-navigation-color:var(--primarycolor);
}
::selection{
    background:var(--primarycolor);
}

body{
    width:100%; height:100vh;
    background:#333;
}
.header_con{
    position:fixed;
    left:0; top:0;
    width:216px; height:100%;
    background:var(--headerbg);
    z-index: 9;
}
.mobile_header{
    display:none;
}
.header{
    position:relative;
    text-align:right;
    height:360px;
    margin-top:90px;
    color:#fff;
}
.header:before{
    position:absolute;
    left:0; top:0;
    content:'';
    width:70px; height:100%;
    background:var(--primarycolor);
    opacity:1;
}
.header .title{
    position:absolute;
    margin-top:-7px;
    margin-left: 83px;
    font-size:48px; font-weight:500;
    color:inherit;
}
.header .menu_list{
    position:absolute;
    right:0; bottom:10px;
    width:100%;
    color:inherit;
}
.header .list{
    margin:7px 0;
    font-family: 'Quantico', sans-serif; font-weight: 400;
    color:inherit;
    cursor:pointer;
    transition:background 250ms ease-out;
}
.header .list:hover{
    background:var(--selected);
}
.header .list a{
    display:block;
    width:100%;
    padding:7px 10px 7px 0;
    font-family: 'Quantico', sans-serif; font-weight: 400;
    color:inherit;
    cursor:pointer;
}
.header .list.selected{
    background:var(--selected);
}