@import url("common.css");

/* 공통 */
.marb60 {margin-bottom:60px}
.marb50 {margin-bottom:50px}
.marb45 {margin-bottom:45px}
.marb15 {margin-bottom:15px}

.tit_wrap {color: var(--black);}
.tit_wrap .tit {font-size: 3rem; font-weight: 700; line-height: 116.667%; letter-spacing: 0; text-transform:uppercase; text-wrap:balance}
.tit_wrap .sub_tit {font-size: 1rem; line-height: 162.5%; letter-spacing: 0;}

.tit_container {position:relative}
.tit_container .tit_wrap .tit {margin-bottom:10px}
.tit_container .morebtn_wrap {position:absolute; bottom:29px; right:0;}

/* morebtn */
.morebtn {font-weight:700; color:var(--main);}
.morebtn:hover {color:var(--black); text-decoration:underline}

/* Visual */
#visual {height:660px; position:relative}
#visual .v_in {text-align:center; color:var(--black); padding-top:239px; position:relative; z-index:2}
#visual .v_in .tit {margin-bottom:20px;  font-family:var(--eng); font-weight:700; transform:translateY(60px); opacity:0; animation:v_txt .6s .3s linear forwards}
#visual .v_in .sub_tit {font-size: 1rem; line-height: 162.5%; letter-spacing: 0; transform:translateY(60px); opacity:0; animation:v_txt .6s .6s linear forwards; word-break:break-all}
#visual .v_bg {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden}
#visual .v_bg .jarallax {width:100%; height:var(--vh); position:absolute; top:50%; left:50%; transform:translate(-50%, -50%)}

@keyframes v_txt {
0%{transform:translateY(60px); opacity:0}
100%{transform:translateY(0); opacity:1}
}

/* About */
#about .about_grid {display:grid; grid-template-columns:repeat(2, 1fr); grid-gap:40px}
#about .about_grid a {display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; color:var(--white); border-radius:var(--borderR20); height:370px; position:relative; overflow:hidden; padding:15px;}
#about .about_grid a .bg {background-size:cover; background-position:center; background-repeat:no-repeat; position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; transition:all 0.4s linear}
#about .about_grid a h4 {font-weight:700; margin-bottom:5px; position:relative; z-index:2}
#about .about_grid a p {position:relative; z-index:2; letter-spacing: 0.4pt;}
#about .about_grid a::before {content:""; width:100%; height:100%; position:absolute; top:0; left:0; background:var(--main); opacity:0; transition:all 0.4s linear; z-index:1}

#about .about_grid a:hover::before {opacity:0.6}
#about .about_grid a:hover .bg {transform:scale(1.1);}

/* Event */
#event .event_grid {display:grid; grid-template-columns:repeat(4, 1fr); grid-gap:40px}
#event .event_grid a .imgbox {overflow:hidden; border-radius:var(--borderR20); position:relative}
#event .event_grid a .imgbox img {width:100%; height:auto; display:block; object-fit:cover; transition:all 0.4s linear}
#event .event_grid a .imgbox::before {content:""; width:100%; height:100%; position:absolute; top:0; left:0; background:var(--main); opacity:0; transition:all 0.4s linear; z-index:1}
#event .event_grid a .tbox h4.fs18 {color:var(--black); font-weight:700}

#event .event_grid a:hover .imgbox img {transform:scale(1.1)}
#event .event_grid a:hover .imgbox::before {opacity:0.6}

/* Signature */
#signature {overflow:hidden}
#signature .signature_in {display:flex; align-items:center; justify-content:space-between; gap:40px; margin-right:-110px;}
#signature .tit_wrap {text-align:left; width:400px; flex-shrink:0}
#signature .tit_wrap .tit {margin-bottom:10px}
#signature .btn_wrap {display:flex; align-items:center; gap:20px}
#signature .btn_wrap .btn {display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.3s linear; opacity:0.5;}
#signature .btn_wrap .btn::before {content:"\e2ea"; font-family:var(--icon); font-size:40px; line-height:1; font-weight:400; color:#222; opacity:0.4;}
#signature .btn_wrap .btn.next::before {content:"\e5e1";}
#signature .btn_wrap .btn:hover {opacity:1}
#signature .signature_swiper {position:relative; mask-image:linear-gradient(90deg, rgba(0, 0, 0, 0.00) 5%, #000 50%, rgba(0, 0, 0, 0.00) 95%); mask-repeat: no-repeat; -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.00) 5%, #000 50%, rgba(0, 0, 0, 0.00) 95%); -webkit-mask-repeat: no-repeat; -webkit-mask-size:calc(100% + 55px) 100%}
#signature .swiper-wrapper {height:auto}
#signature .signature_swiper .swiper-slide {width:290px;}
#signature .signature_swiper .swiper-slide::before {background:url('/img/deco_blue.svg') center / cover no-repeat; content:""; width:20px; aspect-ratio:1/1; position:absolute; top:20px; right:20px; opacity:0.2; mix-blend-mode: luminosity;}
#signature .signature_swiper .swiper-slide.swiper-slide-active::before {opacity:1; mix-blend-mode: unset;}
#signature .signature_swiper .swiper-slide .imgbox {width:100%; overflow: hidden; aspect-ratio:1/1; background:var(--white); border-radius:var(--borderR20);}
#signature .signature_swiper .swiper-slide .imgbox img {width:100%; height:100%; object-fit:cover}
#signature .signature_swiper .swiper-slide .tbox {color:var(--black);}
#signature .signature_swiper .swiper-slide .tbox p.kor_name {opacity:0.7}

#signature .btn_wrap_m {display:none}

/* Youtube */
#youtube {}
#youtube .youtube_contents {display:flex; gap:30px}
#youtube .youtube_contents .youtube_video {flex-shrink:0; border-radius:var(--borderR20); overflow:hidden; display:flex; max-width:840px; height:470px; width:70%}
#youtube .youtube_contents .youtube_video .youtube_item {position:absolute; top:0; left:0; width:100%; height:100%; display:none}
#youtube .youtube_contents .youtube_video .youtube_item.active {display:block}
#youtube .youtube_contents .youtube_video iframe {width:100%; height:100%}
#youtube .youtube_contents .youtube_list {background:var(--white); max-height:470px; overflow-y:auto}
#youtube .youtube_contents .youtube_list::-webkit-scrollbar {width:5px; height:100%}
#youtube .youtube_contents .youtube_list::-webkit-scrollbar-track {border-radius: 10px; background:rgba(0,0,0,0.05); height:150px; width:100%}
#youtube .youtube_contents .youtube_list::-webkit-scrollbar-thumb {border-radius: 10px; height:130px; width:100%; background:rgba(0,0,0,0.3)}
#youtube .youtube_contents .youtube_list a {display:flex; gap:15px; align-items:center; opacity: 0.8; mix-blend-mode: luminosity; transition:all 0.6s ease; padding-right:10px}
#youtube .youtube_contents .youtube_list a + a {margin-top:20px}
#youtube .youtube_contents .youtube_list a .imgbox {border-radius:10px; overflow:hidden; flex-shrink:0; position:relative}
#youtube .youtube_contents .youtube_list a .imgbox img {max-width:150px; height:auto} 
#youtube .youtube_contents .youtube_list a .imgbox::before {content:""; width:100%;height:100%;position:absolute; top:0; ;left:0; background:transparent; box-shadow: 0 0 0 5px var(--main) inset; border-radius:inherit; opacity:0; visibility:hidden; transition:all 0.6s ease}
#youtube .youtube_contents .youtube_list a .tbox {color:var(--black);}
#youtube .youtube_contents .youtube_list a .tbox h4.fs18 {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow:hidden}
#youtube .youtube_contents .youtube_list a .tbox p.fs16 {opacity:0.7; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow:hidden}

#youtube .youtube_contents .youtube_list a.active {opacity: 1; mix-blend-mode: unset;}
#youtube .youtube_contents .youtube_list a:hover {opacity: 1; mix-blend-mode: unset;}
#youtube .youtube_contents .youtube_list a:hover .imgbox::before {opacity:1; visibility:visible}

/* Insta */
#insta {}
#insta .insta_list {display:grid; grid-template-columns:repeat(4, 1fr); grid-gap:40px}
#insta .insta_list a {display:flex; aspect-ratio:290 / 386; border-radius:var(--borderR20); overflow:hidden}
#insta .insta_list a img {width:100%; height:100%; object-fit:cover; transition:all 0.6s ease} 
#insta .insta_list a:hover img {transform:scale(1.1)}

/* Location */
#location {}
#location .location_flex {display:flex; align-items:center; justify-content:space-between; gap:50px}
#location .location_flex .tbox .location_info {color:var(--black);}
#location .location_flex .tbox .location_info .fs26 {font-weight:700; margin-bottom:12px}
#location .location_flex .tbox .location_info:nth-child(2) {margin:40px 0}
#location .location_flex .tbox .location_info dl {display:flex}
#location .location_flex .tbox .location_info dl + dl {margin-top:3px}
#location .location_flex .tbox .location_info dl dt {width:100px; flex-shrink:0}
#location .location_flex .tbox .location_info dl dd {color:#222}
#location .location_flex .tbox .location_info:last-child p.fs16:last-child {height:37px; margin-top:3px; display:flex; align-items:flex-end; color:#222}
#location .location_flex .mapbox {width:55%; max-width:650px; height:480px; border-radius:var(--borderR20); overflow:hidden; flex-shrink:0}
#location .location_flex .mapbox iframe{width: 100%; height: 100%;}
.root_daum_roughmap.root_daum_roughmap_landing {width:100% !important; height:100% !important;}
.root_daum_roughmap.root_daum_roughmap_landing .wrap_map{height: 100% !important;}
.root_daum_roughmap.root_daum_roughmap_landing .map_border{display:none !important;}
.root_daum_roughmap.root_daum_roughmap_landing .cont{display:none !important;}
.root_daum_roughmap.root_daum_roughmap_landing .wrap_controllers{display:none !important;}

/*******************************************************************************
    @media 1700px
*******************************************************************************/
@media all and (max-width:1750px){
#signature .signature_in {margin-right:0;}

}

/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){
}

/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* Visual */
#visual {height:500px}
#visual .v_in {padding-top:0; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center}
#visual .v_bg .jarallax {height:750px;}
#visual .v_bg .jarallax video {height:100% !important; width:100% !important; margin: 0 !important; transform:translate3d(0, 40px, 0) !important}


#visual .v_in .tit {font-size:3.5rem}


/* About */
#about .about_grid {grid-gap:20px}
#about .about_grid a {height:auto; aspect-ratio:62/37}

/* Event */
#event .event_grid {grid-gap:20px}

/* Signature */
#signature .tit_wrap {width:auto}
#signature .signature_in {gap:30px}
#signature .signature_swiper .swiper-slide {width:250px}

/* Youtube */
#youtube .youtube_contents .youtube_video {width:60%; height:350px}
#youtube .youtube_contents .youtube_list a {gap:10px}
#youtube .youtube_contents .youtube_list a + a {margin-top:15px}
#youtube .youtube_contents .youtube_list a .imgbox img {width:120px}

/* Insta */
#insta .insta_list {grid-gap:20px}

/* Location */
#location .location_flex {gap:30px}
#location .location_flex .tbox .location_info:nth-child(2) {margin:25px 0}
#location .location_flex .tbox .location_info .fs26 {margin-bottom:8px}
#location .location_flex .mapbox {width:50%}
}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){
/* 공통 */
.marb15 {margin-bottom:5px}
.marb45 {margin-bottom:30px}
.marb50 {margin-bottom:30px}
.marb60 {margin-bottom:40px}

.tit_wrap .tit {font-size:2.5rem}
.tit_container .tit_wrap .tit {margin-bottom:10px}
.tit_container .morebtn_wrap {bottom:auto; top:50%; transform:translateY(-50%)}

/* Visual */
#visual {height:450px}
#visual .v_in .tit {margin-bottom:10px; font-size:3rem}
#visual .v_in .sub_tit {font-size:14px}
#visual .v_bg .jarallax {height:800px;}
#visual .v_bg .jarallax video {height:100% !important; width:100% !important; margin: 0 !important; transform:translate3d(0, 20px, 0) !important}

/* About */
#about .about_grid {grid-gap:10px}
#about .about_grid a {aspect-ratio:unset; height:200px}

/* Event */
#event .event_grid {grid-gap:30px 10px; grid-template-columns:repeat(2, 1fr);}

/* Signature */
#signature .btn_wrap {gap:10px}
#signature .btn_wrap .btn::before {font-size:35px}
#signature .tit_wrap .tit {margin-bottom:5px}
#signature .signature_swiper {-webkit-mask-size:100% 100%; mask-image:linear-gradient(90deg, rgba(0, 0, 0, 0.00) 2%, #000 50%, rgba(0, 0, 0, 0.00) 98%); -webkit-mask-image:linear-gradient(90deg, rgba(0, 0, 0, 0.00) 2%, #000 50%, rgba(0, 0, 0, 0.00) 98%)}
#signature .signature_swiper .swiper-slide {width:200px}
#signature .signature_swiper .swiper-slide::before {width:16px}

/* Youtube */
#youtube .youtube_contents {display:block}
#youtube .youtube_contents .youtube_video {width:100%; height:450px; margin-bottom:30px}
#youtube .youtube_contents .youtube_video {width:100%; aspect-ratio:640/360; height:auto}
#youtube .youtube_contents .youtube_list {max-height:160px}
#youtube .youtube_contents .youtube_list::-webkit-scrollbar-track {border-radius: 10px; background:rgba(0,0,0,0.05); height:150px; width:100%}
#youtube .youtube_contents .youtube_list::-webkit-scrollbar-thumb {border-radius: 10px; height:30px; width:100%; background:rgba(0,0,0,0.3)}


/* Insta */
#insta .insta_list {grid-gap:10px}

/* Location */
#location .location_flex {display:block}
#location .location_flex .tbox .location_info:nth-child(2) {margin:20px 0}
#location .location_flex .tbox .location_info:last-child p.fs16:last-child {height:auto; margin-top:8px}
#location .location_flex .tbox .location_info dl dt {width:80px}
#location .location_flex .mapbox {width:100%; max-width:unset; height:350px; margin-top:30px}
}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/* 공통 */
.tit_wrap .tit {font-size:1.8rem}
.morebtn {font-size:13px}


/* Visual */
/* #visual {height:400px} */
#visual .v_in .tit {font-size:2rem; text-wrap:balance}
#visual .v_in .tit br {display:none}

/* About */
#about .about_grid {grid-template-columns:repeat(1, 1fr);}

/* Signature */
#signature .signature_in {display:block}
#signature .tit_wrap {text-align:center}
#signature .signature_in .tit_wrap .sub_tit {margin-bottom:20px}
#signature .signature_in .tit_wrap .sub_tit br{display: none;}
#signature .signature_in .tit_wrap .btn_wrap {display:none}
#signature .btn_wrap_m {display:flex; margin-top:20px; justify-content:center}
#signature .btn_wrap .btn::before {font-size:30px} 
#signature .signature_swiper .swiper-slide::before {top:15px; right:15px}

/* Youtube */


/* Insta */
#insta .insta_list {grid-template-columns:repeat(2, 1fr);}

/* Location */
#location .location_flex .mapbox {height:280px}
#location .location_flex .tbox .location_info dl dt {width:70px}
}

/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:480px){
/* 공통 */
.tit_container .morebtn_wrap {position:static; transform:none; display:flex; justify-content:center; margin-top:15px}

/* Event */
#event .event_grid a .tbox h4.fs18 {font-size:14px}

/* Youtube */
#youtube .youtube_contents .youtube_list {max-height:125px}
#youtube .youtube_contents .youtube_list a .imgbox img {width:100px}

/* Insta */
#insta .insta_list a {aspect-ratio:290/320}
}

/*******************************************************************************
    @media 360px
*******************************************************************************/
@media all and (max-width:360px){
}