/* BASIC css start */
@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

/* ================================================================
   S'WELL 메인 (리뉴얼)
   - 기존 메인 CSS(#mainSpot / .mainTit / .subBox) 구조 위에서 수정
   - 폭 기준은 swell_common.css 의 --contW / --contPad 공유
     (헤더 · 배너 · 메인타이틀 · 서브배너 · 푸터가 모두 같은 선에 정렬)
   ================================================================ */

body{
    background:#fff;
    color:#111;
    font-family:'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Noto Sans KR', sans-serif;
    font-weight:300;
}

#wrap{ overflow:hidden; }

/* 배너 카드 사이 간격 (한 값만 바꾸면 가로 · 세로 모두 반영) */
:root{
    --banGap:20px;
}

/* ================================================================
   스크롤 등장 효과
   HTML 의 data-ani="효과명" 으로 지정합니다.
   효과를 바꾸려면 main.html 의 data-ani 값만 교체하세요.

   wipeUp     아래에서 위로 열림
   wipeRight  왼쪽에서 오른쪽으로 열림
   wipeLeft   오른쪽에서 왼쪽으로 열림
   slideLeft  오른쪽에서 밀려 들어옴
   slideRight 왼쪽에서 밀려 들어옴
   popUp      아래에서 튀어 오름 (살짝 오버슈트)
   zoomIn     확대된 상태에서 원래 크기로
   flipUp     눕혀진 상태에서 세워짐
   (값 없음)  기본 페이드업
   ================================================================ */
[data-ani]{
    opacity:0;
    transition:opacity .9s cubic-bezier(.22,.61,.36,1),
               transform .9s cubic-bezier(.22,.61,.36,1),
               clip-path 1.05s cubic-bezier(.22,.61,.36,1);
}

[data-ani]:not(.aniIn){
    will-change:transform, opacity, clip-path;
}

[data-ani].aniIn{
    opacity:1;
    transform:none;
    clip-path:inset(0 0 0 0);
}

/* 기본 페이드업 */
[data-ani=""]{ transform:translateY(40px); }

/* 열림(마스크) 계열 */
[data-ani="wipeUp"]   { clip-path:inset(100% 0 0 0); }
[data-ani="wipeRight"]{ clip-path:inset(0 100% 0 0); }
[data-ani="wipeLeft"] { clip-path:inset(0 0 0 100%); }

/* 열림 계열은 안쪽 이미지가 반대로 따라 들어와 깊이감을 줍니다 */
[data-ani="wipeUp"] img   { transform:translateY(50px); }
[data-ani="wipeRight"] img{ transform:translateX(-60px); }
[data-ani="wipeLeft"] img { transform:translateX(60px); }
[data-ani^="wipe"] img{
    transition:transform 1.05s cubic-bezier(.22,.61,.36,1);
}
[data-ani^="wipe"].aniIn img{ transform:none; }

/* 밀려 들어옴 */
[data-ani="slideLeft"] { transform:translateX(90px); }
[data-ani="slideRight"]{ transform:translateX(-90px); }

/* 튀어 오름 : 끝에서 살짝 넘어갔다 자리 잡음 */
[data-ani="popUp"]{
    transform:translateY(85px) scale(.94);
    transition-duration:1s;
    transition-timing-function:cubic-bezier(.34, 1.42, .64, 1);
}

/* 확대 → 원래 크기 */
[data-ani="zoomIn"]{
    transform:scale(1.14);
    transition-duration:1.1s;
}

/* 눕혔다 세움 */
[data-ani="flipUp"]{
    transform:perspective(900px) rotateX(24deg) translateY(60px);
    transform-origin:50% 100%;
    transition-duration:1s;
}

/* 모션 최소화를 켠 사용자에게는 효과 없이 바로 노출 */
@media (prefers-reduced-motion: reduce){
    [data-ani], [data-ani] img,
    #mainSpot .grid .cell .grid_txt,
    #mainSpot .grid .cell .grid_ttl{
        opacity:1 !important;
        transform:none !important;
        clip-path:none !important;
        transition:none !important;
    }
}


/* ----------------------------------------------------------------
   메인 비쥬얼 배너
---------------------------------------------------------------- */
#mainSpot{
    position:relative;
    width:var(--contW, 1500px);
    max-width:calc(100% - (var(--contPad, 20px) * 2));
    min-width:1200px;
    margin:0 auto;
    box-sizing:border-box;
}

#mainSpot .grid{
    width:100%;
    table-layout:fixed;
    border-collapse:collapse;
}

#mainSpot .grid .cell{
    position:relative;
    padding:0 0 var(--banGap);
    vertical-align:top;
    text-align:left;
}

#mainSpot .grid .cellR{
    text-align:right;
}

/* 좌 · 우 셀 사이 간격 : 이미지를 셀보다 절반 간격만큼 좁혀서 확보 */
#mainSpot .grid .cell > a{
    display:inline-block;
    position:relative;
    width:calc(100% - (var(--banGap) / 2));
    overflow:hidden;
    vertical-align:top;
    /* 카드 폭을 기준으로 타이틀 크기를 계산하기 위한 설정 */
    container-type:inline-size;
}

#mainSpot .grid .cell img{
    display:block;
    width:100%;
    height:auto;
    transition:transform 1s cubic-bezier(.22,.61,.36,1);
}

#mainSpot .grid .cell > a:hover img{
    transform:scale(1.04);
}

/* 밝은 사진 위에서도 우측 상단 흰 글씨가 읽히도록 하는 옅은 그림자
   (필요 없으면 이 블록만 지우면 됩니다) */
#mainSpot .grid .cell > a:before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:38%;
    background:linear-gradient(to bottom, rgba(0,0,0,.32), rgba(0,0,0,0));
    z-index:1;
    opacity:0;
    pointer-events:none;
    transition:opacity .45s cubic-bezier(.22,.61,.36,1);
}

#mainSpot .grid .cell > a.aniIn:before{
    opacity:1;
    transition-delay:.3s;
}

/* 우측 상단 텍스트 : 이미지가 뜰 때 함께 등장 */
#mainSpot .grid .cell .grid_txt{
    position:absolute;
    top:35px;
    right:35px;
    z-index:2;
    color:#fff;
    text-align:right;
    opacity:0;
    transform:translateY(-12px);
    transition:opacity .45s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.22,.61,.36,1);
}

#mainSpot .grid .cell > a.aniIn .grid_txt{
    opacity:1;
    transform:none;
    transition-delay:.35s;
}

#mainSpot .grid .cell .grid_txt p{
    font-family:"Antonio", 'Noto Sans KR', sans-serif;
    font-size:16px;
    font-weight:600;
    letter-spacing:.03em;
    line-height:1.4;
}

#mainSpot .grid .cell .grid_txt span{
    display:inline-block;
    border-bottom:1px solid #fff;
    font-size:14px;
    line-height:26px;
}

#mainSpot .grid .cell .grid_txt span i{
    display:inline-block;
    font-style:normal;
    margin-left:3px;
    transition:transform .3s;
}

#mainSpot .grid .cell > a:hover .grid_txt span i{
    transform:translateX(5px);
}

/* 하단 타이틀 : 컬러 띠는 이미지에 이미 있으므로 배경 없이 글자만 올립니다.
   이미지가 뜰 때 띠 위로 함께 올라옵니다.

   위치 · 크기는 원본 이미지(740px 폭) 실측값 기준입니다.
     글자 캡높이 55px / 왼쪽 22px / 바닥에서 20px
   카드 폭이 달라져도 비율이 유지되도록 cqw(카드 폭의 %) 로 지정했습니다. */
#mainSpot .grid .cell .grid_ttl{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:2;
    padding:0 2.97cqw 0.68cqw;   /* 좌 22px / 하 5px (740px 기준) */
    box-sizing:border-box;
    background:none;             /* 띠는 이미지에 포함 */
    transform:translateY(100%);
    transition:transform .55s cubic-bezier(.22,.61,.36,1);
}

#mainSpot .grid .cell > a.aniIn .grid_ttl{
    transform:translateY(0);
    transition-delay:.3s;
}

#mainSpot .grid .cell .grid_ttl strong{
    display:block;
    font-family:"Antonio", sans-serif;
    font-size:75px;              /* cqw 미지원 브라우저용 기본값 */
    font-size:10.18cqw;          /* 카드 폭의 10.18% (740px 에서 75px) */
    font-weight:700;
    line-height:1;
    letter-spacing:.005em;
    color:#fff;
    white-space:nowrap;
}

/* ----------------------------------------------------------------
   메인타이틀
---------------------------------------------------------------- */
.mainTit{
    width:var(--contW, 1500px);
    max-width:calc(100% - (var(--contPad, 20px) * 2));
    min-width:1200px;
    margin:70px auto 90px;
    box-sizing:border-box;
}

.mainTit h3{
    color:#222;
    font-family:"Antonio", 'Noto Sans KR', sans-serif;
    font-size:26px;
    font-weight:700;
    text-transform:uppercase;
    line-height:1.2;
}

.mainTit p{
    margin:15px 0 0;
    color:#525252;
    font-size:14px;
    font-weight:300;
    line-height:24px;
}


/* ----------------------------------------------------------------
   서브배너
---------------------------------------------------------------- */
.subBox{
    display:flex;
    gap:21px;
    width:var(--contW, 1500px);
    max-width:calc(100% - (var(--contPad, 20px) * 2));
    min-width:1200px;
    margin:0 auto;
    box-sizing:border-box;
}

.subBox > div{
    flex:1;
    min-width:0;
}

.subBox > div a{
    display:block;
    position:relative;
    overflow:hidden;
}

.subBox > div img{
    display:block;
    width:100%;
    height:auto;
    transition:transform 1s cubic-bezier(.22,.61,.36,1);
}

.subBox > div a:hover img{
    transform:scale(1.05);
}

.subBox > div p{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:200px;
    height:50px;
    line-height:48px;
    box-sizing:border-box;
    border:1px solid #fff;
    color:#fff;
    font-size:18px;
    text-align:center;
    transition:background .3s, color .3s;
}

.subBox > div a:hover p{
    background:#fff;
    color:#111;
}
/* BASIC css end */