@charset "utf-8";

body {min-height:var(--full-height);}
.layout-wrap {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; flex-direction: column; width:100%; padding-top:var(--header-height); min-height:var(--full-height); height:auto;}
.layout-header {position:fixed; top: 0; z-index: 20; flex-shrink: 1; width: 100%; height:var(--header-height); background-color:var(--white); text-align: center;}
.layout-header h1 {font-size:3rem; font-weight: 700;}
.header-inner {position:relative; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; align-items:center; padding:1.5rem var(--layout-padding) 1rem;}
.header-inner .logo {display:block; width:17.3rem;}
.header-inner .header-util {margin-left:auto; padding-top:1rem;}
.header-inner .btn-join {display:inline-block; width:11.2rem; height:4.2rem; font-size:2rem; border-radius:.4rem; border:1px solid var(--gray900)}
.header-inner .header-myinfo { margin-right: 2.2rem; }
.header-inner .header-myinfo .name {display:inline-block; height:3rem; margin-right:.2rem; padding-left:3.8rem; letter-spacing:-1px; font-size:2.3rem; font-weight:700; background:url('../img/common/header_name.png') no-repeat left top; background-size:3rem auto;}
.header-inner .header-myinfo::after {content: ""; position: absolute; right: 4.5%; top: 60%; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid #d03005; /* 화살표 색 */ transform: translateY(-50%);}
.header-inner .btn-back {position:absolute; left:0; top:1rem; display: block; width:6rem; height:6rem; background: url('../img/common/btn_back.png') no-repeat center center; background-size:contain;}
.header-inner h1 {width:100%; font-size:3rem; text-align:center;}
.layout-body {flex:1; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; flex-direction:column; padding: 0 var(--layout-padding);}
.layout-main {flex:1; /* padding-bottom:2rem; */}
/*
.layout-footer {position:sticky; bottom: 0; z-index: 20; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; width:100%; justify-content: center; box-shadow:0 10px 40px rgba(0,0,0, .2); background-color:var(--white);
    padding: 2rem 4rem calc(constant(safe-area-inset-bottom) + 1.5rem);
    padding: 2rem 4rem calc(env(safe-area-inset-bottom) + 1.5rem);
}
.layout-footer .footer-inner {width:100%;}
.layout-footer nav {width:100%;}
.layout-footer .nav {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; justify-content:space-between; width:100%;}
.layout-footer .nav-item {position:relative;}
.layout-footer .nav-item-link {display:block; font-size:1.8rem; color:var(--gray800); text-align:center;}
.layout-footer .nav-item-link::before {content:''; display:block; width: 5rem; height:5rem; margin:0 auto 1rem; background-image:url('../img/common/footer_icon.png'); background-position:0 0; background-repeat:no-repeat; background-size:25rem auto;}
.layout-footer .nav-item-link:focus {outline:0;}
.layout-footer .nav-sub {position:absolute; left:0; bottom:calc(100% + 2rem); z-index:1; width:14rem; border-radius:2rem; border: 1px solid var(--gray200); background-color:var(--white);}
.layout-footer .nav-sub:focus {outline:0;}
.layout-footer .nav-sub-item + .nav-sub-item {border-top:1px solid var(--gray200);}
.layout-footer .nav-sub-link {display: block; height:6rem; padding:0 2rem; line-height:6rem; font-size: 2.3rem; font-weight:600; color:var(--gray900); text-align:left;}
.layout-footer .item-home .nav-item-link::before {background-position:0 0;}
.layout-footer .item-send .nav-item-link::before {background-position:-5rem 0;}
.layout-footer .item-result .nav-item-link::before {background-position:-10rem 0;}
.layout-footer .item-inbox .nav-item-link::before {background-position:-15rem 0;}
.layout-footer .item-nav .nav-item-link::before {background-position:-20rem 0;}
*/

.layout-footer {position:sticky; bottom: 0; z-index: 20; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; width:100%; /* height:var(--footer-height); */ justify-content: center; box-shadow:0 10px 40px rgba(0,0,0, .2); background-color:var(--white);}
.layout-footer .footer-inner {width:100%;}
.layout-footer .nav {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; justify-content:space-between; width:100%;}
.layout-footer .nav-item {position:relative;}
.layout-footer .nav-item-link {display:block; padding:1.5rem 0; font-size:1.8rem; color:var(--gray800); text-align:center;}
.layout-footer .nav-item-link::before {content:''; display:block; width: 5rem; height:5rem; margin:0 auto 1rem; background-image:url('../img/common/footer_icon.png'); background-position:0 0; background-repeat:no-repeat; background-size:40rem auto;}
.layout-footer .nav-item-link:focus {outline:0;}
.layout-footer .nav-sub {position:absolute; bottom:calc(100% + 0.5rem); z-index:1; width:14rem; border-radius:2rem; border: 1px solid var(--gray200); background-color:var(--white);}
.layout-footer .nav-sub:focus {outline:0;}
.layout-footer .nav-sub-item + .nav-sub-item {border-top:1px solid var(--gray200);}
.layout-footer .nav-sub-link {display: block; height:6rem; padding:0 2rem; line-height:6rem; font-size: 2.3rem; font-weight:600; color:var(--gray900); text-align:left;}

.layout-footer .nav-category {display:block; width:11rem; padding:1.5rem 0; flex-shrink:0;background-color:#eee;font-size:1.8rem; color:var(--gray800);text-align:center;}
.layout-footer .nav-category::before {content:''; display:block; width: 5rem; height:5rem; margin:0 auto 1rem; background-image:url('../img/common/footer_icon.png'); background-position:right 0; background-repeat:no-repeat; background-size:40rem auto;}
.layout-footer nav{display: flex; justify-content: center; align-items:stretch;
    padding-bottom:calc(constant(safe-area-inset-bottom));
    padding-bottom:calc(env(safe-area-inset-bottom));
}
.nav-swiper{padding-right:1.5rem !important;padding-right:1.5rem !important;}
.nav-swiper .n1 .nav-item-link::before{background-position:0 0;}
.nav-swiper .n2 .nav-item-link::before{background-position:-5rem 0;}
.nav-swiper .n3 .nav-item-link::before{background-position:-10rem 0;}
.nav-swiper .n4 .nav-item-link::before{background-position:-15rem 0;}
.nav-swiper .n5 .nav-item-link::before{background-position:-20rem 0;}
.nav-swiper .n6 .nav-item-link::before{background-position:-25rem 0;}
.nav-swiper .n7 .nav-item-link::before{background-position:-30rem 0;}
.nav-swiper-controls .swiper-button-prev,
.nav-swiper-controls .swiper-button-next{z-index:100;width:3rem;height:6rem;background-image:url('../img/index/btn_nav_swiper_controls.png');background-position:0 center;background-repeat:no-repeat;background-size:6rem auto;}
.nav-swiper-controls .swiper-button-prev{left:0.5rem;}
.nav-swiper-controls .swiper-button-next{right:0.5rem; background-position:-3rem center;}
.nav-swiper-controls .swiper-button-disabled{opacity:0 !important;}


.aside-open {overflow:hidden;}
.aside-wrap {position:fixed; left:-100%; /* 왼쪽에서 오른쪽 슬라이드 */ top:0; z-index:100; overflow-y: auto; width:100%; height: 100%; padding:0 0 5.5rem; background-color:var(--white); transition:left .3s ease-in;}
.aside-wrap.open {left:0;}
.aside-head {position:sticky; left:0; top:0; z-index:1; width:100%; height:var(--header-height); padding:1.5rem var(--layout-padding) 1rem; background:var(--white);}
.aside-head h2 {font-size:2.6rem; font-weight:700; text-align:center; letter-spacing:1px;}
.aside-head .btn-aside-close {position:absolute; right:2rem; top:1.5rem;}
.aside-login {position:relative; margin-top:2rem; padding:0 var(--layout-padding);}
.aside-login .txt-hello {font-size:2.3rem; line-height:3.5rem;}
.aside-login .btn-setting {position: absolute; right:2.5rem; bottom: 0;}
.aside-quick-list {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; justify-content:space-between; width:100%; margin:0 0 4rem; padding: 0 1rem !important;}
.aside-quick-item {position:relative;}
.aside-quick-link {display:block; font-size:2.2rem; font-weight:700; text-align:center;}
.aside-quick-link::before {content:''; display:block; width:11rem; height:11rem; margin:0 auto .5rem; border-radius:50%; background-color:#ebebec; background-image:url('../img/common/aside_quicklink.png'); background-position:0 0; background-repeat:no-repeat; background-size:45rem auto;}
.aside-quick-item.item-sms .aside-quick-link::before {background-position:-11rem 0;}
.aside-quick-item.item-inbox .aside-quick-link::before {background-position:-22rem 0;}
.aside-quick-item.item-result .aside-quick-link::before {background-position:-33rem 0;}
.aside-body {padding:4rem var(--layout-padding);}
.aside-section +.aside-section {margin-top:5.5rem;}
.aside-subject {font-size:2.3rem; font-weight:700;}
.aside-nav-list {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; flex-wrap: wrap; margin-top:1rem !important; margin-left:-2.5rem; margin-right:-2.5rem; border-top:1px solid var(--gray200); border-bottom:1px solid var(--gray200);}
.aside-nav-list.type-bg {background-color:#f4f4f5;}
.aside-nav-item {width:50%; margin-bottom:-1px; border-bottom:1px solid var(--gray200); font-size: 2.1rem;}
.aside-nav-item:nth-child(odd) {border-right:1px solid var(--gray200);}
.aside-nav-link {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; justify-content:space-between; align-items: center; width:100%; height:7.8rem; padding:0 2.5rem; letter-spacing:1px; color: #1e1e1e;}
.aside-nav-link::after {content:''; display:block; width:.6rem; height: .6rem; border: .6rem solid transparent; border-left-color:var(--gray900); }
.logout { text-align: center; font-size: 2.2rem; /*text-decoration: underline;*/ margin-top: 2rem; }
.logout a { display: inline-block; }
.logout span { padding: 0 2rem; }

/* gotop */
.btn-gotop {position:fixed; bottom:15rem; right:1.5rem; z-index:10; display:block; width:6.7rem; height:6.7rem; border-radius:50%;  background: url('../img/common/btn_gotop.png') no-repeat center center; background-size:contain; background-color:var(--white); border:1px solid var(--black);}