@import url("common.css");


/*** css 공통 ***/
body,html {background:var(--blue_black); color:rgba(255,255,255,0.7);}

/* 텍스트 */
.tit-box {position:relative; margin:0 0 45px;}
.sm-tit {color: var(--white); font-family: var(--eng); font-size: 14px; font-weight: 700; line-height:157.143%; text-transform: uppercase; display:block; margin:0 0 10px;}
.fs55 {color: var(--white); font-size: 3.055rem; font-weight: 700; line-height:118.182%; letter-spacing: -2.75px;}
.fs20 {font-size: 1.111rem; font-weight: 400; line-height:130%; letter-spacing: -1px;}

.cate_tab {position:absolute; bottom:0; right:0; display:flex; flex-wrap:wrap; gap:0 40px;}
.cate_tab li {}
.cate_tab li a {letter-spacing: -1.44px;}
.cate_tab li:hover a {color:var(--white);}
.cate_tab li.on a {font-weight: 500; color:var(--white); text-decoration:underline; text-underline-offset:4px;}



/* 화살표 */
.slick-arrow {border:0; padding:0; font-size:0; outline:none; cursor:pointer;  transition:all .3s linear; position: relative; z-index: 9999; background:transparent; border:0;}
.slick-arrow::before {content:'\e5e1'; font-size:35px; display:block; line-height:1; font-family:var(--icon); color:var(--white); opacity:0.5; font-weight:300;}
.slick-arrow:hover::before { opacity:1;}
.slick-prev {transform: scaleX(-1);}





/*** Visual ***/
#visual {width:100%; height: var(--vh); overflow: hidden; position: relative; }
#visual .v_info {/* position:absolute; top:53%; right:calc((100% - 1350px) / 2);  */ position:relative; z-index:99999; display:flex; flex-wrap:nowrap; align-items:center; gap:0 7px; margin:55px 0 0;}
#visual .v_info .slick-page {display:flex; flex-wrap:wrap; align-items:center;}
#visual .v_info .slick-page li {color: rgba(255,255,255,0.5); font-family: var(--eng); font-size: 0.888rem; font-weight: 400; line-height: 187.5%;}
#visual .v_info .slick-page li.cur {margin-right:9px; font-weight: 700; color:var(--white);}
#visual .v_info .slick-page li.tot {margin-left:3px;}
#visual .v_info .v_arr {display:flex; flex-wrap:wrap; align-items:center; gap:0 10px;}
#visual .v_info .v_arr .slick-arrow {position:relative; color:var(--white); top:0;}

#visual .slick-track, #visual .slick-list {height:100%;}
#visual .visual_in{width: 100%; height: 100%; position: relative;}
#visual .visual_in .roll{width: 100%; height: 100%;}
#visual .visual_in .roll .v_txt{position: absolute; left: 50%; top:48%; transform:translate(-50%,-50%);  z-index: 9999;}

#visual .visual_in .roll .v_txt h3 {color: var(--white); font-size: 1.444rem; font-weight: 500; line-height:138.462%; letter-spacing: -2.08px; transition:all .6s 0.1s; transform:translateY(60px); opacity:0;}
#visual .visual_in .roll .v_txt h2 {color: var(--white); font-size: 4.1666rem; font-weight: 700; line-height:122.667%; letter-spacing: -6px; transition:all .6s 0.3s; transform:translateY(60px); opacity:0; margin:15px 0 0;}
#visual .visual_in .roll .v_txt p{color: var(--white); font-size: 1rem; font-weight: 400; line-height:177.778%; letter-spacing: -1.44px; transition:all .6s 0.5s; transform:translateY(60px); opacity:0; margin:25px 0 0;}

#visual .visual_in .roll .v_bg{position: absolute; left: 0; top:0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 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; opacity:0.8;}
#visual .visual_in .roll .v_bg .bg::after {content:''; width:100%; height:100%; position:absolute; top:0; left:0; opacity: 0.5; background: linear-gradient(90deg, var(--blue_black) 0.12%, rgba(21, 31, 56, 0.00) 99.88%);}
#visual .visual_in .roll .v_bg .jarallax{position: relative; width: 100%; height:100%; opacity: .7;}
#visual .visual_in .roll .v_bg .jarallax iframe{position: absolute;}

/* 스크롤 */
#visual .scroll_down{display:block; position:absolute; left:50%; bottom:10%; transform:translateX(-50%); z-index: 9999; text-align:center;}
#visual .scroll_down span{display:block; margin:6px 0 0;}
#visual .scroll_down span:before{content:'\ead0'; font-size:20px; line-height:1; display:block; color:var(--white); font-family:var(--icon); animation:scroll_down 1s linear infinite;}


@keyframes scroll_down {
	0%,100% { transform:translateY(0); opacity: 1;}
	50% { transform:translateY(5px); opacity: 0.5;}
}

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




/* 도트 */
#visual .slick-dots{font-size:0; position: absolute; left: 50%; top:60%; transform:translate(-50%,-50%); z-index: 9999; margin-bottom: 120px; opacity: 0; animation:fadeIn 0.6s 1s linear forwards;}
#visual .slick-dots li{display:inline-block; vertical-align:top; width:20px; height:20px; border:1px solid transparent; box-sizing:border-box; margin: 0 15px 0 0; cursor:pointer; transition:all .3s linear; border-radius:50%; position: relative;}
#visual .slick-dots li:last-child{margin: 0;}
#visual .slick-dots li.slick-active{border-color:rgba(255,255,255,.3);}
#visual .slick-dots li:after{content:''; display:block; width:10px; height:10px; border-radius:50%; background:var(--white); position: absolute; left:50%; top:50%; margin-left: -5px; margin-top: -5px; opacity: 0.3; transition:all .3s linear;}
#visual .slick-dots li.slick-active:after{opacity: 1;}
#visual .slick-dots li button{border:0; padding:0; font-size:0; outline:none; cursor:pointer;}


/* 효과 */
#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 h3 {transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_txt h2 {transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_txt p {transform:translateY(0); opacity:1;}







#overview {height:888px; position:relative; z-index:10; overflow:hidden;}
/* #overview::after {content:''; width:100%; height:100%; position:absolute; top:0; left:0; background: linear-gradient(0, #000 -1.24%, rgba(0, 0, 0, 0.00) 101.69%); z-index:-2; opacity:0.1;} */
#overview .basic_in {height:100%; display:flex; flex-wrap:Wrap; align-items:center;}
#overview .tBox {}
#overview .tBox .logo {margin:0 0 30px;}
#overview .tBox .fs55 {}
#overview .tBox .box_in {margin:30px 0 0; padding:30px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.20); max-width:610px;}
#overview .tBox .box_in .fs20 {margin:0 0 30px;}
#overview .tBox .box_in .fs20 b {display:block; color:var(--white); letter-spacing:inherit; line-height:inherit; margin:0 0 5px;}
#overview .tBox .box_in ul {}
#overview .tBox .box_in ul li {font-size: 0.888rem; line-height:175%; letter-spacing: -1.12px; color:rgba(255,255,255,0.8); display:flex; gap:0 10px;}
#overview .tBox .box_in ul li+li {margin:5px 0 0;}
#overview .tBox .box_in ul li b {width:70px; display:block; flex-shrink: 0; font-weight: 500; line-height:inherit; letter-spacing: -1.28px; font-size:inherit; color:var(--white);}
#overview .imgBox {position:relative; width:920px;  position:absolute; top:0; right:0; background:var(--blue_black); z-index:-3; height:100%; display:flex; flex-wrap:wrap; align-content:center; padding-right:7%; box-sizing:border-box;}
#overview .imgBox::after {content:''; width: 100%; aspect-ratio: 1207 / 892; background:url("/img/light.png")no-repeat center / 100% auto; position:absolute; top:50%; left:61%; transform:translate(-50%,-50%); mix-blend-mode: plus-lighter;}
#overview .imgBox img {mix-blend-mode: screen; opacity: 0.4; display:block; margin:0 0 0 auto; max-width:100%;}



#notice {}
#notice .notice_list {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap:30px;}
#notice .notice_list dl {height:386px; display:flex; flex-wrap:wrap; align-content:center;}
#notice .notice_list dl a {display:block; border:1px solid rgba(255,255,255,0.15); box-sizing:Border-box; border-radius:var(--borderR20); width:100%; background: rgba(255, 255, 255, 0.03); padding:40px; box-sizing:border-box; transition:all 0.3s linear;}
#notice .notice_list dl dt {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
#notice .notice_list dl dt .ico {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; aspect-ratio: 3 / 3; width:70px; border-radius: var(--borderR10); border: 1px solid rgba(255,255,255,0.1); }
#notice .notice_list dl dt .ico * {transition:all 0.3s linear;}
#notice .notice_list dl dt .sm-tit {margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:0 5px;}
#notice .notice_list dl dt .sm-tit::before {content:''; width:8px; aspect-ratio: 1/1; background:var(--main_dark); position:relative; border-radius:100%; display:block; transition:all 0.3s linear; }
#notice .notice_list dl:nth-of-type(2n) dt .sm-tit::before {background:var(--sub);}
#notice .notice_list dl dd {padding:20px 0 0;}
#notice .notice_list dl dd h4 {color: var(--white); font-size: 1.333rem; font-weight: 500; line-height:141.667%; letter-spacing: -1.2px;}
#notice .notice_list dl dd .stxt {font-size:0; line-height:175%; letter-spacing: -1.12px; margin:10px 0 0; transition:all 0.3s linear; opacity:0; transition:all 0.3s linear;}
#notice .notice_list dl dd span {display:flex; flex-wrap:wrap; align-items:center; gap:10px; color: var(--white); font-family: var(--eng); font-size: 14px; font-weight: 700; line-height:185.714%; padding-top:20px; border-top:1px solid rgba(255,255,255,0.1); margin:70px 0 0;}
#notice .notice_list dl dd span::after {content:'\e941'; font-size:26px; font-family:var(--icon); display:block; line-height:1; font-weight:300;}


#notice .notice_list dl a:hover {background:var(--main_dark); border-color:var(--main_dark); transition:all 0.3s linear;}
#notice .notice_list dl a:hover dt .ico * {stroke:var(--white); transition:all 0.3s linear; }
#notice .notice_list dl a:hover dt .sm-tit::before {background:var(--white); transition:all 0.3s linear; }
#notice .notice_list dl:nth-of-type(2n) a:hover {background:var(--sub); border-color:var(--sub); transition:all 0.3s linear; }
#notice .notice_list dl a:hover dd .stxt {font-size:0.888rem; opacity:1; transition:font-size 0.2s linear, opacity 0.3s linear  0.18s;}





.media_Allwrap {position:relative;}
.media_wrap {position:absolute; width:100%; z-index:-1;}
.media_wrap.on {position:relative; width:100%;  z-index:1;}
.media_list {width:100%;}
.media_list .slick-list {margin-left:-30px;  padding-bottom:5px !important;}
.media_list dl {margin-left:30px; padding:10px; box-sizing:border-box; border:1px solid rgba(255,255,255,0.15); box-sizing:Border-box; border-radius:var(--borderR20); width:100%; background: rgba(255, 255, 255, 0.03); transition:all 0.3s linear; }
.media_list dl dt {overflow: hidden; aspect-ratio: 355 / 240; border-radius:var(--borderR10); position:relative;}
.media_list dl dt .cate {padding:0 20px; display:block; line-height:30px; background:var(--main_dark); font-family:var(--eng); color:var(--white); font-size: 14px; font-weight: 600; text-transform: uppercase; position:absolute; top:0; right:0; z-index:10; font-style:normal; border-radius: 0px 0px 0px var(--borderR10);}
.media_list dl dt img {display: block; width: 100%; height: 100%; object-fit: cover; transition:all 0.3s linear; }
.media_list dl dd {padding:30px 20px; box-sizing:border-box;}
.media_list dl dd .fs20 {color: var(--white); font-size: 1.111rem; font-weight: 500; line-height:140%; letter-spacing: -1.4px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; word-wrap:break-word; overflow:hidden; height: 3.2rem; transition:all 0.3s linear; }
.media_list dl dd .stxt {font-size: 0.888rem; font-weight: 400; line-height:175%; letter-spacing: -1.12px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap:break-word; overflow:hidden; height: 3.2rem; margin:5px 0 0; transition:all 0.3s linear; }
.media_list dl dd .date {display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-family: var(--eng); font-size: 0.888rem; font-weight: 400; line-height:162.5%; color:rgba(255,255,255,0.4); margin:20px 0 0; transition:all 0.3s linear; }
.media_list dl dd .date::before {content:'\ebcc'; font-size:18px; font-family:var(--icon); display:block; line-height:1; color:rgba(255,255,255,0.5); transition:all 0.3s linear; }

.media_list dl:hover {border-color:var(--white); background:var(--white); transition:all 0.3s linear; }
.media_list dl:hover dt img {transform:scale(1.25); transition:all 0.3s linear; }
.media_list dl:hover dd .fs20 {color:var(--black); transition:all 0.3s linear; }
.media_list dl:hover dd .stxt {color:var(--basic); transition:all 0.3s linear; }
.media_list dl:hover dd .date {color:var(--basic); transition:all 0.3s linear; }
.media_list dl:hover dd .date::before {color:var(--basic); transition:all 0.3s linear; }

.media_Allwrap .slide_bar {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin:50px 0 0;}
.media_Allwrap .slide_bar .moreBtn {margin:0;}
.media_Allwrap .slide_bar_in {display:flex; flex-wrap:wrap; align-items:center; width:calc(100% - 210px);  justify-content:space-between;}
.media_Allwrap .slide_bar_in .progressbar {width:calc(100% - 100px); height: 3px; background: rgba(255,255,255,0.2); position: relative; border-radius: 2px; overflow: hidden;}
.media_Allwrap .slide_bar_in .progressbar span {display: block; height: 100%; width: 0%; background: var(--white); transition: width 0.4s ease;}
.media_Allwrap .slide_bar_in .bar_arr {display:flex; flex-wrap:wrap; gap:0 10px;}




#partners {margin-top:140px;}









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



#overview .imgBox::after {width:100%;}
#overview .imgBox img {max-width:100%;}


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

#notice .notice_list {grid-gap:20px;}
#notice .notice_list dl a {padding:20px;}
#notice .notice_list dl dd h4 {font-size:1.111rem;}



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

.fs55 {font-size:2.444rem;}
.slick-arrow::before {font-size:30px;}

#visual .visual_in .roll .v_txt br {display:none;}
#visual .visual_in .roll .v_txt h2 {font-size:3rem; letter-spacing: -4px;}



#overview .tBox .logo svg {width:200px; height:auto;}
#overview .imgBox {width:520px;}


#notice .notice_list {grid-template-columns: repeat(2, 1fr);}
#notice .notice_list dl {height:auto;}
#notice .notice_list dl a {height:100%;}
#notice .notice_list dl br {display:none;}
#notice .notice_list dl dd .stxt {font-size:0.888rem; opacity:1;}


.media_list .slick-list {margin-left:-15px;}
.media_list dl {margin-left:15px;}

.media_Allwrap .slide_bar_in {width:calc(100% - 195px);}
.media_Allwrap .slide_bar_in .progressbar {width:calc(100% - 90px);}


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

.tit-box {margin:0 0 30px;}
.tit-box br {display:none;}
.fs55 {font-size:1.888rem;}



.slick-arrow::before {font-size:22px;}

#visual .visual_in .roll .v_txt {top:28%; text-align:center;}
#visual .visual_in .roll .v_txt h3 {font-size:1.222rem; letter-spacing:-1px;}
#visual .visual_in .roll .v_txt h2 {font-size:2.22rem; letter-spacing: -2px; margin:10px 0 0;}
#visual .visual_in .roll .v_txt p {letter-spacing:-0.7px; margin:15px 0 0;}
#visual .v_info {justify-content:center; margin:28px 0 0;}
#visual .v_info .v_arr {gap:0 5px;}

#visual .scroll_down {bottom:8%;}
#visual .scroll_down svg {width:15px; height:auto;}
#visual .scroll_down span:before {font-size:18px;}


#overview {height:auto; padding:100px 0; }
#overview .basic_in {width:100%;}
#overview .tBox {width:90%; margin:0 auto;}
#overview .tBox .logo {margin:0 0 15px;}
#overview .tBox .logo svg {width:120px; height:auto;}
#overview .tBox .box_in .fs20 {margin:0 0 15px;}
#overview .tBox .box_in {margin:20px 0 0; padding:20px 0 0;}
#overview .tBox .box_in ul br {display:none;}
#overview .tBox .box_in ul li {gap:0;}
#overview .imgBox {position:relative; padding-right:5%; width:100%;}
#overview .imgBox::after {left:68%;}



#notice .notice_list {grid-template-columns: repeat(1, 1fr); grid-gap:10px;}
#notice .notice_list dl dd span, #notice .notice_list dl dt .sm-tit {display:none;}
#notice .notice_list dl a {display:flex; flex-wrap:wrap; align-items:center; gap:0 20px; border-radius:var(--borderR10); padding:15px;}
#notice .notice_list dl dt .ico {width:54px;}
#notice .notice_list dl dt .ico svg {width:26px; height:auto;}
#notice .notice_list dl dd {padding:0; flex:1;}
#notice .notice_list dl dd .stxt {margin:3px 0 0;}

#media {overflow:hidden; width:100%;}
#media .tit-box {width:90%; margin-left:auto; margin-right:auto;}
.media_list {width:90%; margin:0 auto;}
.media_list .slick-list {width:85%; overflow:visible;}
.media_list dl {padding:5px; border-radius:var(--borderR10);}
.media_list dl dt {border-radius:var(--borderR5);}
.media_list dl dt .cate {padding:0 13px; font-size:12px; line-height:25px;  border-radius:0 0 0 var(--borderR5);}
.media_list dl dd {padding:15px 10px;}
.media_list dl dd .date {margin:10px 0 0;}
.media_list dl dd .date::before {font-size:16px;}

.media_Allwrap .slide_bar {position:relative; width:90%; margin:30px auto 0;}
.media_Allwrap .slide_bar_in {width:100%;}
.media_Allwrap .slide_bar_in .progressbar {width:100%;}
.media_Allwrap .slide_bar .moreBtn {margin:30px auto 0;}
.media_Allwrap .slide_bar_in .bar_arr .slick-arrow {position:absolute; bottom:14px;}
.media_Allwrap .slide_bar_in .bar_arr .slick-prev {left:0;}
.media_Allwrap .slide_bar_in .bar_arr .slick-next {right:0;}

#partners {margin-top:100px;}


}