@charset "UTF-8";

.gnb{ background: -webkit-gradient(linear, left top, right top, color-stop(0, #282c6b), color-stop(0.25, #282c6b), color-stop(0.4, #3617cd), color-stop(1, #3617cd));
	background: -moz-linear-gradient(left, #282c6b 0%, #282c6b 25%, #3617cd 40%, #3617cd 100%);
	background: -webkit-linear-gradient(left,  #282c6b 0%, #282c6b 25%, #3617cd 40%, #3617cd 100%);
	background: -o-linear-gradient(left,  #282c6b 0%, #282c6b 25%, #3617cd 40%, #3617cd 100%);
	background: -ms-linear-gradient(left,  #282c6b 0%, #282c6b 25%, #3617cd 40%, #3617cd 100%);
	background: linear-gradient(left,  #282c6b 0%, #282c6b 25%, #3617cd 40%, #3617cd 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#282c6b', endColorstr='#3617cd', gradientType=1);
    padding: 22px 0; color: #fff; }

.gnb > div { display: flex; justify-content: space-between; align-items: center; }
.gnb > div::after, .gnb > div::before { display: none; }
    .gnb ul { display: flex; gap: 5px; }
    .gnb img { width: auto; max-width: 100%; }

nav { position: relative; }
nav .nav > ul { display: flex; justify-content: center; align-items: center; }
    nav .nav > ul > li { width: calc(100% / 5); text-align: center; font-weight: 800; }
    .all_menu > p, nav .nav > ul > li > a { padding: 23px 0; font-size: 1.2em; line-height: 1em; cursor: pointer; }
    .all_menu > p span { font-size: 1.2em; margin: -5px 0 0 0; }

/*서브메뉴*/
nav .nav > ul > li{ position: relative; }
.sub_menu { display: none; position: absolute; top: 65px; left: 0; z-index: 20; width: 100%; padding: 10px 0; color: #777; background: #fff; box-shadow: -1px 1px 5px #e0e0e0; }
nav .nav > ul > li:hover .sub_menu { display: block; }
.sub_menu li a { display: block; padding: 5px 10px; font-size: 0.9em; font-weight: 400; }
.sub_menu li a:hover { color: #f99d1c; }

/*전체메뉴*/
.all_menu { position: initial !important; }
    .all_menu .nav_sub{ display: none; }
    .all_menu:hover .nav_sub { display: block; }

/*전체 서브*/
nav .nav .nav_sub{ position: absolute; top: 65px; left: 0; z-index: 10; width: 100%; border-bottom: 1px solid #e0e0e0; background: #fff; box-shadow: -1px 1px 5px #e0e0e0; }
    nav .nav .nav_sub ul { display: flex; }
    nav .nav .nav_sub ul li{ width: calc(100% / 5); padding: 10px 0; }
    nav .nav .nav_sub ul li a { display: block; padding: 5px 10px; font-size: 0.9em; font-weight: 400; color: #555; }
    nav .nav .nav_sub ul li a:hover { color: #f99d1c; }

/*모바일메뉴*/
.mob_nav{ position: fixed; top: 0; z-index: 999; width: 100%; display: flex; align-items: center; padding: 10px 0;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #282c6b), color-stop(0.25, #282c6b), color-stop(0.4, #3617cd), color-stop(1, #3617cd));
	background: -moz-linear-gradient(left, #282c6b 0%, #282c6b 25%, #3617cd 40%, #3617cd 100%);
	background: -webkit-linear-gradient(left,  #282c6b 0%, #282c6b 25%, #3617cd 40%, #3617cd 100%);
	background: -o-linear-gradient(left,  #282c6b 0%, #282c6b 25%, #3617cd 40%, #3617cd 100%);
	background: -ms-linear-gradient(left,  #282c6b 0%, #282c6b 25%, #3617cd 40%, #3617cd 100%);
	background: linear-gradient(left,  #282c6b 0%, #282c6b 25%, #3617cd 40%, #3617cd 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#282c6b', endColorstr='#3617cd', gradientType=1); }

    .mob_nav .mob_btn { width: 50px; height: 50px; cursor: pointer; }
    .mob_nav a { display: block; width: 80%; padding: 0 10px; }
    .mob_nav a img { width: auto; max-width: 100%; }
    @media (max-width:767px) { 
        .mob_nav{ padding: 0; 
            background: -webkit-gradient(linear, left top, right top, color-stop(0, #282c6b), color-stop(0.25, #282c6b), color-stop(0.4, #3617cd), color-stop(1, #3617cd));
            background: -moz-linear-gradient(left, #282c6b 0%, #282c6b 50%, #3617cd 65%, #3617cd 100%);
            background: -webkit-linear-gradient(left,  #282c6b 0%, #282c6b 50%, #3617cd 65%, #3617cd 100%);
            background: -o-linear-gradient(left,  #282c6b 0%, #282c6b 50%, #3617cd 65%, #3617cd 100%);
            background: -ms-linear-gradient(left,  #282c6b 0%, #282c6b 50%, #3617cd 65%, #3617cd 100%);
            background: linear-gradient(left,  #282c6b 0%, #282c6b 50%, #3617cd 65%, #3617cd 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#282c6b', endColorstr='#3617cd', gradientType=1); }
    }

html.open { overflow: hidden; } 
.close { width: 50px; height: 50px; padding: 15px; position: absolute; right: 0px; top: 0px; color: #fff; cursor: pointer; }/*닫기 버튼*/

#menu { width: 70%; height: 100%; position: fixed; top: 0px; left: -70%; z-index: 999999; font-size: 14px; background: #fff; overflow-x: scroll;
	transition: All 0.2s ease; -webkit-transition: All 0.2s ease; -moz-transition: All 0.2s ease; -o-transition: All 0.2s ease; } /*메뉴 영역*/

#menu .menu_log { padding: 20px 10px; text-align: left; 
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #282c6b), color-stop(0.25, #282c6b), color-stop(0.4, #3617cd), color-stop(1, #3617cd));
    background: -moz-linear-gradient(left, #282c6b 0%, #282c6b 40%, #3617cd 55%, #3617cd 100%);
    background: -webkit-linear-gradient(left,  #282c6b 0%, #282c6b 40%, #3617cd 55%, #3617cd 100%);
    background: -o-linear-gradient(left,  #282c6b 0%, #282c6b 40%, #3617cd 55%, #3617cd 100%);
    background: -ms-linear-gradient(left,  #282c6b 0%, #282c6b 40%, #3617cd 55%, #3617cd 100%);
    background: linear-gradient(left,  #282c6b 0%, #282c6b 40%, #3617cd 55%, #3617cd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#282c6b', endColorstr='#3617cd', gradientType=1); }
#menu .menu_log img { width: 80%; }

.mob_top { position: fixed; top: 70px; left: 0; z-index: 999; width: 100%; height: 50px; background: #fff; }
.mob_top ul { display: flex; width: 100%; border-bottom: 1px solid #e0e0e0; }
    .mob_top li { width: calc( 100% / 4 ); }
    .mob_top a { display: block; text-align: center; padding: 15px 5px; line-height: 1em; font-weight: 800; font-size: 1.1em; }
    .mob_top a:hover { color: #f99e1c; }
    @media (max-width:767px) {
        .mob_top { top: 50px; }
    }

.quick_login { border-bottom: 1px solid #f4f4f4; overflow: hidden; }
.quick_login li{ float: left; width: 50%; text-align: center; border-top: 1px solid #f4f4f4; }
.quick_login li a{ display: block; height: 48px;  line-height: 48px; }
.quick_login li:nth-child(1) a, .quick_login li:nth-child(3) a { border-right: 1px solid #f4f4f4; }

#nav-left { border-top: 15px solid #f4f4f4; }
#nav-left > li > div { position: relative; padding: 0 0 0 20px; height: 48px; line-height: 48px; border-bottom: 1px solid #ebebeb; }
#nav-left > .open_menu > div:after { content: "\e941"; position: absolute; right: 15px; font-family: 'xeicon'; }
#nav-left > .open > div:after { content: "\e944"; font-family: 'xeicon'; }

/* 모바일 서브 */
#nav-left > li > ul{display: none;}
#nav-left > .open_menu > ul{ display: none; border-bottom: 1px solid #ebebeb; }
#nav-left > .open_menu > ul > li{ background: #fafafa; padding: 10px 0; }
#nav-left > .open_menu > ul > li > a{ display: block; position: relative; height: 40px; line-height: 40px; padding: 0 0 0 25px; }
#nav-left > .open_menu > ul > li > a:before{ content: "\e93f"; font-family: 'xeicon'; position: absolute; left: 10px; }

/* 모바일 예약 */
.img_btn { display: none; position: relative; width: 140px; margin: 40px auto; padding: 15px 0px; font-size: 12px; text-align: center; line-height: 20px; color: #999; border-bottom: 1px solid #f99d1c; }
.img_btn p.cir { position: absolute; right: 20px; top: 0; width: 25px; height: 25px; border-radius: 50px; font-weight: 500; font-size: 11px; text-align: center; line-height: 22px;  color: #fff; background: #f99d1c; }
.img_btn p span { display: block; padding: 10px 0 0 0; font-size: 15px; font-weight: 300; color: #000; }

#menu.open { left: 0px; }

.page_cover.open { display: block; }

.page_cover { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background-color: rgba(0, 0, 0, 0.4); z-index: 99999; display: none; }

/*하단*/
footer { background: #f5f5f8; }
    footer .link { color: #fff; background: #282c6b; }
    footer .link ul { display: flex; justify-content: flex-end; align-items: center; gap: 20px; max-width: 1170px; margin: 0 auto; padding: 0 10px; }
    footer .link a { display: block; padding: 10px 0; }

    footer .info { padding: 5% 0; }
    footer .info dt { padding: 0 0 5px 0; font-size: 1.1em; font-weight: 800; cursor: pointer; }
    footer .info dt.on i { transform: rotate(-180deg); }
    footer .info dd + dt { margin-top: 20px; }
    footer .info dd { color: #828282; }
    footer .info dd p + p { padding-top: 10px; }

@media (max-width:991px) {
    footer .link ul { justify-content: flex-start; }
    footer .info dl { padding-right: 70px; }
    
    .m_quick { position: fixed; right:10px; bottom: 100px; z-index: 999; }
    .m_quick ul { display: flex; flex-direction: column; gap: 10px; }
    .m_quick a { display: flex; justify-content: center; align-items: center; margin:0; width: 55px; height: 55px; line-height: 1em; font-weight: 800; color: #fff; border-radius: 50px; overflow:hidden; }
    .m_quick a i { font-size: 2em; }
    .m_quick .q01 { background: #282c6b; }
    .m_quick .q02 { background: #3617cd; }
}
@media (max-width:767px) {
    footer .link ul { gap: 5px; }
}