@charset "UTF-8"; 
/* @import url("/css/aside.css");  기존 css에 해당 부분 경로 맞춰서 적어주시면 link 추가 없이 사용 가능합니다. */
body, input, button, textarea{font-family: "Noto Sans KR";}
a:hover, a:focus, a:active { text-decoration: none;}

.aside_area {position: fixed; left: 0; top: 0; width: 245px; height: 100vh; background-color: #353535; transition: all 0.7s;}
.aside_area .aside_inner {position: relative; height: calc(100% - 60px); overflow-y: auto;}
.aside_area .aside_inner .aside_top {}
.aside_area .aside_inner .aside_top .logo {display: flex; justify-content: center; align-items: center; height: 70px; padding: 0 20px; border-bottom: 1px solid #585858;background-color: white;}
.aside_area .aside_inner .aside_top .logo img {max-width: 150px; width: 100%; max-height: 70px;}
.aside_area .aside_inner .aside_top .home {display: block; padding: 0 20px;}
.aside_area .aside_inner .aside_top .home .text {display: inline-block; padding: 0 0 0 25px; background: url("/_adm/_img/home_icon.png") no-repeat left center; font-weight: 400; font-size: 14px; line-height: 40px; color: #e6e6e6;}
.aside_area .aside_inner .aside_top .language_box {position: relative; padding: 0 20px;}
.aside_area .aside_inner .aside_top .language_box .language_btn {display: block; background-color: inherit;}
.aside_area .aside_inner .aside_top .language_box .language_btn .text {padding: 0 0 0 25px; background-position: left center; background-repeat: no-repeat; font-weight: 400; font-size: 14px; line-height: 40px; color: #e6e6e6;}
.aside_area .aside_inner .aside_top .language_box .language_btn.ko .text {background-image: url("/_adm/_img/language_kr.png");}
.aside_area .aside_inner .aside_top .language_box .language_btn.en .text {background-image: url("/_adm/_img/language_en.png");}
.aside_area .aside_inner .aside_top .language_box .language_btn.jp .text {background-image: url("/_adm/_img/language_jp.png");}
.aside_area .aside_inner .aside_top .language_box .language_btn.ch .text {background-image: url("/_adm/_img/language_ch.png");}
.aside_area .aside_inner .aside_top .language_box .language_list {display: none; position: absolute; left: 20px; top: calc(100% - 10px); width:100px; padding: 6px 15px; border-radius: 5px; overflow: hidden; background-color: #fff; z-index: 9999;}	
.aside_area .aside_inner .aside_top .language_box .language_list li {}
.aside_area .aside_inner .aside_top .language_box .language_list li a {display: block; font-weight: 400; font-size: 12px; line-height: 26px; color: #222222;}
.aside_area .aside_inner .menu_area {border-top: 1px solid #585858;}
.aside_area .aside_inner .menu_area .sub_gnb {}
.aside_area .aside_inner .menu_area .sub_gnb > li {}
.aside_area .aside_inner .menu_area .sub_gnb > li > .box {display: block; position: relative; padding: 0 20px;}
.aside_area .aside_inner .menu_area .sub_gnb > li > .box .text {display: inline-block; padding: 0 0 0 25px; background: url("/_adm/_img/menu_icon.png") no-repeat left center; font-weight: 400; font-size: 14px; line-height: 40px; color: #e6e6e6;}
.aside_area .aside_inner .menu_area .sub_gnb > li .sub_gnb_box {display: none; background-color: #494848;}
.aside_area .aside_inner .menu_area .sub_gnb > li .sub_gnb_box.on {display: block;}
.aside_area .aside_inner .menu_area .sub_gnb > li .sub_gnb_box .sub_gnb2 {}
.aside_area .aside_inner .menu_area .sub_gnb > li .sub_gnb_box .sub_gnb2 li {}
.aside_area .aside_inner .menu_area .sub_gnb > li .sub_gnb_box .sub_gnb2 li a {display: block; padding: 0 20px 0 45px;}
.aside_area .aside_inner .menu_area .sub_gnb > li .sub_gnb_box .sub_gnb2 li a .text {font-weight: 400; font-size: 14px; line-height: 30px; color: #e6e6e6;}
.aside_area .aside_inner .menu_area .sub_gnb > li.plus > .box .text:before {display: block; content: ""; position: absolute; right: 25px; top: 50%; transform: translateY(-50%); width: 10px; height: 6px; background: url("/_adm/_img/arrow_icon.png") no-repeat right center;}

.aside_area .logout_box {position: absolute; bottom: 0; width: 100%; background-color: #292929;}
.aside_area .logout_box .logout_btn {background-color: inherit; padding: 0 20px;}
.aside_area .logout_box .logout_btn .text {display: inline-block; padding: 0 0 0 30px; background: url("/_adm/_img/logout_icon.png") no-repeat left center; font-weight: 400; font-size: 14px; line-height: 50px; color: #ffffff;}
.aside_area .quick_btn {display: block; position: absolute; right: -30px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px;}
.aside_area .quick_btn img {width: 30px; transition: all 0.7s;}

.aside_area .aside_inner .menu_area .sub_gnb > li.on > .box {background-color: #1a6dff;}
.aside_area .aside_inner .menu_area .sub_gnb > li .sub_gnb_box .sub_gnb2 li.on a {background-color: #0050dc;}
.aside_area .aside_inner .menu_area .sub_gnb > li > .box:hover, .aside_area .aside_inner .menu_area .sub_gnb > li > .box:focus {background-color: #4d4d4d;}
.aside_area .aside_inner .menu_area .sub_gnb > li.on > .box:hover, .aside_area .aside_inner .menu_area .sub_gnb > li.on > .box:focus {background-color: #1a6dff;}
.aside_area .aside_inner .menu_area .sub_gnb > li .sub_gnb_box .sub_gnb2 li a:hover, .aside_area .aside_inner .menu_area .sub_gnb > li .sub_gnb_box .sub_gnb2 li a:focus {background-color: #4d4d4d;}
.aside_area .aside_inner .menu_area .sub_gnb > li .sub_gnb_box .sub_gnb2 li.on a:hover, .aside_area .aside_inner .menu_area .sub_gnb > li .sub_gnb_box .sub_gnb2 li.on a:focus {background-color: #1a6dff;}

.btn_com {display: inline-block; width: 70px; border-radius: 3px; font-weight: 400; font-size: 14px; line-height: 30px; text-align: center;vertical-align: middle;}
.btn_com.blue {background-color: #1a6dff; color: #ffffff;}
.btn_com.gray {background-color: #dee2e6; color: #777777;}


.aside_area.on {left: -245px;}
.aside_area.on .quick_btn img {transform: rotate(180deg)}
.aside_area.on + .main_contents .sub_contents {margin: 0;}

.sub_container .sub_contents {margin: 0 0 0 250px; transition: all 0.7s; }