/* BASIC css start */
* { margin:0; padding:0; box-sizing:border-box; }
#footer, #fixBtns { display:none !important; opacity:0 !important; }
.goodsListWrap.grid_4 ul {
    grid-template-columns: repeat(3, minmax(calc(33.33% - 20px), 1fr)) !important;
}
button { background:transparent; }
.insta { width:630px; position:absolute; right:0; transform: translateY(-83px); font-size: 20px; font-weight: 500; letter-spacing: 0.6px; line-height: normal; color:#fff; }




.video-wrap {position:relative; padding-bottom:51.25%; padding-top:30px; height:0; overflow:hidden;}
.video-wrap iframe,
.video-wrap object,
.video-wrap embed {position:absolute; top:0; left:0; width:100%; height:100%;}





.wrap {
    position:relative;
}

.float {
    position:fixed;
    left:0; top:0;
    width:40vw; height:100vh;
    background:url('//sucia5374.imglink.kr/publishing/resource/image/09MAGAZINE/01HAYUN/img_visual.png') no-repeat center;
    background-size:cover;
    z-index:10;
}
.float:after{
    content:'';
    display:block;
    position:absolute;
    left:0; top:0;
    width:100%; height:100%;
    background:#fff;
    transition:height 0.5s cubic-bezier(.55,.36,.74,.49);
    transition-delay:0.3s;
    z-index:10;
}
.wrap.on .float:after{
    height:0%;
}
.float_desc{
    position:relative;
    display:flex;
    justify-content:space-between;
    padding:20px;
    z-index:21;
}
.float_desc p, .float_desc a {
    font-size:20px;
    line-height:36px;
    font-weight:600;
    color:#fff;
}
.sign {
    position:absolute;
    bottom:60px;
    right:14px;
}

main { position:relative; padding-left:40vw; width:100%; }

.stn { width:100%; }

.stn_top { position:relative; display:flex; justify-content:center; align-items:center; width:100%; height:100vh; background:#fff; opacity:0; transition:opacity 0.5s; transition-delay:1s; }
.stn_visual { position:relative; display:flex; padding:200px 0; flex-direction:column; justify-content:center; align-items:center; }
.stn_visual .logo { width:465px; height:auto; margin-bottom:32px; }
.desc { font-size:18px; }
.desc_top, .desc_mid { display:flex; gap:12px; width:238px; line-height: 31px; letter-spacing: 0.8px; }
.desc_top b, .desc_mid b { width:68px; }
.desc_top span, .desc_mid span { font-weight:500; }
.desc_btm { padding-top:28px; line-height:27px; letter-spacing:0.72px; text-align:center; }
.desc_top, .desc_mid, .desc_btm { opacity:0; transition:opacity 0.5s; transition-delay:1.5s; }
.wrap.on .desc_top, .wrap.on .desc_mid, .wrap.on .desc_btm { opacity:1; }
.ico_scroll { position:absolute; left:50%; bottom:50px; transform:translateX(-50%); animation:scrollAni 1s infinite; }
.wrap.on .stn_top { opacity:1;  }
@keyframes scrollAni {
    0% { bottom:50px; }
    50% { bottom:60px; }
    100% { bottom:50px; }
}



.stn_bg_bk.active.stn_modelOn { background: #111; }
.stn_bg_bk.active.stn_modelOn .main_tit { color:#fff; }
.stn_bg_bk.stn_modelOn { transition: background 1s; }
.stn_modelOn { padding:126px 0; text-align: center; }
.stn_modelOn .main_tit { display:flex; justify-content:center; align-items:center; gap:8px; padding-bottom:32px; font-size: 50px; font-weight: 700; letter-spacing: 1.5px; color:#000; transition:color 1s; }
.stn_modelOn .main_tit > img { animation:onAni 2s infinite; }
@keyframes onAni {
    0% { opacity:1; }
    50% { opacity:0.4; }
    100% { opacity:1; }
}



.stn_modelOn .main_txt { font-size:20px; font-weight: 400; line-height: 33px; letter-spacing: 0.4px; color:#fff; }
.stn_modelOn .prf_desc { display:flex; justify-content:space-between; align-items:center; margin:0 auto; width:680px; }
.stn_modelOn .prf_desc .sub_tit { display:flex;  color:#fff; gap:10px; align-items:center; }
.stn_modelOn .prf_desc .sub_tit span { font-size: 20px; font-weight: 600; letter-spacing: 0.6px; text-align:left; color:#fff; }
.stn_modelOn .prf_desc .sub_tit img { width:80px; height:auto; }
.stn_modelOn .prf_desc .main_tit { padding-top:12px; font-size: 30px; font-weight: 700; letter-spacing: 0.9px;  color:#fff; }
.stn_modelOn .prf_desc .main_tit b { font-size: 50px; font-weight: 700; letter-spacing: 1.5px;  color:#fff; }

.stn_modelOn .swiper { margin-top:0 !important; margin-bottom:96px !important; width:680px; margin:0 auto; border-radius:30px; }




.stn_look01 > img, .stn_look02 > img, .stn_look03 > img { width:100%; height:auto; }


.stn_look02 .swp_area01 { position:relative; }
.img_joycon { position:absolute; right:0; bottom:-100px; width:95%; height:auto; }
.stn_look02 .desc_wrap { display:flex; justify-content:center; align-items: flex-start; gap:48px; padding:190px 0 150px; }
.stn_look02 .desc_wrap .main_tit { font-size: 50px; font-weight: 700; line-height: 60px; letter-spacing: 1.5px; }
.stn_look02 .desc_wrap .main_txt { font-size: 20px; font-weight: 400; line-height: 33px; letter-spacing: 0.4px; }
.stn_look02 .swp_area02 { padding:130px 0 60px; background: #D63312; }
.dot_wrap { display:flex; justify-content: space-between; align-items: center; padding:0 5%; transform: translateY(-22px); }
.dot_wrap .cnt02 { display:flex; align-items: center; }
.dot_chara { padding-left:40px; display:flex; gap:12px; }
.dot_chara img:nth-child(1) { position: relative; animation: jumpAni 1.2s infinite; }
.dot_chara img:nth-child(2) { position: relative; animation: jumpAni 1.2s infinite; animation-delay:0.5s; }
.dot_chara img:nth-child(3) { position: relative; animation: jumpAni 1.2s infinite; animation-delay:1s; }
.dot_chara img:nth-child(4) { position: relative; animation: jumpAni 1.2s infinite; animation-delay:1.5s; }
@keyframes jumpAni {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}
.dot_wrap .btn_next { width:72px; height:36px; cursor:pointer; }
.swp01 img { width:100%; height:auto; }
.swp02  { padding:0 5%; }
.stn_look02 .cnt01 { display:flex; align-items: center; gap:20px; }
.stn_look02 .cnt01 > img { animation:charaRotate 3s infinite; }
@keyframes charaRotate {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(-15deg); }
    100% { transform: rotate(0deg); }
}


.stn_look03 { padding-bottom:160px; }
.stn_look03 .cnt01 { display:flex; }
.stn_look03 .cnt01 .left, .stn_look03 .cnt01 > img { width:50%; height:auto; }
.stn_look03 .cnt01 .left { position:relative; }
.stn_look03 .cnt01 .left > img { width:100%; height:auto; }
.love_wrap { position:absolute; right:22%; bottom:16%; width:55%; }
.love_wrap img { width:100%; height:auto; opacity:0; transform:scale(0.8); transition:opacity 0.3s, transform 0.3s; }
.love_wrap img:not(:first-child) { position:absolute; left:0; top:0; width:100%; height:auto; }
.love_wrap.active img { animation:loveAni 0.3s forwards; }
.love_wrap.active img:nth-child(1) {  }
.love_wrap.active img:nth-child(2) { animation-delay:0.2s; }
.love_wrap.active img:nth-child(3) { animation-delay:0.4s; }
.love_wrap.active img:nth-child(4) { animation-delay:0.6s; }
.love_wrap.active img:nth-child(5) { animation-delay:0.8s; }
.love_wrap.active img:nth-child(6) { animation-delay:1.0s; }
@keyframes loveAni {
    0% { opacity:0; transform:scale(0.8); }
    100% { opacity:1; transform:scale(1); }
}

.stn_look03 .cnt02 { position: relative; }
.stn_look03 .cnt02 > img { width:100%; height:auto; }
.stn_look03 .cnt02 .desc_wrap { position:absolute; left:0; top:0; display:flex; flex-direction: column; justify-content: center; align-items: center; width:100%; height:100%; transition:background 1.2s; }
.stn_look03 .cnt02 .desc_wrap.stn_bg_bk.active { background:rgba(255,255,255,0.3); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.stn_look03 .cnt02 .desc_wrap .main_tit { padding-bottom:20px; font-size: 40px; font-weight: 700; letter-spacing: 1.2px; opacity:0; transition:opacity 1s; transition-delay:0.2s; }
.stn_look03 .cnt02 .desc_wrap .main_txt { text-align: center; font-size: 20px; font-weight: 500; line-height: 33px; letter-spacing: 0.66px; opacity:0; transition:opacity 1s; transition-delay:0.4s; }
.stn_look03 .cnt02 .desc_wrap .main_tit.active, .stn_look03 .cnt02 .desc_wrap .main_txt.active { opacity:1; }
.stn_look03 .cnt03 { display:flex; justify-content: center; gap:20px; padding:120px 60px; width:100%; }
.stn_look03 .cnt03 .hover_wrap, .stn_look03 .cnt03 > img { width:calc(50% - 10px); height:auto; }
.stn_look03 .cnt03 .hover_wrap { position: relative; }
.stn_look03 .cnt03 .hover_wrap img { width:100%; height:auto; }
.stn_look03 .cnt03 .hover_wrap img:nth-child(1) { position: absolute; left:0; top:0; transition:opacity 0.3s; }
.stn_look03 .cnt03 .hover_wrap:hover img:nth-child(1) { opacity:0; }



.stn_look04 .cnt_wrap {
    background-image:url('//sucia5374.imglink.kr/publishing/resource/image/09MAGAZINE/01HAYUN/img_look04_07.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.stn_look04.stn_bg_bk .cnt01 {
    padding:0 120px 80px;
    transition:background-color 1s;
}
.stn_look04.stn_bg_bk.active .cnt01 {
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.stn_look04 .btn_next { position:absolute; left:40px; bottom:40px; z-index:1; cursor:pointer; }
.stn_look04 > img { width:100%; height:auto; }
.stn_look04 .desc_wrap { padding-bottom:84px; text-align: right; }
.stn_look04 .desc_wrap p { color:#fff; }
.stn_look04 .desc_wrap .main_tit { font-size: 40px; font-weight: 700; letter-spacing: 1.2px; }
.stn_look04 .desc_wrap .main_txt { padding-top:20px; font-size: 20px; font-weight: 500; line-height: 33px; letter-spacing: 0.66px; }
.pick_wrap { padding:32px 100px; background: #F9F4E6; border-radius: 30px; border: 1px solid #000; box-shadow: 4px 4px 20px rgba(0,0,0,0.3); }
.pick_wrap p { text-align: center; }
.pick_wrap .main_tit { font-size: 30px; font-weight: 700; letter-spacing: 0.9px; }
.pick_wrap .main_txt { padding-top:4px; font-size: 17px; font-weight: 400; letter-spacing: 0.51px; }
.clothes { position:relative }
.clothes > img {  }
.clothes ul { display:flex; justify-content: center; gap:30px; align-items: center; padding-top:24px; }
.clothes ul li { width:calc(25% - 22.5px); text-align:center; }
.clothes ul li img { height:100%; width:auto; }
.ico_cursor { position:absolute; right:0; bottom:-16%; width:20%; height:auto; transform: translateX(60%); animation:curAni 6s infinite; }
@keyframes curAni {
    0% { right:0; }
    16% { right:25%; }
    32% { right:50%; }
    48% { right:75%; }
    64% { right:50%; }
    80% { right:25%; }
    100% { right:0; }
}


.stn_coupon { padding:40px 0 10px; background-color: #000; text-align: center; }
.stn_coupon button { margin-top:44px; }
.stn_coupon .att_desc { display:none; width:fit-content; margin:0 auto; padding-bottom:30px; text-align:left; }
.stn_coupon .att_desc.on { display:block; }
.stn_coupon .att_desc p, .stn_coupon .att_desc ul li { font-size: 16px; font-weight: 400; line-height: 27px; color:#fff; }


.item_wrap { padding:120px 54px; }
.item_wrap .main_tit { padding-bottom:40px; text-align: center; font-size: 40px; font-weight: 700; line-height: 26px; letter-spacing: 1.2px; }




/* swiper custom */
.swiper { position:relative; overflow:hidden; }
.swiper-wrapper { display:flex; }
.stn_modelOn .swiper-wrapper .swiper-slide { width:680px !important; }
.stn_modelOn .swiper-wrapper img { width:680px !important; }
.swp01 .swiper-wrapper .swiper-slide { width:60vw !important; }
.swp01 .swiper-wrapper img { width:60vw !important; }

.stn_look04 .swiper { width:30vw; max-width:555px !important; transform: translateY(-80px); }
.stn_look04 .swiper-wrapper .swiper-slide { width:30vw; max-width:555px !important; }
.stn_look04 .swiper-wrapper img { width:30vw; max-width:555px !important; }

.stn_modelOn .swiper-pagination { display:flex; width:100%; justify-content:center; gap:8px; transform:translateY(-75px); }
.stn_modelOn .swiper-pagination-bullet { width:10px !important; border-radius:20px; height:10px !important; background:#fff !important; opacity:0.4 !important; }
.stn_modelOn .swiper-pagination-bullet-active { background:#fff !important; opacity:1 !important; }

.stn_look02 .swiper-pagination { display:flex; width:100%; justify-content:center; gap:32px; }
.stn_look02 .swiper-pagination-bullet { width:8px !important; border-radius:0; height:8px !important; background:#000 !important; opacity:0.4 !important; }
.stn_look02 .swiper-pagination-bullet-active { background:#000 !important; opacity:1 !important; }

.stn_look01 .swiper .swiper-wrapper { transition-timing-function: linear; pointer-events:none; }





@media screen and (max-width:1800px) {
    .stn_look02 .desc_wrap { gap:20px; }
    .stn_look02 .desc_wrap .main_tit { font-size: 40px; line-height: 45px; }
    .stn_look02 .desc_wrap .main_txt { font-size: 18px; line-height: 26px; }
    .stn_look04 .desc_wrap .main_txt, .stn_modelOn .main_txt { font-size:16px; line-height:22px; }
}












/* BASIC css end */