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

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



#footer { margin-top:0 !important; }
.bottomFixedBtn { display:none !important; }
.flow { padding:12px 0 !important; }

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



/* 상단 비주얼 */
.stn_visual { position:relative; background:#000; }
.stn_visual .title { width:90%; max-width:339px; height:auto; position:absolute; left:50%; top:48%; transform: translate(-50%, -50%); z-index: 5; animation:titAni 1.5s 1s forwards; opacity:0; pointer-events: none; }
@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:60px 0; text-align: center; }
.snt_coupon .main_tit { margin:0 auto; padding:4px; width:175px; text-align: center; border-radius: 30px; background:#000; font-size: 17px; font-weight: 600; line-height: normal; color: #FFF; }
.snt_coupon .main_txt { padding:10px 0 30px; font-size: 13px; font-weight: 400; line-height: 17px; color: #000; }
.snt_coupon a { display:block; margin-bottom:30px; }
.snt_coupon a img { width:272px; height:auto; }
.snt_coupon .notice { width:274px; height:auto; }


/* 타이머 */
.stn_timer { display:none; padding:40px 0; background:#000; }
.count_down { color: #fff; margin: 0 auto; text-align: center; }
.count_down ul { display:flex; justify-content:center; gap: 6px; }
.count_down li { display: inline-block; font-size: 13px; font-weight:500; list-style-type: none; }
.count_down li.dot { padding-top:34px; font-size:40px; 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:29px 0; margin-bottom:10px; background:#181818; width:90px; font-size: 40px; border-radius:15px; line-height:0.8; font-weight:600; }
#dday { display: none; font-size: 20px; font-weight: 600; }
.stn_timer h2 { padding-bottom:20px; text-align: center; font-size: 27px; 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:278px; height:auto; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); z-index:1; }
.stn_info a { display:block; text-align: center; padding:14px 10px; font-size: 13px; font-weight: 300; line-height: 18px; letter-spacing: 1px; color: #FFF; }
.stn_info a b { font-weight: 700; }




/* 액티 아이템 리스트 */
.stn_itemList {  }
.stn_itemList ul { display: grid; grid-template-columns:1fr 1fr; grid-template-rows:50vw 50vw 50vw; }
.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(2n) { border-right:0; }
.stn_itemList ul li img { width:100%; height:100%; transition:transform 0.5s, opacity 0.5s, bottom 0.5s; }
.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 {  }
.stn_item01 .cnt_top li { position:relative; }
.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; height:100vw; 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(20px) 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(-30deg); }
    100% { transform: rotate(0deg); }
}
.stn_item01 .cnt_top li:nth-child(2) .itemUrl { position:absolute; left:9%; bottom:9%; }
.stn_item01 .cnt_bottom { position: relative; }
.stn_item01 .cnt_bottom > img { width:100%; height:auto; }
.stn_item01 .cnt_bottom .itemUrl { position:absolute; bottom:8%; left:8%; }




/* look02 */
.stn_item02 {  }
.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:5%; z-index:1; }
.stn_item02 .cnt_top .itemUrl:nth-of-type(1) { top:7%; }
.stn_item02 .cnt_top {  }
.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; }
.stn_item02 .swp_wrap { position:relative; display:flex; flex-wrap: wrap; }
.stn_item02 .swp_wrap .swiper-container { width:50%; overflow: hidden; }
.stn_item02 .swp_wrap > img { position:absolute; left:50%; bottom:10%; transform: translateX(-50%); z-index:1; }



/* look03 */
.stn_item03 { position: relative; display:flex; justify-content: center; align-items: center; }
.stn_item03 img { width:100%; height:auto; }
.stn_item03 .itemUrl { position:absolute; right:5%; top:37%; }


/* look03_1 */
.stn_item03_1 { padding:124px 0 74px; position: relative; display:flex; justify-content: center; align-items: center; }
.stn_item03_1 > img { width:339px; height:auto; }
.stn_item03_1 .itemUrl { position:absolute; left:5%; top:14%; }




/* look04 */
.stn_item04 .swiper-container { overflow: hidden; }
.stn_item04 .swiper-container img { width:100%; height:auto; }
.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:12%; left:5%; }
.stn_item04 .cnt_bottom .itemUrl:nth-of-type(1) { top:26%; left:6%; }
.stn_item04 .cnt_bottom .itemUrl:nth-of-type(2) { bottom:23%; left:6%; }



/* look05 */
.stn_item05 > img { width:100%; height:auto; }
.stn_item05 .bg { width:100%; height:auto; }
.stn_item05 > div { position: relative; }
.stn_item05 .itemUrl { position:absolute; z-index:1; left:6%; bottom:10%; }
.stn_item05 .object { position:absolute; z-index:1; }
.stn_item05 .object01 { top:4%; right:25%; animation:floatAni 3s infinite; }
.stn_item05 .object02 { top:24%; right:6%; animation:floatAni 2s 0.3s infinite; }
.stn_item05 .object03 { bottom:27%; left:2%; animation:rotateAni 1.8s infinite; }
.stn_item05 .object04 { bottom:9%; right:20%; animation:floatAni 2.2s 0.4s infinite; }




/* look06 */
.stn_item06 { position: relative; padding:90px 0; background:url('//sucia5374.imglink.kr/publishing/resource/image/actirable/2311event/m/img_actirable.png') no-repeat center 37%; }
.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 > div img { width:100%; height:auto; }
.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 { right:16%; bottom:8%; }



/* look07 */
.stn_item07 {  }
.stn_item07 .flow { background:#000; }
.stn_item07 .img_wrap { position:relative; }
.stn_item07 .img_wrap .itemUrl { position:absolute; left:57%; z-index:1; }
.stn_item07 .img_wrap .itemUrl:nth-of-type(2) { top:5%; }
.stn_item07 .img_wrap .itemUrl:nth-of-type(3) { top:19%; }
.stn_item07 .img_wrap > img, .stn_item07 .img_wrap a img { width:100%; height:auto; }
.stn_item07 > img { width:100%; height:auto; }
.stn_item07 {  }



/* 나의 ONE PICK */
.stn_choice { padding:100px 0 80px; 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; left:20%; top:5%; animation:efAni 1.5s linear infinite; }
@keyframes efAni {
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
.stn_choice .main_txt strong { font-weight: 700; }
.stn_choice .btn_wrap { margin:0 auto; padding:80px 0 0; width:95% }
.stn_choice .btn_wrap a:first-child { margin-bottom:10px; }
.stn_choice .btn_wrap a { display:inline-block; width:100%; }
.stn_choice .btn_wrap a img { width:100%; height:auto; }
/* BASIC css end */