.pro-sidenav { z-index: 9999; position: fixed; top: 0; right: 0; width: 210px; margin-top: 200px; margin-right: -160px; background-color: #3d434b; overflow-x: hidden; transition: all .6s; border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
@media screen and (max-width: 980px) { .pro-sidenav { margin-top: 35em; margin-right: -130px; } }
@media screen and (max-width: 750px) { .pro-sidenav { margin-top: 33em; margin-right: -150px; } }
.pro-sidenav:hover { margin-right: 0; }
@media screen and (max-width: 980px) { .pro-sidenav:hover { margin-right: -130px; } }
@media screen and (max-width: 750px) { .pro-sidenav:hover { margin-right: -150px; } }
.pro-sidenav._hide { transform: translateX(100%); }
.pro-sidenav .sidenav-btn { display: none; }
@media screen and (max-width: 980px) { .pro-sidenav .sidenav-btn { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; background-color: #3d434b; border-top-left-radius: 10px; border-bottom-left-radius: 10px; cursor: pointer; } }
@media screen and (max-width: 750px) { .pro-sidenav .sidenav-btn { width: 60px; height: 60px; } }
.pro-sidenav .sidenav-btn img { width: 44px; }
@media screen and (max-width: 750px) { .pro-sidenav .sidenav-btn img { width: 34px; } }
.pro-sidenav .sidenav-btn.is-active { display: none; }
@media screen and (max-width: 980px) { .pro-sidenav .sidenav-list { position: fixed; top: 0; right: 0; width: 320px; margin-top: 11em; margin-right: -320px; background-color: #3d434b; transition: transform 0.3s ease; z-index: 999; border-top-left-radius: 10px; border-bottom-left-radius: 10px; overflow: hidden; } }
@media screen and (max-width: 750px) { .pro-sidenav .sidenav-list { width: 280px; } }
.pro-sidenav .sidenav-list.is-active { transform: translateX(-320px); }
.pro-sidenav .sidenav-list ul li { border-bottom: 1px solid #fff; }
.pro-sidenav .sidenav-list ul li:last-child { border-bottom: none; }
.pro-sidenav .sidenav-list ul li a { display: flex; align-items: center; justify-content: flex-start; text-decoration: none; padding: 15px 5px 15px 15px; }
@media screen and (max-width: 980px) { .pro-sidenav .sidenav-list ul li a { padding: 20px; background: #3d434b url("../img/common/ico_arrow_w.svg") no-repeat right 20px center; background-size: 6px auto; } }
.pro-sidenav .sidenav-list ul li a:hover { background: #e30602 url("../img/common/ico_arrow_w.svg") no-repeat right 5px center; background-size: 6px auto; }
@media screen and (max-width: 980px) { .pro-sidenav .sidenav-list ul li a:hover { background-position: right 20px center; } }
.pro-sidenav .sidenav-list ul li a .ico { width: 2rem; margin-right: 15px; }
@media screen and (max-width: 980px) { .pro-sidenav .sidenav-list ul li a .ico { width: 3rem; } }
@media screen and (max-width: 750px) { .pro-sidenav .sidenav-list ul li a .ico { width: 2rem; } }
.pro-sidenav .sidenav-list ul li a span { font-size: 1.2rem; font-weight: 700; color: #fff; }
@media screen and (max-width: 980px) { .pro-sidenav .sidenav-list ul li a span { font-size: 1.8rem; } }
@media screen and (max-width: 750px) { .pro-sidenav .sidenav-list ul li a span { font-size: 1.4rem; } }
.pro-sidenav .sidenav-list .sidenav-close { display: none; }
@media screen and (max-width: 980px) { .pro-sidenav .sidenav-list .sidenav-close { display: flex; align-items: center; justify-content: center; column-gap: 0.5em; width: 100%; padding: 15px; border-top: 1px solid #fff; background-color: #6b7387; text-align: center; font-weight: 700; color: #fff; border-radius: 0; } }
.pro-sidenav .sidenav-list .sidenav-close span { font-size: 1.6rem; font-weight: 700; }
@media screen and (max-width: 750px) { .pro-sidenav .sidenav-list .sidenav-close span { font-size: 1.4rem; } }
.pro-sidenav .sidenav-list .sidenav-close .ico { width: 1rem; }