@charset "UTF-8";

.bottom-header-box .nav-wrap .wnav{display:none;}
.bottom-header-box .nav-wrap .mnav .deps1 > li{display: block;width:100%;font-size:17px !important;color:#444 !important;padding:0 !important}
.bottom-header-box .nav-wrap .mnav .deps1 > li:first-child > a{border:0;}
.bottom-header-box .nav-wrap .mnav .deps1 > li > a{position:relative;display:block;padding:20px 18px;background:#8B0029;color:#fff;}
.bottom-header-box .nav-wrap .mnav .deps1 > li > a.active{background:#1e1e1e !important;}
.bottom-header-box .nav-wrap .mnav .deps1 > li > a span,
.bottom-header-box .nav-wrap .mnav .deps2 > li > a span{position:absolute;top:24px;right:18px;width:12px;height:12px;background:url(/_res/wifi_en/img/comm/bl_nav_down.png) no-repeat 95%;background-size:12px}
.bottom-header-box .nav-wrap .mnav .deps1 > li > a span{display:none;}
.bottom-header-box .nav-wrap .mnav .deps1 > li > ul{position:static;width:100%;margin:0;padding:0;}
.bottom-header-box .nav-wrap .mnav .deps2 > li.selected > a span{background:url(/_res/wifi_en/img/comm/bl_nav_up02.png) no-repeat 95% !important;background-size:12px !important;}
.bottom-header-box .nav-wrap .mnav .deps2 > li{padding:0;}
.bottom-header-box .nav-wrap .mnav .deps2 > li > a{position:relative;display:block;padding:20px 18px;color:#333;font-weight:normal !important;font-size:17px;border-top: 1px solid #eee !important;background:#fff}
.bottom-header-box .nav-wrap .mnav .deps2 > li > a.active{color:#8B0029 !important;}
.bottom-header-box .nav-wrap .mnav .deps2 > li:first-of-type > a{border-top:none;}
.bottom-header-box .nav-wrap .mnav .deps3 > li > a{display:block !important;padding:0 15px 15px 0 !important;font-size:15px;color:#999;line-height:140%}
.bottom-header-box .nav-wrap .mnav .deps3 > li > a:before{content:"-";padding:0 5px 0 20px;}
.bottom-header-box .nav-wrap .mnav .deps3 > li > a.active{color:#8B0029 !important;font-weight:500;}

.bottom-header-box .nav-wrap .util-box{display:block;position:relative;top:0;right:0;width:100%;max-width:600px;background:#fff;z-index: 1;}
.bottom-header-box .nav-wrap .util-box ul{padding:26px 50px 26px 0;text-align:center;font-size:16px;border-bottom:1px solid #eee;box-sizing:border-box;}
.bottom-header-box .nav-wrap .util-box ul > li{display:inline-block;font-size:14px;}
.bottom-header-box .nav-wrap .util-box ul > li:after{content:"";display:inline-block;width:1px;height:12px;margin:0 8px 0 10px;background:#999;}
.bottom-header-box .nav-wrap .util-box ul > li:last-of-type:after{display:none;}
.bottom-header-box .nav-wrap .util-box ul > li > a{font-size:14px;}
  
.bottom-header-box.layer:after{content:"";position:absolute;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.5);z-index:1;}
.bottom-header-box .nav-wrap{position:absolute;top:0;right:-600px;width:100% !important;max-width:600px;z-index:9;transition:.5s;}
.bottom-header-box .nav-wrap.active{left:auto;right:0;}
.bottom-header-box .nav-wrap nav{width:100% !important;}
.bottom-header-box .nav-wrap nav > a{display:block;position:absolute;top:75px;left:-50px;transform:translateY(-50%);width:24px;height:24px;font-size:0;background:url(/_res/wifi_en/img/comm/ico-mo-menu-w.png) no-repeat center / cover;}
.bg-w .bottom-header-box .nav-wrap nav > a{background-image:url(/_res/wifi_en/img/comm/ico-mo-menu.png);}

.bottom-header-box .nav-wrap nav .mnav{display:block;position:relative;width:100%;max-width:600px;height:calc(100vh - 68px);background:#fff;}
.bottom-header-box .nav-wrap nav .mnav .deps1{width:40%;position:relative;z-index:1;}
.bottom-header-box .nav-wrap nav .mnav .deps1 > li.selected > a{background: #1e1e1e !important;}
.bottom-header-box .nav-wrap nav .mnav .deps1:after{content:"";position:absolute;width:100%;height:calc(100vh - 68px);top:0;left:0;background:#8B0029;z-index:-1;}
.bottom-header-box .nav-wrap nav .mnav .deps1 .deps2{position:absolute;top:0;left:100%;width:150%;}
.bottom-header-box .nav-wrap nav .mnav .deps1 .deps2 > li:last-of-type > a{border-bottom: 1px solid #eee !important;}
  
.bottom-header-box .nav-wrap nav .mnav > a{position:absolute;top:-46px;right:20px;width: 24px !important;height: 24px !important;font-size:0;background: #fff url(/_res/wifi_en/img/comm/ico-mo-menu-close.png) no-repeat center / contain !important;z-index: 9;}


.bottom-header-box nav .wnav .deps2 > li > a{padding:20px 10px !important;}
.bottom-header-box nav .wnav .deps2{border-right:1px solid #ccc;}
.bottom-header-box nav .wnav .deps1 > li:first-of-type .deps2{border-left:1px solid #ccc;}
.bottom-header-box nav .wnav .deps1 > li.selected .deps2{background:#7C0019;}
.bottom-header-box nav .wnav .deps1 > li.selected .deps2 > li > a{color:#fff;}
.bottom-header-box nav .wnav .deps1 > li .deps2:hover{background:#7C0019;}
.bottom-header-box nav .wnav .deps1 > li .deps2:hover > li > a{color:#fff;}
.bottom-header-box nav .wnav .deps1 > li .deps2 > li > a:hover{background:#1E1E1E;}

/* 3뎁스 이상부터 노출 안됨 */
nav .deps3 > li > ul{display:none;}

@media screen and (max-width:1024px){
  header .header-wrap{background:#fff;}
  header .header-wrap .bottom-header-wrap{border-bottom:none !important;}
  .bottom-header-box h1 a > img{display:none;}
  .bottom-header-box h1 a > img.color{display:inline-block !important;}
  .bottom-header-box h1 a > p{color:#7C0019 !important;}
  
  .bottom-header-box > nav{display:none;}
  
  .bottom-header-box .nav-wrap nav > a{top:50px;right:20px;width:24px;height:24px;font-size:0;background:url(/_res/wifi_en/img/comm/ico-mo-menu.png) no-repeat center / cover;}
  
  .bottom-header-box .nav-wrap nav .mnav > a{position:absolute;top: -46px !important;right: 20px !important;}
}

@media screen and (max-width:768px){
  .bottom-header-box .nav-wrap nav > a{top: 36px !important;}
}

@media screen and (max-width:600px){
  .bottom-header-box .nav-wrap{right:-100%;}
  .bottom-header-box .nav-wrap .util-box ul{max-width:360px;padding:15px 60px 15px 15px;text-align:left;}
  .bottom-header-box .nav-wrap .util-box ul > li{line-height:24px;}
  .bottom-header-box .nav-wrap nav .mnav > a{top: -52px !important;}
}