:root {
    --primary-color: #573cfa;
    --sub1-color: #BFC3FF;
    --sub2-color: #CCFC06;
    --font-primary1: "NanumSquareNeoBold";
    --font-primary2: "NanumSquareNeoExtraBold";
    --font-primary3: "NanumSquareNeoHeavy";
}


/* ======== 페이지 헤더 ======== */

.main-header {position: fixed; top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; height: 55px; padding: 0 20px; background-color: transparent; z-index: 20;}
.main-header.on {background-color: #fff;}
.main-header .logo {width: 110px;}
.main-header .hd-icon ul li {width: 32px; height: 32px; padding: 0;}
.hd-icon ul {display: flex; align-items: center;}
.hd-icon ul li.alarm {background: url(../img/mo_icon.png) no-repeat center/cover; position: relative;}
/* .hd-icon ul li.alarm.on {background: url(../img/mo_icon_on.png) no-repeat center/cover;} */
.hd-icon ul li.alarm.on::after {content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background-color: #ED4264; position: absolute; top: 7px; right: 8px;}
.hd-icon ul li.cart {background: url(../img/mo_icon2.png) no-repeat center/cover; position: relative;}

.hd-icon ul li.fav {background: url(../img/mypage2.png) no-repeat center/cover; position: relative;}
.hd-icon li.cart em {position: absolute; top: 1px; right: -5px; width: 18px; height: 18px; border-radius: 50%; background-color: var(--sub2-color); display: flex; align-items: center; justify-content: center; color: var(--primary-color); font-size: 12px; padding-top: 2px; font-weight: 600;}


.menubar {display: flex;justify-content: center;align-items: center;}
.menubar>em {
    background: url(../img/all2.png) no-repeat center / cover;
    width: 21px;
    height: 12px;
}

.mp-only .gnb .mp-none {display: none;}



/* ======== 바텀네비게이션 ======== */
.bt_nav {position: fixed; width: 100%; bottom: 0; left: 0; background-color: #fff; box-shadow: 2px -3px 4px rgba(0, 0, 0, .05); display: flex; padding: 0px 16px; z-index: 10;}
.bt_nav .nav_con {width: 20%; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 13px 0;}
.bt_nav .nav_con i {width: 25px; height: 25px; display: block;}
.bt_nav .nav_con i.home {background: url(../img/nav1.png) no-repeat center/contain;}
.bt_nav .nav_con.on i.home {background: url(../img/nav1_on.png) no-repeat center/contain;}
.bt_nav .nav_con i.search {background: url(../img/nav2.png) no-repeat center/contain;}
.bt_nav .nav_con.on i.search {background: url(../img/nav2_on.png) no-repeat center/contain;}
.bt_nav .nav_con i.map {background: url(../img/nav3.png) no-repeat center/contain;}
.bt_nav .nav_con.on i.map {background: url(../img/nav3_on.png) no-repeat center/contain;}
.bt_nav .nav_con i.commu {background: url(../img/nav4.png) no-repeat center/contain;}
.bt_nav .nav_con.on i.commu {background: url(../img/nav4_on.png) no-repeat center/contain;}
.bt_nav .nav_con i.my {background: url(../img/nav5.png) no-repeat center/contain;}
.bt_nav .nav_con.on i.my {background: url(../img/nav5_on.png) no-repeat center/contain;}
.bt_nav .nav_con span {font-size: 12px; color: #777;}
.bt_nav .nav_con.on span {color: var(--primary-color);}
.bt_nav .nav_con.on {border-top: 2px solid #573CFA;}

/* .ft-nav-mb {margin-bottom:83px;} */
.ft-nav-mb {margin-bottom:76px;}


/* 헤더 변경건 미리보기 */

.logo-wver,.logo-w-icon {display:none;}
.logo-w-icon {display: none !important;} 
.logo-w .logo-wver {display:block;}
.logo-w .logo-original {display:none;}
.logo-w header {background: var(--primary-color) !important;}
.logo-w2 header {background: linear-gradient(to right, #573cfa 0%, #2fa1ff 50%, #06fc3b 100%) !important;}
.logo-w .pc-login {background:#fff;color:#333}
.logo-w .logo-original {display:none !important;}
.logo-w .logo-w-icon {display: flex !important;} 
.logo-w .logo-w-icon p {color:#fff;}




.mo-header {position: fixed !important; top: 0; left: 0; width: 100%; display: flex; align-items: center; height: 55px; position: relative; border-bottom: 1px solid #eee; padding: 0 20px; background-color: #fff !important; z-index: 102; justify-content: space-between;}
header .left {background: url(../img/back.png) no-repeat center/cover; width: 22px; height: 36px; }
.mo-header .left.no_left {display: none;}
.mo-header .hd_tit {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.mo-header .hd_tit span {font-weight: 500;}
.mo-header .hd_right.close {background: url(../img/hd_close.png) no-repeat center/cover; width: 17px; height: 17px;}
.mo-header .hd_right ul {display: flex;}
.mo-header .hd_right ul li {width: 35px; height: 35px;}
.mo-header .hd_right ul li.setting {background: url(../img/setting.png) no-repeat center/cover;}
.hd-icon {display: flex;}
.hd-icon li {width: 35px; height: 35px;}
ul li.cart {background: url(../img/mo_icon2.png) no-repeat center/cover; padding: 0;}
ul li.share {background: url(../img/share2.png) no-repeat center/cover;}
ul li.home {background: url(../img/home.png) no-repeat center/cover;}
.home-ic {background: url(../img/home.png) no-repeat center/cover; width: 35px; height: 35px;}


/* .sub-header .header-inner {justify-content: flex-start !important; gap: 30px; padding: 7px 20px !important; flex-direction: row;} */
.sub-header .de-search {display: flex; align-items: center; gap: 10px; flex-direction: row; padding: 0;}
.sub-header .bk-search, .sub-header .date-wrap {width: 350px !important;}
/* footer {display: none;} */
.play-detail-wrap .play-d-n {display: none;}

.homebtn-header {display:none;}
.hm-hd .mo-header {display: none;}
.hm-hd .homebtn-header.mo-header {display:flex;}
.sr-hd .mo-header {display: none;}
.sr-hd .sr-header {display: block;}
.sr-hd .bk-search {border-bottom: none; position: sticky !important; top: 0; left: 0; background-color: #fff; z-index: 10;}
.sr-hd .close-btn {background: url(../img/back.png) no-repeat center/cover; width: 22px; height: 36px; flex-shrink: 0;}
.sr-hd .in-search {width: 100%;}
.sr-header {display: none;}
.sr-header {position: sticky; top: 0; left: 0; background-color: #fff; z-index: 10;}

/* ======== 바텀네비게이션 ======== */
.bt_nav {position: fixed; width: 100%; bottom: 0; left: 0; background-color: #fff; box-shadow: 2px -3px 4px rgba(0, 0, 0, .05); display: flex; padding: 0px 16px; z-index: 10;}
.bt_nav .nav_con {width: 20%; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 13px 0;}
.bt_nav .nav_con i {width: 23px; height: 23px; display: block;}
.bt_nav .nav_con i.home {background: url(../img/nav1.png) no-repeat center/contain;}
.bt_nav .nav_con.on i.home {background: url(../img/nav1_on.png) no-repeat center/contain;}
.bt_nav .nav_con i.search {background: url(../img/nav2.png) no-repeat center/contain;}
.bt_nav .nav_con.on i.search {background: url(../img/nav2_on.png) no-repeat center/contain;}
.bt_nav .nav_con i.map {background: url(../img/nav3.png) no-repeat center/contain;}
.bt_nav .nav_con.on i.map {background: url(../img/nav3_on.png) no-repeat center/contain;}
.bt_nav .nav_con i.commu {background: url(../img/nav4.png) no-repeat center/contain;}
.bt_nav .nav_con.on i.commu {background: url(../img/nav4_on.png) no-repeat center/contain;}
.bt_nav .nav_con i.my {background: url(../img/nav5.png) no-repeat center/contain;}
.bt_nav .nav_con.on i.my {background: url(../img/nav5_on.png) no-repeat center/contain;}
.bt_nav .nav_con span {font-size: 12px; color: #777;}
.bt_nav .nav_con.on span {color: var(--primary-color);}

.pc-header{display: none;}
.map-header {display:none;}
.side-bar {display: none;}
.map-hd .mapheader {display:block;}
.my-header {display: flex !important;}
/* .detail-hd .mo-header {display: none;} */
.pc-map-hd .head-bt {display: none;}
.pc-map-hd .sub-header .header-inner > div {padding-left: 20px;}
.indx .header-inner > div {padding: 20px;}

.pc-login {padding: 12px 17px; border-radius: 50px; background-color: #222; color: #fff; font-size: 14px; height: fit-content;}


/* ======== 전체메뉴 ======== */
.all-nav {width: 100%; height: 100vh; position: fixed; top: 0; left: -100%; z-index: 10000; background-color: #fff; overflow-y: auto; transition: all .3s;}
.all-nav.on {left: 0;}
/* 스크롤바 안보이게 xxxxxx */
.all-nav::-webkit-scrollbar {
    display: none;
  }
.all-nav .nav-head {padding: 20px; background: var(--primary-color);}
.cls-head {display: flex; justify-content: flex-end;}
.cls-head em {background: url(../img/wh-cls.png) no-repeat center/cover; width: 35px; height: 25px;background-size:16px 16px; background-position:top right;}
.nav-log {display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px;}
.nav-log div {display: flex; align-items: center; gap: 10px; margin-top: 15px;}
.nav-log div em {width: 70px; height: 70px; border-radius: 15px; overflow: hidden;}
.nav-log div p, .nav-log div b {font-size: 20px; color: #fff;}
.nav-log div b {font-weight: 600;}
.all-nav-con {padding: 20px; display: flex; flex-direction: column; gap: 30px; background-color: #f7f7f7; padding-bottom: 80px;}
.all-nav-con p.logout {font-size: 14px; color: #777;}
.all-nav-con div {padding: 20px; border-radius: 10px; background-color: #fff;}
.all-nav-con div h3 {font-size: 18px; font-weight: 700; color: #222; margin-bottom: 15px;}
.all-nav-con div ul {display: flex; flex-wrap: wrap; row-gap: 15px;}
.all-nav-con div ul li {width: 50%; font-size: 15px; color: #444;}

.nav-log-none {padding: 20px 0 10px;}
.nav-log-none h3 {font-size: 20px; color: #fff;}
.nav-log-none button {padding: 10px; width: 100%; border-radius: 5px; background-color: #fff; color: var(--primary-color); font-weight: 600; margin-top: 25px;}
.nav-log em {background: url(../img/wh-back.png) no-repeat center/cover; width: 22px; height: 36px;}











/* -------- 320px -------- */
@media screen and (min-width: 320px) {
    .bt_nav {padding: 0 20px;}
    .bt_nav .nav_con span {font-size: 13px;}
    .bt_nav .nav_con span {text-align: center;}
}



/* -------- 860x -------- */
@media screen and (min-width: 860px) {
 
    body {overflow-y:scroll;}
    .magazine-wrap {min-height:600px;}
    
.ft-nav-mb {margin-bottom:0px;}
.hm-hd .homebtn-header.mo-header {display:none;}
    .bt_nav {display:none;}
    .mo-header {display: none;}
    .my-header {display: none !important;}
    .main-header {display: none;}
    .hd-bt .pc-header {border-bottom: none;}
    .pc-header {display: block; position: fixed; top: 0; left: 0;  width: 100%;  z-index: 102; background-color: #fff !important; border-bottom: 1px solid #eee; box-shadow: 0 2px 8px rgba(177, 177, 177, .05);}
    /* .pc-header .header-inner {display: flex;align-items: center; justify-content: space-between; padding: 20px;} */
    /* .pc-header.on {background-color: #fff; border-bottom: 1px solid #eee; } */
    .pc-map-hd .pc-header {height:95px;}
    .pc-header .logo {width: 141px;}
    .pc-header .gnb ul {display: flex; gap: 20px; align-items: center;}
    .pc-header .gnb ul li {display: flex; flex-direction: column; align-items: center; cursor: pointer;}
    .pc-header .gnb ul em {width: 35px; height: 35px;}
    .pc-header .gnb ul li p {font-size: 14px;}

    
    .header-inner {display: flex; flex-direction: column; }
    .indx .header2 .header-inner {min-height:94px;justify-content: center;}
    .header-inner > div {width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 20px;}
    .sub-header .header-inner > div {justify-content: flex-start; gap: 30px; padding: 0; padding-left: 20px;}
    .head-bt {border-bottom: 1px solid #eee;}
    .head-bt ul {width: 100%; margin: 0 auto; display: flex; align-items: center; gap: 20px; padding: 0 20px;}
    .head-bt ul li {padding: 13px 0; color: #777; cursor: pointer;}
    .head-bt ul li.on {border-bottom: 2px solid #573CFA; color: #573CFA; font-weight: 600;}
    .indx .head-bt {display: none;}
    .banner3 {display: none;}
    .side-bar {display: block; 
        /* width: 25%;  */
        width:300px;
        border-radius: 6px; padding: 20px; background-color: #fff; border: 1px solid #eee;}
    .side-bar ul {display: flex; flex-direction: column;}
    .side-bar ul li {display: flex; align-items: center; justify-content: space-between; font-size: 16px; padding: 15px 5px; border-bottom: 1px solid #f1f1f1; font-weight: 500; cursor: pointer;}
    .side-bar ul li:last-child {border-bottom: none;}

    .pc-map-hd .header-inner {width: 100% !important;}
    footer {display: block;}

    .sr-hd .sr-header {display: none;}
    .indx .sub-header, .bgc .sub-header, .hd-style2 .sub-header {display: none;}
    .detail-hd .header2 {display: none;}
    .sb-hd .header2, .pc-map-hd .header2 {display: none;}
    
    .header-all .hd-reserve {width:100%;}
    .header-all .header-inner {position:relative;}
    .header-all .gnb {position:absolute;bottom:0;right:0;z-index: 999;transform: translateY(41%);}

    .pc-map-hd .sub-header .header-inner > div {padding-top:18px;}
    .pc-map-hd .header-all .gnb {
        transform: translateY(0);
        margin-right: 20px;
    }

}

/* -------- 1280px -------- */
@media screen and (min-width: 1280px) {
    .pc-header .header-inner {width: 1280px; margin: 0 auto;}
    .head-bt ul {width: 1280px; gap: 25px; padding: 0;}
    .sub-header .header-inner > div {padding-left: 0;}
    .header-inner > div {padding: 20px 0 10px 0;}

    .indx .header-inner > div {padding: 20px 0;}


}



@media screen and (max-width: 1200px) {
    .header-all .gnb {display:none;}
    
}