@charset "utf-8";

/* 햄버거버튼 및 메뉴 슬라이드 */
.ham_btn {position: absolute; top: 50%; right: 0;transform: translateY(-50%); width: 24px; height: 24px;}
#hamburger {display: inline-block; position: relative; width: 100%; height: 100%; cursor: pointer;}
.inner_line {display: block; position: absolute; left: 50%; transform: translateX(-50%); width: 100%; height: 3px; background-color: #ffffff; transition: 0.3s; border-radius: 4px;}
#line1 {top: 0; }
#line2 {top: 48%;}
#line3 {bottom: 0px;}
.line_1,.line_2,.line_3{background: #fff;}
.line_1 {transform: translateY(10.4px) translateX(-50%) rotate(-45deg); top: 0;}
.line_2 {opacity: 0;}
.line_3 {transform: translateY(-10.4px) translateX(-50%) rotate(45deg); bottom: 0;}

/* 햄버거 슬라이드 - jsj */
#m_menu_box {position: absolute; height: 100vh; width: 75%; right: 0; top: 100%; transform: translateX(134%); background: #ffffff; transition: .7s; z-index: 1000000;}
.in{transform: translateX(0) !important;}
#accordion{width: 100%; position: relative;}
#m_menu_box #accordion::after {content: ''; width: 150%; height: 100vh; position: absolute; top: 0; left: -320%; background-color: rgba(0, 0, 0, 0); transition: all 0.7s; z-index: 999999;}
#m_menu_box.in #accordion::after {background-color: rgba(0, 0, 0, 0.8); left: -150%;}
#accordion>li{list-style-type: none; font-size: 2rem;}
#accordion a{display: inline-block; width: 100%; color: #303030; padding: 12px 20px; transition: .5s;}
#accordion>li>a {position: relative; border-bottom: 1px solid #ddd;}
#accordion>li>a::after {content: ''; position: absolute; top: 50%; right: 15px; width: 15px; height: 15px; transform: translateY(-50%); background: url(../images/m_arrow00.png) no-repeat center; background-size: 100%; transition: all 0.3s ease-in-out;}
#accordion>li.open>a::after {-webkit-transform: translateY(-50%) rotate(180deg); -ms-transform: translateY(-50%) rotate(180deg); -o-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg);}

.sub-menu {display: none; background: #f2f2f2; font-size: 14px;}
.sub-menu>li { border-bottom: 1px solid #ccc; overflow: hidden;}
.sub-menu>li>a {display: inline-block; float: right; text-decoration: none; color: #d9d9d9; font-weight: 400; padding: 10px 0 10px 30px !important; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease;}
#accordion .sub-menu a.on {color: #fff !important; background-color: #ff4b17; font-weight: 500 !important; width: calc(100% - 1px) !important;}