@import url(https://d1x9f5mf11b8gz.cloudfront.net/css/nanumsquare/nanumsquare.css);
@charset "UTF-8";
body {
    -webkit-appearance: none;
}

.img {
    object-fit: cover;
}

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

.main-home-category-list-top-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: space-between;
    text-align: center;
    padding: 30px 22px 40px 22px;
    gap: 18px;
}


.main-home-category-list-top-grid li {
    width: 100%;
    box-sizing: border-box;
    height: 100%;
    padding: 0 2px;
}

.main-home-category-list-top-grid .img {
    object-fit: contain;
    width: 70%;
    height: 70%;
}

.top-main-home-category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.main-home-category-img-wrapper {
    width: 100%; /* 이미지 너비를 상위 요소에 맞춤 */
    height: auto; /* 높이는 원본 비율을 유지 */
}


.main-category-img {
    object-fit: contain; /* 이미지가 틀에 맞게 조정되도록 설정 */
}

.main-home-category-list-bottom-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    justify-content: space-between;
    text-align: center;
    grid-gap: 9px;
    padding: 0 15px 40px 15px;
}

.main-home-category-list-bottom-grid li {
    width: 100%;
    height: 100%;
}

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

.bottom-main-home-category-img-wrapper {
    position: relative;
}

.bottom-main-home-category-img-wrapper .bottom-text-area {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    background-color: transparent; /* 배경색 제거 */
    color: #000; /* 텍스트 색상 변경 */
}
.bottom-text-area span {
    padding-left: 10px;
}

.main-category-down-img {
    width: 100%; /* 이미지의 너비를 상위 요소의 너비에 맞게 설정 */
    height: auto; /* 이미지의 높이를 자동으로 조정하여 비율을 유지 */
    object-fit: contain; /* 이미지가 틀에 맞게 조정되도록 설정 */
}
.main-home-category-text-area {
    margin-top: 8px;
    color: #252525;
    font-size: 13px;
    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;
    padding: 15px 15px 10px 15px;
}

.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: 20px 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;
    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(/m/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;
    margin-top: 8px;
}

.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;
    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://www.sssd.co.kr/m/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(/m/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(/m/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{
    display: inline-flex;
    padding: 40px 15px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    background: #f0f0f0;
    margin-top: 50px;
}

.main-footer .contents {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.main-footer .company-title-box {
    display: flex;
    align-items: center;
    gap: 9px;
}

.main-footer .company-title-box span{
    color:  #555555;
    font-feature-settings: 'liga' off, 'clig' off;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 14px */
}

.main-footer .basic-info-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

.main-footer .basic-text {
    color: #555555;
    font-feature-settings: 'liga' off, 'clig' off;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 12px */
}

.main-footer .basic-info-box a {
    color: #6A82EC;
    font-feature-settings: 'liga' off, 'clig' off;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 12px */
    text-decoration-line: underline;
}

.main-footer .info-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.main-footer .underline {
    text-decoration-line: underline;
}


.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(/m/statics/img/heart_outline_gray_off.png);
    z-index: 11;
    right: 11px;
    top: -6px;
}

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

#certification_modal {
    max-width: 400px;
    max-height: 450px;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none; /* Hide modal by default */
    border: none;
    box-shadow: none;
}

#certification_modal .modal-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-top: 30px; /* Add padding to avoid overlap with the close button */
    z-index: 2;
    box-shadow: none;
}

#certification_modal img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#certification_modal .close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 28px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
}

#certification_modal .close:hover,
#certification_modal .close:focus {
    color: black;
    text-decoration: none;
}

.dark-container.darken-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Darken background */
    z-index: 1000;
}

body.modal-open {
    overflow: hidden; /* Disable scrolling */
}

.main-container {
    /* display: inline-flex;
     flex-direction: column;
     align-items: flex-start;*/
}

.main-container  .main-title-area {
    display: flex;
    width: 100%;
    padding: 45px 0 0 15px;
    justify-content: flex-end;
    align-items: flex-end;
}
.main-container .main-title-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    flex: 1 0 0;
}

.main-container .button-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    flex: 1 0 0;
}


#magazine-container .magazine-content-wrapper {
    display: flex;
    padding: 15px 0 0 0;
    align-items: flex-start;
}

#magazine-container .magazine-content img {
    border-radius: 5px;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 또는 contain */
}

.magazine-content-swiper {
    width: 100%;
    height: 100%;
}

.magazine-content-wrapper {
    display: flex;
}

.magazine-content {
    width: 100%;
    height: auto;
}

#short-container .short-content-list-wrapper {
    padding: 15px 15px 0 15px;
}

#short-container .short-content {
    width: 100%;
    height: 374px;
    position: relative;
}

#short-container video {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    border-radius: 5px;
    object-fit: cover;
}

#short-container .video-inner-title-wrapper {
    display: flex;
    padding: 20px 10px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    bottom: 0;
    z-index: 2;
    width: 100%;
}
.video-inner-title-wrapper, .play-button-wrapper {
    will-change: opacity, transform; /* 레이아웃 변경 최적화 */
    transition: opacity 0.3s ease;   /* 애니메이션 적용 */
}
#short-container .video-inner-title {
    color: #FFF;
    font-feature-settings: 'liga' off, 'clig' off;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 16.8px */
    letter-spacing: -0.8px;
}

#short-container .short-content .play-button-wrapper {
    width: 30px;
    height: 33px;
    background-image: url(/m/statics/img/icon/shorts_play_btn.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 5%;
    left: 90%;
    transform: translate(-50%, -50%);
}

#curation-one-line-container {
    display: grid;
    gap: 10px;
}

#curation-one-line-container .content-area {
    display: grid;
    gap: 15px
}

#curation-one-line-container .new-upload-img{
    width: 100%;
}

#curation-one-line-container {
    overflow: hidden; /* Prevent overflow */
}

.curation-one-line-swiper {
    width: 100%;
    height: auto; /* Adjust height as needed */
}