*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; } 

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100% } 
body { min-height: 100%; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", system-ui, sans-serif } 

img,picture,video,canvas,svg { display: block; max-width: 100%; height: auto } 
input,button,textarea,select { font: inherit } 
button { background: none; border: 0; cursor: pointer } 
a { text-decoration: none; color: inherit } 
ul,ol { list-style: none } 
table { border-collapse: collapse; border-spacing: 0 } 
textarea { resize: vertical } 
input,textarea { font-size: 16px } 
p,h1,h2,h3,h4,h5,h6 { overflow-wrap: break-word; font-weight: inherit }
* { min-width: 0 } 
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px } 
::selection { background: #000; color: #fff } 

/*base*/
html,
body { margin: 0; padding: 0; scroll-behavior: smooth; background-color: #000; } 
body { font-family: "Overpass", "Noto Sans", sans-serif; font-optical-sizing: auto; font-style: normal; font-variation-settings: "wdth" 100; } 
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } 

/* snap mode */
body.snap-mode { scroll-snap-type: y mandatory; } 
body.snap-mode .section { scroll-snap-align: start; } 
.section { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; overflow: hidden; } 
.skip-nav { position: fixed; top: 0; left: 0; z-index: 9999; } 

/* 기본: 화면 밖으로 숨김 */
.skip-nav a { position: absolute; top: -9999px; left: 0; background: #000; color: #fff; padding: 12px 20px; text-decoration: none; font-size: 14px; white-space: nowrap; } 

/* TAB 포커스 시에만 보이기 */
.skip-nav a:focus,
.skip-nav a:active { top: 10px; left: 10px; } 

/* 👇 TAB으로 포커스될 때만 보이게 */
.skip-nav a:focus { top: 0; } 

/*youtube pop*/
#yt-modal { position: fixed; inset: 0; display: none; z-index: 9999; } 
#yt-modal.active { display: block; } 
.yt-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); } 
.yt-content { position: absolute; top: 50%; left: 50%; width: 90%; max-width: 1000px; aspect-ratio: 16/9; transform: translate(-50%, -50%); background: url(../img/vod_bg.webp); background-size: 100% 100%; padding: 5px; } 
.yt-frame { width: 100%; height: 100%; } 
.yt-frame iframe { width: 100%; height: 100%; border: none; } 
.yt-close { position: absolute; top: -80px; right: -5px; background: #fff; border: none; cursor: pointer; width: 75px; height: 75px; background: url(../img/sprite01.webp) no-repeat -110px 0; } 

/*header*/
header { position: fixed; left: 0; top: 0; z-index: 100; width: 100%; height: 75px; background: rgba(0, 0, 0, 1); text-align: center; } 
header h1 { position: absolute; top: 0; left: calc(50% - 930px); display: block; width: 110px; height: 75px; background: url(../img/sprite01.webp) no-repeat; } 
header h1 a { display: inline-block; width: 100%; height: 100%; } 
header .odin-social { position: absolute; top: 100px; left: calc(50% + 700px); width: 250px; } 
header .odin-social>div { display: inline-block; width: 250px; height: 190px; background: url(../img/sprite01.webp); opacity: 1; transition: opacity 0.3s ease; } 
header .odin-social a { width: 155px; height: 155px; transform: rotate(45deg) translate(25px, 25px); display: inline-block; } 
header .odin-social .odin_youtube { background-position: 0 -75px; } 
header .odin-social .odin_discord { background-position: -250px -75px; } 
header .odin-social .odin_youtube.hide { opacity: 0; pointer-events: none; } 
header .odin-social .odin_discord.hide { opacity: 0; pointer-events: none; } 
header .odin-social>div button.close-btn { position: absolute; width: 40px; height: 40px; transform: translateX(-50px); } 
.nav { line-height: 75px; } 
.nav a { position: relative; display: inline-block; margin: 0 -2px; padding: 0 40px 0; height: 100%; cursor: pointer; color: #fff; font-size: 1.1rem; text-align: center; } 
.nav a::before { position: absolute; z-index: -1; content: ""; display: inline-block; width: 100%; height: 0; bottom: 0; left: 0; background: rgba(94, 69, 24, 0); z-index: -1; transition: .5s; } 
.nav a.active::before { height: 100%; background: rgba(94, 69, 24, 1); } 
button.nav-toggle { display: none; } 

.etc-nav { position: absolute; right: calc(50% - 930px); top: 26px } 
.etc-nav a,
.etc-nav label { color: #7e7e7e; font-weight: 900; cursor: pointer; padding: 0 18px 0 13px; display: inline-block; height: 12px; line-height: 12px; } 
.etc-nav a:hover,
.etc-nav label:hover { color: #fff; } 
.etc-nav label input { opacity: 0; position: absolute; } 
.etc-nav label span { display: inline-block; margin-left: 4px; width: 14px; height: 14px; border: 1px solid #7e7e7e; background: #000; /* 기본 검정 배경 */
 position: relative; cursor: pointer; } 
/* 체크 표시 */
.etc-nav label input:checked+span::after { content: ""; position: absolute; left: 4px; top: 0px; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } 
.etc-nav a { border-right: #7e7e7e 2px solid; } 

@media (max-width: 1860px){
header h1 { left: 5px;  } 
.etc-nav { right: 5px } 
header .odin-social { left:initial; right: 0; } 
}
@media (max-width: 1620px){
.etc-nav a,
.etc-nav label { font-weight: 900;  padding: 0 15px 0 10px; } 
.nav a { margin: 0 -2px; padding: 0 25px 0;} 
header .odin-social { transform: scale(.7); transform-origin: right top;} 
}
@media (max-width: 1500px){
.nav{transform: translateX(-110px);}
}

.section { position: relative; } 
.section_title_box { position: absolute; z-index: 11; top: 120px; left: calc(50% - 540px); width: 1080px; height: 200px; background: url(../img/sprite02.webp); /*isolation: isolate; */
 opacity: 0; transform: translateY(50px); transition: .5s ease-out; transition-delay: .5s; } 
.section_title_box::before { position: absolute; content: ""; top: 0; left: 0; display: inline-block; width: 100%; height: 100px; background: url(../img/sprite02.webp); mix-blend-mode: plus-lighter; opacity: 0; transform: translateX(-100px) scale(1.5, 1); transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1),
 opacity 0.6s ease-out;; transition-delay: 1s; } 
.section_title_box::after { position: absolute; content: ""; bottom: 0; left: 0; display: inline-block; width: 100%; height: 100px; background: url(../img/sprite02.webp); mix-blend-mode: plus-lighter; opacity: 0; transform: translateX(100px) scale(1.5, 1); transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease-out;; transition-delay: 1s; } 
 .section_title_box { opacity: 1; transform: translateY(0) scale(1); } 
 .section_title_box::before,
 .section_title_box::after { opacity: 1; transform: translateX(0) scale(1); } 

/*section01*/
.resize_box { width: 1880px; height: 1080px; transform-origin: center; position: absolute; left: 50%; } 
#section1 { position: relative; /*height: 1080px; */ } 
#section1::before { content: ""; position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; background: #f4f4f4 url(../img/bg_01.jpg) no-repeat center bottom; background-size: auto 100%; opacity: 0; transform: scale(1.3); transition: .5s; } 
#section1 h2 { position: absolute; width: 970px; height: 200px; background: url(../img/main_title.webp); position: absolute; top: 250px; left: calc(50% - 775px); opacity: 0; transform: translateY(50px); transition: transform .7s; transition-delay: 1.2s; } 
#section1 span.h2 { position: absolute; width: 530px; height: 200px; background: url(../img/main_title.webp); background-position: right top; position: absolute; top: 250px; left: calc(50% + 195px); z-index: 11; opacity: 0; transform: translateY(50px); transition: .7s; transition-delay: 1.2s; } 

.event_date { display: block; width: 900px; height: 160px; position: absolute; top: 120px; left: calc(50% - 450px); background: url(../img/1st_aniv_0423.webp) no-repeat; z-index: 11; opacity: 0; transform: translateY(50px); transition: transform .7s; transition-delay: .9s; } 
.main_odin { display: block; width: 1124px; height: 1050px; background: url(../img/odin_main.webp); position: absolute; left: calc(50% - 660px); bottom: 0; z-index: 10; opacity: 0; filter: brightness(0) invert(1); transition: transform .7s; } 
.main_character { display: block; width: 1320px; height: 800px; background: url(../img/main_char.webp); position: absolute; left: calc(50% - 680px); bottom: -70px; z-index: 7; opacity: 0; transform: translateY(50px); transition: transform .7s; } 
.main_coupon { display: block; width: 2400px; height: 1000px; background: url(../img/main_coupon.webp); position: absolute; left: calc(50% - 1260px); bottom: 70px; z-index: 9; opacity: 0; transform: translateY(-50px); transition: transform .7s; } 
.main_item { display: block; width: 2000px; height: 350px; background: url(../img/items.webp); opacity: 0; transform: translateY(50px); transition: transform .7s; filter: brightness(0) invert(1); transition-delay: .4s; position: absolute; left: calc(50% - 1000px); bottom: 0; z-index: 8; } 
.vod_btn { position: absolute; bottom: 130px; left: calc(50% - 256px); width: 512px; height: 285px; opacity: 0; transform: translateY(50px); transition: transform .7s; transition-delay: 1.4s; background: url(../img/sprite01.webp) no-repeat center -265px; z-index: 12; } 
.vod_btn a { position: absolute; top: 5px; left: calc(50% - 90px); display: block; width: 180px; height: 180px; } 
.vod_btn_0423 { position: absolute; bottom: 130px; width: 1000px; left: calc(50% - 500px); text-align: center; z-index: 12; opacity: 0; transform: translateY(50px); transition: transform .7s; transition-delay: 1.4s; } 
.vod_btn_0423 a { display: inline-block; width: 460px; height: 100px; background: url(../img/sprite01.webp); margin: 0 -60px 0 15px; } 
.vod_btn_0423 a:nth-child(1) { background-position: 0 -550px; } 
.vod_btn_0423 a:nth-child(2) { background-position: 0 -650px; } 
#section1::before { opacity: 1; transform: none; } 
 .main_odin { transition-delay: 0; opacity: 1; filter: none } 
 .main_character { transition-delay: 0.4s; transform: translateY(0); opacity: 1; } 
 .main_coupon { transition-delay: 0.2s; transform: translateY(0); opacity: 1; } 
 .main_item { transition-delay: 0.2s; transform: translateY(0); opacity: 1; filter: none; } 
#section1 h2,
#section1 span.h2,
#section1 .event_date,
 .vod_btn,
 .vod_btn_0423 { opacity: 1; transform: translateY(0); } 

/*section02*/
#section2 { background: url(../img/bg_02.jpg) no-repeat center bottom; background-size: cover;  } 
#section2 .section_title_box { background-position: 0 0; } 
#section2 .section_title_box::before { background-position: 0 -600px; } 
#section2 .section_title_box::after { background-position: 0 -700px; } 
.gift_list { position: absolute; top: 260px; left: calc(50% - 610px); width: 1220px; height: 650px; } 
.gift_list h3 { display: block; width: 100%; height: 75px; background: url(../img/sprite03.webp) no-repeat center top; } 
.gift_list ul { display: block; width: 100%; } 
.gift_list ul li { position: relative; display: inline-block; width: 610px; height: 390px; background: url(../img/sprite03.webp); margin: 0 -3px;; } 
.gift_list ul li:nth-child(1) { background-position: 0 -75px; } 
.gift_list ul li:nth-child(2) { background-position: -610px -75px; } 
.gift_list ul li.after_0423 { background-position: 0 0 !important; background: url(../img/sprite03_0423.webp) no-repeat; } 
.gift_list ul li:nth-child(3) { background-position: -914px -75px; } 
.gift_list ul li span { position: absolute; left: 0; bottom: 19px; display: flex; align-items: center; text-align: center; width: 100%; height: 60px; color: #fff; font-size: 1rem; line-height: 16px; justify-content: center; } 
.gift_list .gift_info { color: #9a9a9a; display: inline-block; width: 100%; height: 180px; background: url(../img/sprite03.webp) no-repeat center -470px; text-align: center; padding-top: 155px; } 
.gift_list h3,
.gift_list ul li,
.gift_list .gift_info { opacity: 0; transform: translateY(50px); transition: .7s; } 

 .gift_list h3 { transition-delay: 1s; opacity: 1; transform: translateY(0); } 
 .gift_list ul li:nth-child(1) { transition-delay: 1.4s; opacity: 1; transform: translateY(0); } 
 .gift_list ul li:nth-child(2) { transition-delay: 1.6s; opacity: 1; transform: translateY(0); } 
 .gift_list ul li:nth-child(3) { transition-delay: 1.8s; opacity: 1; transform: translateY(0); } 
 .gift_list .gift_info { transition-delay: 2s; opacity: 1; transform: translateY(0); } 

/*section03*/
#section3 { background: url(../img/bg_03.jpg) no-repeat center bottom; background-size: cover; } 
#section3 .section_title_box { background-position: 0 -200px; } 
#section3 .section_title_box::before { background-position: 0 -800px; } 
#section3 .section_title_box::after { background-position: 0 -900px; } 
#section3 .resize_box{z-index: 2;}

.bard_vod { position: absolute; z-index: 2; top: 350px; left: calc(50% - 595px); display: block; width: 644px; height: 540px; background: url(../img/bard_btn.webp) no-repeat; text-align: center; z-index: 2; } 
.bard_vod a { position: relative; display: inline-block; width: 310px; height: 60px; margin-top: 410px; z-index: 4; } 
.bard_vod::after { position: absolute; content: ""; top: -130px; left: 500px; display: block; width: 1048px; height: 957px; background: url(../img/bard.webp) no-repeat; z-index: 3; -webkit-mask-image: linear-gradient(to bottom,
 black calc(100% - 150px),
 transparent 100%); mask-image: linear-gradient(to bottom,
 black calc(100% - 150px),
 transparent 100%); } 

#section3::before { position: absolute; z-index: 1; content: ""; top: 0px; left: calc(50% - 1235px); display: block; width: 2428px; height: 1079px; background: url(../img/music.webp) no-repeat; z-index: 1; } 

.bard_vod,
.bard_vod::after { opacity: 0; transform: translateY(50px); transition: .7s; } 
#section3::before { opacity: 0; transform: translate(100px, 100px); transition: .7s; } 
 .bard_vod { transition-delay: 1s; opacity: 1; transform: translateY(0); } 
 .bard_vod::after { transition-delay: 1.4s; opacity: 1; transform: translateY(0); } 
#section3::before { transition-delay: 1.8s; opacity: 1; transform: translate(0); } 

/*section04*/
#section4 { background: url(../img/bg_04.jpg) no-repeat center bottom; background-size: cover; } 
#section4 .section_title_box { background-position: 0 -400px; } 
#section4 .section_title_box::before { background-position: 0 -1000px; mix-blend-mode: screen } 
#section4 .section_title_box::after { background-position: 0 -1100px; mix-blend-mode: screen } 
.summer_list { position: absolute; top: 250px; left: calc(50% - 678px); display: flex; width: 1356px; height: 367px; padding: 0; margin: 150px 0 0 0; } 
.summer_list li { position: relative; flex: 1 1 0; background: url(../img/summer_list.webp); height: 100%; transform: translateY(50px); opacity: 0; transition: .7s; margin: 0 -3px; } 
.summer_list li:nth-child(1) { background-position: 0 0; transition-delay: 1s; } 
.summer_list li:nth-child(2) { background-position: -452px 0; transition-delay: 1.2s; } 
.summer_list li:nth-child(3) { background-position: -904px 0; transition-delay: 1.4s; } 
.summer_list li span { position: absolute; bottom: 3px; height: 77px; display: flex; align-items: center; text-align: center; width: 100%; justify-content: center; font-size: 1.2rem; color: #fff; line-height: 23px; font-weight: 400; } 
 .summer_list li { opacity: 1; transform: translateY(0); } 
.mo_br{display: none;}

footer{position: relative; display: block; width: 100%; height: 50px; text-align: center; line-height: 50px; background: #181818; color:#a3a3a3;margin-top: -50px;}
.mo_only{display: none !important}
.nav_toggle_inner{display: none;}
/*mo*/
@media (max-width: 1024px) { 
html{overflow-x: hidden;}
    footer{ height: 70px; margin-top: 0; font-size: .6rem; white-space: nowrap; line-height: 40px;}
    /*.section{height: 100vh;}*/
.wrap{height: 100svh;overflow-y: auto;}
.mo_br{display: block;}

.section_title_box { top: 60px; left: calc(50% - 182px); width: 365px; height: 100px;  } 
 .section_title_box { opacity: 1; transform: translateY(0) scale(1); } 
 .section_title_box::before,
 .section_title_box::after { opacity: 1; transform: translateX(0) scale(1); } 

.section_title_box,.section_title_box::before,.section_title_box::after{background: url(../img/sprite_m_02.webp); background-size: 365px auto;}


/*youtube pop*/
.yt-content { position: absolute; top: 50%; left: 50%; width: 90%; max-width: 1000px; aspect-ratio: 16/9; transform: translate(-50%, -50%); background: url(../img/vod_bg.webp); background-size: 100% 100%; padding: 3px; } 
.yt-close { top:-40px; width: 35px; height: 35px; background: url(../img/sprite_m_01.webp) no-repeat; background-position: -1px -120px; } 

/* 메뉴 열렸을 때 스크롤 방지 */
body.menu-open { overflow: hidden; }
header h1,.nav a::before, button.nav-toggle, header .odin-social>div,nav a:first-child::after,#section1 h2,.event_date,.vod_btn,.vod_btn_0423 a ,.yt-close{background-size: 512px auto !important;}
/*header*/
header {width: 100%; height: 50px; background: none } 
header::before{position: absolute; content:"" ; display: block; width: 100%; height: 50px; top:0; left: 0; background-color: rgba(0,0,0,.8);}
header h1 {left: calc(50% - 45px); display: block; width: 90px; height: 50px; background: url(../img/sprite_m_01.webp) no-repeat; } 
header .odin-social { top: 0; left:initial; right: 0; width: 90px; transform: none; } 
header .odin-social > div { width: 40px; height: 45px; background: url(../img/sprite_m_01.webp); margin: 0 -3px;} 
header .odin-social a { width: 40px; height: 40px; transform: none; } 
header .odin-social .odin_youtube { background-position: -210px 0; } 
header .odin-social .odin_discord { background-position: -250px 0; } 
header .odin-social>div button.close-btn {  display: none;} 
#header.on .odin-social{  z-index: 10; right: initial; left: calc(50% - 70px); top:calc(50vh + 180px);transform: scale(1.9);  transform-origin: center;}
#header.on .odin-social > div{margin: 0 -1px;}
#header.on .nav{left: 0; padding-right: 50px; }
.nav { transform: none; position: relative; line-height: initial; width: 100%;  left: -100%;height: 100vh; height: 100dvh; background: rgba(0,0,0,.7); display: flex;flex-direction: column;justify-content: center; /* 세로 */align-items: center;     /* 가로 */ transition: .3s; z-index: 10;} 
.nav::before{position: absolute; top:0; left: 0; transition: left .5s; content:""; display: block; width: calc(100% - 50px); height: 100%; background: rgba(23,23,23,1); }
.nav a { position: relative; display: inline-block; margin: 0; padding: 0; height: 65px; width: 100%; font-weight: 700; font-size: 1.15rem; line-height: 65px; color: #9a9a9a;
transform: translateY(-60px); z-index: 2;} 
.nav a.active{color: #fff;}
.nav a::before { position: absolute; z-index: -1; content: ""; display: inline-block; width: 145px; height: 0px; bottom: 5px; left: calc(50% - 72px); z-index: 1; } 
.nav a.active::before { width: 145px; height: 10px;left: calc(50% - 72px);  background: url(../img/sprite_m_01.webp) no-repeat; background-position: -290px 0; transition: height .5s;
/*transform: translateY(9px)*/;} 
button.nav-toggle { position: absolute; z-index: 11; top:0; left: 0; display: block; width: 60px; height: 50px; background: url(../img/sprite_m_01.webp) no-repeat; background-position: -90px 0;  } 
#header.on button.nav-toggle {background-position: -150px 0;  } 
/*#header.on button.nav-toggle::before{display: block; position: fixed; width: 100%; height: 100%; top:0; left: 0; content:""}*/
.nav a.mo_only{display: inline-block !important; width: 150px; margin-bottom: 50px;}
#header.on nav a.mo_only::after{ position: absolute; top:0; left: calc(50% - 75px); content: ""; display: inline-block; width: 150px; height: 70px;background: url(../img/sprite_m_01.webp) no-repeat; background-position: 0 -50px; z-index: 10; }
#header.on .nav_toggle_inner{position: absolute; display: block; width: 100%; height: 100%; top:0; left: 0; z-index: 1; border:none}

.etc-nav { position: absolute; right: 0; width: 100%; height: 30px; top:calc(100vh - 30px) ;top:calc(100dvh - 30px) ; background: rgba(0,0,0,1); z-index: 9; font-size: .8rem; color: #fff !important; line-height: 30px; } 
.etc-nav a,
.etc-nav label { position: absolute; top:0; left: 10px; color: #fff; font-weight: 400;display: inline-block; height: 30px; width: 45%; text-align: left; padding: 0; line-height: 30px; } 
.etc-nav label{text-align:left;}
.etc-nav a{ left: initial; right: 10px;text-align: right;}
.etc-nav label span { display: inline-block; margin-left: 4px; width: 11px; height: 11px; transform: translateY(1px); } 
/* 체크 표시 */
.etc-nav label input:checked+span::after { content: ""; left: 3px; top: 0px; width: 4px; height: 7px;  } 
.etc-nav a { border:none} 
.pc_br{display: none;}

/*section01*/

#section1 { position: relative; min-height: 700px;} 
.resize_box{height: 100%; width: 100%;}
#section1::before { background: #f4f4f4 url(../img/bg_m_01.jpg) no-repeat center bottom; background-size: cover; } /**/
#section1 h2 { position: absolute; width: 382px; height: 177px; background: url(../img/sprite_m_01.webp);  top: 110px; left: calc(50% - 191px); background-position: 0 -335px; z-index: 2;} 
#section1 span.h2 { display: none; background: none;} 
.event_date { width: 330px; height: 50px; top: 65px; left: calc(50% - 165px); background: url(../img/sprite_m_01.webp) no-repeat;  background-position: 0 -285px; } 

.main_odin { width:465px; height: 535px; background: url(../img/odin_main_m.webp);left: calc(50% - 280px); bottom: 0; background-size: cover; } 
.main_character { width: 383px; height: 314px; background: url(../img/main_char_m.webp); position: absolute; left: calc(50% - 175px); bottom: 133px; background-size: cover;} 
.main_coupon { position: absolute; width: 838px; height: 515px; background: url(../img/main_coupon_m.webp); position: absolute; left: calc(50% - 457px);bottom:185px; background-size:contain; z-index: 1;} 
.main_item{ position: absolute; width: 1120px; height: 297px; content: ""; display: block;background:url(../img/items_m_bg.webp); background-size: cover;  bottom: 0; left: calc(50% - 560px); mix-blend-mode: screen; z-index: 11;}
.main_item_m{ position: absolute; bottom:0; left: 0; content: ""; width: 566px; height: 187px; background: url(../img/items_m.webp); left: calc(50% - 290px);background-size: cover;  z-index: 12; transform: translateY(50px);opacity: 0; transition: .7s; filter: brightness(0) invert(1); transition-delay: .4s; } 

.vod_btn { bottom: 192px; left: calc(50% - 116px); width: 232px; height: 125px;  background:url(../img/sprite_m_01.webp) no-repeat -150px -50px; z-index: 13; } 
.vod_btn a { top: 0; left: calc(50% - 35px);width: 70px; height: 70px; } 
.vod_btn_0423 {bottom: 200px; width: 360px; left: calc(50% - 180px); z-index: 13;  } 
.vod_btn_0423 a { width: 238px; height: 55px; background:url(../img/sprite_m_01.webp); margin: 0 0 -10px 0; } 
.vod_btn_0423 a:nth-child(1) { background-position: 0 -175px; } 
.vod_btn_0423 a:nth-child(2) { background-position: 0 -230px; } 
#section1::before { opacity: 1; transform: none; } 
 .main_item_m { transition-delay: 0.2s; transform: translateY(0); opacity: 1; filter: unset !important; } 

/*section02*/
#section2{min-height: 700px; background: url(../img/bg_m_02.jpg) no-repeat center top; background-size: cover;}
#section2 .section_title_box { background-position: 0 0; } 
#section2 .section_title_box::after { background-position: 0 -750px; } 
#section2 .section_title_box::before { background-position: 0 -375px; } 

.gift_list { position: absolute; top: 120px; left: calc(50% - 183px); width: 365px; height: 500px; } 
.gift_list h3 { display: block; width: 100%; height: 25px; background: url(../img/sprite_m_03.webp) no-repeat center top; margin-top: 25px; } 
.gift_list ul { display: block; width: 100%; } 
.gift_list ul li { position: relative; display: inline-block; width: 365px; height: 175px; background: url(../img/sprite_m_03.webp); margin: 0 0 -10px 0; } 
.gift_list ul li:nth-child(1) { background-position: 0 -25px; } 
.gift_list ul li:nth-child(2) { background-position: 0 -199px; } 
.gift_list ul li.after_0423 { background-position: 0 0 !important; background: url(../img/sprite_m_03_0423.webp) no-repeat !important; background-size: 365px auto !important;  } 
.gift_list ul li:nth-child(3) { background-position: 0 -315px; } 
.gift_list ul li span { bottom: 18px; height: 25px; font-size: .45rem; line-height: 8px; font-weight: 100;  } 
.gift_list .gift_info {height: 90px; background: url(../img/sprite_m_03.webp) no-repeat center -375px;  padding-top: 52px; font-size: .5rem; font-weight: 400; line-height: 9px; } 
.gift_list h3,
.gift_list ul li,
.gift_list .gift_info { opacity: 1; transform: translateY(0); transition: .7s; background-size: 365px auto !important; } 


/*section03*/
#section3{min-height: 700px; background: url(../img/bg_m_03.jpg) no-repeat center top; background-size: cover;}
#section3 .section_title_box { background-position: 0 -125px; } 
#section3 .section_title_box::after { background-position: 0 -875px; } 
#section3 .section_title_box::before { background-position: 0 -500px; } 

.bard_vod { top: 195px; left: calc(50% - 166px);  width: 257px; height: 216px; background: url(../img/bard_btn_m.webp) no-repeat;background-size: cover; } 
.bard_vod a { width: 150px; height: 30px; margin-top: 166px; } 
.bard_vod::after { position: absolute; content: ""; top: 100px; left: 30px; display: block; width: 448px; height: 397px; background: url(../img/bard_m.webp) no-repeat; z-index: 3; -webkit-mask-image: linear-gradient(to bottom,
 black calc(100% - 50px),
 transparent 100%); mask-image: linear-gradient(to bottom,
 black calc(100% - 50px),
 transparent 100%); background-size: cover; } 

#section3::before {  top: 120px; left: calc(50% - 540px); display: block; width: 1120px; height: 549px; background: url(../img/music_m.webp) no-repeat; background-size: cover; } 



/*section04*/
#section4{min-height: 700px; background: url(../img/bg_m_04.jpg) no-repeat center top; background-size: cover;}
#section4 .section_title_box { background-position: 0 -250px; height: 125px; } 
#section4 .section_title_box::after { background-position: 0 -1000px; } 
#section4 .section_title_box::before { background-position: 0 -625px; } 
.summer_list { top: 120px; left: calc(50% - 135px); display: flex;flex-direction: column; width:279px; height: 428px; padding: 0; margin: 80px 0 0 0; } 
.summer_list li {  flex: 1 1 0; background: url(../img/sprite_m_04.webp); background-size: 279px auto; } 
.summer_list li:nth-child(1) { background-position: 0 0;  } 
.summer_list li:nth-child(2) { background-position: 0 -142px; } 
.summer_list li:nth-child(3) { background-position: 0 -284px;  } 
.summer_list li span { bottom: 3px; height: 33px;  font-size: .65rem; line-height: 10px; font-weight: 400;  } 
 .summer_list li { opacity: 1; transform: translateY(0); } 

}

@media (max-width: 1024px) and (orientation: landscape) {
/*youtube pop*/
.yt-content { position: absolute; top: 50%; left: 50%; width: auto; height: 90%; max-width: 1000px; aspect-ratio: 16/9; transform: translate(-50%, -50%); background: url(../img/vod_bg.webp); background-size: 100% 100%; padding: 3px; } 
.yt-close { top:0; right: -40px; width: 35px; height: 35px; background: url(../img/sprite_m_01.webp) no-repeat; background-position: -1px -120px; } 
}