@import url("common.css");


/*** css 공통 ***/
.tbox{text-align:center; padding: 0 5% 30px; box-sizing:border-box;}
.tbox .fs18{padding: 8px 0 0; line-height: 150%;}


/* 화살표 */
.slick-arrow {border:0; padding:0; font-size:0; outline:none; cursor:pointer; width:60px;  aspect-ratio: 3 / 3; transition:all .3s linear; position: absolute; z-index: 9999; border-radius:100%; background:var(--black); transition:all 0.3s linear;}
.slick-arrow:hover {background:var(--main); transition:all 0.3s linear;}
.slick-arrow::before {content:'\e317'; font-family:var(--icon); font-size:24px; display:block ;line-height:1; color:var(--white); transition:all 0.3s linear;}
.slick-prev {}
.slick-next {}
.slick-next::before {transform: scaleX(-1);}





/*** Visual ***/
#visual{width:100%; height: calc(var(--vh) - 110px); padding-top:110px; overflow: hidden; background:var(--black); position: relative;}
#visual .visual_in {width: 100%; height: 100%; position: relative;}
#visual .visual_in .slick-list, #visual .visual_in .slick-track {height:100%;}
#visual .visual_in .roll{width: 100%; height: 100%;}
#visual .visual_in .roll .v_txt{position: absolute; left: 50%; top:60%; transform:translate(-50%,-50%); text-align:center; z-index: 9999; margin-top:-120px;}
#visual .visual_in .roll .v_txt .fs70  {transition:all .6s 0.3s linear; transform:translateY(60px); opacity:0;}
#visual .visual_in .roll .v_txt .fs30 {margin:20px 0 0; transition:all .6s 0.5s linear; transform:translateY(60px); opacity:0;}
#visual .visual_in .roll .v_txt ul {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap:10px; max-width:910px; margin:30px auto 0;  transition:all .6s 0.7s linear; transform:translateY(60px); opacity:0;}
#visual .visual_in .roll .v_txt ul li {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; padding:15px 10px; border-radius: 180px; background: rgba(18, 93, 230, 0.85); backdrop-filter: blur(10px); color:var(--white); line-height:143.75%; font-weight: 600;}
#visual .visual_in .roll .v_bg{position: absolute; left: 0; top:0; width: 100%; height: 100%;}
#visual .visual_in .roll .v_bg .bg{width: 100%; height: 100%; background-repeat:no-repeat; background-size:cover; background-position:center; -ms-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); -webkit-transition:transform 3000ms  ease-in-out; -moz-transition:transform 3000ms ease-in-out; -o-transition:transform 3000ms ease-in-out; -ms-transition:transform 3000ms ease-in-out; transition:transform 3000ms ease-in-out;}

.white-skin .v_txt .fs70 {color:var(--white);}
.white-skin  .v_txt .fs30 {color:var(--white);}
 

/* 스크롤 */
#visual .scroll_down{color: rgba(34,34,34,0.5); font-size: 12px; font-weight: 700; line-height:166.667%;  position:absolute; left:calc((100% - 1350px) / 2); bottom:30px; z-index: 9999; display:flex; flex-wrap:wrap; align-items:center; gap:0 20px;}
#visual .scroll_down span {position:relative; display:block; width:5px; height:50px; background:rgba(34,34,34,0.1); border-radius:5px; overflow:hidden;}
#visual .scroll_down span:after {content:''; width:100%; height:50%; background:var(--black); border-radius:5px; position:absolute; top:0; left:0;  animation:scroll_down 1.5s linear infinite;}
@keyframes scroll_down {
	0% { transform:translateY(-200%);}
	100% { transform:translateY(200%); }
}

@keyframes fadeIn {
	0% { opacity: 0;}
	100% {opacity: 1;}
}

#visual.white-skin .scroll_down {color:rgba(255,255,255,0.5);}
#visual.white-skin .scroll_down span {background:rgba(255,255,255,0.1);}
#visual.white-skin .scroll_down span::after {background:var(--white);}


/* 화살표 */
#visual .slick-arrow{opacity: 1; bottom:45px; width:auto; background:transparent !important; right: calc((100% - 1350px) / 2); }
#visual .slick-arrow::before {content:'\e5e1'; color:var(--black); opacity: 0.5; font-size:20px;}
#visual .slick-arrow:hover::before {opacity: 1;}
#visual .slick-prev {margin-right:40px;}
#visual .slick-prev::before {transform: scaleX(-1);}
#visual .slick-next {}
#visual .slick-next::before {transform: scaleX(1);}

#visual.white-skin .slick-arrow::before {color:var(--white);}


/* 도트 */
#visual .slick-dots {display:flex; flex-wrap:wrap; position: absolute; right: calc((100% - 1350px) / 2); bottom:36px; z-index: 9999; gap:15px; margin-right:90px;}
#visual .slick-dots li {position:relative;}
#visual .slick-dots li button {padding:5px 3px; margin:0; background:transparent; border:0; color: var(--black); font-size: 0.8rem; font-weight: 600; line-height:175%; letter-spacing: -0.48px; opacity: 0.3; cursor:pointer; display:block;}
#visual .slick-dots li.slick-active button {opacity:1;}
#visual .slick-dots li.slick-active::after {content:''; width:100%; height:3px; background:var(--black); position:absolute; bottom:0; left:0;}
#visual.white-skin .slick-dots li button {color:var(--white);}
#visual.white-skin .slick-dots li.slick-active::after {background:var(--white);}



/* 효과 */
#visual .visual_in .roll.action .v_bg .bg {transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}
#visual .visual_in .roll.action .v_txt .fs70 {transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_txt .fs30 {transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_txt ul {transform:translateY(0); opacity:1;}



.tit-wrap {margin:0 0 40px;}
.tit-wrap .fs20 {margin:15px 0 0;}

.plus_more {font-weight: 600; color:var(--black); display:inline-flex; gap:0 5px; align-items:center; transition:all 0.3s linear;}
.plus_more i {border-radius:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; transition:all 0.3s linear;}
.plus_more i::before {content:'\e147'; font-size:30px; line-height:1; display:block; font-family:var(--icon); font-style:normal; font-variation-settings: 'FILL' 1; font-weight: 500; transition:all 0.3s linear;}
.plus_more:hover {color:var(--main); transition:all 0.3s linear;}
.plus_more:hover i::before {transform:rotate(180deg); transition:all 0.3s linear;}


.about {overflow:hidden;}
.about .basic_in {position:relative;}
.about .basic_in::after {content:''; width: 263px; aspect-ratio: 263/437; position:absolute; top:0; right:0; background:url("/img/mnote_ico.png")no-repeat center / 100%; transform:translate(90%,-40%); z-index:-1;}
.about .tit-wrap .fs20 {margin:25px 0 0;}
.about_list {display:flex; flex-wrap:wrap; margin:80px 0 0;}
.about_list li {position:relative; flex:1; padding:0 10px; box-sizing:border-box; }
.about_list li+li {border-left:1px solid var(--border);}
.about_list li a {display:block; text-align:center;}
.about_list li a .fs20 {margin:30px 0 0; font-weight: 600; transition:all 0.3s linear;}
.about_list li::after {content:''; width:100%; height:100%; background: linear-gradient(0deg, rgba(137, 199, 177, 0.00) 0%, var(--main) 50%, rgba(137, 199, 177, 0.00) 100%); position:absolute; top:0; left:0; z-index:-1; opacity:0; transition:all 0.3s linear;}
.about_list li:hover::after {opacity:0.15; transition:all 0.3s linear;}
.about_list li:hover a .fs20 {color:var(--main); margin:15px 0 0; transition:all 0.3s linear;}



.news {}
.news .news-tit {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin:0 0 25px;}
.news-list .slick-list {margin-left:-30px;}
.news-list li {margin-left:30px;}
.news-list li {padding:40px; display:block; box-sizing:border-box; position:relative; border:1px solid var(--border);}
.news-list li a::after {content:''; width:100%; height:100%; border:3px solid var(--main); position:absolute; top:0; left:0; transition:all 0.3s linear; box-sizing:border-box; opacity:0;}
.news-list li a:hover::after {opacity:1; transition:all 0.3s linear;}
.news-list li a .subject {text-overflow: ellipsis; white-space: nowrap; overflow:hidden; font-weight: 600;}
.news-list li a .fs16 {text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap:break-word; overflow:hidden; height: 2.7rem; margin:30px 0 0; color:var(--gray)}
.news-list li a .date {display:flex; flex-wrap:wrap; align-items:center; gap:0 3px; margin:40px 0 0; color:var(--gray)}
.news-list li a .date::before {content:'\e8b5'; font-size:16px; line-height:1; display:block; font-family:var(--icon); font-weight:500;}



.grayBox {background:var(--grayBg);}
.video-list {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap:30px;}
.video-list dl {background:var(--white);}
.video-list dl a {display:block;}
.video-list dl a dt {aspect-ratio: 430 / 242; position:relative; overflow:hidden;}
.video-list dl a dt i {width:60px;  aspect-ratio: 3 / 3; background:rgba(34,34,34,0.1); border-radius:100%; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:10;}
.video-list dl a dt i::before {content:''; width:calc(100% - 12px);  height:calc(100% - 12px); background:var(--white); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:100%; }
.video-list dl a dt i::after {content:''; width:10px; aspect-ratio: 10 / 12; background:url("/img/play_ico.svg")no-repeat center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.video-list dl a dt img {displsay: block; width: 100%; height: 100%; object-fit: cover; transition:all 0.3s linear;}
.video-list dl a dd {padding:20px 30px; box-sizing:border-box;}
.video-list dl a dd .fs20 {font-weight: 600;}
.video-list dl a dd .fs18 {font-weight: 600; color:var(--main); word-break:break-all;}

.video-list dl:hover a dt img {transform:scale(1.1); transition:all 0.3s linear;}



.singer .basic_in {position:relative;}
.singer .basic_in::after {content:''; width: 135px; aspect-ratio: 135.91/134.06; position:absolute; top:0; left:0; background:url("/img/mnote_ico02.png")no-repeat center / 100%; transform:translate(-120%,-39%);}

.singer_list {}
.singer_list .slick-arrow {top:-125px;}
.singer_list .slick-prev {left:0;}
.singer_list .slick-next {right:0;}
.singer_list .slick-list {margin-left:-30px;}
.singer_list dl {margin-left:30px;}
.singer_list dl dt {aspect-ratio: 315 / 394; overflow:hidden;}
.singer_list dl dt img {display: block; width: 100%; height: 100%; object-fit: cover; transition:all 0.3s linear;}
.singer_list dl dd {padding:20px 0 0; text-align:center;}
.singer_list dl dd .fs24 {transition:all 0.3s linear;}
.singer_list dl dd .fs18 {margin:5px 0 0; transition:all 0.3s linear; color:Var(--gray)}

.singer_list dl:hover a dt img {transform:scale(1.1); transition:all 0.3s linear;}
.singer_list dl:hover a dd .fs24 {color:var(--main); transition:all 0.3s linear;}


.youtube {background:#F9EEDA; overflow:hidden}
.youtube .basic_in {display:flex; flex-wrap:wrap; gap:0 135px; align-items:flex-start;}
.youtube .tit-wrap {width:326px;}
.youtube .tit-wrap .fs50 {margin:0 0 40px;}
.youtube .channel_list {flex:1; display:flex; flex-wrap:wrap; gap:30px;}
.youtube .channel_list li {display:flex; align-items:center; gap:0 20px; width:calc((100% - 30px) / 2)}
.youtube .channel_list li.width100 {width:100%}
.youtube .channel_list li::before {content:''; width:60px; aspect-ratio: 3 / 3; border-radius:100%; background:#ff0033 url("/img/youtube_ico.svg")no-repeat center; display:block; flex-shrink:0}
.youtube .channel_list li .in {flex:1;}
.youtube .channel_list li .in .fs20 {font-weight: 600;}
.youtube .channel_list li .in .fs18 {font-weight: 600; color:#FF0033; display:inline-flex; align-items:center;}
.youtube .channel_list li .in .fs18::after {content:'\f46a'; font-size:20px; line-height:1; display:block; font-family:var(--icon); font-weight:500;}


.partners {background:var(--grayBg); padding:30px 0; overflow:hidden}
.partners .slick-arrow {width:50px; background:var(--white); top:50%; transform:translateY(-50%);}
.partners .slick-arrow::before {content:'\f46b'; color:var(--black);}
.partners .slick-arrow:hover {background:var(--main);}
.partners .slick-arrow:hover::before {color:var(--white);}
.partners .slick-prev {left:0;}
.partners .slick-next {right:0;}
.partners .basic_in {display:flex; flex-wrap:wrap; align-items:center;}
.partners .basic_in .fs20 {width:230px; flex-shrink: 0;}
.partners .basic_in .partners_list {width:calc(100% - 230px); padding:0 85px; box-sizing:border-box;}
.partners .basic_in .partners_list .slick-list {margin-left:-20px;}
.partners .basic_in .partners_list li {margin-left:20px;}
.partners .basic_in .partners_list li a {aspect-ratio: 174 / 70; background:var(--grayBg)}
.partners .basic_in .partners_list li img {display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode:darken}


/*******************************************************************************
	@media ~1650px
*******************************************************************************/
@media all and (max-width:1650px) { 


/* 스크롤 */
#visual .scroll_down{left:5%;}


/* 화살표 */
#visual .slick-arrow{right: 5%;}



/* 도트 */
#visual .slick-dots {right: 5%;}



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

.tit-wrap br {display:none;}


.about .basic_in::after {transform: translate(60%, -40%); width:230px;}

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


.youtube .basic_in {gap:0 50px;}

.about .basic_in::after {transform: translate(70%, -50%); width:180px;}

.news-list .slick-list {margin-left:-15px}
.news-list li {margin-left:15px}
.news-list li a .fs16 {margin-top:20px}
.news-list li a .date {margin-top:30px}

.partners .basic_in .fs20 {width:200px}
.partners .basic_in .partners_list {width:calc(100% - 200px)}

.youtube .channel_list {gap:15px}
.youtube .channel_list li {gap:0 15px; width:calc((100% - 15px) / 2)}
.youtube .channel_list li .in .fs20 {font-size:0.857rem}
.youtube .channel_list li .in .fs18 {font-size:0.809rem}
.youtube .channel_list li::before {width:50px}
}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 


.slick-arrow {width:50px;}

#visual {padding-top:100px; height: calc(var(--vh) - 100px);}
#visual br {display:none;}


.about .basic_in::after {width:166px; opacity:0.2; transform:translate(40%, -50%)}

.news-list li {padding:25px;}

.video-list {grid-gap:15px; grid-template-columns:repeat(2,1fr)}
.video-list dl a dd {padding:15px 25px;}



.singer .tit-wrap {padding:0 60px; box-sizing:border-box;}
.singer_list .slick-arrow {top:-111px;}
.singer_list .slick-list {margin-left:-15px;}
.singer_list dl {margin-left:15px;}


.youtube .basic_in {gap:0 0; display:block;}
.youtube .tit-wrap {width:100%; position:relative;}
.youtube .tit-wrap img {width:150px; position:absolute; top:-50px; right:0;}
.youtube .channel_list {flex:none; width:100%;}
.youtube .channel_list li::before {width:45px;}

.partners .basic_in {display:block}
.partners .basic_in .fs20 {display:flex; justify-content:center; width:100%; font-size:20px; margin-bottom:10px}
.partners .basic_in .partners_list {width:100%; padding:0}
.partners .slick-arrow {width:40px; top:-7px; transform:translateY(-100%)}



}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 
.fs50 {font-size:1.8rem; letter-spacing:-1px}


.slick-arrow {width:40px;}
.slick-arrow::before {font-size:20px;}

.tit-wrap {margin:0 0 20px;}
.tit-wrap .fs20 {margin:5px 0 0;}



#visual {padding-top:70px; height: calc(var(--vh) - 70px);}
#visual .visual_in .roll .v_txt .fs30 {margin:10px 0 0;}
#visual .visual_in .roll .v_txt ul {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap:10px; margin:15px auto 0;}

#visual .scroll_down {gap:0; font-size:0}
#visual .scroll_down span {height:35px;}

#visual .slick-arrow {bottom:38px;}
#visual .slick-dots {bottom:32px}



.about .basic_in::after {display:none}
.about .tit-wrap .fs20 {margin:15px 0 0;}
/* .about_list li {flex:none; width:calc((100% - 5px) /2); border:1px solid var(--border); text-align:left; border-radius:3px; background:var(--white); padding:0;}
.about_list li a {display:flex; flex-wrap:wrap; align-items:center; padding:15px; gap:0 15px !important; height:100%; box-sizing:border-box;}
.about_list li a span {width:30px; flex-shrink: 0;}
.about_list li a img {width:30px;}
.about_list li a .fs20 {flex:1; margin:0 !important; text-align:left;} */

.about_list {gap:0; margin:30px 0 0;}
.about_list li a img {width:50px;}
.about_list li a .fs20 {margin-top:10px; font-size:14px;}
.about_list li a:hover .fs20 {margin-top:5px}

.plus_more i::before {font-size:24px;}
.news .news-tit {margin:0 0 15px;}
.news-list li a .subject {font-size:14px;}
.news-list li a .fs16 {margin:15px 0 0; font-size:13px}
.news-list li a .date {margin:20px 0 0;}
.news-list li a .date::before {font-size:16px;}


.video-list {grid-gap:10px; grid-template-columns: repeat(1, 1fr);}
.video-list dl a dd {padding:15px 25px;}
.video-list dl a dt i {width:50px;}

.singer {overflow:hidden}
.singer .tit-wrap {padding:0;}
.singer_list {padding:0 30px}
.singer_list .slick-list {overflow:visible}
.singer_list dl dd {padding:25px 0 0;}
.singer_list dl dd .fs18 {margin:0;}
.singer_list .slick-arrow {top:auto; bottom:5px; width:36px;}

.singer_list .slick-prev {left:30px}
.singer_list .slick-next {right:30px}

.youtube .tit-wrap img {width:120px;}
.youtube .tit-wrap .fs50 {margin:0 0 25px; text-align:center;}
.youtube .channel_list {gap:20px 10px; top:-40px;}
.youtube .channel_list li {width:calc((100% - 10px) / 2); gap:0 10px}
.youtube .channel_list li::before {width:45px; background-size:20px auto}

.partners {padding:30px 0;}
.partners .slick-arrow {width:35px; top:-11px}

}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:480px) { 

#visual .visual_in .roll .v_txt ul {display: grid; grid-template-columns: repeat(1, 1fr); grid-gap:5px;}
#visual .visual_in .roll .v_txt ul li {padding:10px;}

#visual .slick-prev {margin-right:30px}
#visual .slick-dots {margin-right:70px}

.about_list {gap:30px 0}
.about_list li {flex:auto; width:calc(100% / 2); position:relative;}
.about_list li:nth-child(3) {border-left:0}
.about_list li a img {width:35px;}

.about_list li:nth-child(1)::before,
.about_list li:nth-child(2)::before {content:''; width:95%; left:50%; bottom:-15px; transform:translateX(-50%); height:1px; background:var(--border); position:absolute}

.youtube .tit-wrap img {top:90px; transform:rotate(3deg);}
.youtube .channel_list {gap:17px}
.youtube .channel_list li {flex:none; width:100%;}

.video-list {grid-gap:10px; grid-template-columns: repeat(1, 1fr);}

}