@charset "utf-8";

#main_visual {position:relative;}
#main_visual .swiper-slide {display:flex; align-items:center; vertical-align:middle; position:relative; height:100vh; background:no-repeat center/cover;}
#main_visual .swiper-slide.slide01 {background-image:url('/images/main/main_visual_bg01.jpg');}
#main_visual .swiper-slide.slide01 .img {position:absolute; top:0; left:0; right:0; bottom:0; background:url('/images/main/main_visual_img01.png') no-repeat center;}
#main_visual .swiper-slide .txt {width:92%; max-width:1280px; margin:0 auto 70px; font-size:7rem; line-height:1.3; font-weight:700; color:#fff;}

.swiper-button-prev::after,
.swiper-button-next::after {display:none;}
#main_visual .controls {display:flex; align-items:center; justify-content:center; gap:1rem; position:absolute; left:0; right:0; bottom:5.5rem; z-index:10;}
#main_visual .controls .page {display:flex; align-items:center; gap:11px; width:168px; font-size:18px; color:#fff; font-weight:600;}
#main_visual .controls .page .progress {flex:1; min-width:0; height:3px; background:rgba(255,255,255,0.2);}
#main_visual .controls .page .progress .bar {display:block; width:0; height:3px; background:#fff;}
#main_visual .controls .page .swiper-total-page {opacity:0.5;}
#main_visual .controls .swiper-button-prev,
#main_visual .controls .swiper-button-next {position:relative; top:auto; left:auto; right:auto; width:20px; height:20px; margin:0; filter: brightness(0) invert(1); background:url('/images/main/icon_main_visual_arr.svg') no-repeat center/contain;}
#main_visual .controls .swiper-button-prev {transform:rotate(180deg); margin-left:4rem;}

#wrap.swiper-cblack .controls .page {color:#000;}
#wrap.swiper-cblack .controls .page .progress {background:rgba(0,0,0,0.2);}
#wrap.swiper-cblack .controls .page .progress .bar {background:#000;}
#wrap.swiper-cblack .controls .swiper-button-prev,
#wrap.swiper-cblack .controls .swiper-button-next {filter:none;}


#main_visual .txt,
#main_visual .img {transform:translateY(10rem); opacity:0; transition:all 0.7s 1s;}
#main_visual .active .txt,
#main_visual .active .img {transform:translate(0,0) !important; opacity:1 !important; transition:all 0.7s 1s;}

@media screen and (max-width:1920px){
	#main_visual .swiper-slide.slide01 .img {background-size:contain;}
}
@media screen and (max-width:1024px){
	#main_visual .swiper-slide.slide01 .img {margin-top:-5rem; margin-left:-1.5rem; background-size:145%;}	
	#main_visual .swiper-slide .txt {margin-bottom:5rem; font-size:4.5rem; text-align:center;}
}

#youtube {margin:8rem 0 10rem;}
#youtube .top {display:flex; align-items:end; justify-content:space-between; margin-bottom:5rem;}
#youtube h3 {font-size:4rem; font-weight:700; line-height:1.3;}
#youtube h3 img {display:block; width:14.5rem; margin-bottom:2rem;}
#youtube .controls {display:flex; align-items:center; gap:1rem;}
#youtube .swiper-button-prev,
#youtube .swiper-button-next {position:relative; top:auto; left:auto; right:auto; width:4.4rem; height:4.4rem; margin:0; background:url('/images/main/icon_youtube_arr.png') no-repeat center/contain;}
#youtube .swiper-button-prev {transform:rotate(180deg);}
#youtube .swiper-slide a {position:relative; display:block; overflow:hidden; padding-bottom:56.25%; border-radius:1rem;}
#youtube .swiper-slide a img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
#youtube_pop {display:none;}
#youtube_pop::before {position:fixed; top:0; left:0; right:0; bottom:0; z-index:1000; background:rgba(0,0,0,0.5); content:'';}
#youtube_pop .pbox {position:fixed; top:50%; left:50%; z-index:1100; width:90%; max-width:1100px; transform:translate(-50%,-50%);}
#youtube_pop .mbox {overflow:hidden; border-radius:2rem;}
#youtube_pop .mbox::before {display:block; padding-bottom:56.25%; content:'';}
#youtube_pop .pbox iframe {position:absolute; top:0; left:0; width:100%; height:100%;}
@media screen and (max-width:1024px){
	#youtube .top {margin-bottom:3rem;}
	#youtube h3 {font-size:3.4rem;}
	#youtube h3 img {width:13rem; margin-bottom:1rem;}	
	#youtube .swiper-container {margin-right:-5%; padding-right:5%;}
	#youtube .swiper-slide {width:50rem;}
	#youtube .swiper-slide a {margin-right:2rem;}
	#youtube_pop .pbox {width:92%; margin-top:-3rem;}
}