/* BASIC css start */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

#sunny_header{border-bottom:0 !important;}

.main{overflow:hidden;}

/* main */
.title_main{position:relative;margin:0 auto 30px;}
.title_main h2{font-family:'Pretendard', sans-serif; color:#000000;font-size:18px;line-height:16px;font-weight:700;letter-spacing:1px;text-transform:uppercase;text-align:left;}

.title_main .btn_viewmore2{position:absolute;right:0;top:5px;}
.title_main .txt{font-family: 'Pretendard', sans-serif;font-size:20px;line-height:20px;color:#fff;letter-spacing:-1px;position:absolute;right:0;top:50%;transform:translateY(-50%);}
.title_main .txt2{font-family:'Pretendard', sans-serif;font-size:12px;line-height:12px;color:#c0b5a7;letter-spacing:0;position:absolute;right:15px;top:50%;transform:translateY(-55%);}
#mainpopup2,
[id*="mainpopup"],
.popup,
#popup {
    position: fixed !important;
    z-index: 999999 !important;
}

.hr_line{width:100%;height:1px;background:#e5e2dd;margin:0;padding:0;outline:0;border:0;}


/* mainvisual */

.mainvisual_area{
    position:relative;
    width:100%;
    overflow:hidden;
    background:#000;
}


/* 초기 로딩 깜빡임 방지 */
.mainvisual_area .mainvisual_box:not(.slick-initialized) .box{
    display:none;
}

.mainvisual_area .mainvisual_box:not(.slick-initialized) .box:first-child{
    display:block;
}


/* 슬라이드 높이 */
.mainvisual_area .mainvisual_box,
.mainvisual_area .slick-list,
.mainvisual_area .slick-track{
    height:480px !important;
    min-height:0;
    max-height:none;
}


/* 개별 슬라이드 */
.mainvisual_area .box{
    position:relative;

    width:100%;
    height:480px !important;
    min-height:0;
    max-height:none;

    overflow:hidden;

    cursor:pointer;
    outline:0;

    background-size:cover !important;
    background-position:center center !important;
}


/* 전체 링크 */
.mainvisual_area .box > a.link{
    position:absolute !important;
    inset:0;

    display:block !important;

    width:100%;
    height:100%;

    z-index:50;

    pointer-events:auto !important;
}


/* 하단 가독성 그라데이션 */
.mainvisual_area .box::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:52%;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.62) 0%,
        rgba(0,0,0,.36) 42%,
        rgba(0,0,0,.12) 72%,
        rgba(0,0,0,0) 100%
    );

    z-index:1;

    pointer-events:none;
}


/* 텍스트 전체 */
.mainvisual_area .text_box{
    position:absolute;

    left:24px;
    right:24px;
    bottom:82px;

    z-index:3;

    margin:0;

    text-align:center;

    pointer-events:none;
}


/* 작은 문구 */
.mainvisual_area .text_box dt{
    margin:0 0 10px;

    font-family:'Pretendard',sans-serif;

    font-size:15px;
    line-height:1.4;
    font-weight:400;

    color:rgba(255,255,255,.92);

    letter-spacing:-.3px;

    text-transform:none;
}


/* 메인 타이틀 */
.mainvisual_area .text_box .txt1{
    margin:0;

    font-family:'Pretendard',sans-serif;

    font-size:30px;
    line-height:1.28;
    font-weight:700;

    color:#fff;

    letter-spacing:-1.2px;

    word-break:keep-all;
}


/* 설명 */
.mainvisual_area .text_box .txt2{
    margin:14px 0 0;

    font-family:'Pretendard',sans-serif;

    font-size:13px;
    line-height:1.65;
    font-weight:300;

    color:rgba(255,255,255,.88);

    letter-spacing:-.35px;

    word-break:keep-all;
}


/* 좌우 화살표 숨김 */
.mainvisual_area .prev,
.mainvisual_area .next{
    display:none !important;
}


/* 하단 컨트롤 */
.mainvisual_area .btn_box{
    position:absolute;

    left:24px;
    right:24px;
    bottom:28px;

    z-index:10;
}


.mainvisual_area .btn_box .inner{
    width:100%;
    height:auto;
}


.mainvisual_area .pageing_box{
    position:relative;

    width:100%;
    height:18px;
}


/* 진행 라인 */
.mainvisual_area .pageing_box::before{
    content:"";

    position:absolute;

    left:0;
    right:58px;
    top:50%;

    height:2px;

    background:rgba(255,255,255,.35);

    transform:translateY(-50%);
}

/* 전체 트랙 */
.mainvisual_area .pageing_box::before{
    content:"";

    position:absolute;
    left:0;
    right:58px;
    top:50%;

    height:2px;

    background:rgba(255,255,255,.35);

    transform:translateY(-50%);
}


/* 현재 슬라이드 위치 막대 */
.mainvisual_area .visual-progress-bar{
    position:absolute;

    top:50%;
    left:0;

    height:2px;

    background:#57320a;

    transform:translateY(-50%);

    transition:left .6s ease;

    z-index:2;
}

/* 카운터 */
.mainvisual_area .pageing_box .slick-counter{
    position:absolute;

    right:0;
    top:50%;

    width:auto;
    height:auto;

    padding:0;

    background:none;

    border-radius:0;

    transform:translateY(-50%);

    color:#fff;

    font-family:'Pretendard',sans-serif;
    font-size:11px;
    line-height:1;
    font-weight:400;

    letter-spacing:0;
}


/* 기존 dots 제거 */
.mainvisual_area .slick-dots{
    display:none !important;
}









/* 영상 슬라이드 배너 시작 */
.banner-slideArea-v{padding:0 0 0 0;overflow:hidden;}
.banner-slideArea-v .sl-bg{position:absolute; left:0; bottom:0; width:100%; height:40%; background-position:bottom; background-size:cover;}
.banner-slideArea-v .swiper-container{position:relative !important; width:100%;height:auto;}

.banner-slideArea-v .swiper-button-prev,
.banner-slideArea-v .swiper-button-next{top:50%; transform:translateY(-50%); margin:0; background:none; display:none !important;}

.banner-slideArea-v .swiper-button-prev{left:50%; right:auto; margin-left:-660px;}
.banner-slideArea-v .swiper-button-next{right:50%; left:auto; margin-right:-660px;}

.banner-slideArea-v .swiper-button-prev:after,
.banner-slideArea-v .swiper-button-next:after{font-family:'Pretendard', sans-serif; color:#000; font-size:30px; font-weight:bold;}
.banner-slideArea-v .swiper-button-prev:after{content:"\e93d";}
.banner-slideArea-v .swiper-button-next:after{content:"\e940";}
.banner-slideArea-v .swiper-button-prev:hover:after,
.banner-slideArea-v .swiper-button-next:hover:after{color:#999;}


.banner-slideArea-v .item{text-align:left; position:relative; margin:0; outline:0;}
.banner-slideArea-v .item>.in{width:100%; height:100%; font-size:0; line-height:0;}
.banner-slideArea-v .item>.in>*{font-size:13px; line-height:1.1;}
.banner-slideArea-v .item.swiper-slide-active{}
.banner-slideArea-v .item .img{position:relative; width:100%; height:0; padding-bottom:177%; overflow:hidden; transition:0.2s;}
.banner-slideArea-v .item .img:after{position:absolute; top:0; left:0; width:100%; height:100%; content:""; z-index:11;}
.banner-slideArea-v .item .img iframe{position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;}
.banner-slideArea-v .item.swiper-slide-active .img{}
.banner-slideArea-v .item.swiper-slide-active .img iframe{}

.banner-slideArea-v .item .txt{opacity:0; position:relative; width:132%; left:-16%; margin-top:-100px; padding:200px 0 50px 0; box-sizing:border-box; text-align:center; background-position:bottom; background-size:cover; transition:0.2s;}
.banner-slideArea-v .item .txt h2{font-size:14px; color:#fff; margin-bottom:20px; font-weight:normal; font-family:'Pretendard', sans-serif; letter-spacing:1px;}
.banner-slideArea-v .item .txt p{font-size:16px; color:#fff; margin-bottom:20px; font-weight:200; font-family:'Pretendard', sans-serif;}
.banner-slideArea-v .item .txt .btn{display:block; margin:0 auto; text-align:left; }
.banner-slideArea-v .item .txt .btn a{}
.banner-slideArea-v .item .txt .btn a .Button_secondary{color:#fff; border-color:#fff;}
.banner-slideArea-v .item .txt .btn a i{position:absolute; top:0; right:20px; line-height:50px; }
.banner-slideArea-v .item .txt .btn a:hover{}
.banner-slideArea-v .item .txt .btn a:hover .Button_secondary{border-color:#c3b6ab;}
.banner-slideArea-v .item.swiper-slide-active .txt{opacity:1;}

.banner-slideArea-v .btn{position:absolute; bottom:7%; width:100%; left:0; text-align:center; z-index:111;}


/* 영상 슬라이드 배너 종료 */








/* ==================================================
   항상 사랑받는 원목가구 - MOBILE
================================================== */

.mainproducttab_area{
    position:relative;

    padding:0 0 70px;

    background:#fff;

    overflow:hidden;
}


.mainproducttab_box{
    position:relative;

    width:100%;

    margin:0;
    padding:0;
}


/* ==================================================
   TITLE
================================================== */

.mainproducttab_area .title_main{
    margin:0 15px 28px;

    padding:0;

    box-sizing:border-box;
}


.mainproducttab_area .title_main h2{
    margin:0;

    font-family:'Pretendard',sans-serif;

    font-size:20px;
    line-height:1.3;

    font-weight:800;

    color:#111;

    letter-spacing:-.8px;

    text-align:left;
}


/* ==================================================
   TAB
================================================== */

.mainproducttab_area .tab{
    position:absolute;

    top:0;
    right:15px;

    display:flex;

    align-items:center;

    gap:6px;

    width:auto;

    margin:0;
    padding:0;

    font-size:0;
    letter-spacing:0;

    list-style:none;

    z-index:5;
}


.mainproducttab_area .tab::-webkit-scrollbar{
    display:none;
}


/* 개별 탭 */
.mainproducttab_area .tab li{
    position:relative;

    display:flex;

    align-items:center;
    justify-content:center;

    width:auto;
    min-width:66px;
    height:30px;

    margin:0;
    padding:0 13px;

    border:1px solid #ded8d1;
    border-radius:30px;

    background:#fff;

    font-family:'Pretendard',sans-serif;

    font-size:11px;
    line-height:1;

    font-weight:500;

    color:#99928c;

    letter-spacing:-.3px;

    cursor:pointer;

    box-sizing:border-box;
}


/* 기존 점 제거 */
.mainproducttab_area .tab li > span{
    display:none;
}


/* 활성 */
.mainproducttab_area .tab li.active{
    border-color:#6a3d10;

    background:#6a3d10;

    color:#fff;

    font-weight:600;
}

/* ==================================================
   PANEL
================================================== */

.mainproducttab_area .panel_area{
    height:0;

    opacity:0;

    overflow:hidden;

    pointer-events:none;
}


.mainproducttab_area .panel_area.active{
    height:auto;

    opacity:1;

    overflow:visible;

    pointer-events:auto;
}

.mainproducttab_box .mproduct_box.mainmore li{display:none;}
.mainproducttab_box .mproduct_box.mainmore li:nth-child(1),
.mainproducttab_box .mproduct_box.mainmore li:nth-child(2),
.mainproducttab_box .mproduct_box.mainmore li:nth-child(3),
.mainproducttab_box .mproduct_box.mainmore li:nth-child(4),
.mainproducttab_box .mproduct_box.mainmore li:nth-child(5),
.mainproducttab_box .mproduct_box.mainmore li:nth-child(6),
.mainproducttab_box .mproduct_box.mainmore li:nth-child(7),
.mainproducttab_box .mproduct_box.mainmore li:nth-child(8){display:inline-block;}

.mainproducttab_box .mproduct_box.mainmore2 li{display:none;}
.mainproducttab_box .mproduct_box.mainmore2 li:nth-child(1),
.mainproducttab_box .mproduct_box.mainmore2 li:nth-child(2),
.mainproducttab_box .mproduct_box.mainmore2 li:nth-child(3),
.mainproducttab_box .mproduct_box.mainmore2 li:nth-child(4),
.mainproducttab_box .mproduct_box.mainmore2 li:nth-child(5),
.mainproducttab_box .mproduct_box.mainmore2 li:nth-child(6),
.mainproducttab_box .mproduct_box.mainmore2 li:nth-child(7),
.mainproducttab_box .mproduct_box.mainmore2 li:nth-child(8){display:inline-block;}

.mainproducttab_box .mproduct_box.mainmore3 li{display:none;}
.mainproducttab_box .mproduct_box.mainmore3 li:nth-child(1),
.mainproducttab_box .mproduct_box.mainmore3 li:nth-child(2),
.mainproducttab_box .mproduct_box.mainmore3 li:nth-child(3),
.mainproducttab_box .mproduct_box.mainmore3 li:nth-child(4),
.mainproducttab_box .mproduct_box.mainmore3 li:nth-child(5),
.mainproducttab_box .mproduct_box.mainmore3 li:nth-child(6),
.mainproducttab_box .mproduct_box.mainmore3 li:nth-child(7),
.mainproducttab_box .mproduct_box.mainmore3 li:nth-child(8){display:inline-block;}

.mainproducttab_box .mproduct_box.mainmore4 li{display:none;}
.mainproducttab_box .mproduct_box.mainmore4 li:nth-child(1),
.mainproducttab_box .mproduct_box.mainmore4 li:nth-child(2),
.mainproducttab_box .mproduct_box.mainmore4 li:nth-child(3),
.mainproducttab_box .mproduct_box.mainmore4 li:nth-child(4),
.mainproducttab_box .mproduct_box.mainmore4 li:nth-child(5),
.mainproducttab_box .mproduct_box.mainmore4 li:nth-child(6),
.mainproducttab_box .mproduct_box.mainmore4 li:nth-child(7),
.mainproducttab_box .mproduct_box.mainmore4 li:nth-child(8){display:inline-block;}


/* ==================================================
   ALWAYS LOVED PRODUCT - VIEW MORE
   PC STYLE → MOBILE
================================================== */

.mainproducttab_area .more_box{
    width:100%;
    margin:0;
    padding:0;
}


/* VIEW MORE 버튼 공통 */
.mainproducttab_area .more_box .boxmore,
.mainproducttab_area .more_box .boxmore2,
.mainproducttab_area .more_box .boxmore3,
.mainproducttab_area .more_box .boxmore4{
    position:relative;

    display:flex;
    align-items:center;

    width:175px;
    height:47px;

    margin:32px auto 0;

    padding:0 45px 0 18px;

    border:1px solid #777;

    background:#fff;

    font-family:'Pretendard',sans-serif;
    font-size:11px;
    line-height:1;

    font-weight:700;

    color:#111;

    letter-spacing:0;

    text-transform:uppercase;

    box-sizing:border-box;
}


/* 기존 아이콘 이미지 제거 */
.mainproducttab_area .more_box .boxmore span,
.mainproducttab_area .more_box .boxmore2 span,
.mainproducttab_area .more_box .boxmore3 span,
.mainproducttab_area .more_box .boxmore4 span{
    position:absolute;

    top:50%;
    right:18px;

    width:9px;
    height:9px;

    margin:0;

    background:none !important;

    border:0;

    transform:
        translateY(-65%)
        rotate(45deg);

    box-sizing:border-box;
}


/* PC처럼 V 형태 */
.mainproducttab_area .more_box .boxmore span::before,
.mainproducttab_area .more_box .boxmore2 span::before,
.mainproducttab_area .more_box .boxmore3 span::before,
.mainproducttab_area .more_box .boxmore4 span::before{
    content:"";

    position:absolute;

    width:7px;
    height:7px;

    border-right:1px solid #222;
    border-bottom:1px solid #222;

    top:0;
    left:0;
}


/* 이전 + 스타일 혹시 남아있으면 제거 */
.mainproducttab_area .more_box .boxmore span::after,
.mainproducttab_area .more_box .boxmore2 span::after,
.mainproducttab_area .more_box .boxmore3 span::after,
.mainproducttab_area .more_box .boxmore4 span::after{
    content:none;
}



.mainbestseller_area{padding:15% 0;background:#efedea;overflow:hidden;}
.mainbestseller_area .title_main{margin-bottom:10px;}


.sliderfor_outer{position:relative;}
.sliderfor_outer .btn_arrow{position:absolute;top:54%;width:13px;height:25px;border:0;background:none;outline:0;text-indent:-999em;cursor:pointer;z-index:2;}

.sliderfor_outer .slider-dots{position:absolute;top:8px;left:0;right:0;font-size:0;letter-spacing:-5px;overflow:hidden;text-align:center;padding:0 50px;box-sizing:border-box;}
.mainbestseller_area .sliderfor_outer .slider-dots{padding:0 50px;box-sizing:border-box;}
.sliderfor_outer .slider-dots li{position:relative;font-size:14px;font-weight:500;letter-spacing:0;display:inline-block;vertical-align:top;*display:inline;zoom:1;padding:10px 0 0 0;margin:0 5px;font-size:14px;color:#c7c7c7;cursor:pointer;}
.sliderfor_outer .slider-dots li .tab_dot{position:absolute;top:3px;left:50%;transform:translateX(-50%);width:5px;height:5px;background:#b9633d;border-radius:4px;-ms-border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;opacity:0;filter:alpha(opacity=0);}
.sliderfor_outer .slider-dots li.slick-active{color:#42290e;}
.sliderfor_outer .slider-dots li.slick-active .tab_dot{opacity:1;filter:alpha(opacity=100);}
.sliderfor_outer .dots__number{display:none;}

.slider-for{position:relative;padding:60px 0 0;overflow:hidden;}
.slider-for .item{outline:0;outline:0;}
.slider-for .item img{width:100%;}
.slider-for .slick-slider{z-index:1;}

.slider-nav{overflow:hidden;}
.slider-nav .item{}
.slider-nav .slick-dots{font-size:0; line-height:0; text-align:center;}
.slider-nav .slick-dots li{display:inline-block; overflow:hidden; margin:0 3px 0 4px; width:10px; height:10px; border:0; border-radius:10px; cursor:pointer; background-color:#e9ebea; }
.slider-nav .slick-dots li button{text-indent:-999em;background:none;border:none;}
.slider-nav .slick-dots li.slick-active{ background-color:#b36839; }

.mainbestseller_area .Button{margin-top:30px;}
/*.mainbestseller_area .slick-list{height:auto !important;}*/


/* ==================================================
   HISTORY NUMBER - MOBILE
================================================== */


/* 섹션 제목 */
.mainhistorynum_title{
    position:relative;

    width:100%;

    margin:0;
    padding:0 15px 26px;

    background:#fff;

    box-sizing:border-box;
}

.mainhistorynum_title h2{
    margin:0;

    font-family:'Pretendard',sans-serif;

    font-size:20px;
    line-height:1.3;

    font-weight:800;

    color:#111;

    letter-spacing:-.8px;
}

/* ==================================================
   BANNER
================================================== */

.mainhistorynum_area{
    position:relative;
    width:100%;

    aspect-ratio:1080 / 1803;

    margin:0;
    padding:0;

    background-image:
        url("//dainpark06.cafe24.com/sunny/images/history_img_m.jpg");

    background-repeat:no-repeat;
    background-position:center top;
    background-size:100% auto;

    overflow:hidden;
    box-sizing:border-box;
}

.mainhistorynum_box{
    position:relative;

    width:100%;

    margin:0;

    /* 기존 24px → 15px */
    padding:24px 15px 34px;

    box-sizing:border-box;

    z-index:2;
}

/* ==================================================
   INTRO
================================================== */

.mainhistorynum_box .title_box{
    position:absolute;

    top:46%;
    left:15px;

    /* 2줄 확보 */
    width:205px;

    margin:0;
    padding:0;

    transform:translateY(-50%);

    z-index:5;
    pointer-events:none;
}

.mainhistorynum_box .title_box .title{
    position:relative;

    margin:0;

    /* 기존 28px → 선과 문구 간격 축소 */
    padding-top:16px;

    font-family:'Pretendard',sans-serif;

    font-size:14px;
    line-height:1.65;

    font-weight:500;

    color:#493d34;

    letter-spacing:-.5px;

    text-align:left;

    /* 단어 중간에서 쪼개지지 않도록 */
    word-break:keep-all;
}

/* 짧은 선 */
.mainhistorynum_box .title_box .title:before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:24px;
    height:1px;

    background:rgba(73,61,52,.55);
}


/* ==================================================
   NUMBER LIST
================================================== */

.mainhistorynum_box ul{
    margin:0;
    padding:0;

    list-style:none;
}


.mainhistorynum_box li{
    position:relative;

    margin:0;
    padding:28px 0;

    text-align:right;
}



/* 각 숫자 사이 라인 */
.mainhistorynum_box li + li{
    border-top:1px solid rgba(255,255,255,.34);
}


/* ==================================================
   NUMBER
================================================== */

.mainhistorynum_box .num_box{
    margin:0;
    padding:0;

    text-align:right;
}

.mainhistorynum_box .number_line{
    display:flex;

    align-items:center;
    justify-content:flex-end;

    height:43px;

    margin:0;
    padding:0;

    white-space:nowrap;
}


/* 앞자리 */
.mainhistorynum_box .number_prefix{
    display:inline-block;

    height:43px;

    font-family:'Libre Bodoni', Georgia, serif;

    font-size:40px;
    line-height:43px;

    font-weight:400;

    color:#fff;

    letter-spacing:-1px;
}


/* 마지막 세 자리 */
.mainhistorynum_box .rolling_digits{
    display:inline-flex;

    align-items:flex-start;

    height:43px;

    overflow:hidden;
}


.mainhistorynum_box .rolling_digit{
    position:relative;

    display:inline-block;

    width:27px;
    height:43px;

    overflow:hidden;

    font-family:'Libre Bodoni', Georgia, serif;

    font-size:40px;
    line-height:43px;

    font-weight:400;

    color:#fff;

    letter-spacing:-1px;
}


/* 롤링 숫자 */
.mainhistorynum_box .digit_current,
.mainhistorynum_box .digit_next{
    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:43px;

    text-align:center;

    transition:
        transform .7s cubic-bezier(.22,.61,.36,1),
        opacity .55s ease;
}


.mainhistorynum_box .digit_current{
    transform:translateY(0);
    opacity:1;
}


.mainhistorynum_box .digit_next{
    transform:translateY(100%);
    opacity:0;
}


.mainhistorynum_box .rolling_digit.is_rolling .digit_current{
    transform:translateY(-100%);
    opacity:0;
}


.mainhistorynum_box .rolling_digit.is_rolling .digit_next{
    transform:translateY(0);
    opacity:1;
}


.mainhistorynum_box .rolling_digit.no_transition .digit_current,
.mainhistorynum_box .rolling_digit.no_transition .digit_next{
    transition:none !important;
}


/* % */
.mainhistorynum_box .percent_hisnum{
    display:inline-block;

    margin:0 0 2px 3px;

    font-family:'Libre Bodoni',Georgia,serif;

    font-size:20px;
    line-height:1;

    font-weight:400;

    color:#fff;

    align-self:flex-end;
}


/* HOURS / PERSON / GROWTH */
.mainhistorynum_box .text_hisnum{
    display:block;

    margin:7px 0 0;

    font-family:'Pretendard',sans-serif;

    font-size:10px;
    line-height:1;

    font-weight:600;

    color:#fff;

    letter-spacing:1.7px;

    text-align:right;
}


/* 설명 */
.mainhistorynum_box .text_box{
    margin:14px 0 0;

    font-family:'Pretendard',sans-serif;

    font-size:12px;
    line-height:1.65;

    font-weight:400;

    color:rgba(255,255,255,.9);

    letter-spacing:-.35px;

    text-align:right;
}


/* 기준일 */
.mainhistorynum_box > .txt{
    margin:24px 0 0;

    font-family:'Pretendard',sans-serif;

    font-size:10px;
    line-height:1;

    font-weight:400;

    color:rgba(255,255,255,.75);

    text-align:right;

    letter-spacing:-.2px;
}


/* ==================================================
   PREMIUM MOVIE - MOBILE
================================================== */

.mainmovie_area{
    position:relative;
    width:100%;
    margin:0;
    padding:60px 0 0;

    background:#fff;
    overflow:hidden;
    box-sizing:border-box;
}


/* 기존 배경 이미지 / 상단 여백 제거 */
.mainmovie_area .bg_outer{
    width:100%;
    margin:0;
    padding:0;

    background:none !important;
}


/* ==================================================
   TITLE
================================================== */

.mainmovie_area .title_box{
    position:relative;

    width:calc(100% - 30px);

    margin:0 15px 26px;
    padding:0;

    box-sizing:border-box;
}


.mainmovie_area .title_box h2{
    margin:0;

    font-family:'Pretendard',sans-serif;

    font-size:20px;
    line-height:1.3;

    font-weight:800;

    color:#111;

    letter-spacing:-.8px;

    text-align:left;

    text-transform:none;
}


/* ==================================================
   VIDEO
================================================== */

.mainvideo_area{
    width:calc(100% - 30px);

    margin:0 15px;
    padding:0;

    box-sizing:border-box;
}

.mainvideo_box{
    position:relative;

    width:100%;

    margin:0;
    padding:0;

    background:#000;

    overflow:hidden;
}


/* 유튜브 */
.mainmovie_area .youtube_wrap{
    position:relative !important;

    width:100% !important;

    padding-top:56.25% !important;

    overflow:hidden;
}


.mainmovie_area .youtube_wrap iframe{
    position:absolute !important;

    top:0;
    left:0;

    width:100% !important;
    height:100% !important;

    border:0;
}
.mainmovie_area .youtube_wrap iframe{
    display:block !important;
    border:0 !important;
    outline:0 !important;
}

.mainmovie_area .youtube_wrap,
.mainmovie_area .mainvideo_box,
.mainmovie_area .mainvideo_area_inner{
    line-height:0 !important;
    border:0 !important;
    box-shadow:none !important;
    background:transparent !important;
}

/* ==================================================
   REAL STORY - MOBILE
================================================== */

.mainreal_area{
    position:relative;

    width:100%;

    padding:75px 0 0px 0px;

    background:#fff;

    overflow:hidden;

    box-sizing:border-box;
}


.mainreal_box{
    position:relative;

    width:100%;

    margin:0;
    padding:0;

    box-sizing:border-box;
}


/* ==================================================
   TITLE
================================================== */

.mainreal_area .title_main{
    margin:0 15px 30px;

    padding:0;

    box-sizing:border-box;
}


.mainreal_area .title_main h2{
    margin:0;

    font-family:'Pretendard',sans-serif;

    font-size:20px;
    line-height:1.4;

    font-weight:800;

    color:#111;

    letter-spacing:-.8px;

    text-align:left;

    text-transform:none;
}


/* REAL STORY. 첫 줄 */
.mainreal_area .title_main h2 br{
    display:block;
}


/* ==================================================
   REAL STORY SLIDER OUTER
================================================== */

.mainreal_area .outer_box{
    position:relative;

    width:100%;

    margin:0;
    padding:0;

    overflow:hidden;

    box-sizing:border-box;
}


/* ==================================================
   REAL STORY VIEWPORT
   좌우 15px 여백 고정
================================================== */

.mainreal_area .mreal_story{
    position:relative !important;

    width:calc(100% - 30px) !important;

    margin:0 15px !important;
    padding:0 !important;

    /* 양쪽 15px 밖으로 슬라이드가 보이지 않도록 */
    overflow:hidden !important;

    box-sizing:border-box;
}


/* ==================================================
   WRAPPER
================================================== */

.mainreal_area .mreal_story .swiper-wrapper{
    display:flex !important;

    margin:0 !important;
    padding:0 !important;

    box-sizing:border-box;
}


/* ==================================================
   CARD

   중요:
   기존 margin-right:10px을 제거하고
   slide 내부 padding으로 간격을 만듦.

   → Swiper가 계산하는 slide 폭과
     실제 이동 폭이 어긋나지 않음
================================================== */

.mainreal_area .mreal_story .swiper-slide{
    position:relative;

    flex-shrink:0;

    margin:0 !important;

    padding:0 10px 0 0 !important;

    box-sizing:border-box;
}


/* 마지막 콘텐츠는 오른쪽 간격 제거 */
.mainreal_area .mreal_story .swiper-slide:last-child{
    padding-right:0 !important;
}


/* ==================================================
   CONTENT
================================================== */

.mainreal_area .post-item{
    display:block;

    width:100%;
    height:auto;

    margin:0;
    padding:0;

    box-sizing:border-box;
}


.mainreal_area .post-item > a{
    display:block;

    width:100%;

    margin:0;
    padding:0;

    color:inherit;

    text-decoration:none;

    box-sizing:border-box;
}


.mainreal_area .content-preview{
    width:100%;

    margin:0;
    padding:0;

    box-sizing:border-box;
}


/* ==================================================
   IMAGE
================================================== */

.mainreal_area .img_box{
    position:relative;

    width:100%;

    aspect-ratio:4 / 5;

    margin:0;

    overflow:hidden;

    background:#f3f1ee;

    box-sizing:border-box;
}


.mainreal_area .img_box .bg{
    display:none;
}


.mainreal_area .img{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    overflow:hidden;
}


.mainreal_area .img img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    transform:scale(1);

    transition:transform .6s cubic-bezier(.16,1,.3,1);
}


/* 터치/호버 */
.mainreal_area .post-item:active .img img{
    transform:scale(1.025);
}


/* ==================================================
   TEXT
================================================== */

.mainreal_area .post-item dl{
    position:relative;

    margin:0;

    padding:18px 0 0;

    text-align:left;

    box-sizing:border-box;
}


/* 후기 제목 */
.mainreal_area .post-item dt{
    margin:0;

    font-family:'Pretendard',sans-serif;

    font-size:15px;
    line-height:1.55;

    font-weight:600;

    color:#191919;

    letter-spacing:-.55px;

    text-align:left;

    word-break:keep-all;

    /* 너무 길면 2줄까지만 */
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;
}


/* 동일한 subject가 중복 출력되므로 숨김 */
.mainreal_area .post-item .txt{
    display:none;
}


/* ==================================================
   VIEW STORY
================================================== */

.mainreal_area .post-item .btn{
    position:relative;

    display:inline-flex;

    align-items:center;

    min-width:105px;

    margin:18px 0 0;
    padding:0 20px 7px 0;

    border-bottom:1px solid rgba(34,34,34,.55);

    font-family:'Pretendard',sans-serif;

    font-size:10px;
    line-height:1;

    font-weight:600;

    color:#222;

    letter-spacing:.5px;

    text-align:left;

    text-transform:uppercase;
}


/* 기존 more + 문구 안 보이게 하고 새 텍스트 */
.mainreal_area .post-item .btn{
    font-size:0;
}


.mainreal_area .post-item .btn::before{
    content:"VIEW STORY";

    font-family:'Pretendard',sans-serif;

    font-size:10px;
    line-height:1;

    font-weight:600;

    letter-spacing:.6px;

    color:#222;
}


/* 오른쪽 화살표 */
.mainreal_area .post-item .btn::after{
    content:"";

    position:absolute;

    top:2px;
    right:2px;

    width:6px;
    height:6px;

    border-top:1px solid #222;
    border-right:1px solid #222;

    transform:rotate(45deg);
}


/* ==================================================
   기존 화살표 숨김
================================================== */

.mainreal_area .next,
.mainreal_area .prev,
.mainreal_area .slick-arrow,
.mainreal_area .paging_box{
    display:none !important;
}


/* ==================================================
   MOBILE REVIEW / CUSTOM REVIEW
================================================== */

.maininterview_area{
    position:relative;

    width:100%;

    margin:0;
    padding:0;

    background:#fff;

    overflow:hidden;

    box-sizing:border-box;
}


.maininterview_box{
    position:relative;

    width:100%;

    margin:0;
    padding:0;

    box-sizing:border-box;
}


/* ==================================================
   REVIEW BLOCK
================================================== */

.maininterview_area .mreview_outbox{
    position:relative;

    width:100%;

    margin:0;
    padding:0 15px;

    box-sizing:border-box;
}


/* 맞춤제작 후기 위 간격 */
.maininterview_area .mreview_outbox.rr{
    margin-top:58px;
}


/* ==================================================
   TITLE
================================================== */

.maininterview_area .mreview_outbox .title_main{
    position:relative;

    width:100%;

    margin:0 0 22px;
    padding:0;

    box-sizing:border-box;
}


.maininterview_area .mreview_outbox .title_main h2{
    margin:0;

    font-family:'Pretendard',sans-serif;

    font-size:20px;
    line-height:1.3;

    font-weight:800;

    color:#111;

    letter-spacing:-.8px;

    text-align:left;

    text-transform:none;
}


/* ==================================================
   OUTER
================================================== */

.maininterview_area .mreview_outbox .outer_box{
    position:relative;

    width:100%;

    margin:0;
    padding:0;

    box-sizing:border-box;
}


/* ==================================================
   REVIEW LIST
================================================== */

.maininterview_area .mreview_box{
    position:relative;

    width:100%;

    margin:0;
    padding:0;

    box-sizing:border-box;
}


/* Slick 높이 안정화 */
.maininterview_area .mreview_box .slick-list{
    width:100%;

    margin:0;
    padding:0 !important;

    overflow:hidden;
}


/* 개별 후기 */
.maininterview_area .mreview_box .box{
    position:relative;
    width:100%;

    margin:0;
    padding:17px 0;

    border-top:1px solid #e5e2dd;

    box-sizing:border-box;
    outline:0;
}


/* 마지막 아래 라인 */
.maininterview_area .mreview_box .slick-slide:last-child .box,
.maininterview_area .mreview_box .box:last-child{
    border-bottom:1px solid #e5e2dd;
}


/* 후기 링크 */
.maininterview_area .mreview_box .box a{
    display:block;

    width:100%;

    margin:0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:12px;
    line-height:1.55;

    font-weight:400;

    color:#555;

    letter-spacing:-.45px;

    text-align:left;

    text-decoration:none;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    box-sizing:border-box;
}


/* 상품명 */
.maininterview_area .mreview_box .box a .cate{
    display:inline;

    margin:0 8px 0 0;

    font-family:'Pretendard',sans-serif;

    font-size:11px;
    line-height:inherit;

    font-weight:600;

    color:#7f664b;

    letter-spacing:-.4px;
}


/* ==================================================
   PREV / NEXT
   기존 이미지 그대로 사용
================================================== */

.maininterview_area .mreview_outbox .outer_box .prev,
.maininterview_area .mreview_outbox .outer_box .next{
    position:absolute;

    top:-48px;

    width:auto;
    height:auto;

    margin:0;
    padding:0;

    border:0;
    background:none;

    cursor:pointer;

    z-index:10;
}

.maininterview_area .mreview_outbox .outer_box .prev{
    right:22px;
}

.maininterview_area .mreview_outbox .outer_box .next{
    right:0;
}


/* 기존 화살표 이미지 */
.maininterview_area .mreview_outbox .outer_box .prev img,
.maininterview_area .mreview_outbox .outer_box .next img{
    display:block;

    width:19px;
    height:auto;
}


/* ==================================================
   MOBILE SMALL WIDTH
================================================== */

@media screen and (max-width:360px){

    .maincategory_box li.maincategory-slide{
        width:calc(((100vw - 50px) / 3.25) + 7px) !important;

        margin:0 !important;
    }

    .maincategory_box li.maincategory-slide > a{
        width:calc(100% - 7px);
    }

    .maincategory_box li.maincategory-slide:last-child{
        width:calc((100vw - 50px) / 3.25) !important;
    }

    .maincategory_box li.maincategory-slide:last-child > a{
        width:100%;
    }

}


/* ==================================================
   MOBILE MAIN CATEGORY
   STABLE AUTO WIDTH SLIDER
================================================== */

.maincategory_area{
    position:relative;
    width:100%;

    padding:55px 0 60px;

    background:#fff;

    overflow:hidden;

    box-sizing:border-box;
}


.maincategory_box{
    position:relative;

    width:100%;

    margin:0;
    padding:0;

    box-sizing:border-box;
}


/* ==================================================
   TITLE
================================================== */

.maincategory_box .title_main{
    width:calc(100% - 30px);

    margin:0 15px 26px;
    padding:0;

    box-sizing:border-box;
}


.maincategory_box .title_main h2{
    margin:0;

    font-family:'Pretendard',sans-serif;

    font-size:20px;
    line-height:1.3;

    font-weight:800;

    color:#111;

    letter-spacing:-.8px;

    text-align:left;
}


/* ==================================================
   SLIDER VIEWPORT
   좌우 15px 안에서만 보이도록
================================================== */

.maincategory_slider{
    position:relative !important;

    width:calc(100% - 30px) !important;

    margin:0 15px !important;
    padding:0 !important;

    /*
       중요:
       슬라이드가 이동해도
       화면 양 사이드 15px 밖으로 보이지 않음
    */
    overflow:hidden !important;

    box-sizing:border-box;
}


/* ==================================================
   WRAPPER
================================================== */

.maincategory_box ul.maincategory-wrapper{
    position:relative;

    display:flex !important;

    margin:0 !important;
    padding:0 !important;

    font-size:0;
    letter-spacing:0;

    list-style:none;

    box-sizing:border-box;
}


/* ==================================================
   SLIDE
   Swiper 2.x snap 오차 방지
================================================== */

.maincategory_box li.maincategory-slide{
    position:relative;

    display:block !important;

    flex:0 0 auto !important;

    /*
       실제 이미지 폭 + 카드 간격 8px을
       하나의 slide 폭 안에 포함시킴
    */
    width:calc(((100vw - 54px) / 3.35) + 8px) !important;

    margin:0 !important;
    padding:0 !important;

    font-size:initial;
    letter-spacing:normal;

    box-sizing:border-box;
}


/*
   실제 보이는 카드는
   slide 전체 폭에서 오른쪽 8px 제외
*/
.maincategory_box li.maincategory-slide > a{
    display:block;

    width:calc(100% - 8px);

    margin:0;
    padding:0;

    color:#111;

    text-decoration:none;

    box-sizing:border-box;
}


/* ==================================================
   LAST SLIDE
   마지막 행거수납장은 간격 없이 전체 사용
================================================== */

.maincategory_box li.maincategory-slide:last-child{
    width:calc((100vw - 54px) / 3.35) !important;

    margin:0 !important;
}


.maincategory_box li.maincategory-slide:last-child > a{
    width:100%;
}


/* ==================================================
   IMAGE
================================================== */

.maincategory_box .ico_box,
.maincategory_box .ico_box[class*="ico"]{
    position:relative;

    width:100%;
    height:0;

    /*
       정사각형
       aspect-ratio 대신 구형 모바일 대응
    */
    padding-bottom:100%;

    margin:0;

    overflow:hidden;

    border-radius:6px;

    background:#f4f2ef !important;

    box-sizing:border-box;
}


/* 기존 ico 배경 제거 */
.maincategory_box .ico_box.ico1,
.maincategory_box .ico_box.ico2,
.maincategory_box .ico_box.ico3,
.maincategory_box .ico_box.ico4,
.maincategory_box .ico_box.ico5,
.maincategory_box .ico_box.ico6,
.maincategory_box .ico_box.ico7,
.maincategory_box .ico_box.ico8,
.maincategory_box .ico_box.ico9,
.maincategory_box .ico_box.ico10,
.maincategory_box .ico_box.ico11,
.maincategory_box .ico_box.ico12,
.maincategory_box .ico_box.ico13,
.maincategory_box .ico_box.ico14,
.maincategory_box .ico_box.ico15,
.maincategory_box .ico_box.ico16,
.maincategory_box .ico_box.ico17,
.maincategory_box .ico_box.ico18,
.maincategory_box .ico_box.ico19,
.maincategory_box .ico_box.ico20{
    background:none !important;
}


.maincategory_box .ico_box img{
    position:absolute;

    top:0;
    left:0;

    display:block;

    width:100%;
    height:100%;

    margin:0;
    padding:0;

    opacity:1 !important;

    filter:none !important;

    object-fit:cover;
    object-position:center;

    transform:scale(1);

    transition:
        transform .35s ease;

    box-sizing:border-box;
}


/* 터치 시 살짝 */
.maincategory_box li.maincategory-slide:active .ico_box img{
    transform:scale(1.025);
}


/* ==================================================
   TEXT
================================================== */

.maincategory_box .text{
    margin:9px 0 0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:11px;
    line-height:1.35;

    font-weight:500;

    color:#222;

    letter-spacing:-.4px;

    text-align:center;

    white-space:nowrap;

    overflow:hidden;
    text-overflow:ellipsis;
}


/* ==================================================
   PROGRESS
   슬라이드와 동일한 좌우 끝선
================================================== */

.maincategory_progress{
    position:relative;

    width:calc(100% - 30px);

    height:1px;

    margin:25px 15px 0;

    padding:0;

    overflow:hidden;

    background:#e8e4df;

    box-sizing:border-box;
}


.maincategory_progress span{
    position:absolute;

    top:0;
    left:0;

    width:22%;
    height:100%;

    margin:0;
    padding:0;

    background:#222;

    transition:none;

    box-sizing:border-box;
}


/* ==================================================
   SMALL MOBILE
================================================== */

@media screen and (max-width:360px){

    .maincategory_area{
        padding-top:50px;
        padding-bottom:55px;
    }

    .maincategory_box .title_main{
        margin-bottom:22px;
    }

    .maincategory_box .title_main h2{
        font-size:19px;
    }

    .maincategory_box li.maincategory-slide{
        width:calc((100vw - 50px) / 3.25) !important;
        margin-right:7px !important;
    }

    .maincategory_box .text{
        font-size:10px;
    }

    .maincategory_progress{
        margin-top:22px;
    }

}

/* ==================================================
   MAIN WALNUT - MOBILE
   CLEAN FINAL VERSION
================================================== */


/* ==================================================
   AREA
================================================== */

.mainwalnut_area{
    position:relative;
    width:100%;
    margin:0;
    padding:72px 0 85px;
    background:#fff;
    overflow:hidden;
    box-sizing:border-box;
}

.mainwalnut_box{
    position:relative;
    width:100%;
    margin:0;
    padding:0;
}


/* ==================================================
   TITLE
================================================== */

.mainwalnut_title{
    margin:0 15px 42px;
    padding:0;
}

.mainwalnut_title h2{
    margin:0;
    padding:0;

    font-family:'Pretendard',sans-serif;
    font-size:20px;
    line-height:1.3;
    font-weight:800;

    color:#111;
    letter-spacing:-.8px;
}


/* ==================================================
   CONTENT GRID
   위 영역들과 동일하게 좌우 15px
================================================== */

.mainwalnut_layout{
    position:relative;

    width:calc(100% - 30px);

    margin:0 15px;
    padding:0;

    box-sizing:border-box;
}


/* ==================================================
   COMMON
================================================== */

.walnut_scene{
    position:relative;
    width:100%;
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.mainwalnut_item{
    position:absolute;

    margin:0 !important;
    padding:0 !important;

    opacity:1 !important;
    transform:none !important;

    box-sizing:border-box;
}

.mainwalnut_link{
    display:block;
    width:100%;
    text-decoration:none;
}

.mainwalnut_img{
    position:relative;

    width:100%;

    margin:0;
    padding:0;

    overflow:hidden;

    opacity:1 !important;
    transform:none !important;
}

.mainwalnut_img img{
    display:block;

    width:100%;
    height:auto;

    margin:0;
    padding:0;
}


/* ==================================================
   SCENE 01
   01 + WALNUT WOOD + 02
================================================== */

.walnut_scene01{
    height:455px;
}


/* 01 */
.walnut_scene01 .walnut_item01{
    top:0;
    left:0;

    width:46%;
}


/* 세로 영문 */
.walnut_scene01 .walnut_item01::after{
    content:"Luxurious and\A Calm Mood";

    position:absolute;

    top:0;
    left:calc(100% + 12px);

    white-space:pre;

    font-family:'Pretendard',sans-serif;
    font-size:9px;
    line-height:1.25;
    font-weight:700;

    color:#111;

    writing-mode:vertical-rl;
    text-orientation:mixed;
}


/* Walnut Wood */
.walnut_scene01 .mainwalnut_intro{
    position:absolute;

    top:320px;
    left:24%;

    width:37%;

    margin:0;
    padding:0;

    text-align:right;

    opacity:1 !important;
    transform:none !important;
}

.mainwalnut_intro .eyebrow{
    display:block;

    margin:0 0 5px;

    font-family:'Pretendard',sans-serif;
    font-size:8px;
    line-height:1;
    font-weight:400;

    color:#555;
}

.mainwalnut_intro strong{
    display:block;

    margin:0;

    font-family:'Pretendard',sans-serif;
    font-size:18px;
    line-height:1.05;
    font-weight:800;

    color:#111;
    letter-spacing:-1px;

    white-space:nowrap;
}


/* 02 */
.walnut_scene01 .walnut_item02{
    top:175px;
    right:3%;

    width:31%;
}

.mainwalnut_caption{
    margin:11px 0 0;
    padding:0;

    opacity:1 !important;
    transform:none !important;
}

.mainwalnut_caption p{
    margin:0;

    font-family:'Pretendard',sans-serif;
    font-size:9px;
    line-height:1.5;
    font-weight:500;

    color:#333;
    letter-spacing:-.4px;

    white-space:nowrap;
}

.mainwalnut_caption span{
    display:block;

    margin:3px 0 0;

    font-family:'Pretendard',sans-serif;
    font-size:7px;
    line-height:1.45;

    color:#837970;

    white-space:nowrap;
}


/* ==================================================
   SCENE 02
   POINT01 + 03 / 05 / 06
================================================== */

.walnut_scene02{
    position:relative;

    height:520px;

    margin:0;
    padding:0;

    border:0 !important;

    box-sizing:border-box;
}


/* 상단선
   04 이미지 왼쪽 끝 → 오른쪽 콘텐츠 끝
*/
.walnut_scene02::before{
    content:"";

    position:absolute;

    top:0;
    left:35%;
    right:0;

    height:1px;

    background:#999;

    z-index:1;
}


/* 하단선
   05 이미지 왼쪽 끝 → 오른쪽 콘텐츠 끝
*/
.walnut_scene02::after{
    content:"";

    position:absolute;

    bottom:0;
    left:35%;
    right:0;

    height:1px;

    background:#999;

    z-index:1;
}


/* --------------------------------------------------
   04 / POINT 01
-------------------------------------------------- */

.walnut_scene02 .walnut_item04{
    position:absolute;

    top:0;
    left:35%;

    width:31%;
}


/* --------------------------------------------------
   03 / LEFT
-------------------------------------------------- */

.walnut_scene02 .walnut_item03{
    position:absolute;

    top:215px;
    left:0;

    width:30%;
}


/* --------------------------------------------------
   05 / CENTER
-------------------------------------------------- */

.walnut_scene02 .walnut_item05{
    position:absolute;

    top:290px;
    left:35%;

    width:31%;
}


/* --------------------------------------------------
   06 / RIGHT
-------------------------------------------------- */

.walnut_scene02 .walnut_item06{
    position:absolute;

    top:215px;
    right:0;

    width:29%;
}


/* 기존 가짜 선 제거 */
.walnut_scene02 .walnut_item03::after,
.walnut_scene02 .walnut_item06::after{
    content:none !important;
}



/* ==================================================
   SCENE 03
   HERITAGE WALNUT SERIES
================================================== */

.walnut_scene03{
    position:relative;

    /*
       여기서는 다시 화면 전체로 넓히지 않음.
       위 이미지들과 동일한 15px 콘텐츠 그리드.
    */
    width:100%;

    margin:0;
    padding:58px 0 32px;

    display:grid;

    /*
       왼쪽 텍스트 / 여백 / 오른쪽 이미지
    */
    grid-template-columns:39% 3% 58%;

    align-items:center;

    border:0 !important;

    background:#fff;

    box-sizing:border-box;
}


/* ==================================================
   위 선에서 내려오는 세로선

   시안처럼 독립된 연결선.
   07 이미지 자체에 붙이지 않음.
================================================== */

.walnut_scene03::before{
    content:"";

    position:absolute;

    top:0;
    left:42%;

    width:1px;
    height:58px;

    background:#999;

    z-index:5;
}


/*
   Scene03에는 위 가로선 없음.
   그 선은 Scene02의 하단선이 담당.
*/
.walnut_scene03::after{
    content:none !important;
}


/* ==================================================
   LEFT TEXT
================================================== */

.walnut_scene03 .mainwalnut_bottom_text{
    position:relative !important;

    top:auto !important;
    left:auto !important;

    grid-column:1 !important;
    grid-row:1 !important;

    width:100% !important;
    height:auto !important;

    margin:0 !important;

    /*
       시안처럼 왼쪽 독립 세로선과
       텍스트 사이 간격
    */
    padding:0 0 0 16px !important;

    align-self:center !important;

    box-sizing:border-box;

    opacity:1 !important;
    transform:none !important;

    z-index:3;
}


/* 텍스트 왼쪽 독립 세로선 */
.walnut_scene03 .mainwalnut_bottom_text::before{
    content:"" !important;

    display:block !important;

    position:absolute;

    top:0;
    bottom:0;
    left:0;

    width:1px;

    background:#aaa;
}


/* 다른 가로선 절대 생성하지 않음 */
.walnut_scene03 .mainwalnut_bottom_text::after{
    content:none !important;
    display:none !important;
}


/* ==================================================
   HERITAGE TEXT
================================================== */

.mainwalnut_bottom_text .eyebrow{
    display:block;

    margin:0 0 10px !important;
    padding:0 !important;

    font-family:'Pretendard',sans-serif;

    font-size:8px;
    line-height:1.2;
    font-weight:500;

    color:#333;
}


.main .mainwalnut_area .mainwalnut_bottom_text h3{
    display:block !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;

    font-family:'Pretendard',sans-serif !important;

    font-size:17px !important;
    line-height:1.25 !important;

    font-weight:800 !important;

    color:#111 !important;

    letter-spacing:-1px !important;

    white-space:nowrap;
}


.mainwalnut_bottom_text > p{
    margin:18px 0 0 !important;
    padding:0 !important;

    font-family:'Pretendard',sans-serif;

    font-size:8px;
    line-height:1.55;

    font-weight:500;

    color:#333;

    white-space:nowrap;
}


.mainwalnut_bottom_text .sub_text{
    display:block;

    margin:4px 0 0 !important;

    font-family:'Pretendard',sans-serif;

    font-size:7px;
    line-height:1.4;

    color:#81776e;

    white-space:nowrap;
}


/* ==================================================
   BUTTON
================================================== */

.mainwalnut_button{
    display:flex;

    align-items:center;
    justify-content:space-between;

    width:108px;
    height:31px;

    margin:23px 0 0 !important;
    padding:0 10px;

    border:1px solid #888;

    background:#fff;

    box-sizing:border-box;

    font-family:'Pretendard',sans-serif;

    font-size:7px;
    line-height:1;

    font-weight:700;

    color:#111;

    text-decoration:none;
}


/* ==================================================
   07 IMAGE
================================================== */

.walnut_scene03 .walnut_item07{
    position:relative !important;

    top:auto !important;
    left:auto !important;
    right:auto !important;

    grid-column:3 !important;
    grid-row:1 !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    align-self:center !important;

    z-index:2;
}


/* 이미지에는 선을 절대 붙이지 않음 */
.walnut_scene03 .walnut_item07::before,
.walnut_scene03 .walnut_item07::after{
    content:none !important;
}


/* ==================================================
   SCENE03 화면 끝 ↔ 화면 끝 하단선

   mainwalnut_layout이 좌우 15px이므로
   15px씩 밖으로 빼서 full width
================================================== */

.walnut_scene03{
    border-bottom:1px solid transparent !important;
}

.walnut_scene03 .walnut_item07{
    margin-bottom:0 !important;
}


/*
   하단선 전용.
   텍스트 왼쪽 세로선과 연결되지 않고
   화면 양끝까지 독립적으로 지나감.
*/
.mainwalnut_area::after{
    content:"";

    position:absolute;

    left:0;
    right:0;

    bottom:85px;

    height:1px;

    background:#aaa;
}

/* ==================================================
   04 - POINT 01
================================================== */

.walnut_scene02 .walnut_item04{
    top:0;
    left:35%;

    width:31%;
}


/* ==================================================
   EDITORIAL CAPTION
================================================== */

.mainwalnut_editorial_caption{
    margin:11px 0 0;
    padding:0;

    opacity:1 !important;
    transform:none !important;
}

.mainwalnut_editorial_caption span{
    display:block;

    margin:0 0 6px;

    font-family:'Pretendard',sans-serif;
    font-size:7px;
    line-height:1;
    font-weight:500;

    color:#857a71;
}

.mainwalnut_editorial_caption p{
    margin:0;

    font-family:Georgia,'Times New Roman',serif;
    font-size:10px;
    line-height:1.35;
    font-weight:400;
    font-style:italic;

    color:#111;
}


/* ==================================================
   03 - LEFT
================================================== */

.walnut_scene02 .walnut_item03{
    top:215px;
    left:0;

    width:30%;
}

.mainwalnut_product_title{
    margin:12px 0 0;
    padding:0;

    text-align:right;

    opacity:1 !important;
    transform:none !important;
}

.mainwalnut_product_title span{
    display:block;

    margin:0 0 5px;

    font-family:'Pretendard',sans-serif;
    font-size:7px;
    line-height:1;

    color:#666;
}

.mainwalnut_product_title strong{
    display:block;

    margin:0;

    font-family:'Pretendard',sans-serif;
    font-size:16px;
    line-height:1.05;
    font-weight:800;

    color:#111;

    letter-spacing:-.8px;

    white-space:nowrap;
}

.walnut_item03::after{
    content:none !important;
}


/* ==================================================
   05 - CENTER
================================================== */

.walnut_scene02 .walnut_item05{
    top:auto !important;
    bottom:0 !important;

    left:35%;

    width:31%;
}


/* ==================================================
   06 - RIGHT
================================================== */

.walnut_scene02 .walnut_item06{
    top:215px;
    right:0;

    width:29%;
}

.walnut_item06::after{
    content:none !important;
}


/* ==================================================
   SCENE 03
   HERITAGE WALNUT SERIES
================================================== */

.walnut_scene03{
    position:relative;

    /*
       mainwalnut_layout이 좌우 15px이므로
       다시 15px씩 바깥으로 빼서 화면 전체 폭 사용
    */
    width:calc(100% + 30px);

    margin:0 0 0 -15px;

    padding:58px 15px 32px;

    display:grid;

    /*
       왼쪽 텍스트 / 여백 / 오른쪽 이미지
    */
    grid-template-columns:37% 4% 59%;

    align-items:center;

    /*
       PREMIUM SERIES 아래 선
       화면 왼쪽 끝 → 오른쪽 끝
    */
    border-bottom:1px solid #aaa;

    background:#fff;

    box-shadow:none !important;

    box-sizing:border-box;
}


/* ==================================================
   LEFT TEXT
================================================== */

.walnut_scene03 .mainwalnut_bottom_text{
    position:relative !important;

    top:auto !important;
    left:auto !important;

    grid-column:1;

    width:100% !important;
    height:auto !important;

    margin:0 !important;
    padding:0 !important;

    /*
       오른쪽 이미지의 세로 중앙
    */
    align-self:center;

    opacity:1 !important;
    transform:none !important;

    box-sizing:border-box;

    z-index:3;
}


/* 기존 왼쪽 세로선 / 짧은선 전부 제거 */
.walnut_scene03 .mainwalnut_bottom_text::before,
.walnut_scene03 .mainwalnut_bottom_text::after{
    content:none !important;
    display:none !important;
}


/* ==================================================
   HERITAGE WALNUT
================================================== */

.mainwalnut_bottom_text .eyebrow{
    display:block;

    margin:0 0 10px !important;
    padding:0 !important;

    font-family:'Pretendard',sans-serif;

    font-size:8px;
    line-height:1.2;

    font-weight:500;

    color:#333;
}


/* ==================================================
   TITLE
   전역 .main h3 스타일까지 완전 차단
================================================== */

.main .mainwalnut_area .mainwalnut_bottom_text h3{
    display:block !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-top:0 !important;

    font-family:'Pretendard',sans-serif !important;

    font-size:17px !important;
    line-height:1.25 !important;

    font-weight:800 !important;

    color:#111 !important;

    letter-spacing:-1px !important;

    white-space:nowrap;
}


/* ==================================================
   DESCRIPTION
================================================== */

.mainwalnut_bottom_text > p{
    margin:18px 0 0 !important;
    padding:0 !important;

    font-family:'Pretendard',sans-serif;

    font-size:8px;
    line-height:1.55;

    font-weight:500;

    color:#333;

    letter-spacing:-.3px;

    white-space:nowrap;
}


.mainwalnut_bottom_text .sub_text{
    display:block;

    margin:4px 0 0 !important;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:7px;
    line-height:1.4;

    font-weight:400;

    color:#81776e;

    white-space:nowrap;
}


/* ==================================================
   PREMIUM SERIES BUTTON
================================================== */

.mainwalnut_button{
    display:flex;

    align-items:center;
    justify-content:space-between;

    width:108px;
    height:31px;

    margin:23px 0 0 !important;
    padding:0 10px;

    border:1px solid #888;

    background:#fff;

    box-sizing:border-box;

    font-family:'Pretendard',sans-serif;

    font-size:7px;
    line-height:1;

    font-weight:700;

    color:#111;

    text-decoration:none;
}


.mainwalnut_button > span{
    display:block;

    font-size:12px;
    line-height:1;
}


/* ==================================================
   RIGHT IMAGE 07
================================================== */

.walnut_scene03 .walnut_item07{
    position:relative !important;

    top:auto !important;
    left:auto !important;
    right:auto !important;

    grid-column:3 !important;
    grid-row:1 !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    align-self:center !important;

    z-index:2;
}

/* ==================================================
   시안의 L자 선

            ─────────────
            │
            │
        [ 07 IMAGE ]

   세로선은 07 이미지 폭의 약 42% 지점
================================================== */

/* ==================================================
   SCENE 03 L LINE
   05 이미지 오른쪽 끝 기준
================================================== */

.walnut_scene03::before{
    content:"";

    position:absolute;

    top:0;

    /*
       화면 15px 여백을 제외한
       mainwalnut_layout 기준 66% 지점
    */
    left:calc(15px + (100% - 30px) * .66);

    width:1px;
    height:58px;

    background:#999;

    z-index:5;
}


.walnut_scene03::after{
    content:"";

    position:absolute;

    top:0;

    left:calc(15px + (100% - 30px) * .66);

    right:15px;

    height:1px;

    background:#999;

    z-index:5;
}


/* ==================================================
   IMAGE
================================================== */

.walnut_scene03 .walnut_item07 .mainwalnut_img{
    width:100%;
}

.walnut_scene03 .walnut_item07 .mainwalnut_img img{
    display:block;

    width:100%;
    height:auto;
}


/* ==================================================
   360 이하
================================================== */

@media screen and (max-width:360px){

    .walnut_scene03{
        padding-top:50px;
        padding-bottom:28px;

        grid-template-columns:38% 3% 59%;
    }


    .walnut_scene03 .walnut_item07::before{
        top:-50px;
        height:50px;
    }


    .walnut_scene03 .walnut_item07::after{
        top:-50px;
    }


    .main .mainwalnut_area .mainwalnut_bottom_text h3{
        font-size:15px !important;
    }

}

/* ==================================================
   SMALL MOBILE
================================================== */

@media screen and (max-width:360px){

    .mainwalnut_area{
        padding-top:65px;
        padding-bottom:75px;
    }

    .mainwalnut_title{
        margin-bottom:36px;
    }

    .mainwalnut_title h2{
        font-size:19px;
    }

    .walnut_scene01{
        height:400px;
    }

    .walnut_scene01 .mainwalnut_intro{
        top:215px;
    }

    .walnut_scene01 .walnut_item02{
        top:155px;
    }

    .walnut_scene02{
        height:445px;
    }

    .walnut_scene02 .walnut_item03,
    .walnut_scene02 .walnut_item06{
        top:195px;
    }

    .walnut_scene02 .walnut_item05{
        top:265px;
    }

    .walnut_scene03{
        height:270px;
    }

    .walnut_scene03 .walnut_item07,
    .walnut_scene03 .mainwalnut_bottom_text{
        top:52px;
    }

    .walnut_scene03::after{
        height:52px;
    }

    .main .mainwalnut_area .mainwalnut_bottom_text h3{
        font-size:15px !important;
    }

}

/* ==================================================
   03 장식장 이미지 위 가로선
   화면 왼쪽 끝 → 장식장 이미지 오른쪽 끝
================================================== */

.walnut_scene02 .walnut_item03::before{
    content:"";

    position:absolute;

    /* 이미지 윗선과 동일 높이 */
    top:0;

    /*
       walnut layout 자체가 왼쪽 15px 안쪽이므로
       -15px 해서 화면 끝까지 연장
    */
    left:-15px;

    /* 장식장 오른쪽 끝까지 */
    right:0;

    height:1px;

    background:#999;

    z-index:1;
}


/*.mainmdpickban_area{background:#efedea;}
.mainmdpickban_box{position:relative;overflow:hidden;width:100%;height:200px;background:#ebe8e3 url("//dainpark06.cafe24.com/sunny/images/mobilebg_mainmdpickban.jpg") no-repeat right center;background-size:cover;}
.mainmdpickban_area dl{padding:55px 20px 0;}
.mainmdpickban_area .txt{font-family: 'Pretendard', sans-serif;font-size:13px;line-height:18px;color:#c3b6ab;letter-spacing:-1px;margin:0 0 12px;}
.mainmdpickban_area dt{font-family: 'Pretendard', sans-serif;font-size:15px;line-height:23px;color:#201f1e;letter-spacing:-1px;}*/

.mainmdpickban_area{background:#efedea;}
.mainmdpickban_box{position:relative;overflow:hidden;width:100%;}
.mainmdpickban_area dl{padding:25px 20px;background:#ebe7e4;}
.mainmdpickban_area .txt{font-family: 'Pretendard', sans-serif;font-size:12px;line-height:19px;color:#97938f;letter-spacing:-1px;margin:0 0 12px;font-weight:700;}
.mainmdpickban_area dt{font-family: 'Pretendard', sans-serif;font-size:15px;line-height:23px;color:#201f1e;letter-spacing:-1px;font-weight:400;}
.mainmdpickban_area .img{width:100%;height:200px;background:url("//dainpark06.cafe24.com/sunny/images/bg_mainmdpickban.jpg") no-repeat 62% center;background-size:cover;}

/* ==================================================
   MD PICK - MOBILE
================================================== */

.main_mdpick{
    position:relative;
    width:100%;

    margin:0;
    padding:0 0 70px;

    background:#fff;
    overflow:hidden;

    box-sizing:border-box;
}


/* 제목만 좌우 15px */
.main_mdpick > .title_main{
    width:calc(100% - 30px);

    margin:0 15px 28px;
    padding:0;

    box-sizing:border-box;
}


.main_mdpick > .title_main h2{
    margin:0;

    font-family:'Pretendard',sans-serif;

    font-size:20px;
    line-height:1.3;

    font-weight:800;

    color:#111;

    letter-spacing:-.8px;

    text-align:left;
    text-transform:none;
}


/* PRODUCT BOX */
.main_mdpick > .mproduct_box{
    width:100%;

    margin:0;
    padding:0;

    box-sizing:border-box;
}

/* 상품 링크 */
.main_mdpick .box{
    display:block;

    width:100%;

    margin:0;
    padding:0;

    text-decoration:none;

    box-sizing:border-box;
}


/* IMAGE */
.main_mdpick .img_box{
    position:relative;

    width:100%;
    height:auto;

    margin:0;
    padding:0;

    overflow:hidden;

    box-sizing:border-box;
}


.main_mdpick .img_box .bg{
    display:none;
}


.main_mdpick .img_box .img{
    width:100%;

    margin:0;
    padding:0;
}


.main_mdpick .img_box img{
    display:block;

    width:100%;
    height:auto;

    margin:0;

    object-fit:cover;
}


/* INFO */
.main_mdpick .info_box{
    width:100%;

    margin:14px 0 0;
    padding:0;

    text-align:left;

    box-sizing:border-box;
}


.main_mdpick .info_box dl{
    margin:0;
    padding:0;
}


/* 상품명 */
.main_mdpick .info_box .tit{
    margin:0;

    font-family:'Pretendard',sans-serif;

    font-size:13px;
    line-height:1.45;

    font-weight:600;

    color:#222;

    letter-spacing:-.45px;

    word-break:keep-all;
}


/* 서브명 */
.main_mdpick .info_box .txt{
    margin:5px 0 0;

    font-family:'Pretendard',sans-serif;

    font-size:11px;
    line-height:1.45;

    font-weight:400;

    color:#57320a;

    letter-spacing:-.3px;

    word-break:keep-all;
}


/* PRICE */
.main_mdpick .price_box{
    margin:9px 0 0;

    font-family:'Pretendard',sans-serif;

    line-height:1.5;
}


/* 할인율 */
.main_mdpick .discount_rate{
    display:inline-block;

    margin-right:5px;

    font-size:12px;
    font-weight:700;

    color:#9b6741;
}


/* 판매가 */
.main_mdpick .price{
    font-size:13px;
    font-weight:700;

    color:#222;
}


/* 정가 */
.main_mdpick .strike{
    display:block;

    margin-bottom:2px;

    font-size:10px;
    font-weight:400;

    color:#aaa;
}


/* 쿠폰 / 한정특가 / 전시품할인 배지는
   현재 공통 모바일 스타일 그대로 사용 */

/* ==================================================
   SERIES
================================================== */

.mainseries_area{
    position:relative;

    width:100%;

    margin:0;
    padding:58px 0 62px;

    background:#f5f3f0;

    overflow:hidden;

    box-sizing:border-box;
}


/* ==================================================
   INNER
================================================== */

.mainseries_box{
    position:relative;

    width:100%;

    margin:0;
    padding:0;

    box-sizing:border-box;
}


/* ==================================================
   TITLE
================================================== */

.mainseries_title{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:space-between;

    width:calc(100% - 30px);

    margin:0 15px 28px;
    padding:0;

    box-sizing:border-box;
}


.mainseries_title h2{
    margin:0;
    padding:0;

    font-size:22px;
    font-weight:700;

    line-height:1.2;

    color:#111;

    letter-spacing:-0.04em;
}

/* ==================================================
   SHOWROOM BANNER - MOBILE
================================================== */

.basic_showroom_banner{
    position:relative;

    width:100%;
    height:430px;

    margin:0;
    padding:0;

    overflow:hidden;

    background:
        url("//dainpark06.cafe24.com/sunny/images/mobile_basic_showroom.jpg")
        no-repeat center center;

    background-size:cover;

    box-sizing:border-box;
}


/* 내부 */
.basic_showroom_banner_inner{
    position:relative;

    width:100%;
    height:100%;

    margin:0;
    padding:0 15px;

    box-sizing:border-box;
}


/* 텍스트 */
.basic_showroom_banner_text{
    position:absolute;

    left:15px;
    right:15px;
    top:46px;

    margin:0;
    padding:0;

    z-index:2;
}


/* SHOWROOM INFO */
.basic_showroom_banner_text .eyebrow{
    margin:0 0 14px;

    font-family:'Pretendard',sans-serif;

    font-size:12px;
    line-height:1;

    font-weight:700;

    color:#222;

    letter-spacing:.2px;
}


/* 메인 제목 */
.basic_showroom_banner_text h2{
    margin:0;

    font-family:'Pretendard',sans-serif;

    font-size:22px;
    line-height:1.45;

    font-weight:800;

    color:#111;

    letter-spacing:-1px;

    word-break:keep-all;
}


/* 설명 */
.basic_showroom_banner_text .description{
    margin:18px 0 0;

    font-family:'Pretendard',sans-serif;

    font-size:12px;
    line-height:1.7;

    font-weight:400;

    color:#555;

    letter-spacing:-.35px;

    word-break:keep-all;
}


/* 버튼 */
.basic_showroom_banner_button{
    position:absolute;

    right:15px;
    bottom:280px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    width:145px;
    height:44px;

    margin:0;
    padding:0 15px;

    border:1px solid rgba(34,34,34,.65);
    background:rgba(255,255,255,.08);

    font-family:'Pretendard',sans-serif;
    font-size:11px;
    line-height:1;
    font-weight:600;

    color:#111;
    text-decoration:none;

    box-sizing:border-box;

    /* 이것 추가 */
    z-index:10;
    pointer-events:auto;
    cursor:pointer;
}


/* + */
.basic_showroom_banner_button .plus{
    display:inline-block;

    font-size:14px;
    line-height:1;

    font-weight:400;

    color:inherit;
}


/* ==================================================
   SERIES MORE +
   PC 스타일 그대로
================================================== */

.mainseries_more{
    display:inline-flex;
    align-items:center;

    gap:4px;

    margin:0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:12px;
    line-height:1;

    font-weight:500;

    color:#b8ada3;

    text-decoration:none;
    text-transform:uppercase;

    letter-spacing:0;

    white-space:nowrap;
}


.mainseries_more span{
    display:inline-block;

    margin:0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:12px;
    line-height:1;

    font-weight:400;

    color:#b8ada3;
}

/* ==================================================
   OUTER
================================================== */

.mainseries_outer{
    position:relative;

    width:100%;

    margin:0;
    padding:0;

    box-sizing:border-box;
}


/* PC 화살표 모바일에서는 숨김 */
.mainseries_prev,
.mainseries_next{
    display:none !important;
}


/* ==================================================
   SWIPER VIEWPORT

   왼쪽 시작선 15px
   오른쪽도 스와이프 마지막에 15px 확보
================================================== */

.mainseries_slider{
    position:relative !important;

    width:calc(100% - 30px) !important;

    margin:0 15px !important;
    padding:0 !important;

    overflow:hidden !important;

    box-sizing:border-box;
}

/* ==================================================
   WRAPPER
================================================== */

.mainseries_slider .swiper-wrapper{
    position:relative;

    display:flex !important;

    margin:0 !important;
    padding:0 !important;

    box-sizing:border-box;
}


/* ==================================================
   SLIDE

   약 3개가 보이는 크기
   간격은 slide 폭 안에 포함
================================================== */

.mainseries_slider .swiper-slide{
    float:left;
    box-sizing:border-box;
}

.mainseries_slider .swiper-slide img{
    display:block;
    width:100%;
    height:auto;
}

/* ==================================================
   LINK
================================================== */

.mainseries_slider .swiper-slide > a{
    display:block;

    width:calc(100% - 15px);

    margin:0;
    padding:0;

    color:#111;
    text-decoration:none;

    box-sizing:border-box;
}


/* 마지막 슬라이드는 간격 없음 */
.mainseries_slider .swiper-slide:last-child > a{
    width:100%;
}


/* ==================================================
   IMAGE
================================================== */

.mainseries_img{
    position:relative;

    width:100%;
    aspect-ratio:1 / 1;

    margin:0 auto;

    overflow:hidden;

    border-radius:50%;

    background:#eee;

    box-sizing:border-box;
}


.mainseries_img img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    border:0;
}


/* ==================================================
   TEXT
================================================== */

.mainseries_text{
    width:100%;

    margin:12px 0 0;
    padding:0;

    text-align:center;

    box-sizing:border-box;
}


.mainseries_text span{
    display:block;

    margin:0 0 4px;

    font-size:10px;
    font-weight:400;

    line-height:1.3;

    color:#c3b6ab;

    white-space:nowrap;
}


.mainseries_text strong{
    display:block;

    margin:0;
    padding:0;

    font-size:13px;
    font-weight:600;

    line-height:1.35;

    color:#222;

    letter-spacing:-0.03em;

    white-space:nowrap;
}


/* ==================================================
   PROGRESS

   HTML에는 없으므로 JS 단계에서 추가 예정
================================================== */

.mainseries_progress{
    position:relative;

    width:calc(100% - 30px);
    height:1px;

    margin:30px 15px 0;

    background:#d8d5d1;

    overflow:hidden;
}


.mainseries_progress span{
    position:absolute;

    top:0;
    left:0;

    width:22%;
    height:1px;

    background:#111;
}


/* ==================================================
   SMALL MOBILE
================================================== */

@media screen and (max-width:360px){

    .mainseries_area{
        padding:52px 0 56px;
    }


    .mainseries_title{
        margin-bottom:24px;
    }


    .mainseries_title h2{
        font-size:19px;
    }


    .mainseries_text{
        margin-top:10px;
    }


    .mainseries_text span{
        font-size:9px;
    }


    .mainseries_text strong{
        font-size:12px;
    }


    .mainseries_progress{
        margin-top:26px;
    }

}


/* ==================================================
   MOBILE NEW PRODUCT
   NEW! 새롭게 선보이는 원목가구
================================================== */

.mainnew_area{
    position:relative;
    width:100%;
    margin:0;
    padding:70px 0 0 0;
    background:#fff;
    overflow:hidden;
    box-sizing:border-box;
}

.mainnew_box{
    position:relative;
    width:100%;
    margin:0;
    padding:0;
    box-sizing:border-box;
}


/* ==================================================
   TITLE
================================================== */

.mainnew_title{
    width:calc(100% - 30px);
    margin:0 15px 30px;
    padding:0;
    box-sizing:border-box;
}

.mainnew_title h2{
    margin:0;
    padding:0;

    font-family:'Pretendard',sans-serif;
    font-size:20px;
    line-height:1.3;
    font-weight:800;

    color:#111;
    letter-spacing:-.8px;

    text-align:left;
}


/* ==================================================
   OUTER
================================================== */

.mainnew_outer{
    position:relative;

    width:100%;

    margin:0;
    padding:0;

    overflow:hidden;

    box-sizing:border-box;
}


/* ==================================================
   SLIDER VIEWPORT
   좌우 15px 여백 유지
================================================== */

.mainnew_slider{
    position:relative !important;

    width:calc(100% - 30px) !important;

    margin:0 15px !important;
    padding:0 !important;

    /*
       스와이프되는 콘텐츠가
       양쪽 15px 밖으로 보이지 않게
    */
    overflow:hidden !important;

    box-sizing:border-box;
}


/* ==================================================
   WRAPPER
================================================== */

.mainnew_slider .swiper-wrapper{
    display:flex !important;

    width:auto;

    margin:0 !important;
    padding:0 !important;

    box-sizing:border-box;
}


/* ==================================================
   CARD
   10px 간격을 slide 자체 폭 안에 포함
================================================== */

.mainnew_item{
    position:relative;

    display:block;

    flex:0 0 auto;

    /*
       실제 카드 44vw
       + 카드 사이 간격 10px
    */
    width:calc(44vw + 10px) !important;

    margin:0 !important;
    padding:0 !important;

    box-sizing:border-box;
}


/*
   실제 보이는 상품 영역은
   slide 폭에서 오른쪽 10px 제외
*/
.mainnew_item .mainnew_link{
    width:calc(100% - 10px) !important;
}


/*
   마지막 상품은 간격이 필요 없으므로
   실제 카드 폭만 사용
*/
.mainnew_item:last-child{
    width:44vw !important;
}


/*
   마지막 상품은 전체 폭 사용
*/
.mainnew_item:last-child .mainnew_link{
    width:100% !important;
}

/* ==================================================
   LINK
================================================== */

.mainnew_link{
    display:block;

    width:100%;

    margin:0;
    padding:0;

    color:inherit;

    text-decoration:none;

    box-sizing:border-box;
}

/* ==================================================
   IMAGE
================================================== */

.mainnew_img{
    position:relative;

    width:100%;
    height:0;

    /*
       정사각형 이미지 영역
       aspect-ratio 대신 구형 브라우저 방식
    */
    padding-bottom:100%;

    margin:0;

    overflow:hidden;

    background:#f4f2ef;

    box-sizing:border-box;
}


.mainnew_img img{
    position:absolute;

    top:0;
    left:0;

    display:block;

    width:100%;
    height:100%;

    margin:0;
    padding:0;

    object-fit:cover;
    object-position:center;

    transform:scale(1);

    transition:
        transform .7s cubic-bezier(.16,1,.3,1);
}


.mainnew_item:active .mainnew_img img{
    transform:scale(1.025);
}


/* ==================================================
   INFO
================================================== */

.mainnew_info{
    position:relative;

    width:100%;

    margin:0;
    padding:15px 0 0;

    text-align:left;

    box-sizing:border-box;
}


/* 상품명 */
.mainnew_name{
    margin:0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:12px;
    line-height:1.45;

    font-weight:600;

    color:#222;

    letter-spacing:-.45px;

    word-break:keep-all;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;
}


/* 서브명 */
.mainnew_subname{
    margin:7px 0 0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:9px;
    line-height:1.45;

    font-weight:400;

    color:#57320a;

    letter-spacing:-.25px;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}


/* ==================================================
   PRICE
================================================== */

.mainnew_price{
    display:flex;
    flex-wrap:wrap;

    align-items:center;

    gap:4px 5px;

    width:100%;

    margin:12px 0 0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    box-sizing:border-box;
}


/* 할인율 */
.mainnew_price .discount_rate{
    display:inline-block;

    margin:0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:12px;
    line-height:1;

    font-weight:700;

    color:#b9633d;
}


/* 판매가 */
.mainnew_price .price{
    display:inline-block;

    margin:0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:12px;
    line-height:1;

    font-weight:700;

    color:#111;

    white-space:nowrap;
}


/* 정가 */
.mainnew_price .strike{
    display:inline-block;

    margin:0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:9px;
    line-height:1;

    font-weight:400;

    color:#aaa;

    text-decoration:line-through;

    white-space:nowrap;
}


/* SOLD OUT */
.mainnew_price .soldout{
    font-family:'Pretendard',sans-serif;

    font-size:11px;
    line-height:1;

    font-weight:600;

    color:#777;
}


/* ==================================================
   COUPON BADGE
================================================== */

.mainnew_price .coupon_badge{
    display:inline-flex !important;

    align-items:center;
    justify-content:center;

    min-height:18px;

    margin:0 !important;
    padding:3px 6px 4px !important;

    background:#b9633d !important;

    border:0 !important;
    border-radius:2px !important;

    font-family:'Pretendard',sans-serif !important;

    font-size:8px !important;
    line-height:1 !important;

    font-weight:500 !important;

    color:#fff !important;

    letter-spacing:-.2px !important;

    box-sizing:border-box;
}


/* ==================================================
   PRODUCT ICON
================================================== */

.mainnew_icon{
    margin:8px 0 0;
    padding:0;

    font-size:0;
    line-height:0;
}


/* 쇼핑몰 자동 아이콘 크기 */
.mainnew_icon img{
    display:inline-block;

    max-height:16px;

    margin:0 3px 3px 0;

    vertical-align:top;
}


/* ==================================================
   PROGRESS
================================================== */

.mainnew_progress{
    position:relative;

    width:calc(100% - 30px);
    height:1px;

    margin:32px 15px 0;

    background:#ddd;

    overflow:hidden;

    box-sizing:border-box;
}


.mainnew_progress span{
    position:absolute;

    top:0;
    left:0;

    width:22%;
    height:1px;

    background:#222;

    transition:
        left .35s ease;

    box-sizing:border-box;
}


/* ==================================================
   SMALL MOBILE
================================================== */

@media screen and (max-width:360px){

    .mainnew_area{
        padding-top:68px;
        padding-bottom:72px;
    }

    .mainnew_title{
        margin-bottom:26px;
    }

    .mainnew_title h2{
        font-size:19px;
    }
    
}    

@media screen and (max-width:360px){

    .mainnew_name{
        font-size:11px;
    }

    .mainnew_price .discount_rate,
    .mainnew_price .price{
        font-size:11px;
    }

}


/* ==================================================
   MAIN QUALITY - MOBILE
   베이직가구, 품질을 증명하다.
================================================== */

.mainquality_area{
    position:relative;

    width:100%;

    margin:0;
    padding:70px 0 0px;

    background:#fff;

    overflow:hidden;

    box-sizing:border-box;
}


/* 전체 내부 */
.mainquality_box{
    position:relative;

    width:100%;

    margin:0;
    padding:0;

    box-sizing:border-box;
}


/* ==================================================
   TITLE
================================================== */

.mainquality_area .title_box{
    position:relative;

    width:calc(100% - 30px);

    margin:0 15px 28px;
    padding:0;

    box-sizing:border-box;
}


.mainquality_area .title_box h2{
    margin:0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:20px;
    line-height:1.3;

    font-weight:800;

    color:#111;

    letter-spacing:-.8px;

    text-align:left;

    word-break:keep-all;
}


/* MORE + */
.mainquality_area .title_box .txt{
    position:absolute;

    top:6px;
    right:0;

    display:inline-flex;
    align-items:center;

    gap:4px;

    margin:0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:12px;
    line-height:1;

    font-weight:500;

    color:#b8ada3;

    letter-spacing:0;

    text-decoration:none;
    text-transform:uppercase;
}


.mainquality_area .title_box .txt span{
    display:inline-block;

    margin:0;
    padding:0;

    font-size:13px;
    line-height:1;

    font-weight:400;

    color:#b8ada3;
}


/* 기존 밑줄 효과 제거 */
.mainquality_area .title_box .txt::after{
    display:none !important;
}


/* ==================================================
   OUTER
================================================== */

.mainquality_area .outer_box{
    position:relative;

    width:100%;

    margin:0;
    padding:0;

    overflow:hidden;

    box-sizing:border-box;
}


/* ==================================================
   SWIPER VIEWPORT
================================================== */

.mainquality_area .main_quality{
    position:relative !important;

    width:calc(100% - 30px) !important;

    margin:0 15px !important;
    padding:0 !important;

    overflow:hidden !important;

    box-sizing:border-box;
}


/* wrapper */
.mainquality_area .main_quality .swiper-wrapper{
    display:flex !important;

    margin:0 !important;
    padding:0 !important;

    box-sizing:border-box;
}


/* ==================================================
   SLIDE
   한 장 + 다음 카드 일부 노출
================================================== */

.mainquality_area .main_quality .swiper-slide{
    position:relative;

    height:auto !important;

    margin:0 !important;
    padding:0 10px 0 0 !important;

    box-sizing:border-box;
}


/* 마지막 카드 오른쪽 간격 제거 */
.mainquality_area .main_quality .swiper-slide:last-child{
    padding-right:0 !important;
}


/* 링크 */
.mainquality_area .box > a{
    display:block;

    width:100%;

    margin:0;
    padding:0;

    color:inherit;
    text-decoration:none;

    box-sizing:border-box;
}


/* ==================================================
   IMAGE
================================================== */

.mainquality_area .img_box{
    position:relative;

    width:100%;

    aspect-ratio:1.68 / 1;

    margin:0;
    padding:0;

    overflow:hidden;

    background:#eee;

    box-sizing:border-box;
}


/* 기존 오버레이 제거 */
.mainquality_area .img_box .bg{
    display:none;
}


.mainquality_area .img{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    margin:0;
    padding:0;

    overflow:hidden;
}


.mainquality_area .img img{
    display:block;

    width:100%;
    height:100%;

    margin:0;
    padding:0;

    object-fit:cover;
    object-position:center;

    transform:scale(1);

    transition:
        transform .6s cubic-bezier(.16,1,.3,1);
}


/* 터치했을 때 살짝 확대 */
.mainquality_area .swiper-slide:active .img img{
    transform:scale(1.025);
}


/* ==================================================
   TEXT
================================================== */

.mainquality_area .info_box{
    display:flex;
    align-items:flex-start;

    width:100%;

    margin:0;

    padding:14px 0 0;

    font-family:'Pretendard',sans-serif;

    font-size:13px;
    line-height:1.45;

    font-weight:500;

    color:#222;

    letter-spacing:-.45px;

    text-align:left;

    box-sizing:border-box;
}


.mainquality_area .info_box span{
    flex:none;

    display:inline-block;

    margin:0;

    padding:0 7px 0 0;

    font-family:'Pretendard',sans-serif;

    font-size:13px;
    line-height:1.45;

    font-weight:500;

    color:#c3b6ab;

    letter-spacing:0;
}


/* ==================================================
   PROGRESS
================================================== */

.mainquality_progress{
    position:relative;

    width:calc(100% - 30px);
    height:1px;

    margin:30px 15px 0;
    padding:0;

    background:#ddd;

    overflow:hidden;

    box-sizing:border-box;
}


.mainquality_progress span{
    position:absolute;

    top:0;
    left:0;

    width:22%;
    height:1px;

    margin:0;
    padding:0;

    background:#222;

    transition:left .35s ease;

    box-sizing:border-box;
}


/* ==================================================
   OLD SLICK 요소 혹시 남아있으면 숨김
================================================== */

.mainquality_area .slide_wrap,
.mainquality_area .wide_slide,
.mainquality_area .paging_box,
.mainquality_area .slick-dots,
.mainquality_area .ctrl,
.mainquality_area > .prev,
.mainquality_area > .next{
    display:none !important;
}


/* ==================================================
   SMALL MOBILE
================================================== */

@media screen and (max-width:360px){

    .mainquality_area{
        padding:65px 0 70px;
    }

    .mainquality_area .title_box{
        margin-bottom:26px;
    }

    .mainquality_area .title_box h2{
        font-size:19px;
    }

    .mainquality_area .info_box,
    .mainquality_area .info_box span{
        font-size:12px;
    }

    .mainquality_progress{
        margin-top:27px;
    }

}
/* ==================================================
   MAIN MATERIAL - MOBILE
   원목 수종
   카테고리 영역 스타일
================================================== */

.mainmaterial_area{
    position:relative;

    width:100%;

    margin:0;
    padding:0 0 70px;

    background:#fff;

    overflow:hidden;

    box-sizing:border-box;
}


/* ==================================================
   BOX
================================================== */

.mainmaterial_box{
    position:relative;

    width:100%;

    margin:0;
    padding:0;

    box-sizing:border-box;
}


/* ==================================================
   TITLE
================================================== */

.mainmaterial_box .title_main{
    width:auto;

    margin:0 15px 28px;
    padding:0;

    box-sizing:border-box;
}


.mainmaterial_box .title_main h2{
    margin:0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:20px;
    line-height:1.3;

    font-weight:800;

    color:#111;

    letter-spacing:-.8px;

    text-align:left;
    text-transform:none;
}


/* ==================================================
   SLIDER VIEWPORT
================================================== */

.mainmaterial_slider{
    position:relative !important;

    width:calc(100% - 30px);

    margin:0 15px;
    padding:0;

    overflow:hidden !important;

    box-sizing:border-box;
}


/* ==================================================
   WRAPPER
================================================== */

.mainmaterial_slider ul,
.mainmaterial-wrapper{
    position:relative;

    display:flex !important;

    width:auto;

    margin:0 !important;
    padding:0 !important;

    list-style:none;

    white-space:normal;

    overflow:visible !important;

    box-sizing:border-box;
}


/* ==================================================
   CARD
================================================== */

.mainmaterial_slider li,
.mainmaterial-slide{
    position:relative;

    display:block !important;

    flex-shrink:0;

    width:auto;

    margin:0 !important;
    padding:0 !important;

    box-sizing:border-box;
}


.mainmaterial_slider li > a{
    display:block;

    width:100%;

    margin:0;
    padding:0;

    color:inherit;

    text-decoration:none;

    box-sizing:border-box;
}


/* ==================================================
   IMAGE
================================================== */

.mainmaterial_box .img_box{
    position:relative;

    width:100%;
    aspect-ratio:1 / 1;

    margin:0;

    overflow:hidden;

    border-radius:14px;

    background:#f3f1ee;

    box-sizing:border-box;
}


.mainmaterial_box .img_box .bg{
    display:none;
}


.mainmaterial_box .img{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    overflow:hidden;
}


.mainmaterial_box .img img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    margin:0;
    padding:0;
}


/* ==================================================
   TEXT
================================================== */

.mainmaterial_box .text{
    display:flex;

    flex-direction:column;
    align-items:center;

    width:100%;

    margin:12px 0 0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:12px;
    line-height:1.35;

    font-weight:600;

    color:#222;

    letter-spacing:-.45px;

    text-align:center;

    word-break:keep-all;

    box-sizing:border-box;
}


/* 위쪽 작은 수종명
   HTML상 span이 뒤에 있으므로 order로 위로 올림
*/
.mainmaterial_box .text span{
    order:-1;

    display:block;

    margin:0 0 5px;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:10px;
    line-height:1.2;

    font-weight:400;

    color:#b8ada3;

    letter-spacing:-.2px;

    text-align:center;
}


/* ==================================================
   PROGRESS
================================================== */

.mainmaterial_progress{
    position:relative;

    width:calc(100% - 30px);
    height:1px;

    margin:28px 15px 0;

    background:#ddd;

    overflow:hidden;

    box-sizing:border-box;
}


.mainmaterial_progress span{
    position:absolute;

    top:0;
    left:0;

    width:22%;
    height:1px;

    background:#111;

    transition:left .25s ease;

    will-change:left;
}


/* ==================================================
   360px 이하
================================================== */

@media screen and (max-width:360px){

    .mainmaterial_area{
        padding:55px 0 65px;
    }

    .mainmaterial_box .title_main{
        margin-bottom:25px;
    }

    .mainmaterial_box .title_main h2{
        font-size:19px;
    }

    .mainmaterial_box .text{
        font-size:11px;
    }

    .mainmaterial_box .text span{
        font-size:9px;
    }

}

/* =========================================================
   MAIN PROVE - MOBILE
   베이직가구, 원목을 증명하다.
   CLEAN FINAL
========================================================= */

.mainprove_area{
    position:relative;
    width:100%;
    margin:0;
    padding:70px 0 75px;
    background:#fff;
    overflow:hidden;
    box-sizing:border-box;
}

.mainprove_box{
    position:relative;
    width:100%;
    margin:0;
    padding:0;
    box-sizing:border-box;
}


/* =========================================================
   SECTION TITLE
========================================================= */

.mainprove_title{
    position:relative;
    width:calc(100% - 30px);
    margin:0 15px 34px;
    padding:0;
    box-sizing:border-box;
}

.mainprove_title h2{
    margin:0;
    padding:0;
    border:0 !important;
    background:none !important;

    font-family:'Pretendard',sans-serif;
    font-size:20px;
    line-height:1.3;
    font-weight:800;

    color:#111;
    letter-spacing:-.8px;
    text-align:left;
    word-break:keep-all;
}

.mainprove_title h2::before,
.mainprove_title h2::after{
    content:none !important;
    display:none !important;
}


/* =========================================================
   COMMON
========================================================= */

.prove_editorial{
    position:relative;
    width:100%;
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.prove_image{
    position:relative;

    display:block;

    margin:0;
    padding:0;

    overflow:visible;

    text-decoration:none;

    box-sizing:border-box;
}

.prove_image img{
    position:absolute;

    top:0;
    left:0;

    display:block;

    width:100%;
    height:100%;

    margin:0;
    padding:0;

    object-fit:cover;
    object-position:center;

    box-sizing:border-box;
}


/* 번호 */
.prove_number{
    display:block;
    margin:0 0 13px;
    padding:0;

    font-family:'Pretendard',sans-serif;
    font-size:7px;
    line-height:1;
    font-weight:600;

    color:#999;
    letter-spacing:.7px;
}


/* =========================================================
   BIG TITLES
   공통 CSS에서 생기는 선 완전 차단
========================================================= */

.main .mainprove_area .prove_editorial h3,
.main .mainprove_area .prove_realwood_text h3,
.main .mainprove_area .prove_basic_text h3,
.main .mainprove_area .prove_wood_text h3,
.main .mainprove_area .prove_faith_text h3{
    position:relative !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-top:0 !important;
    border-right:0 !important;
    border-bottom:0 !important;
    border-left:0 !important;

    outline:0 !important;
    box-shadow:none !important;

    background:none !important;
    background-image:none !important;

    font-family:'Pretendard',sans-serif !important;
    font-size:17px;
    line-height:1.42;
    font-weight:800;

    color:#111;

    letter-spacing:-.85px;
    word-break:keep-all;
}

.main .mainprove_area .prove_editorial h3::before,
.main .mainprove_area .prove_editorial h3::after,
.main .mainprove_area .prove_realwood_text h3::before,
.main .mainprove_area .prove_realwood_text h3::after,
.main .mainprove_area .prove_basic_text h3::before,
.main .mainprove_area .prove_basic_text h3::after,
.main .mainprove_area .prove_wood_text h3::before,
.main .mainprove_area .prove_wood_text h3::after,
.main .mainprove_area .prove_faith_text h3::before,
.main .mainprove_area .prove_faith_text h3::after{
    content:none !important;
    display:none !important;

    width:0 !important;
    height:0 !important;

    border:0 !important;
    background:none !important;
}


/* 설명 */
.prove_editorial p{
    margin:17px 0 0;
    padding:0;

    font-family:'Pretendard',sans-serif;
    font-size:9px;
    line-height:1.8;
    font-weight:400;

    color:#555;
    letter-spacing:-.35px;

    word-break:keep-all;
}


/* =========================================================
   MORE / VIEW STORY
========================================================= */

.prove_story_link{
    position:relative;

    display:flex !important;
    align-items:center;
    justify-content:space-between;

    width:94px !important;
    height:auto;

    margin:23px 0 0 !important;
    padding:0 0 7px !important;

    border:0 !important;
    border-bottom:1px solid #999 !important;

    background:none !important;

    font-family:'Pretendard',sans-serif;
    font-size:7px;
    line-height:1;
    font-weight:700;

    color:#222 !important;
    letter-spacing:.1px;

    text-decoration:none !important;

    box-sizing:border-box !important;
}


/* 가짜 선 / 아이콘 제거 */
.prove_story_link::before,
.prove_story_link::after{
    content:none !important;
    display:none !important;
}


/* + / → */
.prove_story_link span{
    display:block !important;

    margin:0 !important;
    padding:0 !important;

    font-size:11px;
    line-height:1;
    font-weight:400;

    color:#222;
}


/* =========================================================
   IMAGE LABEL
========================================================= */

.prove_image_label{
    position:absolute;

    top:13px;
    right:13px;

    z-index:3;

    margin:0;
    padding:0;

    font-family:'Pretendard',sans-serif;
    font-size:12px;
    line-height:1;
    font-weight:800;

    color:#fff;
    letter-spacing:-.2px;
}


/* =========================================================
   VERTICAL TEXT
========================================================= */

.prove_vertical_text{
    position:absolute;
    z-index:5;

    margin:0;
    padding:0;

    font-family:'Pretendard',sans-serif;
    font-size:7px;
    line-height:1;
    font-weight:600;

    color:#222;
    letter-spacing:.45px;

    writing-mode:vertical-rl;
    text-orientation:mixed;

    white-space:nowrap;
}


/* =========================================================
   01 REAL WOOD
========================================================= */

.prove_realwood{
    position:relative;

    display:grid;

    grid-template-columns:51.2% 5.8% 39%;
    align-items:center;

    width:100%;

    margin:0 0 82px;
    padding:0;

    border:0;

    box-sizing:border-box;
}


/* REAL WOOD 이미지 하단선 */
.prove_realwood::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:1px;

    background:#b9b9b9;

    z-index:1;
}

.prove_realwood_image{
    position:relative;

    grid-column:1;

    width:100%;
    height:0;

    padding-bottom:100%;

    margin:0;
}

.prove_realwood_text{
    position:relative;

    grid-column:3;

    width:100%;

    margin:0;
    padding:0;

    align-self:center;

    box-sizing:border-box;
}


/* Real Wood */
.prove_small_title{
    display:flex;
    align-items:center;

    gap:7px;

    margin:0 0 21px;
    padding:0;

    border:0 !important;

    font-family:'Pretendard',sans-serif;
    font-size:8px;
    line-height:1;
    font-weight:600;

    color:#555;
}

.prove_small_title::before,
.prove_small_title::after{
    content:none !important;
    display:none !important;
}

.prove_small_title .line{
    display:block;

    flex:0 0 34px;

    width:34px;
    height:1px;

    margin:0;
    padding:0;

    background:#aaa;
}


/* 첫 제목 */
.main .mainprove_area .prove_realwood_text h3{
    font-size:20px !important;
    line-height:1.35 !important;
    letter-spacing:-1px !important;
}

.prove_realwood_text p{
    margin-top:20px;
    font-size:8.5px;
    line-height:1.75;
}

.prove_realwood_text .prove_story_link{
    margin-top:20px;
}

.realwood_vertical{
    display:none !important;
}


/* =========================================================
   BASIC / WOOD / FAITH 공통
   세 섹션 모두 같은 크기
========================================================= */

.prove_basic,
.prove_wood,
.prove_faith{
    position:relative;

    display:grid;
    align-items:center;

    width:100%;

    min-height:265px;

    margin:0;
    padding:34px 0;

    box-sizing:border-box;
}


/* BASIC / FAITH
   TEXT | GAP | IMAGE | VERTICAL
*/
.prove_basic,
.prove_faith{
    grid-template-columns:
        43%
        4%
        46%
        7%;
}


/* WOOD
   VERTICAL | IMAGE | GAP | TEXT
*/
.prove_wood{
    grid-template-columns:
        7%
        46%
        4%
        43%;
}


/* =========================================================
   IMAGE BOTTOM DIVIDER
   선은 이미지 하단 위치를 직접 기준으로 함
========================================================= */

/* 섹션 자체 border 제거 */
.prove_basic,
.prove_wood,
.prove_faith{
    border:0 !important;
}


/* 기존 섹션 가상선 제거 */
.prove_basic::before,
.prove_basic::after,
.prove_wood::before,
.prove_wood::after,
.prove_faith::before,
.prove_faith::after{
    content:none !important;
    display:none !important;
}


/* =========================================================
   BASIC
   이미지 상단 → 화면 왼쪽 끝까지 가로선
========================================================= */

.prove_basic_image::after{
    content:"";

    position:absolute;

    left:-100vw;
    right:0;

    top:0;
    bottom:auto;

    height:1px;

    background:#b9b9b9;

    z-index:5;

    pointer-events:none;
}

/* =========================================================
   WOOD
   시안상 이미지 하단 별도선 없음
========================================================= */

.prove_wood_image::after{
    content:none !important;
    display:none !important;
}


/* =========================================================
   FAITH
   이미지 하단 → 화면 양끝 가로선
========================================================= */

.prove_faith_image::after{
    content:"";

    position:absolute;

    left:-100vw;
    right:0;

    top:0;
    bottom:auto;

    height:1px;

    background:#b9b9b9;

    z-index:5;

    pointer-events:none;
}


/* =========================================================
   02 BASIC
========================================================= */

.prove_basic_text{
    position:relative;

    grid-column:1;

    width:auto;

    margin:0 0 0 15px;
    padding:0;

    align-self:center;

    z-index:4;

    box-sizing:border-box;
}

.prove_basic_image{
    position:relative;

    grid-column:3;

    width:100%;
    height:0;

    padding-bottom:100%;

    margin:0;

    align-self:center;
}

.basic_vertical{
    position:relative;

    grid-column:4;

    top:auto;
    right:auto;

    justify-self:center;
    align-self:end;

    margin-bottom:0;

    transform:translateY(-2px);
}


/* =========================================================
   03 WOOD
========================================================= */

.prove_wood_image{
    position:relative;

    grid-column:2;

    width:100%;
    height:0;

    padding-bottom:100%;

    margin:0;

    align-self:center;
}

.prove_wood_text{
    position:relative;

    grid-column:4;

    width:auto;

    margin:0 15px 0 0;
    padding:0;

    align-self:center;

    z-index:4;

    box-sizing:border-box;
}

.wood_vertical{
    position:relative;

    grid-column:1;

    top:auto;
    left:auto;

    justify-self:center;
    align-self:end;

    margin-bottom:0;

    transform:
        translateY(-2px)
        rotate(180deg);
}



/* =========================================================
   04 FAITH
========================================================= */

.prove_faith{
    margin-bottom:35px;
}

.prove_faith_text{
    position:relative;

    grid-column:1;

    width:auto;

    margin:0 0 0 15px;
    padding:0;

    align-self:center;

    z-index:4;

    box-sizing:border-box;
}

.prove_faith_image{
    position:relative;

    grid-column:3;

    width:100%;
    height:0;

    padding-bottom:100%;

    margin:0;

    align-self:center;
}

.faith_vertical{
    position:relative;

    grid-column:4;

    top:auto;
    right:auto;

    justify-self:center;
    align-self:end;

    margin-bottom:0;

    transform:translateY(-2px);
}


/* =========================================================
   LAST QUOTE
========================================================= */

.prove_quote{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;

    margin:0;
    padding:0;

    box-sizing:border-box;
}

.prove_quote .quote_line{
    display:block;

    flex:1 1 0;

    min-width:0;
    height:1px;

    margin:0;
    padding:0;

    background:#bcbcbc;
}

.prove_quote p{
    flex:0 0 auto;

    width:auto;
    max-width:76%;

    margin:0;
    padding:0 13px;

    font-family:'Pretendard',sans-serif;
    font-size:10px;
    line-height:1.75;
    font-weight:600;

    color:#777;
    letter-spacing:-.4px;

    text-align:center;

    word-break:keep-all;
    white-space:nowrap;

    box-sizing:border-box;
}

.prove_quote p br{
    display:block !important;
}

.prove_quote p strong{
    display:inline-block;

    margin:0 4px;

    font-family:Georgia,serif;

    font-size:14px;
    line-height:1;
    font-weight:400;

    color:#888;
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media screen and (max-width:360px){

    .mainprove_area{
        padding:65px 0 70px;
    }

    .mainprove_title{
        margin-bottom:30px;
    }

    .mainprove_title h2{
        font-size:19px;
    }

    .main .mainprove_area .prove_editorial h3{
        font-size:16px !important;
    }

    .main .mainprove_area .prove_realwood_text h3{
        font-size:18px !important;
    }

    .prove_editorial p{
        font-size:8.5px;
    }

    .prove_realwood_text p{
        font-size:8px;
    }

    .prove_basic,
    .prove_wood,
    .prove_faith{
        min-height:245px;
        padding:30px 0;
    }

    .prove_quote p{
        max-width:78%;
        padding:0 9px;

        font-size:9px;
        line-height:1.7;

        letter-spacing:-.45px;
    }

    .prove_quote p strong{
        margin:0 3px;
        font-size:13px;
    }
    .prove_story_group::after{
    top:calc(
        (
            max(245px, calc(46vw + 60px))
            + 46vw
        ) / 2
        - 1px
    );

    bottom:calc(
        68px
        + (
            max(245px, calc(46vw + 60px))
            - 46vw
        ) / 2
    );
    }
}

/* =========================================================
   BASIC → FAITH
   이미지 오른쪽 끝 연결 세로선
========================================================= */

.prove_story_group{
    position:relative;

    width:100%;

    margin:0;
    padding:0;

    box-sizing:border-box;
}


/*
   BASIC 이미지 오른쪽 아래에서 시작
   → FAITH 이미지 오른쪽 아래에서 끝
*/
.prove_story_group::after{
    content:"";
    position:absolute;

    /* 이미지 우측에서 1px 바깥쪽으로 */
    right:calc(7% - 1px);

    top:calc(
        (
            max(265px, calc(46vw + 68px))
            + 46vw
        ) / 2
        - 8px
    );

    bottom:calc(
        35px
        + (
            max(265px, calc(46vw + 68px))
            - 46vw
        ) / 2
    );

    width:1px;
    background:#b9b9b9;
    z-index:2;
    pointer-events:none;
}

/* BASIC / WOOD / FAITH - 모바일 MORE 버튼 숨김 */
.prove_basic .prove_story_link,
.prove_wood .prove_story_link,
.prove_faith .prove_story_link{
    display:none !important;
}

/* =========================================================
   WOOD CURATION - MOBILE
   WALNUT + CURIN

   PC 구조 모바일화
   - 긴 배경 이미지
   - WALNUT / CURIN
   - 흰 상품 패널 오버랩
   - 배경 하단 WHITE FADE
========================================================= */


/* =========================================================
   01. SECTION
========================================================= */

.maindiff_area,
.maindiff_area2{
    position:relative;
    isolation:isolate;

    width:100%;
    margin:0;

    /*
       상품 영역 아래쪽까지 배경이 보이도록
       마지막에 흰색으로 자연스럽게 연결
    */
    padding:0 0 65px;

    background:#fff;

    overflow:hidden;
    box-sizing:border-box;
}


/* CURIN과 WALNUT 사이 */

.maindiff_area2{
    margin-top:0;
}


/* =========================================================
   02. LONG BACKGROUND

   PC와 동일하게 hero 자체가 아니라
   section 뒤에 배경을 깔아준다.
========================================================= */

.maindiff_area::before,
.maindiff_area2::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:1050px;

    background-repeat:no-repeat;
    background-position:center top;
    background-size:auto 1050px;

    pointer-events:none;

    z-index:0;
}


/* WALNUT */

.maindiff_area::before{
    background-image:
        url("//dainpark06.cafe24.com/sunny/images/main_ws_img1.jpg");
}


/* CURIN */

.maindiff_area2::before{
    background-image:
        url("//dainpark06.cafe24.com/sunny/images/main_ws_img2.jpg");
}


/* =========================================================
   03. BACKGROUND → WHITE FADE
========================================================= */

.maindiff_area::after,
.maindiff_area2::after{
    content:"";

    position:absolute;

    left:0;
    right:0;

    top:680px;
    height:370px;

    background:linear-gradient(
        to bottom,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.04) 15%,
        rgba(255,255,255,.12) 28%,
        rgba(255,255,255,.28) 45%,
        rgba(255,255,255,.52) 63%,
        rgba(255,255,255,.78) 80%,
        rgba(255,255,255,.95) 94%,
        #fff 100%
    );

    pointer-events:none;

    z-index:1;
}


/* =========================================================
   04. HERO

   배경 이미지는 section::before에 있으므로
   hero는 텍스트 위치만 잡는 영역
========================================================= */

.maindiff_area .maindiff_hero,
.maindiff_area2 .maindiff_hero{
    position:relative;

    width:100%;
    height:315px;

    margin:0;
    padding:0;

    background:none !important;

    overflow:visible;

    z-index:2;
}


/* =========================================================
   05. WALNUT / CURIN TEXT
========================================================= */

.maindiff_hero_text{
    position:absolute;

    left:16px;
    right:16px;
    bottom:64px;

    margin:0;
    padding:0;

    box-sizing:border-box;

    z-index:3;
}


/* WALNUT / CURIN */

.maindiff_hero_text strong{
    display:block;

    margin:0;
    padding:0;

    font-family:'Cormorant Garamond',
                'Times New Roman',
                Georgia,
                serif;

    font-size:43px;
    line-height:.95;

    font-weight:400;

    color:#fff;

    letter-spacing:.3px;
}


/* HERO 설명 */

.maindiff_hero_text span{
    display:block;

    margin:10px 0 0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:10px;
    line-height:1.5;

    font-weight:500;

    color:#fff;

    letter-spacing:-.35px;

    word-break:keep-all;
}


/* =========================================================
   06. WHITE PRODUCT PANEL

   PC처럼 hero 위쪽으로 겹쳐 올라온다.
========================================================= */

.maindiff_area .sunny_inner,
.maindiff_area2 .sunny_inner{
    position:relative;

    width:calc(100% - 30px);

    margin:-28px auto 0;
    padding:0;

    background:#fff;

    overflow:visible;

    box-sizing:border-box;

    z-index:5;
}


/* =========================================================
   07. TITLE
========================================================= */

.maindiff_area .title_box,
.maindiff_area2 .title_box{
    position:relative !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    float:none !important;

    display:block;

    width:100%;
    height:auto;

    margin:0;
    padding:30px 15px 27px;

    background:#fff !important;

    text-align:left;

    box-sizing:border-box;
}


/* WOOD CURATION */

.maindiff_area .title_box .txt1,
.maindiff_area2 .title_box .txt1{
    margin:0 0 13px;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:9px;
    line-height:1;

    font-weight:800;

    color:#111;

    letter-spacing:.15px;

    text-transform:uppercase;
}


/*
   HTML에서 dt를 제거했어도 상관없지만
   혹시 기존 요소가 남아 있을 경우 숨김
*/

.maindiff_area .title_box dt,
.maindiff_area2 .title_box dt{
    display:none !important;
}


/* 설명 */

.maindiff_area .title_box .txt2,
.maindiff_area2 .title_box .txt2{
    margin:0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:10px;
    line-height:1.7;

    font-weight:400;

    color:#555;

    letter-spacing:-.35px;

    text-align:left;

    word-break:keep-all;
}


/* 기존 title 버튼이 있다면 제거 */

.maindiff_area .title_box .btn,
.maindiff_area2 .title_box .btn{
    display:none !important;
}


/* =========================================================
   08. PRODUCT BOX
========================================================= */

.maindiff_area .mproduct_box,
.maindiff_area2 .mproduct_box,
.maindiff_area .maindiff_box,
.maindiff_area2 .maindiff_box{
    position:relative;

    float:none !important;

    width:100% !important;
    min-width:0 !important;
    max-width:none !important;

    margin:0 !important;
    padding:0 15px;

    overflow:visible !important;

    box-sizing:border-box;
}


/* =========================================================
   09. PRODUCT GRID
========================================================= */

.maindiff_area .mproduct_box > ul,
.maindiff_area2 .mproduct_box > ul,
.maindiff_area .maindiff_box > ul,
.maindiff_area2 .maindiff_box > ul{
    display:grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    column-gap:10px;
    row-gap:30px;

    width:100%;

    margin:0 !important;
    padding:0 !important;

    overflow:visible;

    font-size:initial;
    white-space:normal;

    box-sizing:border-box;
}


/* 숨겨진 예비 상품 UL */

.maindiff_area .mproduct_box > ul[style*="display:none"],
.maindiff_area2 .mproduct_box > ul[style*="display:none"],
.maindiff_area .maindiff_box > ul[style*="display:none"],
.maindiff_area2 .maindiff_box > ul[style*="display:none"]{
    display:none !important;
}


/* =========================================================
   10. PRODUCT ITEM
========================================================= */

.maindiff_area .mproduct_box li,
.maindiff_area2 .mproduct_box li,
.maindiff_area .maindiff_box li,
.maindiff_area2 .maindiff_box li{
    position:relative;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible;

    vertical-align:top;

    box-sizing:border-box;
}


/* =========================================================
   11. PRODUCT IMAGE
========================================================= */

.maindiff_area .mproduct_box .img_box,
.maindiff_area2 .mproduct_box .img_box{
    position:relative;

    width:100%;

    margin:0;
    padding:0;

    overflow:hidden;

    background:#f4f2ef;

    box-sizing:border-box;
}


.maindiff_area .mproduct_box .img_box .bg,
.maindiff_area2 .mproduct_box .img_box .bg{
    display:none;
}


.maindiff_area .mproduct_box .img,
.maindiff_area2 .mproduct_box .img{
    position:relative;

    width:100%;

    margin:0;
    padding:0;

    overflow:hidden;
}


.maindiff_area .mproduct_box .img img,
.maindiff_area2 .mproduct_box .img img{
    display:block;

    width:100%;
    height:auto;

    margin:0;

    transform:none;

    object-fit:cover;
}


/* =========================================================
   12. PRODUCT INFO
========================================================= */

.maindiff_area .mproduct_box .info_box,
.maindiff_area2 .mproduct_box .info_box{
    position:relative;

    width:100%;

    margin:0;
    padding:11px 0 0;

    box-sizing:border-box;
}


.maindiff_area .mproduct_box .info_box dl,
.maindiff_area2 .mproduct_box .info_box dl{
    margin:0;
    padding:0;
}


/* 상품명 */

.maindiff_area .mproduct_box .tit,
.maindiff_area2 .mproduct_box .tit{
    display:block;

    margin:0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:11px;
    line-height:1.45;

    font-weight:600;

    color:#222;

    letter-spacing:-.4px;

    word-break:keep-all;
}


/* 상품 부가설명 */

.maindiff_area .mproduct_box .txt,
.maindiff_area2 .mproduct_box .txt{
    display:block;

    margin:5px 0 0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:8px;
    line-height:1.5;

    font-weight:400;

    color:#999;

    letter-spacing:-.25px;

    word-break:keep-all;
}


/* =========================================================
   13. PRICE
========================================================= */

.maindiff_area .mproduct_box .price_box,
.maindiff_area2 .mproduct_box .price_box{
    display:flex;

    flex-wrap:wrap;
    align-items:center;

    gap:3px 5px;

    margin:7px 0 0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:10px;
    line-height:1.4;

    color:#222;
}


.maindiff_area .mproduct_box .price,
.maindiff_area2 .mproduct_box .price{
    font-size:10px;
    font-weight:600;

    color:#222;
}


.maindiff_area .mproduct_box .strike,
.maindiff_area2 .mproduct_box .strike{
    font-size:8px;

    color:#aaa;
}


.maindiff_area .mproduct_box .discount_rate,
.maindiff_area2 .mproduct_box .discount_rate{
    font-size:10px;

    font-weight:700;

    color:#b9633d;
}


.maindiff_area .mproduct_box .coupon_badge,
.maindiff_area2 .mproduct_box .coupon_badge{
    font-size:7px;
}


/* =========================================================
   14. PRODUCT ICON
========================================================= */

.maindiff_area .mproduct_box .prd-icon,
.maindiff_area2 .mproduct_box .prd-icon{
    margin-top:5px;
}


/*
   커린 기존 HTML 안에
   <li class="prd-icon">가 price_box 안에 있으므로
   상품 grid li 스타일 영향을 받지 않도록 복구
*/

.maindiff_area2 .price_box > li.prd-icon{
    display:block !important;

    width:auto !important;

    margin:4px 0 0 !important;
    padding:0 !important;
}


/* =========================================================
   15. VIEW MORE
========================================================= */

.maindiff_area .more_box,
.maindiff_area2 .more_box{
    position:relative;

    width:100%;

    margin:0;
    padding:0 15px 30px;

    background:#fff;

    box-sizing:border-box;
}


.maindiff_area .btn_mainmore,
.maindiff_area2 .btn_mainmore{
    position:relative;

    display:flex;

    align-items:center;
    justify-content:center;

    width:100%;
    height:44px;

    margin:35px auto 0;
    padding:0;

    border:1px solid #aaa;

    background:#fff;

    font-family:'Pretendard',sans-serif;

    font-size:10px;
    line-height:1;

    font-weight:600;

    color:#222;

    letter-spacing:.2px;

    text-transform:uppercase;

    box-sizing:border-box;
}


/* 화살표 */

.maindiff_area .btn_mainmore .ico_arrowdown,
.maindiff_area2 .btn_mainmore .ico_arrowdown{
    margin-left:9px;
}


/* =========================================================
   16. INITIAL PRODUCT DISPLAY

   JS와 맞춰 처음 4개.
========================================================= */

.maindiff_area .mproduct_box.mainmore5 > ul:not([style*="display:none"]) > li,
.maindiff_area2 .mproduct_box.mainmore6 > ul:not([style*="display:none"]) > li{
    display:none;
}


.maindiff_area .mproduct_box.mainmore5 > ul:not([style*="display:none"]) > li:nth-child(-n+4),
.maindiff_area2 .mproduct_box.mainmore6 > ul:not([style*="display:none"]) > li:nth-child(-n+4){
    display:block;
}


/* =========================================================
   17. 360px 이하
========================================================= */

@media screen and (max-width:360px){

    .maindiff_area::before,
    .maindiff_area2::before{
        height:1000px;
        background-size:auto 1000px;
    }


    .maindiff_area::after,
    .maindiff_area2::after{
        top:650px;
        height:350px;
    }


    .maindiff_area .maindiff_hero,
    .maindiff_area2 .maindiff_hero{
        height:300px;
    }


    .maindiff_hero_text{
        bottom:60px;
    }


    .maindiff_hero_text strong{
        font-size:40px;
    }


    .maindiff_area .sunny_inner,
    .maindiff_area2 .sunny_inner{
        width:calc(100% - 26px);
    }


    .maindiff_area .mproduct_box,
    .maindiff_area2 .mproduct_box,
    .maindiff_area .maindiff_box,
    .maindiff_area2 .maindiff_box{
        padding-left:13px;
        padding-right:13px;
    }


    .maindiff_area .title_box,
    .maindiff_area2 .title_box{
        padding-left:13px;
        padding-right:13px;
    }


    .maindiff_area .more_box,
    .maindiff_area2 .more_box{
        padding-left:13px;
        padding-right:13px;
    }

}


/* =========================================================
   MAIN YOUTUBE - MOBILE
   영상으로 만나보는 베이직가구
========================================================= */

.mainyoutube_area{
    position:relative;
    width:100%;
    margin:0;
    padding:0 0 10px;
    background:#fff;
    overflow:hidden;
    box-sizing:border-box;
}

.mainyoutube_inner{
    position:relative;
    width:100%;
    margin:0;
    padding:0;
    box-sizing:border-box;
}


/* =========================================================
   TITLE
========================================================= */

.mainyoutube_title{
    position:relative;
    width:100%;
    margin:0 0 30px;
    padding:0 15px;
    box-sizing:border-box;
}

.mainyoutube_title h2{
    margin:0;
    padding:0;

    font-family:'Pretendard',sans-serif;
    font-size:20px;
    line-height:1.3;
    font-weight:800;

    color:#111;
    letter-spacing:-.8px;
    text-align:left;
}


/* =========================================================
   SLIDER WRAP
========================================================= */

.mainyoutube_slider_wrap{
    position:relative;
    width:100%;
    margin:0;
    padding:0;
    overflow:visible;
    box-sizing:border-box;
}

.mainyoutube_slider{
    position:relative !important;

    width:calc(100% - 30px);

    margin:0 15px;
    padding:0;

    overflow:hidden !important;

    box-sizing:border-box;
}

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


/* =========================================================
   SLIDE
========================================================= */

.mainyoutube_slider .swiper-slide{
    position:relative;
    flex-shrink:0;

    margin:0;
    padding:0;

    opacity:.34;

    box-sizing:border-box;

    transition:
        opacity .45s ease;
}

.mainyoutube_slider .swiper-slide-active{
    opacity:1;
}


/* 확대/축소는 slide가 아니라 실제 카드에 적용 */

.mainyoutube_slider .mainyoutube_thumb{
    transform:scale(.94);
    transform-origin:left center;

    transition:
        transform .55s cubic-bezier(.22,.61,.36,1);
}

.mainyoutube_slider
.swiper-slide-active
.mainyoutube_thumb{
    transform:scale(1);
}


/* =========================================================
   THUMBNAIL
========================================================= */

.mainyoutube_thumb{
    position:relative;

    display:block;

    width:100%;
    aspect-ratio:16 / 10;

    margin:0;
    padding:0;

    border:0;
    background:#111;

    overflow:hidden;

    cursor:pointer;
    outline:0;

    box-sizing:border-box;
}


/* 이미지 */

.mainyoutube_thumb > img{
    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    display:block;
}


/* =========================================================
   DIM
========================================================= */

.mainyoutube_dim{
    position:absolute;

    inset:0;

    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.03) 0%,
        rgba(0,0,0,.08) 45%,
        rgba(0,0,0,.58) 100%
    );

    z-index:2;

    pointer-events:none;
}


/* 비활성 슬라이드는 조금 더 밝게 */

.mainyoutube_slider .swiper-slide:not(.swiper-slide-active)
.mainyoutube_dim{
    background:rgba(255,255,255,.30);
}


/* =========================================================
   TOP ENGLISH
========================================================= */

.mainyoutube_eng{
    position:absolute;

    top:18px;
    right:18px;

    z-index:4;

    margin:0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:8px;
    line-height:1;

    font-weight:700;

    color:#fff;

    letter-spacing:.2px;

    text-transform:uppercase;
}


/* 앞쪽 짧은 선 */

.mainyoutube_eng::before{
    content:"";

    display:inline-block;

    width:25px;
    height:1px;

    margin:0 8px 2px 0;

    background:rgba(255,255,255,.8);

    vertical-align:middle;
}


/* =========================================================
   INFO
========================================================= */

.mainyoutube_info{
    position:absolute;

    left:18px;
    right:18px;
    bottom:20px;

    z-index:4;

    margin:0;
    padding:0;

    text-align:left;
    box-sizing:border-box;
}


/* 해시태그 */

.mainyoutube_info > span{
    display:block;

    margin:0 0 8px;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:9px;
    line-height:1.35;

    font-weight:600;

    color:rgba(255,255,255,.92);

    letter-spacing:-.2px;
}


/* 큰 문구 */

.mainyoutube_info strong{
    display:block;

    margin:0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:15px;
    line-height:1.55;

    font-weight:700;

    color:#fff;

    letter-spacing:-.65px;

    word-break:keep-all;
}


/* =========================================================
   PLAY BUTTON
========================================================= */

.mainyoutube_play{
    position:absolute;

    top:50%;
    left:50%;

    z-index:5;

    width:52px;
    height:38px;

    margin:0;

    border-radius:12px;

    background:#ff0000;

    transform:translate(-50%,-50%);

    box-shadow:0 4px 14px rgba(0,0,0,.12);

    pointer-events:none;
}


/* 삼각형 */

.mainyoutube_play::before{
    content:"";

    position:absolute;

    top:50%;
    left:50%;

    width:0;
    height:0;

    border-top:8px solid transparent;
    border-bottom:8px solid transparent;
    border-left:13px solid #fff;

    transform:translate(-42%,-50%);
}


/* 비활성 슬라이드 play */

.mainyoutube_slider .swiper-slide:not(.swiper-slide-active)
.mainyoutube_play{
    background:#ff8d91;
}


/* =========================================================
   PROGRESS
========================================================= */

.mainyoutube_progress{
    position:relative;

    width:calc(100% - 30px);
    height:1px;

    margin:26px 15px 0;

    background:#ddd;

    overflow:hidden;

    box-sizing:border-box;
}

.mainyoutube_progress span{
    position:absolute;

    top:0;
    left:0;

    width:25%;
    height:1px;

    background:#111;

    transition:left .3s ease;

    will-change:left;
}


/* =========================================================
   CHANNEL AREA
========================================================= */

.mainyoutube_channel{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:flex-start;

    gap:18px;

    width:calc(100% - 30px);

    margin:28px 15px 0;
    padding:0;

    box-sizing:border-box;
}


/* 안내 문구 */

.mainyoutube_channel p{
    margin:0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:12px;
    line-height:1.55;

    font-weight:500;

    color:#555;

    letter-spacing:-.35px;
}


/* WATCH FILM */

.mainyoutube_channel_link{
    position:relative;

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin:0;
    padding:0 0 5px;

    border-bottom:1px solid #999;

    font-family:'Pretendard',sans-serif;

    font-size:9px;
    line-height:1;

    font-weight:700;

    color:#111;

    text-decoration:none;

    white-space:nowrap;
}


/* 오른쪽 플레이 */

.mainyoutube_channel_link span{
    display:flex;

    align-items:center;
    justify-content:center;

    width:17px;
    height:17px;

    border:1px solid #aaa;
    border-radius:50%;

    font-size:7px;
    line-height:1;

    color:#777;

    box-sizing:border-box;
}


/* =========================================================
   MODAL
========================================================= */

.mainyoutube_modal{
    position:fixed;

    inset:0;

    display:flex;

    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    visibility:hidden;
    opacity:0;

    pointer-events:none;

    transition:
        opacity .3s ease,
        visibility .3s ease;

    z-index:99999;
}


/* OPEN */

.mainyoutube_modal.is_open{
    visibility:visible;
    opacity:1;

    pointer-events:auto;
}


/* DIM */

.mainyoutube_modal_dim{
    position:absolute;

    inset:0;

    background:rgba(0,0,0,.82);
}


/* MODAL CONTENT */

.mainyoutube_modal_content{
    position:relative;

    width:calc(100% - 30px);
    max-width:650px;

    margin:0;
    padding:0;

    z-index:3;

    box-sizing:border-box;
}


/* 영상 */

.mainyoutube_modal_video{
    position:relative;

    width:100%;
    aspect-ratio:16 / 9;

    background:#000;

    overflow:hidden;
}

.mainyoutube_modal_video iframe{
    position:absolute;

    inset:0;

    display:block;

    width:100%;
    height:100%;

    border:0;
}


/* CLOSE */

.mainyoutube_modal_close{
    position:absolute;

    top:-40px;
    right:0;

    width:30px;
    height:30px;

    margin:0;
    padding:0;

    border:0;
    background:none;

    cursor:pointer;

    z-index:5;
}


/* X */

.mainyoutube_modal_close::before,
.mainyoutube_modal_close::after{
    content:"";

    position:absolute;

    top:50%;
    left:50%;

    width:24px;
    height:1px;

    background:#fff;
}

.mainyoutube_modal_close::before{
    transform:translate(-50%,-50%) rotate(45deg);
}

.mainyoutube_modal_close::after{
    transform:translate(-50%,-50%) rotate(-45deg);
}


/* 모달 열렸을 때 스크롤 방지 */

body.mainyoutube_modal_open{
    overflow:hidden;
}


/* =========================================================
   360px 이하
========================================================= */

@media screen and (max-width:360px){

    .mainyoutube_area{
        padding:60px 0 65px;
    }

    .mainyoutube_title h2{
        font-size:19px;
    }

    .mainyoutube_slider .swiper-slide{
        width:86%;
    }

    .mainyoutube_info strong{
        font-size:14px;
    }

    .mainyoutube_info > span{
        font-size:8px;
    }

    .mainyoutube_play{
        width:48px;
        height:35px;
    }

    .mainyoutube_channel p{
        font-size:9px;
    }

}


.maincustom_area{background:#efedea;}
.maincustom_area .bg_outer{padding:15% 0 0;}
.maincustom_area.bg1 .bg_outer{background:url("//dainpark06.cafe24.com/sunny/images/bg_maincustom.jpg") repeat-x 0 0;background-size:auto 250px;}
.maincustom_area.bg2 .bg_outer{background:url("//dainpark06.cafe24.com/sunny/images/bg_mainmovie2.jpg") repeat-x 0 0;background-size:auto 250px;}
.maincustom_area .title_box{position:relative;margin:0 auto 30px;}
.maincustom_area .title_box h2{font-family: 'Pretendard', sans-serif;font-size:18px;line-height:18px;color:#fff;letter-spacing:-1px;font-weight:300;text-align:center;}
.maincustom_area .title_box .txt{position:absolute;right:0;top:13px;display:inline-block;font-family:'Pretendard', sans-serif;color:#fff;font-size:13px;height:20px;line-height:20px;text-transform:uppercase;}
.maincustom_area .title_box .txt:after{content:'';position:absolute;bottom:0;left:0;height:1px;width:0;background:#fff;transition: all 0.3s ease-in-out;}
.maincustom_area .title_box .txt:hover:after{width:100%;transition: all 0.3s ease-in-out;}

.maincustomban_area{margin:0 15px;}
.maincustomban_box{position:relative;height:300px;background:url("//dainpark06.cafe24.com/sunny/images/mobilebg_maincustomban.jpg") no-repeat 0 0;background-size:cover;}
.maincustomban_box dl{position:absolute;bottom:8%;left:20px;right:20px;}
.maincustomban_box dt{font-size:18px;line-height:20px;color:#fff;letter-spacing:-1px;font-weight:300;}
.maincustomban_box .txt{font-size:13px;line-height:22px;color:#a2a09f;letter-spacing:-1px;margin:18px 0 0;font-weight:300;}
.maincustomban_box .img{position:relative;z-index:1;}
.maincustomban_box .img img{width:100%;}


.maincustomtext_area{padding:15% 15px;}
.maincustomtext_box .img_box{position:relative;overflow:hidden;}
.maincustomtext_box .img_box .text{position:absolute;left:0;top:50%;transform:translateY(-50%);font-family:'Pretendard', sans-serif;width:100%;color:#fff;font-size:40px;line-height:40px;text-align:center;letter-spacing:3px;font-weight:400;z-index:3;}
.maincustomtext_box .img_box .bg{display:none;}

.maincustomtext_box .img{position:relative;overflow:hidden;}
.maincustomtext_box .img img{width:100%;}
.maincustomtext_box dl{padding:30px 0 0 0;text-align:center;}
.maincustomtext_box dt{font-family: 'Pretendard', sans-serif;font-size:16px;line-height:18px;color:#201f1e;letter-spacing:-1px;font-weight:400;}
.maincustomtext_box .txt{font-size:12px;line-height:20px;color:#97938f;letter-spacing:-1px;margin:10px 0 20px;font-weight:300;}
.maincustomtext_box .btn{font-family:'Pretendard', sans-serif;font-size:12px;line-height:12px;color:#c3b6ab;text-transform:uppercase;}

.maincustomtext_area .slide_wrap{}
.maincustomtext_area .slide_wrap .ctrl {display:none !important;}
    
.maincustomtext_area .box{}
.maincustomtext_area .box.slick-active{}
    
.maincustomtext_area .paging_box{position:relative;bottom:auto;padding-top:30px;text-align:center;}
.maincustomtext_area .paging_box li{display:inline;margin:0 6px;}
.maincustomtext_area .paging_box li button{width:6px;height:6px;background:#222120;border-radius:6px;opacity:0.3;outline:0;border:0;text-indent:-999em;}
.maincustomtext_area .paging_box li.slick-active button{opacity:1;}
.maincustomtext_area .paging_box li button:before{display:none;}


/* ==================================================
   MOBILE CLIENTS
   베이직가구를 찾아주신 클라이언트
================================================== */

.mainourclients_area{
    position:relative;

    width:100%;

    margin:0;
    padding:60px 0 70px;

    background:#fff;

    overflow:hidden;

    box-sizing:border-box;
}


.mainourclients_box{
    position:relative;

    width:100%;

    margin:0;
    padding:0;

    box-sizing:border-box;
}


/* ==================================================
   TITLE
================================================== */

.mainourclients_area .title_main{
    position:relative;

    width:auto;

    margin:0 15px 28px;
    padding:0;

    box-sizing:border-box;
}


.mainourclients_area .title_main h2{
    margin:0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:20px;
    line-height:1.3;

    font-weight:800;

    color:#111;

    letter-spacing:-.8px;

    text-align:left;
    text-transform:none;
}


/* ==================================================
   CLIENTS SLIDER VIEWPORT
   좌우 15px 고정
================================================== */

.mainclients_outer{
    position:relative;

    width:100%;
    margin:0;

    padding:0;

    overflow:hidden;

    box-sizing:border-box;
}


/* 실제 화면에 보이는 영역 */
.mainourclients_area .mainour_clients{
    position:relative !important;

    width:calc(100% - 30px) !important;

    margin:0 15px !important;
    padding:0 !important;

    overflow:hidden !important;

    box-sizing:border-box;
}


/* ==================================================
   WRAPPER
================================================== */

.mainourclients_area .mainour_clients .swiper-wrapper{
    position:relative;

    display:flex !important;

    margin:0 !important;
    padding:0 !important;

    box-sizing:border-box;
}


/* ==================================================
   CARD
   3개 + 8px 간격 2개
================================================== */

.mainourclients_area .mainour_clients .swiper-slide{
    position:relative;

    display:block !important;
    flex:0 0 auto !important;

    /* 폭은 JS에서 실제 viewport 기준으로 계산 */
    width:auto;

    margin:0 !important;
    padding:0 !important;

    text-align:left;

    box-sizing:border-box;
}


.mainourclients_area .mainour_clients .swiper-slide .img_box,
.mainourclients_area .mainour_clients .swiper-slide > .text{
    width:calc(100% - 8px) !important;
}

/* ==================================================
   IMAGE
================================================== */

.mainourclients_area .img_box{
    position:relative;

    width:100%;

    margin:0;
    padding:0;

    overflow:hidden;

    border-radius:14px;

    background:#f4f2ef;

    box-sizing:border-box;
}


/*
   구형 브라우저까지 안전하게 정사각형
*/
.mainourclients_area .img_box::before{
    content:"";

    display:block;

    width:100%;
    padding-bottom:100%;
}


/* 기존 bg 제거 */
.mainourclients_area .img_box .bg{
    display:none !important;
}


/* PC에만 있던 overlay용 text 혹시 남아있을 때 */
.mainourclients_area .img_box > .text{
    display:none !important;
}


.mainourclients_area .img{
    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    margin:0;
    padding:0;

    overflow:hidden;

    box-sizing:border-box;
}


.mainourclients_area .img img{
    display:block;

    width:100%;
    height:100%;

    margin:0;
    padding:0;

    object-fit:cover;
    object-position:center;

    transform:scale(1);

    transition:
        transform .7s cubic-bezier(.16,1,.3,1);
}


/* 터치 시 아주 살짝 확대 */
.mainourclients_area .swiper-slide:active .img img{
    transform:scale(1.025);
}


/* ==================================================
   CLIENT TEXT
================================================== */

.mainourclients_area .swiper-slide > .text{
    position:relative;

    width:100%;

    margin:13px 0 0;
    padding:0;

    text-align:center;

    box-sizing:border-box;
}


/* 영문 */
.mainourclients_area .swiper-slide > .text span{
    display:block;

    margin:0 0 4px;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:9px;
    line-height:1.35;

    font-weight:400;

    color:#aaa39c;

    letter-spacing:0;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}


/* 한글 */
.mainourclients_area .swiper-slide > .text strong{
    display:block;

    margin:0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:13px;
    line-height:1.4;

    font-weight:600;

    color:#222;

    letter-spacing:-.5px;

    word-break:keep-all;
}


/* ==================================================
   PROGRESS
================================================== */

.mainclients_progress{
    position:relative;

    width:calc(100% - 30px);
    height:1px;

    margin:28px 15px 0;

    padding:0;

    background:#dedede;

    overflow:hidden;

    box-sizing:border-box;
}


.mainclients_progress span{
    position:absolute;

    top:0;
    left:0;

    width:22%;
    height:1px;

    margin:0;
    padding:0;

    background:#222;

    transition:left .35s ease;

    box-sizing:border-box;
}


/* ==================================================
   기존 SLICK 요소 전부 숨김
================================================== */

.mainourclients_area .slide_wrap,
.mainourclients_area .wide_slide,
.mainourclients_area .ctrl,
.mainourclients_area .prev,
.mainourclients_area .next,
.mainourclients_area .paging_box,
.mainourclients_area .slick-dots{
    display:none !important;
}


/* ==================================================
   SMALL MOBILE
================================================== */

@media screen and (max-width:360px){

    .mainourclients_area{
        padding:52px 0 62px;
    }

    .mainourclients_area .title_main{
        margin-bottom:24px;
    }

    .mainourclients_area .title_main h2{
        font-size:19px;
    }

    .mainourclients_area .swiper-slide > .text strong{
        font-size:12px;
    }

    .mainclients_progress{
        margin-top:24px;
    }

}

/* =========================================================
   MAIN MAGAZINE - MOBILE
   PC DESIGN → SWIPE
========================================================= */

.maincustomtext_area2{
    position:relative;
    width:100%;

    margin:0;
    padding:65px 0 70px;

    background:#fff;

    overflow:hidden;

    box-sizing:border-box;
}


.maincustomtext_box2{
    position:relative;

    width:100%;

    margin:0;
    padding:0;

    box-sizing:border-box;
}


/* =========================================================
   TITLE
========================================================= */

.mainmagazine_title{
    position:relative;

    display:flex;

    align-items:center;
    justify-content:space-between;

    width:calc(100% - 30px);

    margin:0 15px 30px;

    padding:0;

    box-sizing:border-box;
}


.mainmagazine_title h2{
    margin:0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:20px;
    line-height:1.3;

    font-weight:800;

    color:#111;

    letter-spacing:-.8px;
}


/* 우측 MORE + */

.mainmagazine_more{
    display:inline-flex;

    align-items:center;

    gap:4px;

    margin:0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:12px;
    line-height:1;

    font-weight:500;

    color:#b8ada3;

    text-decoration:none;

    text-transform:uppercase;
}


.mainmagazine_more span{
    font-size:11px;
    font-weight:400;
}


/* =========================================================
   OUTER
========================================================= */

.mainmagazine_outer{
    position:relative;

    width:100%;

    margin:0;
    padding:0;

    overflow:hidden;

    box-sizing:border-box;
}


/* =========================================================
   VIEWPORT
   다른 모바일 슬라이드와 동일하게 좌우 15px
========================================================= */

.mainmagazine_slider{
    position:relative !important;

    width:calc(100% - 30px);

    margin:0 15px;
    padding:0;

    overflow:hidden !important;

    box-sizing:border-box;
}


/* =========================================================
   WRAPPER
========================================================= */

.mainmagazine_slider .swiper-wrapper{
    display:flex;

    align-items:flex-start;

    margin:0;
    padding:0;

    box-sizing:border-box;
}


/* =========================================================
   SLIDE

   JS에서 실제 width를 계산할 거라
   여기서는 margin 넣지 않음
========================================================= */

.mainmagazine_slider .swiper-slide{
    position:relative;

    flex-shrink:0;

    margin:0;
    padding:0;

    box-sizing:border-box;
}


/* =========================================================
   CARD
========================================================= */

.mainmagazine_item > a{
    display:block;

    width:100%;

    margin:0;
    padding:0;

    color:inherit;

    text-decoration:none;

    box-sizing:border-box;
}


/* =========================================================
   IMAGE
========================================================= */

.mainmagazine_img{
    position:relative;

    width:100%;

    aspect-ratio:1 / 1;

    margin:0;
    padding:0;

    overflow:hidden;

    background:#f3f1ee;

    box-sizing:border-box;
}


.mainmagazine_img img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    transform:scale(1);

    transition:
        transform .55s cubic-bezier(.16,1,.3,1);
}


/* 터치 */

.mainmagazine_item:active .mainmagazine_img img{
    transform:scale(1.025);
}


/* =========================================================
   TEXT
========================================================= */

.mainmagazine_text{
    position:relative;

    width:100%;

    margin:0;
    padding:18px 0 0;

    text-align:left;

    box-sizing:border-box;
}


/* 제목 */

.mainmagazine_text h3{
    margin:0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:16px;
    line-height:1.5;

    font-weight:600;

    color:#1c1c1c;

    letter-spacing:-.55px;

    text-align:left;

    word-break:keep-all;
}


/* 설명 */

.mainmagazine_text p{
    margin:13px 0 0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:12px;
    line-height:1.75;

    font-weight:400;

    color:#000000;

    letter-spacing:-.35px;

    text-align:left;

    word-break:keep-all;

    /*
       모바일에서 너무 길어지지 않게
       최대 3줄
    */
    display:-webkit-box;

    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;

    overflow:hidden;
}


/* =========================================================
   CARD MORE +
========================================================= */

.mainmagazine_item_more{
    position:relative;

    display:inline-flex;

    align-items:center;

    gap:5px;

    margin:20px 0 0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:9px;
    line-height:1;

    font-weight:600;

    color:#b7aca2;

    letter-spacing:.15px;

    text-transform:uppercase;
}


.mainmagazine_item_more b{
    font-size:10px;
    font-weight:400;
}


/* =========================================================
   PROGRESS
========================================================= */

.mainmagazine_progress{
    position:relative;

    width:calc(100% - 30px);
    height:1px;

    margin:28px 15px 0;

    background:#ddd;

    overflow:hidden;

    box-sizing:border-box;
}


.mainmagazine_progress span{
    position:absolute;

    top:0;
    left:0;

    width:22%;
    height:1px;

    background:#111;

    transition:left .3s ease;

    will-change:left;
}


/* =========================================================
   기존 모바일 매거진 CSS 무력화
========================================================= */

.maincustomtext_area2 .slide_wrap{
    position:relative;
}

.maincustomtext_area2 .ctrl,
.maincustomtext_area2 .paging_box{
    display:none !important;
}


/* 기존 dl 구조 혹시 남아 있을 경우 */

.maincustomtext_box2 dl{
    margin:0;
    padding:0;
    text-align:left;
}

/* 매거진 이미지 아래 불필요한 가로선 제거 */
.maincustomtext_area2 .mainmagazine_text,
.maincustomtext_area2 .mainmagazine_text h3,
.maincustomtext_area2 .mainmagazine_item dl{
    border-top:none !important;
}

.maincustomtext_area2 .mainmagazine_text h3{
    display:block;

    margin:0 !important;
    padding:0 !important;

    border-top:0 !important;

    font-family:'Pretendard',sans-serif;
    font-size:16px;
    line-height:1.5;
    font-weight:600;

    color:#1c1c1c;
    letter-spacing:-.55px;

    text-align:left;
    word-break:keep-all;
}


/* =========================================================
   360 이하
========================================================= */

@media screen and (max-width:360px){

    .maincustomtext_area2{
        padding:60px 0 65px;
    }

    .mainmagazine_title h2{
        font-size:19px;
    }

    .mainmagazine_text h3{
        font-size:15px;
    }

    .mainmagazine_text p{
        font-size:10px;
    }

}

/* ==================================================
   MAIN INSTAGRAM - MOBILE
================================================== */

.maininsta_area{
    position:relative;

    width:100%;

    margin:0;
    padding:80px 0 80px;

    background:#f5f3f0;

    overflow:hidden;

    box-sizing:border-box;
}


/* ==================================================
   TITLE
================================================== */

.maininsta_area .title_main{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:space-between;

    width:calc(100% - 30px);

    margin:0 15px 28px;
    padding:0;

    box-sizing:border-box;
}


.maininsta_area .title_main h2{
    margin:0;
    padding:0;

    font-family:'Pretendard',sans-serif;

    font-size:20px;
    line-height:1.3;

    font-weight:800;

    color:#111;

    letter-spacing:-.8px;

    text-align:left;

    text-transform:none;
}


/* @_basicgagu */

.maininsta_area .title_main .txt2{
    position:static;

    margin:0;
    padding:0;

    transform:none;

    font-family:'Pretendard',sans-serif;

    font-size:10px;
    line-height:1;

    font-weight:500;

    color:#8f8983;

    letter-spacing:0;

    text-decoration:none;

    white-space:nowrap;
}


/* ==================================================
   INSTAGRAM WIDGET
================================================== */

.maininsta_box{
    position:relative;

    width:calc(100% - 30px);

    margin:0 15px;
    padding:0;

    overflow:hidden;

    box-sizing:border-box;
}


.maininsta_box iframe{
    display:block;

    width:100% !important;
    height:520px !important;

    margin:0;
    padding:0;

    border:0 !important;

    overflow:hidden;

    box-sizing:border-box;
}


/* ==================================================
   360 이하
================================================== */

@media screen and (max-width:360px){

    .maininsta_area{
        padding:55px 0 28px;
    }

    .maininsta_area .title_main h2{
        font-size:19px;
    }

    .maininsta_area .title_main .txt2{
        font-size:9px;
    }

    .maininsta_box iframe{
        height:500px !important;
    }

}



.price_box .coupon_badge{
    display:inline-block !important;
    margin-left:2px !important;
    padding:4px 7px 5px !important;
    background:#b9633d !important;
    color:#fff !important;
    font-size:11px !important;
    line-height:11px !important;
    font-weight:500 !important;
    letter-spacing:-0.2px !important;
    vertical-align:middle !important;
    border-radius:3px !important;
}

.price_box .cutoff_badge{
    background:#7ba637 !important;
}

.price_box .limited_badge{
    background:#cd3f3b !important;
}

/* ==================================================
   MOBILE WALNUT
   SCROLL REVEAL EFFECT
   레이아웃 위치값은 건드리지 않음
================================================== */


/* ==================================================
   IMAGE
================================================== */

.mainwalnut_area .mainwalnut_item .mainwalnut_img{
    opacity:0 !important;

    transition:
        opacity .85s ease !important;
}


.mainwalnut_area .mainwalnut_item .mainwalnut_img img{
    transform:scale(1.035) !important;

    transition:
        transform 1.4s cubic-bezier(.16,1,.3,1) !important;
}


/* 등장 */
.mainwalnut_area
.mainwalnut_item.walnut_reveal
.mainwalnut_img{

    opacity:1 !important;
}


.mainwalnut_area
.mainwalnut_item.walnut_reveal
.mainwalnut_img img{

    transform:scale(1) !important;
}


/* ==================================================
   WALNUT WOOD TEXT
================================================== */

.mainwalnut_area .mainwalnut_intro .eyebrow,
.mainwalnut_area .mainwalnut_intro strong{

    opacity:0 !important;

    transform:translateY(12px) !important;
}


.mainwalnut_area
.mainwalnut_intro.walnut_reveal
.eyebrow{

    opacity:1 !important;
    transform:translateY(0) !important;

    transition:
        opacity .6s ease .05s,
        transform .8s cubic-bezier(.16,1,.3,1) .05s !important;
}


.mainwalnut_area
.mainwalnut_intro.walnut_reveal
strong{

    opacity:1 !important;
    transform:translateY(0) !important;

    transition:
        opacity .65s ease .12s,
        transform .85s cubic-bezier(.16,1,.3,1) .12s !important;
}


/* ==================================================
   IMAGE TEXT
   02 / HARD WOOD / POINT 01 / POINT 02
================================================== */

.mainwalnut_area .mainwalnut_caption,
.mainwalnut_area .mainwalnut_product_title,
.mainwalnut_area .mainwalnut_editorial_caption{

    opacity:0 !important;

    transform:translateY(10px) !important;
}


.mainwalnut_area
.mainwalnut_item.walnut_reveal
.mainwalnut_caption,

.mainwalnut_area
.mainwalnut_item.walnut_reveal
.mainwalnut_product_title,

.mainwalnut_area
.mainwalnut_item.walnut_reveal
.mainwalnut_editorial_caption{

    opacity:1 !important;

    transform:translateY(0) !important;

    transition:
        opacity .65s ease .12s,
        transform .8s cubic-bezier(.16,1,.3,1) .12s !important;
}


/* ==================================================
   BOTTOM TEXT
================================================== */

.mainwalnut_area .mainwalnut_bottom_text .eyebrow,
.mainwalnut_area .mainwalnut_bottom_text h3,
.mainwalnut_area .mainwalnut_bottom_text > p,
.mainwalnut_area .mainwalnut_bottom_text .sub_text,
.mainwalnut_area .mainwalnut_bottom_text .mainwalnut_button{

    opacity:0 !important;

    transform:translateY(12px) !important;
}


/* Heritage Walnut */
.mainwalnut_area
.mainwalnut_bottom_text.walnut_reveal
.eyebrow{

    opacity:1 !important;
    transform:translateY(0) !important;

    transition:
        opacity .6s ease,
        transform .8s cubic-bezier(.16,1,.3,1) !important;
}


/* 제목 */
.mainwalnut_area
.mainwalnut_bottom_text.walnut_reveal
h3{

    opacity:1 !important;
    transform:translateY(0) !important;

    transition:
        opacity .65s ease .08s,
        transform .85s cubic-bezier(.16,1,.3,1) .08s !important;
}


/* 설명 */
.mainwalnut_area
.mainwalnut_bottom_text.walnut_reveal
> p{

    opacity:1 !important;
    transform:translateY(0) !important;

    transition:
        opacity .65s ease .14s,
        transform .85s cubic-bezier(.16,1,.3,1) .14s !important;
}


/* 해시태그 */
.mainwalnut_area
.mainwalnut_bottom_text.walnut_reveal
.sub_text{

    opacity:1 !important;
    transform:translateY(0) !important;

    transition:
        opacity .65s ease .19s,
        transform .85s cubic-bezier(.16,1,.3,1) .19s !important;
}


/* 버튼 */
.mainwalnut_area
.mainwalnut_bottom_text.walnut_reveal
.mainwalnut_button{

    opacity:1 !important;
    transform:translateY(0) !important;

    transition:
        opacity .65s ease .25s,
        transform .85s cubic-bezier(.16,1,.3,1) .25s !important;
}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion:reduce){

    .mainwalnut_area .mainwalnut_img,
    .mainwalnut_area .mainwalnut_img img,
    .mainwalnut_area .mainwalnut_intro *,
    .mainwalnut_area .mainwalnut_caption,
    .mainwalnut_area .mainwalnut_product_title,
    .mainwalnut_area .mainwalnut_editorial_caption,
    .mainwalnut_area .mainwalnut_bottom_text *{

        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }

}

/* ==================================================
   MOBILE WALNUT
   LINE DRAW EFFECT
   위치값은 건드리지 않음
================================================== */


/* ==================================================
   SCENE 02 TOP LINE
   왼쪽 → 오른쪽
================================================== */

.walnut_scene02::before{
    transform:scaleX(0);
    transform-origin:left center;

    transition:
        transform .9s cubic-bezier(.16,1,.3,1);
}


.walnut_scene02.walnut_reveal::before{
    transform:scaleX(1);
}


/* ==================================================
   SCENE 02 BOTTOM LINE
   왼쪽 → 오른쪽
================================================== */

.walnut_scene02::after{
    transform:scaleX(0);
    transform-origin:left center;

    transition:
        transform 1s cubic-bezier(.16,1,.3,1) .12s;
}


.walnut_scene02.walnut_reveal::after{
    transform:scaleX(1);
}


/* ==================================================
   03 장식장 위 LEFT LINE
   화면 왼쪽 → 이미지 방향
================================================== */

.walnut_scene02 .walnut_item03::before{
    transform:scaleX(0);
    transform-origin:left center;

    transition:
        transform .85s cubic-bezier(.16,1,.3,1) .08s;
}


.walnut_scene02
.walnut_item03.walnut_reveal::before{
    transform:scaleX(1);
}


/* ==================================================
   SCENE 03 VERTICAL LINE
   위 → 아래
================================================== */

.walnut_scene03::before{
    transform:scaleY(0);
    transform-origin:center top;

    transition:
        transform .8s cubic-bezier(.16,1,.3,1);
}


.walnut_scene03.walnut_reveal::before{
    transform:scaleY(1);
}


/* ==================================================
   SCENE 03 HORIZONTAL LINE
   세로선 끝 → 오른쪽
   현재 ::after가 실제 선으로 사용 중인 경우
================================================== */

.walnut_scene03::after{
    transform:scaleX(0);
    transform-origin:left center;

    transition:
        transform .85s cubic-bezier(.16,1,.3,1) .22s;
}


.walnut_scene03.walnut_reveal::after{
    transform:scaleX(1);
}


/* ==================================================
   하단 전체 가로선
   화면 왼쪽 → 오른쪽
================================================== */

.mainwalnut_area::after{
    transform:scaleX(0);
    transform-origin:left center;

    transition:
        transform 1.05s cubic-bezier(.16,1,.3,1);
}


/*
   Scene03가 화면에 들어온 시점에
   마지막 전체 하단선 활성화
*/
.mainwalnut_area:has(.walnut_scene03.walnut_reveal)::after{
    transform:scaleX(1);
}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion:reduce){

    .walnut_scene02::before,
    .walnut_scene02::after,
    .walnut_scene02 .walnut_item03::before,
    .walnut_scene03::before,
    .walnut_scene03::after,
    .mainwalnut_area::after{

        transform:none !important;
        transition:none !important;
    }

}


.sliderfor_outer .slider-dots li,
.sliderfor_outer .slider-dots li *,
.sliderfor_outer .slider-dots li.slick-active,
.sliderfor_outer .slider-dots li.slick-active *,
.mainproducttab_area .tab li,
.mainproducttab_area .tab li *,
.mainproducttab_area .tab li.active,
.mainproducttab_area .tab li.active * {
  font-family: "Pretendard", sans-serif !important;
  font-weight: 600 !important;
}

/* =========================================================
   MAIN PROVE - MOBILE
   SCROLL REVEAL + LINE DRAW
========================================================= */


/* ---------------------------------------------------------
   기본 reveal 상태
--------------------------------------------------------- */

.mainprove_area .mainprove_title,
.mainprove_area .prove_realwood_image,
.mainprove_area .prove_realwood_text,
.mainprove_area .prove_basic_image,
.mainprove_area .prove_basic_text,
.mainprove_area .prove_wood_image,
.mainprove_area .prove_wood_text,
.mainprove_area .prove_faith_image,
.mainprove_area .prove_faith_text,
.mainprove_area .prove_vertical_text,
.mainprove_area .prove_quote{

    opacity:0;

    transform:translateY(24px);

    transition:
        opacity .8s ease,
        transform .9s cubic-bezier(.22,.61,.36,1);
}


/* 세로문구는 기존 transform 유지 필요 */

.mainprove_area .wood_vertical{
    transform:
        translateY(22px)
        rotate(180deg);
}


/* ---------------------------------------------------------
   TITLE
--------------------------------------------------------- */

.mainprove_title.prove_reveal{
    opacity:1;
    transform:translateY(0);
}


/* ---------------------------------------------------------
   REAL WOOD
--------------------------------------------------------- */

.prove_realwood.prove_reveal .prove_realwood_image{
    opacity:1;
    transform:translateY(0);

    transition-delay:.05s;
}


.prove_realwood.prove_reveal .prove_realwood_text{
    opacity:1;
    transform:translateY(0);

    transition-delay:.18s;
}


/* Real Wood 작은 선 */

.prove_small_title .line{
    transform:scaleX(0);
    transform-origin:left center;

    transition:
        transform .75s cubic-bezier(.22,.61,.36,1);
}


.prove_realwood.prove_reveal
.prove_small_title .line{

    transform:scaleX(1);

    transition-delay:.35s;
}


/* ---------------------------------------------------------
   BASIC
--------------------------------------------------------- */

.prove_basic.prove_reveal .prove_basic_text{
    opacity:1;
    transform:translateY(0);

    transition-delay:.05s;
}


.prove_basic.prove_reveal .prove_basic_image{
    opacity:1;
    transform:translateY(0);

    transition-delay:.17s;
}


.prove_basic.prove_reveal .basic_vertical{
    opacity:1;

    transform:translateY(-2px);

    transition-delay:.34s;
}


/* ---------------------------------------------------------
   WOOD
--------------------------------------------------------- */

.prove_wood.prove_reveal .prove_wood_image{
    opacity:1;
    transform:translateY(0);

    transition-delay:.05s;
}


.prove_wood.prove_reveal .prove_wood_text{
    opacity:1;
    transform:translateY(0);

    transition-delay:.17s;
}


.prove_wood.prove_reveal .wood_vertical{
    opacity:1;

    transform:
        translateY(-2px)
        rotate(180deg);

    transition-delay:.34s;
}


/* ---------------------------------------------------------
   FAITH
--------------------------------------------------------- */

.prove_faith.prove_reveal .prove_faith_text{
    opacity:1;
    transform:translateY(0);

    transition-delay:.05s;
}


.prove_faith.prove_reveal .prove_faith_image{
    opacity:1;
    transform:translateY(0);

    transition-delay:.17s;
}


.prove_faith.prove_reveal .faith_vertical{
    opacity:1;

    transform:translateY(-2px);

    transition-delay:.34s;
}


/* =========================================================
   LINE DRAW
========================================================= */


/* ---------------------------------------------------------
   REAL WOOD 하단 가로선
--------------------------------------------------------- */

.prove_realwood::after{

    right:auto;

    width:0;

    transition:
        width 1.05s cubic-bezier(.22,.61,.36,1);
}


.prove_realwood.prove_reveal::after{

    width:100%;

    transition-delay:.18s;
}


/* ---------------------------------------------------------
   BASIC 이미지 상단에서 왼쪽으로 뻗는 선
--------------------------------------------------------- */

.prove_basic_image::after{

    left:auto;
    right:0;

    width:0;

    transition:
        width 1s cubic-bezier(.22,.61,.36,1);
}


.prove_basic.prove_reveal
.prove_basic_image::after{

    width:100vw;

    transition-delay:.30s;
}


/* ---------------------------------------------------------
   FAITH 이미지 상단에서 왼쪽으로 뻗는 선
--------------------------------------------------------- */

.prove_faith_image::after{

    left:auto;
    right:0;

    width:0;

    transition:
        width 1s cubic-bezier(.22,.61,.36,1);
}


.prove_faith.prove_reveal
.prove_faith_image::after{

    width:100vw;

    transition-delay:.30s;
}


/* =========================================================
   BASIC → FAITH 세로 연결선
========================================================= */

/*
   기존 ::after의 top / bottom 계산은 그대로 사용하고
   scaleY만 이용해서 위 → 아래로 그어지게 함
*/

.prove_story_group::after{

    transform:scaleY(0);

    transform-origin:top center;

    transition:
        transform 1.7s cubic-bezier(.22,.61,.36,1);
}


.prove_story_group.prove_line_reveal::after{

    transform:scaleY(1);
}


/* =========================================================
   END QUOTE
========================================================= */

.prove_quote.prove_reveal{

    opacity:1;
    transform:translateY(0);
}


/* 양쪽 quote 선 */

.prove_quote .quote_line{

    transform:scaleX(0);

    transition:
        transform .85s cubic-bezier(.22,.61,.36,1);
}


/* 왼쪽 선 → 가운데에서 바깥쪽 */

.prove_quote .quote_line:first-child{
    transform-origin:right center;
}


/* 오른쪽 선 → 가운데에서 바깥쪽 */

.prove_quote .quote_line:last-child{
    transform-origin:left center;
}


.prove_quote.prove_reveal .quote_line{

    transform:scaleX(1);

    transition-delay:.20s;
}


/* =========================================================
   접근성
========================================================= */

@media (prefers-reduced-motion:reduce){

    .mainprove_area *,
    .mainprove_area *::before,
    .mainprove_area *::after{

        transition:none !important;
        animation:none !important;
    }

}

/* 메인 인스타그램 다음 푸터에만 적용 */
body.main-page .ft_inner{
    margin-top:-50px !important;
}

/* 롤링배너 */
#event .MS_img-wrap { position: relative; width: 100%; overflow: hidden; }
#event .event-imgs { position: relative; }
#event .MS_img-area { float: left; }
#event .MS_img-area:not(:first-child) { display: none; }
#event .MS_img-area img { width: 100%; }
#event .pagination { position: relative; left: 0; text-align: center; width: 100%; }
#event .pagination .swiper-pagination-switch { display: inline-block; margin: 0 2px; text-indent: -9999px; background: url(/images/d3/m_01/bull/event_now@2x.gif) no-repeat 0 50%; background-size: 19px 7px; width: 10px; height: 10px; }
#event .pagination .swiper-active-switch { background-position: -12px 50%; }
/* //롤링배너 */
.main h3 {font-size:1.250em; display: inline-block; margin:45px 0 18px 0; padding-top:6px; border-top:1px solid #3b3b3b;}
.main .topBanner {margin-top:15px;}
.main .topBanner .topBannerLeft {width:49%; float:left; position:relative;}
.main .topBanner .topBannerRight {width:49%; float:right; position:relative;}
.main .topBanner img {width:100%; vertical-align:top;}
.main .topBanner .topBannerTitle {width:100%; font-size:1.083em; font-weight:bold; padding:2px 0; background-color:rgba(0,0,0,0.4);; text-align:center; color:#fff; position:absolute; bottom:0; left:0;}

/*쿠폰 혜택 버튼*/
.main .coupon-benefit {position:relative; margin:-25px 0 10px 0} 
.main .btn-coupon { display:inline-block; height:16px; padding:0; margin-left:5px; border:1px solid #000; font-size:10px;}
.main .btn-coupon span { display:inline-block; height:16px; padding:0 5px; color:#fff; background:#000; vertical-align:top; font-size:11px; }
.main .btn-coupon em { display:inline-block; height:16px; padding:0 3px 0 0; font-size:10px; vertical-align:top; color:#000; }
/* BASIC css end */