@charset "utf-8";

/*
 * File    : rwd-main.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * Min 861px
 * 1480px
 * 1200px
 * 860px
 * 540px
 */



/* **************************************** *
 * Min 861px
 * **************************************** */
@media (min-width: 861px){

    /* FACTORY */
    html.mobile .main-factory__list-inner { height: 100svh; }
    html.mobile .main-factory__list-content { grid-template-rows: 90svh 90svh; grid-template-columns: 90svh 90svh 90svh; width: 270svh; height: 180svh; margin-top: 5svh; right: -175svh; }
    html.mobile .main-factory__list-item { width: 90svh; height: 90svh; }

}



/* **************************************** *
 * 1480px
 * **************************************** */
@media (max-width: 1480px){

    /* INTRO */
    .intro__illust { min-width: inherit; }
    .intro__logo svg { width: 400rem; }

    /* LAYOUT */
    .main-section { margin: 280rem 0; }

    .main-section__desc { margin-top: 30rem; }

    /* VISUAL */
    .main-visual { height: calc(var(--visual-fvh) + 100rem); }

    .main-visual__content { padding-bottom: 110rem; }

    .main-visual .swiper-control { bottom: 145rem; }
    .main-visual .scroll-down { bottom: 135rem; }

    /* ABOUT */
    .main-about.main-section { margin-top: -100rem; }
    .main-about { padding-top: 200rem; }

    .main-about__intro-typo-item > * { width: 330rem; }
    .main-about__intro-pic { width: 620rem; height: 620rem; }
    .main-about__intro--bowl-top { transform: scale(.86) translateY(-103rem) translateX(14rem) rotate(11deg); }

    .main-about__gallery-typo-item { gap: 36rem; }
    .main-about__gallery-image > li { width: 352rem; }
    .main-about__gallery-image > li:nth-child(2), 
    .main-about__gallery-image > li:nth-child(5) { width: 481rem; }
    .main-about__gallery-image > li:nth-child(6) { width: 393rem; }

    html.kakao .main-about__intro-typo-item { height: 620rem; }
    html.kakao .main-about__intro-pic ~ .main-about__intro-pic,
    html.kakao .main-about__intro-typo-item ~ .main-about__intro-typo-item { margin-top: 200rem; }

    /* ESG */
    .main-esg__card-content { gap: 36rem; }

    .main-esg__division { height: 240rem; bottom: -208rem; }

    /* BRAND */
    .main-brand__desc { margin-top: 14rem; }
    .main-brand__picture { width: 43vh; margin-top: 32rem; margin-bottom: 30rem; }

    /* POWER */
    .main-power__rolling-key { font-size: 178rem; }

    .main-power__instruct-btn { margin-top: 36rem; }

    /* BANNER */
    .main-banner__control { gap: 30rem; margin-top: 56rem; }

    /* STORY */
    .main-story__list-item { width: 480rem; height: 620rem; }

    .main-story__list-meta > * { top: 44rem; }
    .main-story__list-separation { left: 44rem; }
    .main-story__list-date { right: 44rem; }
    .main-story__list-more { left: 36rem; bottom: 36rem; }

    .main-story__list-icon--sns { top: 44rem; right: 44rem; }
    .main-story__list-icon--outlink { bottom: 44rem; left: 44rem; }

    .main-story__list-item--primary .main-story__list-link { padding: 132rem 44rem 116rem; }

    .main-story__list-item--secondary .main-story__list-type { top: 44rem; left: 44rem; }

}



/* **************************************** *
 * 1200px
 * **************************************** */
@media (max-width: 1200px){

    /* INTRO */
    .intro__logo svg { width: 340rem; }

    /* LAYOUT */
    .main-section { margin: 240rem 0; }

    .main-section__head { margin-bottom: 70rem; }
    .main-section__desc { margin-top: 28rem; }
    .main-section__head.main-section__head--secondary { margin-bottom: 30rem; }

    /* VISUAL */
    .main-visual__content { padding-bottom: 90rem; }
    .main-visual__desc { margin-top: 14rem; }

    .main-visual .swiper-control { left: 40rem; bottom: 140rem; }
    .main-visual .scroll-down { bottom: 130rem; }

    /* ABOUT */
    .main-about { padding-top: 176rem; }

    .main-about__intro-typo-item > * { width: 270rem; }
    .main-about__intro-pic { width: 460rem; height: 460rem; }
    .main-about__intro--bowl-top { transform: scale(.86) translateY(-78rem) translateX(14rem) rotate(11deg); }

    .main-about__gallery { padding-top: 100rem; padding-bottom: 100rem; }
    .main-about__gallery-typo-item { gap: 32rem; }
    .main-about__gallery-image { gap: 180rem; }
    .main-about__gallery-image > li { width: 282rem; }
    .main-about__gallery-image > li:nth-child(2), 
    .main-about__gallery-image > li:nth-child(5) { width: 385rem; }
    .main-about__gallery-image > li:nth-child(6) { width: 314rem; }

    html.kakao .main-about__intro-typo-item { height: 460rem; }

    /* ESG */
    .main-esg.main-section { margin-top: 100rem; }

    .main-esg__card-content { gap: 32rem; }

    .main-esg__division { height: 200rem; bottom: -180rem; }

    /* BRAND */
    .main-brand__product { padding: 0 40rem; }
    .main-brand__desc { margin-top: 12rem; }
    .main-brand__picture { width: 40vh; margin-top: 24rem; margin-bottom: 18rem; }

    html.kakao .main-brand .main-section__head.main-section__head--secondary { margin-bottom: 70rem; }

    /* POWER */
    .main-power__cards { --cards-margin: 40rem; }

    .main-power__rolling-key { font-size: 138rem; }

    .main-power__instruct-btn { margin-top: 32rem; }

    html.kakao .main-power .main-section__head.main-section__head--secondary { margin-bottom: 70rem; }

    /* FACTORY */
    .main-factory__list-item { padding: 44rem; }

    /* BANNER */
    .main-banner__control { gap: 28rem; margin-top: 40rem; }

    /* STORY */
    .main-story__list { padding: 0 40rem; }

    .main-story__list-item { width: 420rem; height: 540rem; }

    .main-story__list-meta > * { top: 40rem; }
    .main-story__list-separation { gap: 14rem; left: 36rem; }
    .main-story__list-label { padding: 4rem 14rem; }
    .main-story__list-type { padding: 2rem 0; }
    .main-story__list-date { padding: 2rem 0; right: 36rem; }
    .main-story__list-desc { margin-top: 16rem; }
    .main-story__list-more { left: 32rem; bottom: 28rem; }
    .main-story__list-more .jt-icon { width: 17rem; }

    .main-story__list-icon { width: 30rem; }
    .main-story__list-icon--sns { top: 40rem; right: 36rem; }
    .main-story__list-icon--outlink { bottom: 40rem; left: 36rem; }

    .main-story__list-item--primary .main-story__list-link { padding: 112rem 36rem 95rem; }

    .main-story__list-item--secondary .main-story__list-type { top: 39rem; left: 36rem; }

}



/* **************************************** *
 * 860px
 * **************************************** */
@media (max-width: 860px){

    /* INTRO */
    .intro__logo svg { width: 280rem; }

    /* LAYOUT */
    .main-section { margin: 200rem 0; }

    .main-section__head { margin-bottom: 56rem; }
    .main-section__desc { margin-top: 20rem; }
    .main-section__head.main-section__head--secondary { margin-bottom: 32rem; }

    .main-response-btn.jt-btn__basic { width: 100%; }
    .main-response-btn.jt-btn__basic:before { border-width: 2px; clip-path: none; }

    /* VISUAL */
    .main-visual { height: var(--visual-fvh); }

    .main-visual__bg-poster--large { display: none; }
    .main-visual__bg-poster--small { display: block; }

    .main-visual__content { padding-left: 24rem; padding-right: 24rem; }
    
    .main-visual .scroll-down { bottom: 30rem; }
    .main-visual .swiper-control { left: 24rem; bottom: 40rem; }

    /* ABOUT */
    .main-about.main-section { margin-top: 0; }
    .main-about { padding-top: 138rem; border-radius: 0; }

    .main-about__bg { background-image: url(../images/layout/sanc-illust-portrait.svg); background-size: auto 100%; }

    .main-about__intro-typo-item { flex-direction: column; justify-content: space-around; gap: 29vw; }
    .main-about__intro-typo-item > * { width: 100%; }
    .main-about__intro-pic { width: 58vw; height: 58vw; }
    .main-about__intro--bowl-top { transform: scale(.86) translateY(-62rem) translateX(14rem) rotate(11deg); }

    .main-about__gallery-typo-item { gap: 28rem; }
    .main-about__gallery-image { gap: 160rem; }
    .main-about__gallery-image > li { width: 226rem; }
    .main-about__gallery-image > li:nth-child(2), 
    .main-about__gallery-image > li:nth-child(5) { width: 308rem; }
    .main-about__gallery-image > li:nth-child(6) { width: 251rem; }

    html.kakao .main-about__intro { padding-bottom: 100rem; }
    html.kakao .main-about__intro-pic { position: absolute; }
    html.kakao .main-about__intro-pic ~ .main-about__intro-pic { margin-top: 0; }
    html.kakao .main-about__intro--bowl { top: 19vw; }
    html.kakao .main-about__intro--flower { top: 127vw; }
    html.kakao .main-about__intro-typo { position: relative; }
    html.kakao .main-about__intro-typo-item { height: 80vw; margin-top: 80rem; justify-content: space-between; }

    /* ESG */
    .main-esg__card-content { gap: 28rem; }

    .main-esg__division { display: none; }

    /* BRAND */
    .main-brand .main-section__head.main-section__head--secondary { margin-bottom: 56rem; }

    .main-brand__cards { gap: 124rem; }
    .main-brand__cards .jt-stacking-card { height: inherit; padding: 0; }
    .main-brand__cards .jt-stacking-card__inner { height: inherit; }

    .main-brand__info { flex-direction: column; overflow: visible; }
    .main-brand__info > * { width: 100%; }

    .main-brand__sensation { display: none; }

    .main-brand__product { padding: 80rem 34rem; }
    .main-brand__product .jt-btn__basic { position: absolute; left: 0; bottom: 0; translate: 0 calc(100% + 24rem); }
    .main-brand__picture { display: none; }
    .main-brand__slide { display: block; width: 360rem; margin: 40rem  auto 0; }
    .main-brand__slide-img { aspect-ratio: 1 / 1.0428; background: no-repeat center / cover; border-radius: var(--round-04); }
    
    .main-brand__slide .swiper-control { margin-top: 24rem; position: static; }
    .main-brand__slide .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 2rem; }
    .main-brand__slide .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:before { display: none; }
    .main-brand__slide .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:after { width: 8rem; height: 8rem; margin-top: -4rem; margin-left: -4rem; background: var(--color-gray-500); }
    .main-brand__slide .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active:after { background: var(--color-gray-800); }

    html.kakao .main-brand .main-section__head.main-section__head--secondary { margin-bottom: 56rem; }
    html.kakao .main-brand .jt-stacking-cards { gap: 124rem; }
    html.kakao .main-brand .jt-stacking-card { aspect-ratio: auto; }

    /* POWER */
    .main-power__cards { --cards-margin: 24rem; }

    .main-power__rolling-key { font-size: 100rem; }

    .main-power__instruct-btn { margin-top: 28rem; }

    html.kakao .main-power .main-section__head.main-section__head--secondary { margin-bottom: 56rem; }
    html.kakao .main-power__card { aspect-ratio: 3 / 4; }

    /* FACTORY */
    .main-factory__list { height: inherit; }
    .main-factory__list-inner  { height: inherit; }
    .main-factory__list-content { display: flex; width: inherit; height: inherit; margin: 0; right: inherit; }
    .main-factory__list-item { width: 320rem; height: 320rem; margin: 0 8rem; padding: 0; border: none; }
    .main-factory__list-item:first-child { margin-left: 24rem; }
    .main-factory__list-item:last-child { margin-right: 24rem; }
    .main-factory__list-item-inner { clip-path: none; }
    .main-factory__list-txt { border: none; opacity: 1; }

    /* BANNER */
    .main-banner__control { gap: 18rem; margin-top: 28rem; }

    /* STORY */
    .main-story__list { gap: 16rem; padding: 0 24rem; }

    .main-story__list-item { width: 344rem; height: 437rem; }
    .main-story__list-item--etc { display: none; }

    .main-story__list-separation { gap: 12rem; left: 32rem; }
    .main-story__list-label { padding-left: 12rem; padding-right: 12rem; }
    .main-story__list-date { right: 32rem; }
    .main-story__list-desc { -webkit-line-clamp: 6; }
    .main-story__list-more { left: 26rem; }

    .main-story__list-icon { width: 28rem; }
    .main-story__list-icon--sns { top: 36rem; right: 30rem; }
    .main-story__list-icon--outlink { bottom: 36rem; left: 30rem; }

    .main-story__list-item--primary .main-story__list-link { padding-top: 95rem; padding-left: 32rem; padding-right: 32rem; }

    .main-story__list-item--secondary .main-story__list-type { left: 32rem; }

    .main-story__button { display: block; margin-top: 40rem; }

}

@media (max-width: 860px) and (orientation: portrait) {

    /* INTRO */
    .intro__illust--landscape { display: none; }
    .intro__illust--portrait { display: block; }

}



/* **************************************** *
 * 540px
 * **************************************** */
@media (max-width: 540px){

    /* INTRO */
    .intro__logo svg { width: 200rem; }

    /* LAYOUT */
    .main-section { margin: 160rem 0; }

    .main-section__head { margin-bottom: 40rem; }
    .main-section__desc { margin-top: 16rem; }
    .main-section__desc br { display: none; }
    .main-section__head.main-section__head--secondary { margin-bottom: 19rem; }

    /* VISUAL */
    .main-visual__content { padding-bottom: 0; }
    .main-visual__desc { margin-top: 16rem; }
    
    .main-visual .scroll-down { display: none; }
    .main-visual .swiper-control { width: 100%; left: 0; }

    /* ABOUT */
    .main-about { padding-top: 100rem; }

    .main-about__intro-typo-item { gap: 40vw; }
    .main-about__intro-pic { width: 80vw; height: 80vw; }
    .main-about__intro--bowl-top { transform: scale(.86) translateY(-45rem) translateX(6rem) rotate(11deg); }

    .main-about__gallery { padding-top: 80rem; padding-bottom: 80rem; }
    .main-about__gallery-typo-item { gap: 24rem; }
    .main-about__gallery-image > li { width: 154rem; }
    .main-about__gallery-image > li:nth-child(2), 
    .main-about__gallery-image > li:nth-child(5) { width: 210rem; }
    .main-about__gallery-image > li:nth-child(6) { width: 171rem; }

    html.kakao .main-about__intro { padding-bottom: 80rem; }
    html.kakao .main-about__intro--bowl { top: 25vw; }
    html.kakao .main-about__intro--flower { top: 182vw; }
    html.kakao .main-about__intro-typo-item { height: 106vw; margin-top: 58rem; }
    html.kakao .main-about__intro-typo-item ~ .main-about__intro-typo-item { height: 124vw; margin-top: 150rem; }

    /* ESG */
    .main-esg.main-section { margin-top: 80rem; }

    .main-esg__card-content { padding: 0 24rem; gap: 24rem; }
    .main-esg__card-content br { display: none; }

    /* BRAND */
    .main-brand .main-section__head.main-section__head--secondary { margin-bottom: 40rem; }
    
    .main-brand__cards { gap: 100rem; }
    .main-brand__product { padding-top: 48rem; padding-bottom: 48rem; }
    .main-brand__desc { margin-top: 8rem; }
    .main-brand__desc br { display: none; }
    .main-brand__slide { width: 100%; }
    .main-brand__product .jt-btn__basic { translate: 0 calc(100% + 20rem); }

    html.kakao .main-brand .main-section__head.main-section__head--secondary { margin-bottom: 40rem; }
    html.kakao .main-brand .jt-stacking-cards { gap: 100rem; }

    /* POWER */
    .main-power__cards { --cards-margin: 21rem; }

    .main-power__rolling-inner { padding: 0 24rem; }
    .main-power__rolling-key { font-size: 46rem; }
    .main-power__instruct { padding: 0 24rem; }
    .main-power__instruct br { display: none; }
    .main-power__instruct-btn { margin-top: 24rem; }

    html.mobile .main-power { padding-bottom: 24px; }

    html.kakao .main-power .main-section__head.main-section__head--secondary { margin-bottom: 40rem; }
    html.kakao .main-power__card { aspect-ratio: 9 / 16; }
    html.kakao .main-power__rolling { gap: 10rem; }

    /* FACTORY */
    .main-factory__list-item { width: 220rem; height: 220rem; margin: 0 4rem; }
    .main-factory__list-item:first-child { margin-left: 21rem; }
    .main-factory__list-item:last-child { margin-right: 21rem; }
    
    /* BANNER */
    .main-banner__area { padding-top: 180%; }
    .main-banner__area-content { padding: 0 24rem; }
    .main-banner__area-content p br { display: none; }
    .main-banner .jt-bg-parallax__bg { background-position: center !important; }

    .main-banner__control { flex-direction: column; gap: 16rem; margin-top: 20rem; }

    /* STORY */
    .main-story__list { gap: 8rem; padding: 0 21rem; }

    .main-story__list-item { width: 320rem; height: 442rem; }

    .main-story__list-meta > * { top: 32rem; }
    .main-story__list-more { bottom: 24rem; }

    .main-story__list-icon { width: 24rem; }
    .main-story__list-icon--sns { top: 34rem; }
    .main-story__list-icon--outlink { bottom: 30rem; }

    .main-story__list-item--primary .main-story__list-link { padding-top: 84rem; padding-bottom: 80rem; }

    .main-story__list-item--secondary .main-story__list-type { top: 33rem; }

    .main-story__button { margin-top: 20rem; }

}