@charset "utf-8"; 
/* header */
#header { position: relative; width: 14rem; height: 100%; background: #132a6a; position: fixed; left: 0; top: 0; padding: 1.5rem 0 0; z-index: 99;}

#header h1.logo { position: relative; width: 10.4rem; height: 2.5rem; margin: auto; text-align: center;}
#header .top_link { width: 100%; margin: 1.6rem auto 1.4rem; text-align: center;}
#header .top_link a { width: 50%; position: relative; color: #fff; font-size: 0.75rem; text-align: center;}
#header .top_link a:hover {text-decoration: underline;}
#header .top_link a + a::before { content: ""; display: inline-block; width: 2px; height: 12px; margin: 0 1.5rem; background: url('/00_common/images/reservation/main/topLink_line.png') no-repeat;}

 
.top_Tit { position: relative; width: calc(100% - 14rem); background: url('/00_common/images/reservation/main/reser_pttrn.png'); padding: 3rem 0 3rem 4rem; margin-left: 14rem;}
.top_Tit h3 { color: #000; font-size: 1.5rem; font-weight: 600;}
.top_Tit ul { height: 2rem; position: absolute; top: calc(50% - 1rem); right: 5rem; background: #fff; border-radius: 1rem; box-shadow: 0 0 10px rgba(0,0,0,.1);}
.top_Tit ul li {position: relative;display: inline-block; width: 2rem; line-height: 2rem; text-align:center;}
.top_Tit ul li + li::before { content: ""; display: block; width: 2px; height: 12px; position:absolute; top:calc(50% - 6px); left:-2px; background: url('/00_common/images/reservation/main/topTit_line.png') no-repeat;}
.top_Tit ul li a { color: #555; font-size: 1.2rem;}
.top_Tit ul li a i { transition: all .25s; -webkit-transition: all .25s;}
.top_Tit ul li a:hover i { transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg);}

/* gnb */
#header .gnb {width: 100%; padding-left: 1rem;}
#header .gnb .depth01 > ul { position: relative; z-index: 3;}
#header .gnb .depth01 > ul > li > a { display: block; padding-left: 1.5rem; position: relative; line-height: 3rem; color: #fff; font-size: 0.95rem; border-radius: 1.5rem 0 0 1.5rem; transition: all .15s; -webkit-transition: all .15s;}
#header .gnb .depth01 > ul > li > a::after { content: "\e94a"; font-family: 'xeicon'; font-size: 1.2rem; color: #fff; position: absolute; right: 1.5rem; top: 0; transition: all .15s; -webkit-transition: all .15s;}
#header .gnb .depth01 > ul > li.active > a,
#header .gnb .depth01 > ul > li > a:not(i):hover { background: #0076dd; font-weight: 600;} 
#header .gnb .depth01 > ul > li.active > a::after,
#header .gnb .depth01 > ul > li > a:hover::after { content: "\e907"; font-weight: 400;}
#header .gnb .depth02 { display: none; background: #1339a1; border-radius:  0 0 0 1.5rem; padding: 2rem 0 1rem 1.5rem; margin: -1.5rem 0 1rem; z-index: -1;}
#header .gnb .depth02 ul > li > a { position: relative; padding-left: .7rem; display: block; color: #fff; line-height: 1.7rem;}
#header .gnb .depth02 ul > li > a span {position: relative; z-index: 5;}
#header .gnb .depth02 ul > li > a span::after {content: ""; display: block; width: 0; height: 10px; position: absolute; left: -2px; bottom: -2px; background: rgba(255,232,34,.2); z-index: 4; transition: all .15s; -webkit-transition: all .15s;}
#header .gnb .depth02 ul > li > a:hover span::after { width: calc(100% + 4px);}
#header .gnb .depth02 ul > li > a::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background: #fff; position: absolute; top: calc(50% - 3px); left: 0;}

#header .h_bottom { width: 100%; text-align: center; position: absolute; bottom: 3.75rem; left: 0; padding: 0 1.3rem; font-size: 0.75rem; color: #fff;}
#header .h_bottom .f_lnk { width: 100%; position: relative; display: block; border-radius: 1.5rem; border: 1px solid #fff; line-height: 2.5rem; padding: 0 1.5rem; text-align: left; transition: all .15s; -webkit-transition: all .15s;}
#header .h_bottom .f_lnk:hover { background: #fff; color: #132a6a;}
#header .h_bottom .f_lnk::after { content: "\e93f"; font-family: 'xeicon'; font-size: 1.2rem; position: absolute; top: 0; right: 1.5rem; }
#header .h_bottom p.address { margin: .8rem 0;}
#header .h_bottom p.copy { color: #d7e3ff;}


/* moblie navigation  */
#mNav { position: fixed; top: 0; left: -100%; width: 100%; height: 100vh; font-weight: 400; background:#fff; transition: 0.25s ease; -webkit-transition: 0.25s ease;  z-index:999; overflow:auto; padding-bottom:4rem; }
#mNav h4{ font-size:1.1rem; font-weight: 600; color:#000; line-height:3.5rem; border-bottom:1px solid #e4e4e4; padding:0 1rem;}
#mNav #mNavClose { position:absolute; right:2%; top:.5rem; width:2.5rem; height:2.5rem; line-height:2.5rem; font-size:1.1rem; text-align:center; border-radius:50%; color:#fff; background:#2f83ea; }
#mNav #mNavClose i{font-weight: 200;}
#mNav.active { left: 0; }
#mNav .snb { display:block; border-bottom: 1px solid #ccc; padding:.4rem 1rem; overflow:hidden; }
#mNav .snb > *{ display:inline-block; vertical-align: middle; margin:.25rem 0;}
#mNav .snb .util li { position:relative; float: left; padding:0 1rem 0 1.25rem;}
#mNav .snb .util li + li:before{content:""; position:absolute; left:0; top:calc(50% - 3px); width:6px; height: 6px; border-radius:50%; background:#ccc;}
#mNav .snb .util li:first-child{padding-left:0;}
#mNav .snb .util li:first-child:before{display:none;}
#mNav .snb .util li a { display: block; line-height: 1.25rem; text-align: left; font-size: 0.7rem; color: #222; }
#mNav .snb .util li a:hover,
#mNav .snb .util li a:focus{text-decoration: underline;}
 
#mgnb .depth02{ background:#f3f7ff;}/* 2차메뉴 배경 */
#mgnb .depth02 > ul > li:before{ background:#2f83ea;}/* 2차메뉴 블릿 색상*/
#mgnb .depth03{ border-top:2px solid #2f83ea;}/* 3차메뉴 border 색상 */
#mgnb .depth01 > ul > li.active > a { color: #fff; background-color:#2f83ea; }/* 1차메뉴 active */
#mgnb .depth02 > ul > li.active > a { color: #2f83ea; }/* 2차메뉴 active */

/* mgnb */
#mgnb div,
#mgnb ul{overflow:hidden;}
#mgnb li, 
#mgnb li a{display:block; position:relative;}
#mgnb li a[target='_blank']:after{display:inline-block; padding-left:.25rem; font-family: 'xeicon'; font-weight: 400; content: '\e980'; }
#mgnb li a{color:#333; font-weight: 600; font-size:0.9rem;}
#mgnb .depth01 > ul > li { border-bottom: 1px solid #ccc; overflow:hidden;}
#mgnb .depth01 > ul > li > a { padding:.75rem 1rem; font-size:0.9rem; z-index: 1;}
#mgnb .depth02{ display: none; padding:.5rem 1rem; }
#mgnb .depth02 > ul > li:before{content:""; position:absolute; left:0; top:.95rem; width:5px; height:2px; border-radius:2px; }
#mgnb .depth02 > ul > li > a { padding:.35rem 2rem .35rem 15px; font-size:0.85rem;}
#mgnb .depth03 {display: none; background:#fff; border-radius:0 0 .5rem .5rem; padding:1rem; margin-right:3px; margin-bottom:.25rem; box-shadow:1px 1px 3px rgba(0,0,0,0.2);}
#mgnb .depth03 > ul > li + li { margin-top:.5rem;}
#mgnb .depth03 > ul > li > a { padding-left:12px; color:#666; font-size:0.8rem;}
#mgnb .depth03 > ul > li > a:before{content:""; position:absolute; left:0; top:.55rem; width:5px; height:2px; border-radius:50%; background:#ccc; }
/* depth, _blank icon */
#mgnb li.dep > a:before{ position: absolute; font-family: 'xeicon'; }
#mgnb .depth01 > ul > li.dep.active > a {  background-image: url('/00_common/images/common/bg_mNav_active.png'); background-size: contain; background-position: right top; background-repeat: no-repeat;}
#mgnb .depth01 > ul > li.dep > a:before{content: '\e9c5'; top:1rem; right:1rem; font-size:1.1rem;}
#mgnb .depth02 > ul > li.dep > a:before{content: '\e9c5'; top:.8rem; right:0;}
/* mgnb : active */
#mgnb li.dep.active > div{display:block;}
#mgnb .depth01 > ul > li.dep.active > a:before{content: '\e9c1'; }
#mgnb .depth02 > ul > li.dep.active > a:before{content: '\e9c1'; }


.popover { position:absolute; z-index:1060; background-color:#fff; border:1px solid #ccc; border-radius:6px; }
.popover.top { margin-top:-10px; }
.popover.right { margin-left:10px; }
.popover.bottom { margin-top:10px; }
.popover.left { margin-left:-10px; }
.popover-title { padding:8px 14px; margin:0; font-size:14px; background-color:#f7f7f7; border-bottom:1px solid #ebebeb; border-radius:5px 5px 0 0 }
.popover-content { padding:9px 14px; }
.popover>.arrow, .popover>.arrow:after { position:absolute; display:block; width:0; height:0; border-color:transparent; border-style:solid; }
.popover>.arrow { border-width:11px; }
.popover>.arrow:after { content:""; border-width:10px; }
.popover.top>.arrow { bottom:-11px; left:50%; margin-left:-11px; border-top-color:#999; border-top-color:rgba(0, 0, 0, .25); border-bottom-width:0; }
.popover.top>.arrow:after { bottom:1px; margin-left:-10px; content:" "; border-top-color:#fff; border-bottom-width:0; }
.popover.right>.arrow { top:50%; left:-11px; margin-top:-11px; border-right-color:#999; border-right-color:rgba(0, 0, 0, .25); border-left-width:0; }
.popover.right>.arrow:after { bottom:-10px; left:1px; content:" "; border-right-color:#fff; border-left-width:0; }
.popover.bottom>.arrow { top:-11px; left:50%; margin-left:-11px; border-top-width:0; border-bottom-color:#999; border-bottom-color:rgba(0, 0, 0, .25)}
.popover.bottom>.arrow:after { top:1px; margin-left:-10px; content:" "; border-top-width:0; border-bottom-color:#fff; }
.popover.left>.arrow { top:50%; right:-11px; margin-top:-11px; border-right-width:0; border-left-color:#999; border-left-color:rgba(0, 0, 0, .25)}
.popover.left>.arrow:after { right:1px; bottom:-10px; content:" "; border-right-width:0; border-left-color:#fff; }
.popover-content .btn_view { padding:1px 4px 2px !important; background:none; border-radius:5px !important; border:1px solid #004896; color:#004896; font-size:14px; margin: 0 0 0 10px !important; }
.popover-content .btn_view.ml0 { margin: 0 0 0 0 !important; }
.popover-content .btn_view i {padding-left:0 !important;}
 

/* footer */ 
#footer { width: 14rem; height:7.35rem; text-align: center; position: fixed; bottom: 3.75rem; left: 0; padding: 0 1.3rem; font-size: 0.75rem; color: #fff; z-index:555;}
#footer .f_lnk { width: 100%; position: relative; display: block; border-radius: 1.5rem; border: 1px solid #fff; line-height: 2.5rem; padding: 0 1.5rem; text-align: left; transition: all .15s; -webkit-transition: all .15s;}
#footer .f_lnk:hover { background: #fff; color: #132a6a;}
#footer .f_lnk::after { content: "\e93f"; font-family: 'xeicon'; font-size: 1.2rem; position: absolute; top: 0; right: 1.5rem; }
#footer p.address { margin: .8rem 0;}
#footer p.copy { color: #d7e3ff;}   
    
.footer_link li .mdBox {display: none; border-radius: 0.3rem; border: 1px solid #ccc; background: #fff; position: absolute; left: 1rem; top: -0.4rem; transform: translateY(-100%); z-index: 999;}
.footer_link li.actv .mdBox {display: block;}
.footer_link li .mdBox:before {content: ""; display: block; border-left: 0.5rem solid transparent; border-right: 0.5rem solid transparent; border-top: 0.4rem solid #ccc; position: absolute; left: 0.5rem; bottom: 0; transform: translateY(100%);}
.footer_link li .mdBox:after {content: ""; display: block; border-left: calc(0.5rem - 1px) solid transparent; border-right: calc(0.5rem - 1px) solid transparent; border-top: calc(0.4rem - 1px) solid #fff; position: absolute; left: calc(0.5rem + 1px); bottom: 0; transform: translateY(100%);}
.footer_link li .mdBox h3 {padding: 0.3rem 0.5rem; border-radius: 0.25rem 0.25rem 0 0; color:#171b25; border-bottom: 1px solid #ebebeb; background: #f7f7f7; font-size: 0.7rem;}
.footer_link li .mdBox .mdBoxCont {display: flex; padding: 0.25rem;}
.footer_link li .mdBox .mdBoxCont a {display: inline-block; padding: 0.1rem 0.2rem; border-radius: 0.25rem; border: 1px solid #004896; font-size: 0.7rem; color: #004896; font-weight: 600; text-align: center; margin: 0.25rem; white-space: nowrap;}
.footer_link li .mdBox .mdBoxCont a i {padding-left: 0;}
.footer_link li .mdBox .mdCls {padding: 0.4rem 0.5rem; font-size: 0.7rem; position: absolute; right: 0; top: 0; color:#171b25;}

/* 모바일 메뉴 */
.mob_btn {display: none;}

/* 반응형 */ 
@media screen and (max-width:1200px){ 

    .top_Tit { padding: 2rem 0 2rem 3rem;}
    .top_Tit ul { right: 2rem;}
}
@media screen and (max-width:1024px){ 	
    /* header */
    #header { width: 100%; height: 3rem; padding: 0; }
    #header .top_link { display:none;}
    #header h1.logo { width: 9rem; height: auto; margin-top: .4rem; }
    #header h1.logo img { width: 100%; }

    
    .top_Tit { width:100%; margin-left: 0; margin-top:-0.5rem; padding: 1rem 1.5rem;}
    .top_Tit h3 { font-size: 1.1rem; }
    .top_Tit ul { right: 1.5rem; }

    /* gnb */
    #header .gnb {display:none;} 

    /* 모바일 메뉴 */
    .mob_btn {display: block; width: 2.3rem; height: 2.3rem; line-height: 2.3rem; text-align: center; border-radius: 50%; color: #fff; font-size: 1.4rem; position: absolute; top: calc(50% - 1.15rem); left: .5rem; background: #0076dd; transition: all .15s; -webkit-transition: all .15s;}
    .mob_btn:hover {background: #015fb0}

    /* footer */  
    #footer { width: 100%; height:auto; position: relative; bottom: 0; left: 0; padding: 1rem; background: #171b25; text-align:left; } 
    #footer .f_wrap { font-size: 0.75rem; color: #fff;}
    #footer .f_wrap .f_lnk {width: 10rem; position: relative; display: block; margin-top: 0.7rem; border-radius: 1.5rem; border: 1px solid #fff; line-height: 2rem; padding: 0 1.5rem; text-align: left; transition: all .15s; -webkit-transition: all .15s; float:right;}
    #footer .f_wrap .f_lnk:hover { background: #fff; color: #132a6a;}
    #footer .f_wrap .f_lnk::after { content: "\e93f"; font-family: 'xeicon'; font-size: 1.2rem; position: absolute; top: 0; right: 1.5rem; }
    #footer .f_wrap p { display: inline-block; line-height:2rem;}    
    #footer .f_wrap p br {display: none;}
    #footer .f_wrap p.copy { margin-left:1.5rem; color: #d7e3ff;}
    #footer .f_wrap p br {display: none;} 
    .footer_link li .mdBox { left: auto; right:.5rem; top: 1rem; }
    
    
}

@media screen and (max-width:860px){ 	
     
}

@media screen and (max-width:768px){ 	
    /* footer */
    #footer { text-align:center;} 
    #footer .f_wrap .f_lnk { float:none; margin:.5rem auto 0;}
    #footer .f_wrap p { display: block; line-height:1.5;}
    #footer .f_wrap p.copy { margin-left:0;}
   .footer_link li .mdBox { right:calc(50% - 6rem);}
}

@media screen and (max-width:560px){	
    
}

@media screen and (max-width:480px){
    
}

@media screen and (max-width:360px){ 
   
}

@media screen and (max-width:320px){ 

}