header nav#quick {right: 3.5%;}

a.btn, .btn {text-align: inherit;}

.pc {display: block;}
.pc-flex {display: flex;}
.mo, .mo-flex {display: none !important;}
.ls-00 {letter-spacing: 0;}
.uppercase {text-transform: uppercase;}

.float-left {float: left}
.float-right {float: right}
.vertical-middle {vertical-align: middle;}
.flex-center-column {display: flex; flex-direction: column;    align-items: center;}
.flex-center-row {display: flex; flex-direction: row;    align-items: center;}
.width5 {width: 5%;}
.color-white2 {color: #fffdfa;}

.bg-center {background-repeat: no-repeat; background-size: cover; background-position: center;}
.uppercase {text-transform: uppercase;}
.nowrap {white-space: nowrap;}

.more_btn { color: #fff; font-weight: 400; letter-spacing: -.3px; font-size: 1.125rem; line-height: normal; height: auto; padding: 0; cursor: pointer; line-height: 50px; height: 50px; border: 1px solid #fff; width: 180px; text-align: center; display: inline-block;    overflow: hidden;    transition: all 0.3s ease;    position: relative;  z-index: 1;} 
.more_btn:hover {color: #000;}
.more_btn:after {background-position: 0;  content: ''; position: absolute; transition: all 0.3s ease; width: 100%; height: 100%; background-color: #fff; left: 100%; z-index: -1;} 
.more_btn:hover:after {left: 0;}
  
#header{position: fixed; top: 0; left: 0; width: 100%; z-index: 10000; background: #000 ; letter-spacing: 0.05em; transition: .5s; padding: 0; color: #fff;}
#header.active {z-index: 9999;}
#header .container {max-width: 1700px;} 
#header .header { font-weight: 400; position: relative; z-index: 1000;}
#header .header_wrap{align-items: center;  padding: 1.250rem 0; position: relative; height: 95px;}
#header #nav_n {display: flex; justify-content: space-around; font-weight: 400;}

#logo,.fixed #logo {float: unset; padding: 0; display: inline-flex; }

#header .side_btn li a {color: var(--subcolor);}
#header .gnb {display: flex;  justify-content: space-evenly; gap: 1rem;}
#header .gnb .menu {position: relative; cursor: pointer;}
#header .gnb .menu.on .submenu>li:hover:not(.depth3),
#header .gnb .menu.h .submenu>li:hover:not(.depth3) {font-weight: 700;    transition: .3s;      vertical-align: baseline;}
#header .gnb .submenu_wrap {position: absolute; width: 250%; left: 50%; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: .3s; top: 60px; background-color: #fff; max-width: 200px; min-width: 180px;  z-index: 2;  }
#header .gnb .submenu_wrap.on {opacity: 1; pointer-events: auto;}
#header .gnb .submenu_wrap::after {content: '';    position: absolute;    width: 0%;    height: 5px;    background-color: var(--subcolor);  top:0;  left: 50%;    transform: translateX(-50%);    transform-origin: center; transition: .6s;}
#header .gnb .submenu_wrap.on::after { width: 100%;}
#header .gnb .submenu {display: flex; flex-direction: column; align-items: center;    flex-wrap: nowrap; padding: 1rem 0;}  
#header .gnb .submenu li {padding: 0.75rem 7.5%;   width: 100%; padding: 10%; display: flex;    align-items: center;    justify-content: center;}
#header .gnb .submenu li:before {content: ''; position: absolute; left: 7.5%;  width: 5px; height: 30px; background-color: var(--subcolor); opacity: 0;  display: block;}
#header .gnb .submenu li:hover:before {content: ''; opacity: 1; }

.depth3>ul {position: absolute; right: -100%;top: -0.5rem; background-color: #fff; padding: 0.5rem; width: 100%; display: flex;    flex-direction: column; align-items: center; transition: .3s; opacity: 0;     max-width: 180px; z-index: -2;  pointer-events: none;}

#header .depth3::after {content: ''; position: absolute; right: 15px; width: 13px; height: 13px; background-image: url(/img/main/arrow_nav.png); background-repeat: no-repeat; background-size: contain; top: 50%; transform: translateY(-50%); display: block;}
#header .depth3>span {color: #000;}
#header .depth3:hover {font-weight: 700; transition: .3s; vertical-align: baseline;}
#header .depth3:hover>ul {font-weight: 400;}
#header .depth3:hover>ul  {opacity: 1; pointer-events: auto; z-index: -1;}
#header .depth3:hover>ul li:hover {font-weight: 700; transition: .3s; vertical-align: baseline;}

.menu02 .depth3>ul {right: -89.5%;}

@media (max-width: 1240px){
    #header .container {width: 95%;}
    #header .gnb {gap: 0;}
}
@media (max-width: 990px){
    .pc,.pc-flex {display: none !important}
    .pc.sp {display: none !important;}
    .mo {display: block  !important;} 
    .mo-flex {display: flex !important;} 

    #logo {width: 65%;} 
    #logo .mo {max-height: 51px;}  

    header nav#quick {bottom: 3%; top: auto; }
    #header .header_wrap {height: 80px;}
    #header .container {width: 90%;}

	.burger_wrap {display: block;width: 30px;height: 22px; cursor: pointer;transition: all .2s ease-in-out; }
    .burger {width: 100%;height: 3px;background: #fff;transition: all .2s ease-in-out;top: 50%;transform: translateY(-50%);	border-radius: 1px;	position: relative;}	
	.burger::before, .burger::after {content: '';position: absolute;width: 100%;height: 3px;background: #fff;transition: all .2s ease-in-out;border-radius: 1px;}	
	.burger::before {transform: translateY(-9px);}	
	.burger::after {transform: translateY(9px);}	
	.burger_wrap.on .burger {transform: translateX(-50px);background: transparent;}	
	.burger_wrap.on .burger::before {transform: rotate(45deg) translate(35px, -35px); background: #fff; }	
	.burger_wrap.on .burger::after {transform: rotate(-45deg) translate(35px, 35px); background: #fff; }  

    #nav_mo {display: block;height: 100%;width: 100%;position: fixed;left: 0;top: 0; opacity: 0; transition: .5s; pointer-events: none; -ms-overflow-style: none; scrollbar-width: none; top: 80px; background-color: #000; pointer-events: none;}
    #nav_mo.on {z-index: 10002; opacity: 1; pointer-events: auto; overflow: scroll;}   
    #nav_mo::-webkit-scrollbar {display: none;} 
    #nav_mo { -ms-overflow-style: none; scrollbar-width: none;}  
    #nav_mo .inner {width: 100%;margin: 0 auto; border: 0; position: relative;}    
    #nav_mo.on .inner::before, #nav_mo.on .inner::after {content: ''; background-color: rgba(223,223,223,.25); height: 1px; width: 0; transition: .3s; position: absolute; left: 50%; transform: translateX(-50%);}
    #nav_mo.on .inner::before {top: 0;}
    #nav_mo.on .inner::after {bottom: 0;}
    #nav_mo.on .inner::before, #nav_mo.on .inner::after  {width: 90%;} 
    #nav_mo .gnb {flex-direction: column; padding-left: 0;}
    #nav_mo .gnb .menu {cursor: auto;}
    #nav_mo .gnb>.menu>span { font-size: 3.125rem; margin: 1.875rem 0 ; display: block; position: relative; cursor: pointer; padding: 0 10%; transition: .3s;}
    #nav_mo .gnb>.menu>span::before {content: ''; position: absolute; width: 4px; height: 36px; top: 50%; transform: translateY(-50%);left: 5%; background-color: var(--subcolor); opacity: 0; transition: .3s;}
    #nav_mo .gnb>.menu>span.active {color: var(--subcolor); font-weight: 600;}
    #nav_mo .gnb>.menu>span.active::before {opacity: 1;}
    #nav_mo .gnb>.menu:first-child>span {margin-top: 0;}
    /* #nav_mo .gnb>.menu:last-child>span {margin-bottom: 0;} */
    #nav_mo .gnb>.menu>span::after{content: ''; background-image: url(/img/main/off.png); width: 22px; height: 13px; position: absolute; right: 7%; top: 50%; transform: translateY(-50%);background-size: cover;}
    #nav_mo .gnb>.menu>span.active::after{background-image: url(/img/main/on.png);}
    #nav_mo .gnb>.menu>span p{ position: relative;display: inline; }
    #nav_mo .gnb>.menu>.submenu_wrap {padding: 0 5%;  display: none; position: relative; color: #fff; background-color: #3e3932;  width: 100%; min-width: auto; left: auto; top: auto; max-width: none; transform: none; text-align: left; padding: 0; opacity: 1; transition: none; height: auto; pointer-events: auto;} 
    #nav_mo .gnb>.menu>.submenu_wrap .submenu { font-size: 2.250rem; color: var(--dark-gray); font-weight: 500; display: flex; flex-wrap: wrap;flex-direction: column;  width: 100%; align-items: flex-start; padding: 2.5rem 0;}
    #nav_mo .gnb>.menu>.submenu_wrap .submenu li {width: fit-content; margin: 1.875rem 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start;  width: 100%;}
    #nav_mo .gnb>.menu>.submenu_wrap .submenu li a, #nav_mo .depth3>span {color: #fff; transition: .3s; font-weight: 400; padding: 0 10%;}
    #nav_mo .gnb>.menu>.submenu_wrap .submenu li a:hover, #nav_mo .depth3>span:hover {color: var(--subcolor); font-weight: 600;}
    #nav_mo .gnb .menu li {position: relative; cursor: pointer;}
    #nav_mo .gnb .menu.h li:hover::after {width: 100%;}
    #nav_mo .gnb .menu.h li a {color: #6c6c6c;}
    #nav_mo .gnb .menu.h li:hover a {font-weight: 700;  color: var(--pointcolor); transition: .2s;}
    #nav_mo .side_btn.mo ul { font-size: 1.875rem;}
    #nav_mo .side_btn.mo>.login span {height: auto;}   
    #header .gnb .submenu li:before {display: none;}
   
    #nav_mo .gnb>.menu>.submenu_wrap .submenu .depth3>ul>li {margin: 0;}
    #nav_mo .gnb>.menu>.submenu_wrap .submenu li.depth3 {margin: 0;}
    #nav_mo .gnb>.menu>.submenu_wrap .submenu .depth3>ul>li>a {margin: 2.1875rem 0; transition: .3s; pointer-events: auto;}
    #nav_mo .gnb>.menu>.submenu_wrap .submenu .depth3>ul>li>a:hover {color: var(--subcolor); font-weight: 600;}
    #nav_mo .gnb>.menu>.submenu_wrap .submenu li:first-child,
    #nav_mo .gnb>.menu>.submenu_wrap .submenu .depth3>ul>li:first-child>a {margin-top: 0 !important;}
    #nav_mo .gnb>.menu>.submenu_wrap .submenu li:last-child,
    #nav_mo .gnb>.menu>.submenu_wrap .submenu .depth3>ul>li:last-child>a  {margin-bottom: 0 !important;}

    #nav_mo .depth3::after  {display: none;}
    #nav_mo .depth3>span {margin: 1.875rem 0; width: 100%; position: relative;}
    #nav_mo .depth3.on>span {color: var(--subcolor); font-weight: 600;}
    #nav_mo .depth3>span::after {width: 20px; height: 10px;  background-image: url(/img/main/arrow_off.png);content: ''; position: absolute; right: 7.5%; background-repeat: no-repeat; background-size: contain; top: 50%; transform: translateY(-50%);}
    #nav_mo .depth3.on>span::after {background-image: url(/img/main/arrow_on.png);}
    #nav_mo .depth3>ul, #nav_mo .depth3:hover>ul {position: relative; display: none; z-index: 1; opacity: 1; pointer-events: auto; right: auto; top: auto; transition: none; max-width: none; padding: 0; background-color: #38332c; padding: 2.5rem 5%;}

    #nav_mo .side_btn {padding: 3.125rem 10%;}

    .more_btn { font-size: 1.500rem; width: 125px; height: 45px; line-height: 45px;}

    header nav#quick {z-index: 10001;}
    header nav#quick > ul > li a {display: flex;        justify-content: center;        align-items: center;}

    .quick_on_off { position: relative; cursor: pointer;}
    .quick_on_off::after {display: none;}
    .quick_on_off::before {content: ''; width: 16px; height: 16px; background-repeat: no-repeat; background-size: contain; background-image: url(/img/main/ico_quick_plus.png); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%)  rotate(0); transition: .3s; z-index: 10; }
    .quick_on_off.active::before {transform: translate(-50%,-50%) rotate(45deg);}

    .q_btn {pointer-events: none; opacity: 0; z-index: -1;} 

    .q_btn.open { pointer-events: auto; opacity: 1; z-index: 10001; z-index: 1;} 

    li.q_btn:nth-child(1) {transition: 1.4s;}
    li.q_btn:nth-child(2) {transition: 1.2s;}
    li.q_btn:nth-child(3) {transition: 1s; }
    li.q_btn:nth-child(4) {transition: .8s; }
    li.q_btn:nth-child(5) {transition: .6s; }
    li.q_btn:nth-child(6) {transition: .4s; }
    li.q_btn:nth-child(7) {transition: .2s; }

    .bg_box {width: 100%;height: 100%;background: rgba(0,0,0,0.6);position: fixed; z-index: -1; opacity: 0; transition: .6s; display: block; top:0; left: 0; pointer-events: none;}
    .bg_box.active {opacity: 1; z-index: 10000;}    
}   

/*****footer******/
.footer {background-color: #181818;}
.footer .sns li {opacity: .5; transition: .3s;}
.footer .sns li:hover {opacity: 1;}

@media (max-width: 990px){    
    .footer .font-18, .footer .color-gray  { font-size: 1.500rem; color: #aeaeae; line-height: 1.4; }
    .footer .font-16 {font-size: 1.500rem; }
    .footer #logo_ft {width: 65%;}
    .footer span.sp {padding-left: 3.5rem;}
    .footer .mo-flex {flex-direction: column; align-items: center; justify-content: center; border-top:  1px solid rgba(150,150,150,.25); }
}

@media (max-width: 430px){ 
    .footer span.sp {  padding-left: 0;}
}