/* BASIC css start */
header {  position:fixed; left:0; top:0; width:100%; padding:24px 20px; z-index:999; transition:background 0.3s; }
header .logo_blk, header.on .logo_wh { display:none; }
header.on .logo_blk { display:block; }
header.on { background:rgba(255,255,255,0.5); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,0.4); }
header.on svg path { fill:#000; }
header h1 a { display:flex; gap:8px; align-items:center; }

.scroll_stn{ position:relative; bottom:-80px; transition:0.7s; opacity:0; }
.scroll_stn.active{ position:relative; bottom:0 !important; opacity:1; }
.scroll_stn2{ position:relative; bottom:-80px; transition:0.7s; opacity:0; }
.scroll_stn2.active{ position:relative; bottom:0 !important; opacity:1; }


.btn_more { width:fit-content; position: relative; margin-top:12px; }
.btn_more::after { content:''; display:block; position:absolute; width:0px; height:0px; border-radius: 30px; background:#fff; transform: translate(-50%, -50%); left:50%; top:50%; animation:btnAni 2.5s infinite; opacity:0; }
@keyframes btnAni {
    0% { width:0px; height:0px; opacity:0; }
    50% { width:30px; height:30px; opacity:0.6; }
    100% { width:0px; height:0px; opacity:0; }
}



#footer { margin-top:0 !important; }
#fixBtns { display:none !important; }

#wrap { width:100%; }
.stn { width:100%; }

.itemUrl { transition:transform 0.3s; }
.itemUrl:hover { transform: scale(1.05); }


/* 상단 비주얼 */
.stn_visual { position:relative; background:#000; }
.stn_visual .title { width:60%; max-width:701px; height:auto; position:absolute; left:50%; top:48%; transform: translate(-50%, -50%); z-index: 5; animation:titAni 1.5s 1s forwards; opacity:0; }
@keyframes titAni {
    0% { opacity:0; }
    100% { opacity:1; }
}
.stn_visual video { display:block; width:100%; height:auto; opacity:0.7; }
.visual01 { opacity:1; }
.visual02 { position:absolute; left:0; top:0; z-index:1; animation:aniShow 6s 0s infinite; opacity:0; }
.visual03 { position:absolute; left:0; top:0; z-index:2; animation:aniShow 6s 0.4s infinite; opacity:0; }
.visual04 { position:absolute; left:0; top:0; z-index:3; animation:aniShow 6s 0.8s infinite; opacity:0; }
@keyframes aniShow {
    0% { opacity:0; }
    30% { opacity:0; }
    50% { opacity:1; }
    90% { opacity:1; }
    100% { opacity:0; }
}


/* 쿠폰존 */
.snt_coupon { padding:100px 0; text-align: center; }
.snt_coupon .main_tit { margin:0 auto; margin-bottom:50px; padding:8px; width:260px; text-align: center; border-radius: 30px; background:#000; font-size: 22px; font-weight: 600; line-height: normal; color: #FFF; }
.snt_coupon .main_txt { padding:22px 0 50px; font-size: 20px; font-weight: 400; line-height: 28px; color: #000; }


/* 타이머 */
.stn_timer { display:none; padding:140px 0; background:#000; }
.count_down { color: #fff; margin: 0 auto; text-align: center; }
.count_down ul { display:flex; justify-content:center; gap: 40px; }
.count_down li { display: inline-block; font-size: 25px; font-weight:500; list-style-type: none; }
.count_down li.dot { padding-top:50px; font-size:60px; animation:dotAni 1s infinite; }
@keyframes dotAni {
    0% { opacity:1; }
    49%{ opacity:1; }
    50% { opacity:0; }
    99%{ opacity:0; }
    100% { opacity:1; }
}
.count_down li span { display: block; padding:54px 0; margin-bottom:28px; background:#181818; width:180px; font-size: 90px; border-radius:28px; line-height:0.8; font-weight:600; }
#dday { display: none; font-size: 40px; font-weight: 600; }
.stn_timer h2 { padding-bottom:50px; text-align: center; font-size: 70px; font-weight: 600; line-height: normal; color: #FFF; }


/* 액티 소개 */
.stn_info { background:#000; }
.stn_info .cnt { position:relative; }
.stn_info .cnt .bg { width:100%; }
.stn_info .cnt .info { width:706px; height:auto; position:absolute; right:7%; top:50%; transform: translateY(-50%); z-index:1; }
.stn_info a { display:block; text-align: center; padding:28px 10px; font-size: 23px; font-weight: 300; line-height: 24px; letter-spacing: 4px; color: #FFF; transition:letter-spacing 0.3s; }
.stn_info a b { font-weight: 700; }
.stn_info a:hover { letter-spacing:6px; ; }




/* 액티 아이템 리스트 */
.stn_itemList {  }
.stn_itemList ul { display: grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:33.33vw 33.33vw; }
.stn_itemList ul li { border-bottom:1px solid #000; border-right:1px solid #000; object-fit:cover; overflow: hidden; }
.stn_itemList ul li:nth-child(3n) { border-right:0; }
.stn_itemList ul li img { width:100%; height:100%; transition:transform 0.5s, opacity 0.5s, bottom 0.5s; }
.stn_itemList ul li:nth-child(odd):hover img { transform: scale(1.2) rotate(5deg); opacity:0.9; }
.flow { padding:24px 0 !important; }
.flow .swiper-wrapper { align-items: center; transition-timing-function: linear; pointer-events:none; }
.flow img { width:auto !important; height: 100%; }





/* look01 */
.stn_item01 {  }
.stn_item01 .cnt_top { display:flex; }
.stn_item01 .cnt_top li { position:relative; width:50%; }
.stn_item01 .cnt_top li:nth-child(1) img { width:100%; }
.stn_item01 .cnt_top li:nth-child(1) img:nth-child(2) { position: absolute; left:0; z-index:1; }
.stn_item01 .cnt_top li:nth-child(2) { position: relative; display: flex; justify-content: center; align-items: center; background: #8ED56A; }
.stn_item01 .img_round { width:60%; height:auto; }
.stn_item01 .object { position:absolute; z-index: 1; }
.stn_item01 .object01 { right:15%; top:10%; animation:floatAni 2s infinite; }
@keyframes floatAni {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(30px) scale(1.1); }
    100% { transform: translateY(0) scale(1); }
}
.stn_item01 .object02 { left:10%; bottom:40%; animation:floatAni 2s 0.5s infinite; }
.stn_item01 .object03 { right:5%; bottom:-2%; animation:rotateAni 1.8s infinite; }
@keyframes rotateAni {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(-15deg); }
    100% { transform: rotate(0deg); }
}
.stn_item01 .cnt_top li:nth-child(2) .itemUrl { position:absolute; left:15%; bottom:15%; }
.stn_item01 .cnt_bottom { position: relative; }
.stn_item01 .cnt_bottom > img { width:100%; height:auto; }
.stn_item01 .cnt_bottom .itemUrl { position:absolute; top:15%; right:12%; }




/* look02 */
.stn_item02 { padding-top:320px; }
.stn_item02 video { width:18%; height:auto; position:absolute; bottom:3%; right:28.8%; z-index:1; }
.stn_item02 .cnt > img { width:100%; height:auto; }
.stn_item02 .cnt_top, .stn_item02 .cnt_bottom { position:relative; }
.stn_item02 .cnt_top .itemUrl { position:absolute; left:11.5%; z-index:1; }
.stn_item02 .cnt_top .itemUrl:nth-of-type(1) { bottom:36%; }
.stn_item02 .cnt_top .itemUrl:nth-of-type(2) { bottom:20%; }
.stn_item02 .cnt_top { margin-bottom:220px; }
.stn_item02 .cnt_bottom > div { position:absolute; top:52px; left:23%; z-index:1; }
.stn_item02 .cnt_bottom > div img { display:block; }
.stn_item02 .cnt_bottom > div img:nth-child(2) { margin-top:12px; }
.stn_item02 .cnt_bottom .itemUrl { opacity:0; pointer-events: none; transition:opacity 0.3s; }
.stn_item02 .cnt_bottom .itemUrl.on { opacity:1; pointer-events: all; }
.stn_item02 .btn_more { cursor: pointer; }



/* look03 */
.stn_item03 { position: relative; padding:300px 0; display:flex; justify-content: center; align-items: center; }
.stn_item03 .cnt img { width:100%; height:auto; }
.stn_item03 .itemUrl { position:absolute; left:20%; top:42%; }




/* look04 */
.stn_item04 {  }
.stn_item04 .cnt { position:relative; }
.stn_item04 .cnt > img { width:100%; height:auto; }
.stn_item04 .cnt .itemUrl { position:absolute; z-index:1; }
.stn_item04 .cnt_top .itemUrl { top:64px; right:30%; }
.stn_item04 .cnt_bottom .itemUrl:nth-of-type(1) { top:35%; left:10%; }
.stn_item04 .cnt_bottom .itemUrl:nth-of-type(2) { bottom:35%; left:10%; }



/* look05 */
.stn_item05 > img { width:100%; height:auto; }
.stn_item05 .bg { width:100%; height:auto; }
.stn_item05 > div { position: relative; }
.stn_item05 .urlWrap { position:absolute; z-index:1; right:18.7%; top:35%; }
.stn_item05 .urlWrap img { display:block; }
.stn_item05 .urlWrap .btn_more { margin-bottom:12px; margin-left:120px; cursor: pointer; }
.stn_item05 .urlWrap .itemUrl { opacity:0; pointer-events: none; transition:opacity 0.3s; }
.stn_item05 .urlWrap .itemUrl.on { opacity:1; pointer-events: all; }
.stn_item05 .object { position:absolute; z-index:1; }
.stn_item05 .object01 { top:13%; right:23%; animation:floatAni 3s infinite; }
.stn_item05 .object02 { top:53%; right:10%; animation:floatAni 2s 0.3s infinite; }
.stn_item05 .object03 { bottom:27%; left:16%; animation:rotateAni 1.8s infinite; }
.stn_item05 .object04 { bottom:6%; right:20%; animation:floatAni 2.2s 0.4s infinite; }




/* look06 */
.stn_item06 { position: relative; padding:190px 0; background:url('//sucia5374.imglink.kr/publishing/resource/image/actirable/2311event/img_actirable.png') no-repeat center; }
.stn_item06 > div { position:relative; text-align: center; }
.stn_item06 .img_float { position:absolute; left:50%; bottom:0; transform: translateX(-50%); z-index:1; }
.stn_item06 .img_float:nth-child(2) { transition-delay: 0.3s; }
.stn_item06 .img_float:nth-child(3) { transition-delay: 0.6s; }
.stn_item06 .img_float:nth-child(4) { transition-delay: 0.9s; }
.stn_item06 .img_float:nth-child(5) { transition-delay: 1.2s; }
.stn_item06 .img_float:nth-child(6) { transition-delay: 1.5s; }
.stn_item06 .itemUrl { position:absolute; z-index:1; }
.stn_item06 .itemUrl:nth-of-type(1) { left:32%; bottom:18%; }
.stn_item06 .itemUrl:nth-of-type(2) { right:12%; bottom:10%; }



/* look07 */
.stn_item07 {  }
.stn_item07 .flow { background:#000; }
.stn_item07 .img_wrap { position:relative; display:flex; }
.stn_item07 .img_wrap .itemUrl { position:absolute; left:35%; z-index:1; }
.stn_item07 .img_wrap .itemUrl:nth-of-type(1) { top:23%; }
.stn_item07 .img_wrap .itemUrl:nth-of-type(2) { bottom:23%; }
.stn_item07 .img_wrap > img { width:50%; height:100%; }
.stn_item07 > img { width:100%; height:auto; }
.stn_item07 {  }



/* 나의 ONE PICK */
.stn_choice { padding:250px 0 0; text-align: center; }
.stn_choice .img_wrap { position:relative; }
.stn_choice .img_wrap > img:first-child { width:100%; height:auto; }
.stn_choice .img_wrap > img:last-child { position:absolute;top:0; left:10%; animation:efAni 1.5s linear infinite; }
@keyframes efAni {
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
.stn_choice .main_tit { padding-bottom:20px; font-size: 70px; font-weight: 700; }
.stn_choice .main_txt { font-size: 21px; font-weight: 400; line-height: 30px; }
.stn_choice .main_txt strong { font-weight: 700; }
.stn_choice .btn_wrap { padding:180px 0; }
.stn_choice .btn_wrap a:first-child { margin-bottom:10px; }
.stn_choice .btn_wrap a { display:inline-block; transition: opacity 0.3s, transform 0.3s; }
.stn_choice .btn_wrap a:hover { transform: scale(1.05); opacity:0.9; }
/* BASIC css end */