@keyframes scaleUp {
    0% {
        transform: scale(1);
        opacity: 1
    }

    50% {
        transform: scale(2);
        opacity: 0
    }

    100% {
        transform: scale(2);
        opacity: 0
    }
}

html {
    font-size: 4.2vw
}

.main {
    overflow: visible;
    padding: 0
}

.background {
    background-image: url("https://marlmarl-cdn.azureedge.net/pub/assets/img/feature/sg2026/bk_sp.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: -1
}

@supports (background-image: url("https://marlmarl-cdn.azureedge.net/pub/assets/img/feature/sg2026/bk_sp.webp")) {
    .background {
        background-image:url("https://marlmarl-cdn.azureedge.net/pub/assets/img/feature/sg2026/bk_sp.webp")
    }
}

.container {
    padding-bottom: 4.37rem
}

.h01 {
    color: #454B4D;
    text-align: center;
    font-style: normal;
    line-height: 150%
}

.h01 h2 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.0625rem;
    padding-top: 2.4rem;
    background: url("https://marlmarl-cdn.azureedge.net/pub/assets/img/feature/sg2026/htl_str_1.gif") no-repeat center top;
    background-size: 1.875rem
}

.h01 h3 {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.0625rem;
    padding-top: 2.4rem;
    background: url("https://marlmarl-cdn.azureedge.net/pub/assets/img/feature/sg2026/htl_str_2.gif") no-repeat center top;
    background-size: 1.875rem
}

.h01 h4 {
    width: 11rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.0625rem;
    padding-top: 2.4rem;
    background: url("https://marlmarl-cdn.azureedge.net/pub/assets/img/feature/sg2026/htl_str_2.gif") no-repeat center top;
    background-size: 1.875rem;
    margin: 0 auto
}

.h01 h5 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.0625rem;
    padding-top: 2.4rem;
    background: url("https://marlmarl-cdn.azureedge.net/pub/assets/img/feature/sg2026/htl_str_3.gif") no-repeat center top;
    background-size: 1.875rem;
    margin: 0 auto
}

.h01 p {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: 0.04063rem;
    margin-top: 0.38rem
}

.circle {
    width: 8px;
    height: 8px;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(-1rem, -50%)
}

.circle span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 100%
}

.circle.cw span {
    background: #FFF
}

.circle.cr span {
    background: #C49495
}

.circle.cb span {
    background: #454B4D
}

.circle span:nth-child(1) {
    position: relative;
    z-index: 2
}

.circle span:nth-child(2) {
    position: absolute;
    top: 0;
    z-index: 0;
    animation: scaleUp 2s ease-in-out infinite
}

.kv {
    position: relative;
    margin-bottom: 4.29rem
}

.kv_main {
    position: relative;
    top: 0
}

.kv .kv_txt {
    height: auto;
    position: absolute;
    top: 0;
    z-index: 1;
    opacity: 0;
    visibility: hidden
}

.kv .kv_txt.loaded {
    opacity: 1;
    visibility: visible;
    transition: all 1s ease
}

.cp {
    position: absolute;
    bottom: 0.3rem;
    left: 50%;
    transform: translate(-50%);
    width: 100%;
    height: 1.125rem
}

.cp .fcp {
    position: absolute;
    left: 0.63rem;
    width: 3.125rem
}

.cp .dcp {
    position: absolute;
    right: 0.63rem;
    width: 3.125rem
}

.shopinfo {
    color: #454B4D;
    text-align: center;
    margin-top: -0.6rem;
    margin-bottom: 1.25rem;
    background: url("https://marlmarl-cdn.azureedge.net/pub/assets/img/feature/sg2026/htl_str_1.gif") no-repeat center bottom;
    background-size: 1.875rem;
    padding-bottom: 4.815rem
}

.shopinfo dt {
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 200%;
    letter-spacing: 0.05rem
}

.shopinfo dt span {
    font-size: 0.75rem;
    letter-spacing: 0.0375rem
}

.shopinfo dd {
    font-family: "Libre Baskerville";
    font-size: 1.20406rem;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.06019rem;
    margin-top: 1.25rem
}

.shopinfo dd span {
    font-size: 0.75256rem;
    letter-spacing: 0.03763rem;
    margin-left: 0.21rem
}

.greet {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    padding-bottom: 1.4rem;
    margin-bottom: 2.1rem
}

.greet .greet_txt {
    color: #454B4D;
    text-align: center;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 250%;
    letter-spacing: 0.04375rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem
}

.greet .greet_txt p {
    padding: 0
}

.greet .photo img {
    display: block;
    margin: 0 auto
}

.lineup {
    padding: 0
}

.lineup .lineup-wrap {
    margin: 1.9rem auto 0;
    width: 90%;
    border-top: 1px solid #C9C9C9
}

.lineup .lineup-wrap li {
    border-bottom: 1px solid #C9C9C9;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.25rem 1.2rem;
    gap: 1.9rem;
    background: url("https://marlmarl-cdn.azureedge.net/pub/assets/img/feature/sg2026/bt_ps.svg") no-repeat right 0.62rem center;
    background-size: 0.75rem
}

.lineup .lineupTxt {
    width: 6.875rem
}

.lineup .lineupTxt dt {
    color: #454B4D;
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.04688rem
}

.lineup .lineupTxt dd {
    color: #454B4D;
    font-size: 0.6875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    margin-top: 0.19rem
}

.lineup .lineupImg {
    width: 9.1rem
}

.movie {
    margin: 4.8rem 0
}

.movie video {
    margin: 0 auto;
    width: 64.8%
}

.sns {
    padding: 2.09rem 0 3.09rem;
    position: relative;
    background: url("https://marlmarl-cdn.azureedge.net/pub/assets/img/feature/sg2026/sns_bk_sp.jpg") no-repeat center top;
    background-size: cover
}

.sns .sns-txt {
    color: #F4F2E6;
    text-align: center;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: 175%;
    letter-spacing: 0.04375rem;
    margin-top: 1.25rem
}

.sns .sns-links {
    margin-top: 7.64rem;
    display: flex;
    justify-content: center;
    gap: 0.7rem
}

.sns .sns-links li {
    width: 8.35rem
}

.gallery {
    margin-top: 4.8rem
}

.gallery img {
    width: 100%
}

.about {
    text-align: center;
    padding: 2.2rem 0 3.6rem;
    background: #E7E7E7;
    overflow: hidden
}

.about .h01 p {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 200%;
    letter-spacing: 0.04688rem;
    margin-top: 0.74rem
}

.about .about-txt {
    color: #454B4D;
    text-align: center;
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 500;
    line-height: 207%;
    letter-spacing: 0.065rem;
    margin-top: 1.37rem
}

.about .about-inner {
    display: block;
    width: 18.125rem;
    margin: 3.31rem auto 4.17rem;
    position: relative
}

.about .about-wrap {
    max-width: none;
    display: flex;
    flex-wrap: wrap
}

.about .about-wrap li {
    width: 18.125rem;
    color: #454B4D;
    text-align: center;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    padding: 1.29rem 0;
    position: relative;
    background: #fff
}

.about .about-wrap li dl {
    margin-bottom: 0.84rem
}

.about .about-wrap li dt {
    font-size: 1rem;
    letter-spacing: 0.05rem;
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 0.53rem
}

.about .about-wrap li dt:after {
    content: "";
    width: 2.5rem;
    height: 0.5px;
    background: #313131;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%)
}

.about .about-wrap li dd {
    font-size: 0.75rem;
    letter-spacing: 0.06rem
}

.about .about-wrap li img {
    width: 14.875rem;
    margin: 0 auto;
    display: block
}

.about .about-wrap li p {
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 0.85rem;
    line-height: 150%
}

.about .about-bar {
    margin-top: 5.3vw;
    height: 2px;
    width: 100%;
    background: #d3d3d3
}

.about .about-bar .about-bar-focus {
    display: block;
    height: 100%;
    width: 100px;
    background: #363636;
    position: relative
}

.about .about-wrap.move,.about .about-bar .about-bar-focus.move {
    transition: all 0.6s ease-in-out
}

.about .about-links {
    color: #F4F2E6;
    text-align: center;
    font-family: Futura;
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 500;
    line-height: 125%;
    letter-spacing: 0.04063rem;
    width: 74.4%;
    display: block;
    margin: 0 auto;
    padding: 1rem 0;
    background: #454B4D;
    position: relative
}

.lists {
    padding: 3.4rem 0;
    position: relative
}

.lists .list-inner {
    margin-top: 3.65rem;
    display: flex;
    flex-direction: column;
    gap: 4.4rem
}

.lists .list-wrap {
    padding: 0
}

.lists .list-wrap dl {
    text-align: center
}

.lists .list-wrap dt {
    font-size: 1.0625rem;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.05313rem
}

.lists .list-wrap dd {
    font-size: 0.6875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 150%
}

.lists .list-wrap ul {
    margin: 1.87rem auto 0;
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1.15rem 0.4rem
}

.lists .list-wrap li {
    width: 6.875rem
}

.lists .list-wrap img {
    padding: 0
}

.lists .list-wrap p {
    color: #454B4D;
    font-family: "Libre Baskerville";
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-top: 0.26rem
}

.modaal {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100dvh;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    pointer-events: none
}

.modaal .modaal_inner {
    width: 89%;
    max-width: 480px;
    height: 95%;
    overflow: hidden;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1
}

.modaal .modaal_container {
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    background: #fff
}

.modaal .modaal_container::-webkit-scrollbar {
    display: none
}

.modaal .modaal_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 0
}

.modaal .modaal_close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1
}

.modaal .modaal_wrap {
    background-image: url("https://marlmarl-cdn.azureedge.net/pub/assets/img/feature/sg2026/bk_sp.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover
}

@supports (background-image: url("https://marlmarl-cdn.azureedge.net/pub/assets/img/feature/sg2026/bk_sp.webp")) {
    .modaal .modaal_wrap {
        background-image:url("https://marlmarl-cdn.azureedge.net/pub/assets/img/feature/sg2026/bk_sp.webp")
    }
}

.modaal .modaal_contents {
    position: absolute;
    top: 0;
    padding-bottom: 2.4rem;
    width: 100%
}

.modaal .modaal_contents.active {
    position: relative
}

.modaal .modaal_contents .slide {
    margin-bottom: 1.25rem;
    width: 100%;
    position: relative
}

.modaal .modaal_contents .slide_wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 35 / 24;
}

.modaal .modaal_contents .slide_item {
    position: absolute;
    top: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 2s ease
}

.modaal .modaal_contents .slide_item.active {
    opacity: 1;
    visibility: visible
}

.modaal .modaal_contents .slide_dot {
    position: absolute;
    bottom: 0.63rem;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 0.37rem
}

.modaal .modaal_contents .slide_dot span {
    width: 0.3125rem;
    height: 0.3125rem;
    display: block;
    border-radius: 100%;
    border: 0.5px solid #D9D9D9;
    transition: all 1.6s ease
}

.modaal .modaal_contents .slide_dot span.active {
    background-color: #D9D9D9
}

.modaal .modaal_contents .info {
    width: 19.375rem;
    margin: 0 auto;
    color: #454B4D;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.modaal .modaal_contents .info .info_txt {
    padding: 0
}

.modaal .modaal_contents .info .info_txt dt {
    font-size: 1.0625rem;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.05313rem
}

.modaal .modaal_contents .info .info_txt dd {
    font-size: 0.6875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    margin-top: 0.25rem
}

.modaal .modaal_contents .info .info_price {
    padding: 0
}

.modaal .modaal_contents .info .info_price dt {
    text-align: right;
    font-family: "Futura PT";
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 450;
    line-height: 150%
}

.modaal .modaal_contents .info .info_price dd {
    text-align: right;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-top: 0.44rem
}

.modaal .modaal_contents .color {
    width: 19.375rem;
    margin: 1.78rem auto 2.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.modaal .modaal_contents .color_item {
    width: 9.375rem;
    position: relative
}

.modaal .modaal_contents .color_item .comingsoon {
    width: 9.375rem;
    height: 9.375rem;
    position: absolute;
    top: 0;
    z-index: 3;
    background: rgba(49, 49, 49, 0.70);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    font-family: "Libre Baskerville";
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 1.21875rem */
    letter-spacing: 0.04063rem;
}

.modaal .modaal_contents .color_item .comingsoon ~ a {
    pointer-events: none;
}

.modaal .modaal_contents .color_item .comingsoon p {
    height: 9.375rem;
    background: rgba(49,49,49,0.7);
    color: #fff;
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.04063rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.modaal .modaal_contents .color_img {
    padding: 0;
    position: relative
}

.modaal .modaal_contents .color_img .circle {
    top: auto;
    transform: none;
    bottom: 0.5rem;
    right: 0.5rem
}

.modaal .modaal_contents .color_name {
    color: #454B4D;
    text-align: center;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.0375rem;
    margin-top: 0.62rem
}

.modaal .modaal_contents .txt {
    color: #010302;
    text-align: center;
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 500;
    line-height: 150%
}

.modaal .modaal_contents .detail {
    margin-top: 2.6rem;
    border-top: 1px solid #C9C9C9;
    padding-top: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-bottom: 3.9rem
}

.modaal .modaal_contents .detail_h {
    color: #454B4D;
    text-align: center;
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.065rem;
    margin-bottom: 0.75rem
}

.modaal .modaal_contents .detail_img {
    width: 18.75rem;
    margin: 0 auto;
    display: block;
    margin-bottom: 0.94rem
}

.modaal .modaal_contents .detail_wrap .txt {
    color: #010302;
    text-align: center;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 500;
    line-height: 150%
}

.modaalOpen .modaal {
    opacity: 1;
    visibility: visible;
    transition: all 1s ease;
    pointer-events: unset
}

@media screen and (min-width: 767px) {
    html {
        font-size:min(1.35vw, 16px)
    }

    a:hover {
        opacity: 0.6
    }

    .sp {
        display: none
    }

    .background {
        background-image: url("https://marlmarl-cdn.azureedge.net/pub/assets/img/feature/sg2026/bk_pc.jpg")
    }

    @supports (background-image: url("https://marlmarl-cdn.azureedge.net/pub/assets/img/feature/sg2026/bk_pc.webp")) {
        .background {
            background-image:url("https://marlmarl-cdn.azureedge.net/pub/assets/img/feature/sg2026/bk_pc.webp")
        }
    }

    .container {
        padding-bottom: 4.37rem;
        max-width: none;
        width: auto
    }

    .h01 {
        padding: 0
    }

    .h01 h2 {
        font-size: 1.5rem;
        letter-spacing: 0.075rem;
        padding-top: 2.7rem;
        background-size: 2.30769rem
    }

    .h01 h3 {
        padding-top: 2.9rem
    }

    .h01 h4 {
        width: auto;
        font-size: 1.5rem;
        letter-spacing: 0.075rem;
        padding-top: 2.7rem
    }

    .h01 h5 {
        color: #454B4D;
        text-align: center;
        font-family: "Libre Baskerville";
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        letter-spacing: 0.075rem;
        padding-top: 2.7rem
    }

    .h01 p {
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 150%;
        letter-spacing: 0.04375rem;
        margin-top: 0.7rem
    }

    .circle {
        width: 0.51431rem;
        height: 0.51431rem
    }

    .kv {
        margin-bottom: 3.19rem;
        height: calc( 100vh - 64px);
        display: flex;
        justify-content: center;
        align-items: center
    }

    .kv .kv_wrap {
        width: 62.5rem;
        height: 41.5rem;
        position: relative
    }

    .kv_main {
        position: absolute;
        top: 0
    }

    .kv .kv_txt {
        height: auto;
        position: absolute;
        top: 0;
        z-index: 1;
        transition: all 1s ease
    }

    .kv .kv_txt.loaded {
        opacity: 1;
        visibility: visible
    }

    .cp {
        position: absolute;
        bottom: 1.1rem;
        left: 50%;
        transform: translate(-50%);
        width: 100%;
        height: 1.125rem
    }

    .cp .fcp {
        position: absolute;
        left: 0.63rem;
        width: 3.125rem
    }

    .cp .dcp {
        position: absolute;
        right: 1.53rem;
        width: 4.625rem
    }

    .shopinfo {
        margin-top: -0.6rem;
        margin-bottom: 1.87rem;
        padding-bottom: 6.415rem
    }

    .shopinfo dd {
        font-size: 1.41431rem;
        letter-spacing: 0.07069rem
    }

    .shopinfo dd span {
        font-size: 0.88394rem;
        letter-spacing: 0.04419rem
    }

    .shopinfo p {
        font-size: 1.0625rem;
        letter-spacing: 0.05313rem
    }

    .greet {
        flex-direction: unset;
        justify-content: center;
        align-items: center;
        gap: 5.3rem;
        padding-bottom: 2.2rem;
        margin-bottom: 4.5rem
    }

    .greet .greet_txt {
        text-align: left;
        font-size: 0.9375rem;
        letter-spacing: 0.04688rem;
        gap: 1.4rem
    }

    .greet .greet_txt p {
        padding: 0
    }

    .greet .photo {
        position: relative;
        right: -1.8rem;
        width: 24.375rem
    }

    .lineup {
        padding: 0
    }

    .lineup .lineup-wrap {
        width: 58.75rem;
        margin-top: 5rem;
        border-top: none;
        display: flex;
        flex-wrap: wrap;
        gap: 0 1.8rem
    }

    .lineup .lineup-wrap li {
        width: 48.46%;
        padding: 0.6rem 1.9rem 0.75rem;
        gap: 6.3rem;
        background-size: 0.8125rem;
        background-position: right 1.88rem center;
        cursor: pointer
    }

    .lineup .lineup-wrap li:hover {
        opacity: 0.6
    }

    .lineup .lineup-wrap li:nth-child(1),.lineup .lineup-wrap li:nth-child(2) {
        border-top: 1px solid #C9C9C9
    }

    .lineup .lineupTxt {
        width: 7.5rem
    }

    .lineup .lineupTxt dt {
        font-size: 1rem;
        letter-spacing: 0.05rem
    }

    .lineup .lineupTxt dd {
        font-size: 0.75rem;
        line-height: 150%;
        margin-top: 0.4rem
    }

    .lineup .lineupImg {
        padding: 0
    }

    .movie {
        margin: 7.6rem 0 8rem
    }

    .movie video {
        width: 15.75rem
    }

    .sns {
        padding: 5.3rem 0 6rem;
        background: url("https://marlmarl-cdn.azureedge.net/pub/assets/img/feature/sg2026/sns_bk_pc.jpg") no-repeat center top;
        background-size: cover
    }

    .sns .sns-txt {
        color: #FFF;
        font-size: 1.125rem;
        line-height: 175%;
        letter-spacing: 0.05625rem;
        margin-top: 2.9rem
    }

    .sns .sns-links {
        margin-top: 17.87rem
    }

    .sns .sns-links li {
        width: 13.125rem
    }

    .gallery {
        margin-top: 11.2rem;
        display: flex;
        justify-content: center
    }

    .about {
        padding: 4rem 0 4.9rem
    }

    .about .h01 p {
        font-size: 1rem;
        letter-spacing: 0.05rem;
        margin-top: 1.1rem
    }

    .about .about-txt {
        font-size: 0.9375rem;
        line-height: 225%;
        letter-spacing: 0.075rem;
        margin-top: 2rem
    }

    .about .about-inner {
        width: 58.75rem;
        margin: 5rem auto 4.95rem
    }

    .about .about-wrap {
        transition: none;
        gap: 3.12rem
    }

    .about .about-wrap li {
        width: 17.5rem;
        padding: 1.19rem 0
    }

    .about .about-wrap li dl {
        margin-bottom: 0.94rem
    }

    .about .about-wrap li dt {
        margin-bottom: 0.63rem
    }

    .about .about-wrap li p {
        margin-top: 0.75rem
    }

    .about .about-bar {
        display: none
    }

    .about .about-links {
        font-size: 0.875rem;
        letter-spacing: 0.04375rem;
        width: 22.5rem;
        padding: 1.15rem 0
    }

    .lists {
        padding: 5.2rem 0 2.1rem
    }

    .lists .list-inner {
        margin-top: 5.05rem;
        gap: 6.4rem
    }

    .lists .list-wrap {
        padding: 0
    }

    .lists .list-wrap dl {
        text-align: center
    }

    .lists .list-wrap dt {
        font-size: 1.125rem;
        letter-spacing: 0.05625rem
    }

    .lists .list-wrap dd {
        font-size: 0.75rem;
        margin-top: 0.6rem
    }

    .lists .list-wrap ul {
        margin: 2.87rem auto 0;
        width: 58.75rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 2.15rem 1.55rem
    }

    .lists .list-wrap li {
        width: 8.5rem
    }

    .lists .list-wrap img {
        padding: 0
    }

    .lists .list-wrap p {
        font-size: 0.8125rem
    }

    .modaal {
        height: 100vh
    }

    .modaal .modaal_wrap {
        background-image: url("https://marlmarl-cdn.azureedge.net/pub/assets/img/feature/sg2026/bk_pc.jpg")
    }

    @supports (background-image: url("https://marlmarl-cdn.azureedge.net/pub/assets/img/feature/sg2026/bk_pc.webp")) {
        .modaal .modaal_wrap {
            background-image:url("https://marlmarl-cdn.azureedge.net/pub/assets/img/feature/sg2026/bk_pc.webp")
        }
    }

    .modaal .modaal_inner {
        width: 30rem;
        max-width: none;
        height: 48.75rem;
        max-height: 90%
    }

    .modaal .modaal_contents .slide {
        margin-bottom: 1.71rem;
    }

    .modaal .modaal_contents .slide_dot {
        bottom: 0.86rem;
        gap: 0.51rem
    }

    .modaal .modaal_contents .slide_dot span {
        width: 0.42856rem;
        height: 0.42856rem;
        border: 0.686px solid #D9D9D9
    }

    .modaal .modaal_contents .info {
        width: 26.59644rem
    }

    .modaal .modaal_contents .info .info_txt {
        padding: 0
    }

    .modaal .modaal_contents .info .info_txt dt {
        font-size: 1.45713rem;
        letter-spacing: 0.07288rem
    }

    .modaal .modaal_contents .info .info_txt dd {
        font-size: 0.94288rem;
        margin-top: 0.38rem
    }

    .modaal .modaal_contents .info .info_price {
        padding: 0
    }

    .modaal .modaal_contents .info .info_price dt {
        font-size: 1.02856rem
    }

    .modaal .modaal_contents .info .info_price dd {
        font-size: 1.02856rem;
        margin-top: 0.58rem
    }

    .modaal .modaal_contents .color {
        width: 26.59644rem;
        margin: 1.78rem auto 2.2rem
    }

    .modaal .modaal_contents .color_item {
        width: 12.85713rem;
        position: relative
    }

    .modaal .modaal_contents .color_item .comingsoon {
        width: 12.85713rem;
        height: 12.85713rem;
        font-size: 1rem;
    }

    .modaal .modaal_contents .color_item .comingsoon p {
        height: 12.85713rem;
        font-size: 1.02856rem;
        letter-spacing: 0.05144rem
    }

    .modaal .modaal_contents .color_img {
        padding: 0;
        position: relative
    }

    .modaal .modaal_contents .color_img .circle {
        bottom: 0.69rem;
        right: 0.69rem
    }

    .modaal .modaal_contents .color_name {
        font-size: 1.02856rem;
        letter-spacing: 0.05144rem;
        margin-top: 0.86rem
    }

    .modaal .modaal_contents .txt {
        font-size: 1.11431rem
    }

    .modaal .modaal_contents .detail {
        margin-top: 3.51rem;
        padding-top: 3.43rem;
        gap: 3.33rem;
        margin-bottom: 5.04rem
    }

    .modaal .modaal_contents .detail_h {
        font-size: 1.11431rem;
        letter-spacing: 0.08913rem;
        margin-bottom: 1.06rem
    }

    .modaal .modaal_contents .detail_img {
        width: 25.71431rem;
        margin-bottom: 1.29rem
    }

    .modaal .modaal_contents .detail_wrap .txt {
        font-size: 1.02856rem
    }
}

/*# sourceMappingURL=style.css.map */