@charset "utf-8";

/* **************************************** *
* 공통 레이아웃
* **************************************** */

/* 페이지 헤더 */
.content-header{position: fixed;top:0;left:0;width:100%;font-size:17rem;text-align:center; background: #fff;z-index: 1000;}
.content-header h2{width: 100%; padding: 0 16rem; display:flex; justify-content: center; align-items:center;height:55rem;font-weight:700;font-size: 18rem;color:var(--b-01);}
.header-bar{display:flex; position:absolute; bottom:0; left:0; width:100%; height:3rem; background:#f3f3f3;}
.header-bar > i{width:100%; height:100%;}
.header-bar > i.on{background:var(--c-01);}
.btn-prev{display:block; position:absolute; left:0rem; width:50rem; height:100%; background:url(../img/common/arrow-prev.svg) no-repeat 16rem 50%; background-size:10rem;}
.btn-close{position:absolute; top:0; right:0; width:54rem; height:100%; background:url(../img/common/ic-cancle-pop.svg) no-repeat 50% 50%;}
.btn-right{display:flex; align-items:center; position:absolute; top:0rem; right:16rem; height:100%; font-size:14rem; color:#888;}
.btn-right.on{color:var(--c-02);}
.btn-right.logout_btn{padding: 6rem 8rem; height: max-content; background-color: #f8f8f8; border-radius: 2rem; color: #666; transform: translateY(50%); font-size: 12rem; }


.sub-content-header h2 {justify-content: flex-start;}

/* 로고 헤더 */
.content-header.main-header{ transition: all .2s;}
.content-header.main-header .logo{position: absolute; left: 16rem; top: 50%; transform: translateY(-50%);}
.content-header.main-header .alarm_icon{position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 50rem; height: 100%;}
.content-header.main-header .alarm_icon img{}

.content-header.main-header.active{background-color: transparent;}
.content-header.main-header.active .logo img{content: url(../img/common/logo_w.svg);}
.content-header.main-header.active .alarm_icon img{content: url(../img/common/bell_w.svg);}




/* 푸터 */
#footer{padding:32rem 0rem; padding-bottom:70rem; color: var(--g-01); background: #f8f8f8;}
#footer .content-wrap {padding-bottom: 45rem;}
#footer strong {font-size: 17rem; font-weight: 600;}
#footer address {margin-top:10rem; font-size: 13rem; font-weight: 400; color: var(--g-02);}
#footer address span {display: inline-block; line-height: 1.6;}
#footer address span:first-child {position: relative; padding-right: 10rem; margin-right: 5rem;}
#footer address span.tel-span {position: relative; padding-right: 10rem; margin-right: 5rem;}
#footer address span.tel-span::after {content: ''; position: absolute; display: block; width: 1px; height: 10px; background-color: var(--g-02); right: 0; top: 50%; transform: translate(-50%, -50%); position: .5;}


/* 하단 네비게이션 */
#content-nav{position:fixed; bottom:0; left:0; z-index:90; width:100%; box-shadow: 0px -12px 30px -16px #ddd; }

.content-nav__list{display: flex;;background:#fff;text-align:center;}
.content-nav__list > li{width: 33.33%; padding: 12rem 0 14rem;font-weight:500;font-size:13rem;color:var(--b-01);flex: auto; line-height: 1;}
.content-nav__list > li::before{content:""; display:block; width:100%; margin-bottom:5rem; background-position:50% 50%; min-height:28rem; background-repeat:no-repeat; min-width:23rem; background-size: contain;}

/* .content-nav__list > li.content-nav__item--01::before {min-height: 22rem;} */
.content-nav__item--01::before{background-image:url(../img/common/ic-tab01.svg);}
.content-nav__item--02::before{background-image:url(../img/common/ic-tab02.svg);}
.content-nav__item--03 {margin-top: auto; display: block; position: relative; }
.content-nav__item--03::before{width: 100%; height: 100%; min-height: 60rem !important; min-width: 60rem !important; background-image:url(../img/common/ic-tab03.svg); background-size: 60rem !important; position: absolute; top: -48rem; margin-bottom: 0; }
.content-nav__item--04::before{background-image:url(../img/common/ic-tab04.svg);}
.content-nav__item--05::before{background-image:url(../img/common/ic-tab05.svg);}


/* 하단 네비 온처리 */
body:has(.main) .content-nav__item--01,
body:has(.shop) .content-nav__item--02,
body:has(.mypage) .content-nav__item--04{color:var(--b-01); font-weight: 600;}

body:has(.custom) .content-nav__item--03{font-weight: 600; color: var(--c-01);}

body:has(.main) .content-nav__item--01::before{background-image:url(../img/common/ic-tab01_on.svg);}
body:has(.shop) .content-nav__item--02::before{background-image:url(../img/common/ic-tab02_on.svg);}

body:has(.mypage) .content-nav__item--04::before{height:22rem; background-image:url(../img/common/ic-tab04_on.svg);}

/* .tab_navigation {padding: 8rem 20rem;} */
.tab_navigation > ul {display: flex; overflow-x: scroll; border-bottom: 1px solid #e1e1e1;}
.tab_navigation > ul > li {width: calc(100% / 4); padding: 8rem 12rem; color: var(--g-02); white-space: nowrap;}
.tab_navigation > ul > li.on {border-bottom: 2px solid var(--o-01); color: var(--c-01); font-weight: 700;}

/* 리스트 제목 박스 */

.main-list-tit-wrap {display: flex; flex-direction: column; gap: 3rem;}
.main-list-tit-box {display: flex; justify-content: space-between; align-items: center;}
.main-list-tit-wrap > p {display: block; color: #aaa;} 
.main-list-tit-box > small {display: flex; align-items: center; gap: 5rem; font-size: 13rem; font-weight: 600; color: #555;}