@charset "utf-8";
/* CSS Document */
.hide{ display:none !important;}
.show{ display:block;}
.bg-color{background: #ecf0f5;}

/*-------- contents all --------*/
#wrap {margin:0; position:relative; min-width:320px; width:100%; font-family: 'Noto Sans KR'; padding-bottom: 128px; min-height: 100%;}

/*------- header -------*/
#header{ min-width:320px; width:100%; z-index: 10; position:fixed; }
#header .header-box {position: relative;  overflow: hidden;  height: 55px; background: transparent; border-bottom: 1px solid rgba(255,255,255,0.2);}
.menu-bar {position: absolute; top: 16px; right: 16px; width: 24px;}

/*------- navi-menu -------*/
#toggle{display:none;}
#toggle:checked + #header nav{left:0px;} /* 토글에 체크되면 메뉴 보임 */
#header nav{width:100%;height:100%;position:fixed;top:0px;left:100%;transition:0.5s;z-index:1000;}
.menu-top{width: 100%; height: 70px; border-bottom: 1px solid #eee; position: relative;}
.menu-top .menu-logo {position: absolute; top: 20px; left:16px;}
.menu-login {width: 100%; height: 100px; border-bottom: 1px solid #eee; position: relative; color: #000; background-color:#fff; }
.menu-login .txt {display: inline-block; font-size: 1.063em; line-height: 1.5em; margin: 24px 16px; float: left;     font-weight: 200; letter-spacing: -0.4px;}
.menu-login .txt span {color: #378468; font-size: 1.250em;}
.menu-login .menu-two-btn {display: inline-block; text-align: center; float: right; margin-top: 24px;  margin-right: 16px; font-size: 0.875em; line-height: 1.7em; font-weight: 300;}
.menu-login .login-btn {width: 98px; height: 24px; background-color: #f6743b; margin-bottom: 5px;}
.menu-login .join-btn {width: 98px; height: 24px; background-color: #b4bbbc;}
.menu-login .login-btn a{color: #fff;}
.menu-login .join-btn a{color: #fff;}

/* header nav */
.topmenuWrap{ width: 100%; position: fixed; min-width:320px; top: 0; left: 0; right: 0; z-index: 1200; background-color: #163022; height: 56px; transition: 0.3s all ease;}
.topmenuWrap.main{width: 100%; position: fixed; min-width: 320px; top: 0; left: 0; right: 0; z-index: 1300; background-color: transparent; height: 56px; transition: 0.3s all ease;}
.topmenuWrap.bg-color{background-color: #163022; transition: all 0.3s;}
.topmenuWrap.main .sub-logo-box{opacity: 0;}
.topmenuWrap.main .main-logo{opacity: 1;}

.topmenuWrap .toggle-btn span{background: #fff;}
.topmenuWrap .sub-logo-box{opacity: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.topmenuWrap .main-logo{opacity: 0;}

.logo {position: absolute; top: 14px; left:16px;}
.logo a{ display: inline-block;}
.sub-logo-box{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.btn-top-reser{ position: absolute; top:16px; left: 28px;}
.btn-top-reser img{ width: 28px;}

.toggle-bg{width: 56px; height: 56px; background: #163022;}

.menu-login{ height: 60px; border-top:1px solid #4c576a; display: flex; align-items: center; justify-content: center;}
.menu-login a{ display: block; color: #f8f8f8; font-size: 15px; position: relative; width: 33.33%; text-align: center;}
.menu-login a::after{ content: ''; width: 1px; height: 15px; background-color: #4c576a; position: absolute; right:0; top:1px;}
nav {position: fixed;top: 0;bottom:0;right: 0;right:0;width: 100% !important;height: 100%;opacity: 0;visibility: hidden;-webkit-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;z-index: 10;}
.navConBox{ width: 100%; height: 100%; overflow-y: auto; position: relative; z-index: 9999; background: rgba(22,48,34,5) url(/mobile/images/main/nav-bg.png); background-position: center center; object-fit: cover;}
.topmenuWrap.sub .navConBox{ width: 100%; height: 100%; overflow-y: auto; position: relative; background: rgba(22,48,34,5) url(/mobile/images/main/nav-bg.png); background-position: center center; object-fit: cover;}
.navTop{ width: 100%; margin:auto; position: fixed; top:0; right: 0; z-index: 1; height: 56px; z-index: 5; border-bottom: 1px solid rgba(206,213,222,0.3);}
.nav-overlay{opacity: 0; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:1003;}

/*nav*/
nav ul {position: relative;-webkit-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;height: calc(100% - 110px);overflow-y: auto;margin-top:105px;}
nav ul li {-webkit-transform: translateY(50px);transform: translateY(50px);opacity: 0;}
nav ul li a {display: block;font-size: 1.38em;text-indent: 30px;height: 53px;color: rgba(206, 213, 222, 0.5);-webkit-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;position: relative;font-weight: 400;display: flex;align-items: center;width: 94%;margin: 0 auto;}
nav ul li a.menu-hover{color: #ced5de; transition:all 0.2s;}
nav ul li a b{position: absolute;top:50%;transform: translateY(-50%);right:0;width: 60px;color: #999;}
nav ul li a b span{ position: relative; width: 15px; height: 15px; display: inline-block;}
nav ul li a b span::before{content: '';display: block;position: absolute;top:calc(50% - 1px);right:0;width: 15px;height: 1px;background-color: #999;}
nav ul li a b span::after{content: '';display: block;position: absolute;top:calc(50% - 1px);right:0;width: 15px;height: 1px;transform: rotate(90deg);background-color: #999;}
nav ul li a b span.click::after{display: none;}

.toggle-btn{display: block;z-index: 100;cursor: pointer;position: absolute;top: 50%;right:25px;transform: translate(50%, -50%);z-index: 1100;}
.toggle-btn_bg{position: fixed; top: 0; right: 0; width: 56px; height: 56px; background: #163022; z-index: -1;}
.toggle-btn span {display: block;background: #fff;width: 24px;height: 2px;border-radius: 10px;transition: 0.25s margin 0.25s, 0.25s transform;}
.toggle-btn span:nth-of-type(1){margin-bottom: 6px;}
.toggle-btn span:nth-of-type(2) {}
.toggle-btn span:nth-of-type(3){margin-top: 6px;}
#toggle:checked + label.toggle-btn span {background-color: #fff;transition: 0.25s margin, 0.25s transform 0.25s;}
#toggle:checked + label.toggle-btn span:nth-of-type(1) {margin-bottom: -3px;transform: rotate(45deg);}
#toggle:checked + label.toggle-btn span:nth-of-type(2) {transform: rotate(45deg);display: none;}
#toggle:checked + label.toggle-btn span:nth-of-type(3) {margin-top: -3px;transform: rotate(135deg);}
#toggle:checked ~ nav {opacity: 1;visibility: visible;z-index: 1019;}
#toggle:checked ~ nav .nav-overlay{opacity: 1;}
#toggle:checked ~ nav ul li {-webkit-transform: translateY(0px);transform: translateY(0px);opacity: 1;margin-bottom: 10px;}
.smallMbox a{ border-bottom:0; height: 50px; font-size: 1.13em; font-weight: 400; color: #ced5de; font-family: 'Noto Sans KR'; padding: 15px;}

/*header login*/
.login-btn{width: 90%; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, -50%);}
.login-btn a{color: #ced5de; padding: 0.5em; display: inline-block; width: 48.9%; font-size: 1em; text-align: center; margin-right: 5px; float: left; background:rgba(206, 213, 222, 0.1); padding: 10px; font-weight: 400;}
.login-btn a:last-child{margin-right: 0;}

/*----- footer -----*/
#footerWrap{background: #222; color: #ced5de; text-align: center; padding: 1.5em 0.5em; font-family: 'Noto Sans KR'; width: 100%; position: absolute; bottom: 0; height: 128px;}

.ft-menu{width: 100%; margin-bottom: 20px;}
.ft-menu li{display: inline-block; margin-right: 20px; position: relative;}
.ft-menu li::after{content: ''; position: absolute; top: 50%; left: -10px; width: 1px; height: 7px; background: #ced5de; transform: translate(-50%, -10%);}
.ft-menu li:first-child::after{display: none;}
.ft-menu li a{font-size: 0.75em; color: #fff; font-weight: 200;}
.ft-menu li:last-child{margin-right: 0;}

#footerWrap h3{font-size: 0.75em; margin-bottom: 5px;}
#footerWrap p{font-size: 0.63em;}

/* footer popup */
.pop-scroll3{overflow-y: scroll; height: 100%; padding: 80px 15px; font-family: 'Noto Sans KR'; white-space: pre-line; font-weight: 300;}
.pop-scroll3 span{color: var(--main); font-weight: 700;}

.common-table2{border-top: 2px solid var(--main); border-bottom: 1px solid var(--mian); text-align: center; width: 100%; font-size: 0.88rem;}
.common-table2 thead th{background:#ced5de; padding: 5px 0; position: relative; color: var(--main); vertical-align: middle;}
.common-table2 thead th::after{content: ''; position: absolute; top: 50%; left: 0; width: 1px; height: 14px; background: #fff; transform: translateY(-50%);}
.common-table2 thead th:first-child::after{display: none;}
.common-table2 tbody th{border-bottom: 1px solid #ced5de; vertical-align: middle; font-weight: 400;}
.common-table2 tbody td{padding: 5px 0; border: 1px solid #ced5de; vertical-align: middle;}
.common-table2 tbody td:first-child{border-left: 0;}
.common-table2 tbody td:last-child{border-right: 0;}
.table-text{font-size: 0.75rem; margin-top: -15px;}