@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);
@charset "UTF-8";
body {
    -webkit-appearance: none;
}

.img {
    object-fit: cover;
}

.main-home-categories {
    width: 100%;
}

.main-home-category-list-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(20%, 68px));
    justify-content: space-between;
    text-align: center;
    row-gap: 24px;
    padding: 30px 22px 40px 22px;
}

.main-home-category-list-grid li {
    display: flex;
    justify-content: center;
}

.main-home-category-list-grid .img {
    object-fit: contain;
    margin-bottom: 5px;
}

.main-home-category-item {
    max-width: 68px;
}

.main-category-img {
    width: 52px;
    height: 52px;
}

.main-home-category-text-area {
    margin-top: 4px;
    color: #252525;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.08px;
    line-height: 13.62px;
}

.main-banner-container {
    width: 100%;
    position: relative;
    /* 375 * 150 배너 사이즈 비율 */
    aspect-ratio: 1 / 0.4;
}

.main-stripe-banner-container {
    width: 100%;
    position: relative;
    aspect-ratio: 1 / 0.14;
    margin-top: 40px;
}

.main-stripe-banner-container .banner-item {
    width: 100%;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.more-btn {
    position: absolute;
    right: 15px;
    top: 15px;
    color: #fff;
    padding: 5.5px 12px 4px 12px;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.2);
    z-index: 11;
    display: block;
    font-size: 12px;
    cursor: pointer;
}

.horizontal-swipe-list-area {
    position: relative;
    font-weight: bold;
    margin-top: 3px;
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: hidden;
    align-content: center;
    align-items: center;
    gap: 10px;
    padding: 15px 0px 10px 0px;
}

.section-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 20.43px;
    letter-spacing: -0.08px;
}

.section-subTitle {
    display: flex;
    padding: 4px 0px;
    font-size: 14px;
    font-weight: 400;
    line-height: 15.89px;
    letter-spacing: -0.08px;
    color: #555555;
}

.horizontal-swipe-list-area li {
    position: relative;
}
/* 취미 명당 */
.hobby-place-img {
    width: 76px;
    height: 76px;
    border-radius: 100px;
    position: relative;
    filter: brightness(60%)
}

.hobby-place-location-title-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    font-size: 0.81rem;
    font-weight: 700;
    letter-spacing: -0.08px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hobby-place-location-title {
    line-height: 18px;
    font-size:small;
}

.hobby-place-location-sub {
    font-size: 10px;
    line-height: 11px;
    padding-top: 2px;
}

/* 타임 세일 */
.time-special-price-list-area {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.time-special-price-contents {
    display: flex;
    flex-direction: column;
    gap: 14px;
}


.title-wrapper {
    display: flex;
    flex-direction: column;
}

.timeSpecialPrice-wrapper {
    display: flex;
}

.timeSpecialPrice-img-wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
}

.timeSpecialPrice-img {
    width: 118px;
    height: 103px;
    border-radius: 5px;
}

.button-wrapper {
    padding: 0px 15px;
}

.section-button {
    padding: 16px 10px 16px 10px;
    border-radius: 5px;
    border: 1px solid #D7D7D7;
    background-color: white;
    line-height: 16px;
    color: #555555;
    letter-spacing: -0.08px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    margin-top: 15px;
    width: 100%;
}

.list-price {
    position: relative;
    align-items: center;
    font-size: 14px;
    display: flex;
}

.discount-rate {
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: -0.08px;
    color: #FF5862;
    margin-right: 2px;
}

.badge-only-somssidang{
    background-image: linear-gradient(253deg, #8094ff, #ff5862 75%);
    padding:5px 6px !important;
}

.badge-quick {
    background-image: url(/statics/img/badge-quick.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 55.7px !important;
    height: 20px !important;
}

.timeSpecialPrice-class-info-wrapper {
    display: flex;
    flex-direction: column;
    padding-bottom: 3px;
    padding-left: 11px;
    font-size: 12px;
    align-self: flex-start;
}

.class-info-wrapper {
    height: 73px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.badge-wrapper {
    margin-top: 8px;
}

.badge-time-sale {
    background-color: rgb(255, 240, 241);
    color: rgb(255, 88, 98);
    font-size: 10px;
    line-height: 11px;
    border-radius: 2px;
    font-weight: bold;
    margin-right: 3px;
    padding: 5px 6px;
    min-width: 10px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}

.main-badge {
    font-size: 10px;
    line-height: 11px;
    border-radius: 2px;
    font-weight: bold;
    margin-right: 3px;
    padding: 5px 6px;
    min-width: 10px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}

.price {
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: -0.08px;
    color: #252525;
}

.class-location {
    line-height: 13.62px;
    color: #A8A8A8;
    letter-spacing: -0.08px;
    font-weight: 400;
    font-size: 12px;
}

.class-title {
    height: 30px;
    line-height: 15px;
    font-size: 13px;
    letter-spacing: -0.08px;
    font-weight: 400;
    color: #252525;
}

.ex_banner_main_img {
    border-radius: 5px;
    margin: 15px 0px 6px 0px;
}

.ex_banner_class_list_warpper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: space-between;
    row-gap: 6px;
    column-gap: 6px;
}

.exhibitionBanner-wrapper {
    display: flex;
    flex-direction: column;
}

.exhibitionBanner-img {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 5px;
}

.exhibitionBanner-class-info-wrapper {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    align-self: flex-start;
    padding-top: 7px;
}

.exhibitionBanner-class-location {
    position: absolute;
    bottom: 0;
    color: white;
    font-size: 12px;
    line-height: 13.62px;
    letter-spacing: -0.08px;
    padding-bottom: 4px;
    padding-left: 2px;
    display: flex;
    align-items: center;
}

.hotplace-location_pin {
    position: absolute;
    left: calc(50% - 8px);
    width: 16px !important;
    height: 16px !important;
}

.exhibitionBanner-location_pin {
    width: 18px !important;
    height: 18px !important;
}

.exhibitionBanner-list-price {
    line-height: 16px;
    padding-top: 6px;
}

.main-ex-banner-container {
    width: 100%;
    position: relative;
    /* 375 * 150 배너 사이즈 비율 */
    aspect-ratio: 1 / 0.51;
}

.main-ex-banner-container .banner-item {
    width: 100%;
    height: 100%;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.exhibitionNormal-wrapper {
    position: relative;
    width: calc(100vw / 2.9);
    max-width: 165px;
}

.exhibitionNoraml-img {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 5px;
}

.ex_normal_class_list_warpper {
    display: flex;
    flex-direction: row !important;
    overflow: hidden;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    gap: 9px;
    width: 100%;
    max-width: 480px;
    position: relative;
    padding: 10px 0px;
}

.exhibitionNormal-class-info-wrapper {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    align-self: flex-start;
    padding-top: 7px;
}

.best-category-img-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 66px;
}

.best-category-img {
    width: 60px;
    height: 60px;
    max-width: 91.09%;
    border-radius: 100px;
    position: relative;
    object-fit: contain;
}

.best-category-title {
    font-size: 12px;
    line-height: 14px;
    letter-spacing: -0.08px;
    text-align: center;
    font-weight: 400;
    margin-bottom: -1.5px;
}

.category-class-container .best-category-title {
    font-size: 12px;
    line-height: 14px;
    letter-spacing: -0.08px;
    text-align: center;
    font-weight: 400;
    margin-top: 10px;
}

.app-main-info-container .swiper-auto-width {
    width: auto !important;
}


.menu-item {
    background: white;
    color: #555;
    padding: 9px 16px;
    font-size: 12px;
    line-height: 14px;
    font-weight: 400;
    border-radius: 100px;
    border: 1px solid #D7D7D7;
    cursor: pointer;
}

.md-choice-class-list-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: space-between;
    row-gap: 20px;
    column-gap: 9px;
    padding: 0px 15px;
}

.md-choice-class-wrapper {
    position: relative;
    width: 100%;
}

.md-choice-img {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 0.869;
    border-radius: 5px;
}

.gradient-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}
.new-upload-btn-list-wrapper {
    display: flex;
}
.new-upload-wrapper {
    text-align: left !important;
}

.new-upload-img {
    width: 100%;
    aspect-ratio: 1 / 0.92;
    border-radius: 5px;
}

.lottie-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    padding-right: 9px;
}

.timer-wrapper {
    display: flex;
    align-items: center;
}

#timer span {
    font-size: 22px;
    font-weight: 800;
    line-height: 24.97px;
    letter-spacing: -0.08px;
}

.hobby-place-container .swiper-slide img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
}

.ex-normal-wrapper {
    display: flex;
    column-gap: 9px;
    row-gap: 20px;
    overflow: hidden;
    flex-wrap: nowrap;
}

.normal-wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
}

.normal-wrapper-first {
    margin-bottom: 20px;
}

.menu-wrapper {
    margin-top: 15px;
    margin-bottom: 20px;
}

.tab-menu {
    margin-top: 15px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    overflow-x: scroll;
    position: relative;
    white-space: nowrap;
    gap: 6px;
}

.favorite-class-list-container .button-wrapper {
    padding: 0px;
}

.current-favorite-list-area {
    display: grid;
    flex-direction: column;
    row-gap: 15px;
}

.current-favorite-class-wrapper {
    display: flex;
    height: 76px;
}

.current-favorite-img {
    object-fit: cover;
    aspect-ratio: 1 / 1;
    height: 76px;
    border-radius: 6px;
}

.current-favorite-class-info-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-left: 12px;
    padding-right: 5px;
    gap: 18px;
}

.current-favorite-class-wrapper .rank {
    color : white !important;
    font-size: 12px;
    font-weight: 400;
    position: absolute;
    z-index: 1;
    background-color: #252525;
    border-radius: 3px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 13.62px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 6px;
    left: 6px;
    letter-spacing: -0.3px;
}

.current-favorite-class-heart {
    width: 20px;
    height: 18px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    background-image: url(https://bizmall.sssd.co.kr/statics/img/icon/heart-off.png);
    z-index: 11;
}

.current-favorite-class-wrapper .class-loc {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    color: #A8A8A8;
    font-size: 12px;
    line-height: 13.62px;
    letter-spacing: -0.08px;
}

.current-favorite-text-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.review-satisfied {
    padding-top: 2px;
    color: #6A82EC;
    font-weight: 700;
    font-size: 11px;
    line-height: 25px;
    letter-spacing: -0.08px;
    display: flex;
    margin-top: 7px;
}

.review-store {
    padding-top: 2px;
    font-weight: 700;
    font-size: 11px;
    line-height: 25px;
    letter-spacing: -0.08px;
    display: flex;
    margin-top: 7px;
}

.review-store .star{
    margin-top: -3px;
}

.current-favorite-text-wrapper .class-title {
    font-size: 12px;
    line-height: 15px;
    letter-spacing: -0.08px;
    padding-top: 4px;
    height: 33px;
}

.favorite-class-img {
    width: 93px;
    height: 76px
}

.top30-badge {
    width: 18px;
    height: 14px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(/statics/img/icon/top-30-host-ico.png);
    padding-right: 2px;
}

.menu-item.active {
    background-color: black;
    color: white !important;
    border: 1px solid black;
}

.current-favorite-class-info-wrapper .review-store .star span{
    background-image: url(/statics/img/icon/ic_rating_star_main.svg);
    margin-right: 3px;
}

/* interest class */
.interest-class-info-container .title-box {
    position: relative;
    color: #252525;
    font-size: 14px;
    padding: 0 15px;
    margin-top: 40px;
    width: 100%;
}
.interest-class-info-container .title-box .main-title {
    font-weight: 700;
    font-size: 18px;
}
.interest-class-info-container .interest-profile-container{
    width: 29%;
    margin-left: 0;
    margin-top: 10px;
}
.interest-class-info-container .interest-profile-container .member {
    width: 100%;
    position: relative;
    padding-bottom: 100%;
    vertical-align: middle;
}
.interest-class-info-container .interest-profile-container .member .member-profile {
    position: absolute;
    top: 0;
    left: 0;
    transition: cubic-bezier(0, 0, 0.2, 1) 200ms;
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
}
.interest-class-info-container .interest-profile-container .member .img {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    object-fit: cover;
    transition: cubic-bezier(0, 0, 0.2, 1) 200ms;
    transform-style: preserve-3d;
}
.interest-class-info-container .grid-type{
    padding: 0 10px;
    margin-top: 15px;
}
.interest-class-info-container .grid-type .thumb .hit-cnt{
    background : #252525;
    color: #fff;
}

/* 메인화면 푸터영역 */
.main-footer{
    padding-top: 50px;
}
.main-footer > div{
    width:100%;
    height:100%;
    position:relative;
}
.main-footer > div:first-child{
    background-color: #f0f0f0;
}
.main-footer .contents {
    /*max-width: 1280px;*/
    /*min-width: 768px;*/
    height: 100%;
}
.main-footer .footer-info {
    padding: 38px 20px;
    position: relative;
}
.main-footer .box {
    padding: 2px 0;
    display: flex;
}
.main-footer .box p {
    font-size: 12px;
    color: #555555;
    font-weight: bold;
}
.main-footer .box p:before {
    width: 1px;
    height: 13px;
    content: "";
    display: inline-block;
    background: #999fa7;
    margin: -2px 8px 0;
    vertical-align: middle;
}
.main-footer .box p span {
    color: #555555;
    font-weight: normal;
}
.main-footer .box p a {
    color: #9ea4ac;
    text-decoration: underline;
}
.main-footer .box p:nth-of-type(1):before {
    display: none;
}
.main-footer a, .main-footer button, .main-footer span{
    color: #555555;
}
.main-footer a:hover{
    text-decoration: none;
}

.center-banner-container{
    margin-top:20px;
    margin-bottom:20px;
    position:relative;
}
.center-banner-container .swiper-slide .img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
}

.favorite-outline-heart {
    min-width: 20px;
    min-height: 18px;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    background-image: url(/statics/img/heart_outline_gray_off.png);
    z-index: 11;
    right: 11px;
    top: -6px;
}

.favorite-outline-heart.on{
    background-image: url(/statics/img/icon/heart-on.png);
}