@charset "utf-8";
body > .container {
    overflow: hidden;
    height: auto;
}

/* body::before {
    content: "\26A0  더 나은 서비스를 위해 사이트를 준비하고 있어요";
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    font-weight: 400;
    color: #868e96;
    white-space: nowrap;
    letter-spacing: -1px;
} */

.header-wrap .page-title {
    font-size: 14px;
    letter-spacing: -1px;
}

body > .container > .contents {
    overflow: initial;
    position: unset;
}

.nav-wrap .link-gnb-home {
    width: 124px;
    left: 0;
    top: 0;
    height: 56px;
    transform: none;
    background-image: url(/images/mv/plan/logo_header_kyobo.png);
    background-position: 50% 50%;
    background-size: auto 22px;
    background-repeat: no-repeat;
}

.nav-wrap .link-gnb-home::after {
    display: none;
}

.nav {
    padding-top: 200px;
    padding-bottom: 0;
}

.nav.active {
    z-index: 999;
    /* background-image: linear-gradient(to top right, #b85bff 0%, #81c3fa 78% ,#33ebb5 100%); */
    /* background-image: linear-gradient(180deg, #fff 0%, rgba(229, 242, 255, .4)); */
}

.header .header-wrap .util-wrap {
    z-index: 1000;
}

.badge-new {
    border-radius: 4px;
    color: #e64c2e;
    border: 1px solid #e64c2e;
    vertical-align: middle;
    padding: 1px 4px;
    font-size: 8px;
    margin-left: 4px;
    font-weight: 400;
}

.badge-hit {
    border-radius: 4px;
    color: #2066d4;
    border: 1px solid #2066d4;
    vertical-align: middle;
    padding: 1px 4px;
    font-size: 8px;
    margin-left: 4px;
    font-weight: 400;
}


.top-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: -200px;
    padding-top: 56px;
}

.nav-menu {
    /* position: absolute;
    top: -122px;
    bottom: 100%;
    left: 0;
    right: 0; */
    background-color: transparent;
}

.nav-wrap {
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    /* background-color: #f3f7fb; */
    box-shadow: -4px -4px 16px 4px rgb(93, 93, 93, .1);
}

.nav-wrap .subcopy {
    color: #121212;
}

.nav-list .list-item {
    border-bottom: #cbcbcb;
}

.gnb-contents,
.bottom-nav {
    position: relative;
    height: 100%;
}

.header .header-wrap .button-gnb.active .bar {
    /* background-color: #fff !important; */
    box-shadow: 0 2px 12px 1px rgb(93,93,93,.3);
    /* border: 3px solid red; */
}

.nav-list {
    overflow: hidden;
    overflow-y: scroll;
    position: absolute;
    padding: 0 16px;
    padding-bottom: 40px;
}

.nav-list .list-item strong {
    font-weight: 400;
    font-size: 16px;
}

.nav-list .list-item > a {
    line-height: 40px;
    padding: 8px 8px 0 8px;   
}

.nav-list .depth-list .depth-item > a {
    font-size: 14px;
    font-weight: 400;
    line-height: 40px;
    color: #121212;
}

.nav-list .list-item.active .depth-list {
    padding-left: 16px;
}

.nav-list .depth-list .depth-item > a {
    position: relative;
}

.nav-list .depth-list .depth-item > a::before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    left: 4px;
    bottom: 50%;
    border-left: 1px solid #121212;
    border-bottom: 1px solid #121212;
    transform: translateY(50%);
}

.nav-menu.tab-category > a,
.nav-menu.tab-category {
    height: auto;
    background-color: transparent;
    color: #121212;
    text-align: center;
    font-weight: 400;
}

.nav-menu.tab-category {
    display: flex;
    align-items: center;
    justify-content: center;
}


.nav-menu.tab-category .button-item.button-s.on {
    color: #121212;
    background-color: transparent;
}

.nav-menu.tab-category .button-item.button-s {
    flex: 4;
    height: auto;
    font-size: 0;
    background-color: transparent;
}

.nav-menu.tab-category .tab-icon {
    display: block;
    width: 52px;
    height: 52px;
    margin: 0 auto;
    border-radius: 52px; 
    transition: transform 0.3s ease-in-out;
    background-position: 50% 50%;
    background-size: 32px auto;
    background-repeat: no-repeat;
}

.nav-menu.tab-category .item.on .tab-icon {
    /* background-color: rgb(230, 241, 255, .5); */
    /* box-shadow: 0 2px 12px 1px rgb(93 93 93 / 10%); */
}

.nav-menu.tab-category .tab-icon.icon-1 {
    background-image: url(/images/mv/plan/icon_bg41.png);
}

.nav-menu.tab-category .tab-icon.icon-2 {
    background-image: url(/images/mv/plan/icon_bg31.png);
}

.nav-menu.tab-category .tab-icon.icon-3 {
    background-image: url(/images/mv/plan/icon_bg37.png);
}

.nav-menu.tab-category .tab-icon.icon-4 {
    background-image: url(/images/mv/plan/icon_bg34.png);
}

.nav-menu .button-item > .label-txt {
    margin-left: 0;
    vertical-align: top;
}


/* .nav.layer-bg0 {
    background-image: linear-gradient(to top right, #b85bff 0%, #81c3fa 78% ,#33ebb5 100%);
}

.nav.layer-bg1 {
    background-image: linear-gradient(to top right, #37b381 0%, #327386 78% ,#36799e 100%);
}

.nav.layer-bg2 {
    background-image: linear-gradient(to top right, #ff5ba1 0%, #9953a4 78% ,#7c24aa 100%);
}

.nav.layer-bg3 {
    background-image: linear-gradient(to top right, #600fad 0%, #9c27b0 78% ,#b02787 100%);
} */



/* 공유하기, 카카오톡, url start */

.share-list {
    display: flex;
    justify-content: center;
}

.share-list .item {
    margin: 0 24px;
}

.share-list .item > button {
    position: relative;
    width: 48px;
    height: 72px;
    text-align: center;
    border: 0;
    background-color: transparent;
}

.share-list .item > button > span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    font-weight: 500;
    white-space: nowrap;
    color: #121212;
}

.share-list .icon-kakao > button::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 48px;
    height: 48px;
    background-image: url(/images/mv/kakao/icon-share-kakao.png);
    background-position: 50% 50%;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    border-radius: 48px;
    background-color: #fee500;
}

.share-list .icon-url > button::before {
    content: "URL";
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 48px;
    font-weight: 700;
    color: #fff;
    background-color: #d8d8d8;
}
/* 공유하기, 카카오톡 end */