@import url("common.css");


/*** css 공통 ***/
.tit-box {text-align:center; margin:0 0 40px;}
.tit-box .fs16 {margin:10px 0 0;}

/* 화살표 */
.slick-arrow {border:0; padding:0; font-size:0; outline:none; cursor:pointer; position: relative; z-index: 9999; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width:20px; aspect-ratio: 3 / 3; transition:var(--trans);}
.slick-prev {background:url("/img/btn-arr-prev.svg")no-repeat center;}
.slick-next {background:url("/img/btn-arr-next.svg")no-repeat center;}





/*** Visual ***/
#visual {width:100%; height: var(--vh); overflow: hidden; background:#000; position: relative;}
#visual .v_page {display:flex; flex-wrap:wrap; align-items:center; position:absolute; bottom:68px; left:50%; transform:translateX(-50%); z-index:99; gap:0 20px;}
#visual .v_page li {color: var(--white); font-family: var(--eng); font-size: 14px; font-weight: 600; line-height: 1;}
#visual .v_page li.tot {opacity: 0.6;}
#visual .v_page li.gauge {width:360px; height:3px; position:relative; z-index:10;}
#visual .v_page li.gauge::after {content:''; width:100%; height:1px; background:rgba(255,255,255,0.7); position:absolute; top:1px; left:0; }
#visual .v_page li.gauge .bar {display:block; height:100%; background:var(--white); }

#visual .visual_in{width: 100%; height: 100%; position: relative;}
#visual .visual_in .roll{width: 100%; height: var(--vh);}
#visual .visual_in .roll .v_txt{position: absolute; left: 50%; top:50%; transform:translate(-50%,-50%); z-index: 9999;}
#visual .visual_in .roll .v_txt .fs24 {display:block; font-family:var(--eng); color:var(--white); transition:all .6s 0.3s ease; transform:translateY(60px); opacity:0; margin:0 0 20px;}
#visual .visual_in .roll .v_txt .fs70 {color:rgba(255,255,255,0.5); transition:all .6s 0.5s ease; transform:translateY(60px); opacity:0;}
#visual .visual_in .roll .v_txt .fs70 b {color:var(--white); line-height:inherit; letter-spacing:inherit;}
#visual .visual_in .roll .v_txt .fs18 {color:var(--white); transition:all .6s 0.7s ease; transform:translateY(60px); opacity:0; margin:20px 0 0;}

#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;}
#visual .visual_in .roll .v_bg .bg.mo {display:none;}
#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 .slick-arrow {width:80px; aspect-ratio: 3 / 3;}


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


/* 화살표 */
#visual .slick-arrow {position:absolute; bottom:40px; z-index:888; border-radius:100%; backdrop-filter: blur(10px);}
#visual .slick-prev {left:calc((100% - 1560px) / 2); background:rgba(255,255,255,0.1) url("/img/v_arr_left.svg")no-repeat center;}
#visual .slick-next {right:calc((100% - 1560px) / 2); background:rgba(255,255,255,0.1) url("/img/v_arr_right.svg")no-repeat center;}
#visual .slick-arrow:hover {background-color:var(--main);}


/* 도트 */
#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 .fs24 {transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_txt .fs70 {transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_txt .fs18 {transform:translateY(0); opacity:1;}

.about-section {position: relative; background:#fff; width:100%; max-width:100%;}
.about-inner {display: flex; gap: 0 100px; height:var(--vh); width:90%; max-width:1560px; margin:0 auto;}
.left-stack {position: relative; width: 48%; max-width:720px; height:var(--vh); display: flex; justify-content: center;  align-items: center; overflow: hidden;}
.stack-img {height:var(--vh); position: absolute; top: 0; left: 0; width: 100%; display: flex; justify-content: center; align-items: center; }
.stack-img .stack-img-in {position:relative; border-radius: 20px;  overflow:hidden;}
.stack-img img {width: 100%;  height: auto;  object-fit: contain; }
.stack-img img.mo {display:none;}
.stack-img .cover {position:absolute; top:0; left:0; background: linear-gradient(180deg, rgba(71, 66, 151, 0.00) 50%, rgba(0, 0, 0, 0.70) 100%); width:100%; height:100%; text-align:center; display: flex; flex-wrap:Wrap; align-content: flex-end;  padding:0 20px 60px; box-sizing:border-box;}
.stack-img .cover .fs60 {width:100%; color:var(--white); letter-spacing:0; word-break: break-word;}
.stack-img .cover .fs60 b {color:Var(--main);}
.stack-img .cover .fs20 {width:100%; font-weight: 600; color:rgba(255,255,255,0.7); margin:5px 0 0;}
.right-text {flex:1; }
.right-text > div {position: sticky; top: 0;  height:var(--vh); display:flex; flex-wrap:wrap; align-content:center; align-self: flex-start; }
.right-text .fs22 {margin:15px 0 10px;}
.right-text .fs16+.fs16 {margin:30px 0 0;}
.right-text .moreBtn {margin-top:80px;}




#studio {overflow:hidden; outline:none !important;}
#studio .flickity-button  {display:none !important;}
#studio * {outline:none !important;}
#studio .tit-wrap {margin-bottom:150px;}
#studio .tit-wrap-in {position:relative; max-width:1170px; margin:0 auto; z-index:10;}
#studio .tit-wrap-in .fs160 {color: var(--black); font-family: var(--eng); font-size: 160px; font-weight: 400; line-height:90%; display:block; transition:var(--trans);}
#studio .tit-wrap-in .fs160:last-of-type {text-align:right; position:relative; z-index:10;}
#studio .tit-wrap-in .studio-btn {position:absolute; bottom:80px; right:-96px;}
#studio .tit-wrap-in .studio-btn .text_svg {position:absolute; top:0; left:0; transform:rotate(0); animation: logoMove 10s linear infinite; transform-origin: center; display:block; line-height:1;}
.studio_roll {transform: rotate(-9deg);}
.studio_roll dl {width:500px; margin:0 45px;}
.studio_roll dl dt {position:relative;  border-radius:var(--borderR20); overflow:hidden; }
.studio_roll dl dt .imgBox {display:block; }
.studio_roll dl dt .imgBox img {display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 500 / 715; transition:var(--trans);}
.studio_roll dl dt .cover {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.75); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; text-align:center; padding:0 50px; box-sizing:border-box; opacity:0; visibility:hidden; transition:var(--trans);}
.studio_roll dl dt .cover .fs50 {color:var(--white); transform: scaleY(-1); transition:var(--trans);}
.studio_roll dl dd {padding:12px 20px 0; box-sizing:border-box; display:flex; align-items:flex-start; opacity:0; visibility:hidden; transition:var(--trans);}
.studio_roll dl dd span.year {display:flex; flex-wrap:wrap; align-items:center; flex-shrink: 0; color:var(--black); transition:var(--trans);}
.studio_roll dl dd span.year::after {content:''; width:1px; height:8px; background:var(--border); position:relative; margin:0 10px;}
.studio_roll dl dd span.subject {flex:1; transition:var(--trans);}

.studio_roll dl:hover dt .imgBox img {transform:scale(1.15); transition:var(--trans);}
.studio_roll dl:hover dt .cover {opacity:1; visibility:visible; transition:var(--trans);}
.studio_roll dl:hover dt .cover .fs50 {transform: scaleY(1); transition:var(--trans);}
.studio_roll dl:hover dd {opacity:1; visibility:visible; transition:var(--trans);}

@keyframes logoMove {
0% {transform: rotate(0);}
100% {transform: rotate(360deg);}
}


.index-wrap {background:Var(--white); position:relative; z-index:990; transition:var(--trans);}
body {transition:var(--trans);}
body.darkmode {background:var(--black); transition:var(--trans);}
.darkmode #studio .tit-wrap-in .fs160 {color: var(--white); transition:var(--trans);}
.darkmode .studio_roll dl dd span.year {color: var(--white); transition:var(--trans);}
.darkmode .studio_roll dl dd span.subject {color: rgba(255,255,255,0.7); transition:var(--trans);}
.tit-box * {transition:var(--trans);}
.darkmode .tit-box * {color:var(--white); transition:var(--trans);}
body.darkmode .index-wrap {background:Var(--black); transition:var(--trans);}



/* STORY */
#story {overflow:hidden; }
#story .slick-dots {display: none !important;}

.story_roll {}
.story_roll .slick-list {margin-left:-30px;}
.story_roll dl {margin-left:30px; border-radius:var(--borderR20); position:relative; z-index:10;}
.story_roll dl::after {content:''; width:100%; height:100%; border:1px solid var(--border); box-sizing:border-box; border-radius:inherit; position:absolute; top:0; left:0; z-index:-1; transition:var(--trans);}
.story_roll dl dt {border-radius:var(--borderR20) var(--borderR20) 0 0; overflow:hidden;}
.story_roll dl dt img {display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 500 / 333; transition:var(--trans);}
.story_roll dl dd {padding:40px; box-sizing:border-box;}
.story_roll dl dd .cateBox {padding:3px 15px; display:inline-flex; color: var(--main); font-family: var(--eng); font-size: 0.875rem; font-weight: 600; line-height:171.429%; background:rgba(71,66,151,0.1); border-radius:var(--borderR5); margin-bottom:10px;}
.story_roll dl dd .fs16 {text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap:break-word; overflow:hidden; height: 3.2rem; margin:8px 0 30px;}
.story_roll dl dd .date {display:flex; flex-wrap:wrap; align-items:center; gap:0 6px; font-weight: 600;}
.story_roll dl dd .date::before {content:'\e8b5'; font-family:var(--icon); line-height:1; font-size:20px; font-weight:500;}

.slider_info_cont {margin:38px 0 0; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;}
.slider_info_cont .arr_cont {display:flex; flex-wrap:wrap; gap:0 25px;}
.slider_info_cont .arr_cont .slick-arr-wrap {display:flex; flex-wrap:wrap; align-items:center; gap:0 15px;}
.slider_info_cont .arr_cont .slick-arr-wrap a:hover {transition:var(--trans); opacity:0.5;}
.slider_info_cont .arr_cont a.read-btn {display:flex; flex-wrap:wrap; align-items:center; gap:0 5px; font-weight: 600; line-height:162.5%; color:var(--black); font-family:var(--eng); transition:var(--trans);}
.slider_info_cont .arr_cont a.read-btn i {display:block; width: 22px; aspect-ratio: 1/1; border-radius: 7px; background: var(--black) url("/img/read-arr.svg")no-repeat center; transition:var(--trans);}

.slider_info_cont .arr_cont a.read-btn:hover {color:var(--main); transition:var(--trans);}
.slider_info_cont .arr_cont a.read-btn:hover i {background-color:var(--main); transition:var(--trans);}

.progress {position:relative; width:calc(100% - 240px); height:3px; border:0; box-sizing:border-box; overflow: hidden;}
.progress::before {content:''; width:100%; height:1px; background-color: rgba(78,84,95,0.1); position:absolute; left:0; bottom:1px; }
.progress .progressbar{width:20%; height:3px; background:var(--main); display:block; transition: all .4s ease;  position:relative; z-index:10;}
.sr-only {position: absolute;  width: 1px;  height: 1px;  padding: 0;  margin: -1px;  overflow: hidden;  clip: rect(0,0,0,0);  border: 0;}


.story_roll dl:hover::after {border:1px solid var(--main); transition:var(--trans);}
.story_roll dl:hover dt img {transform:scale(1.15); transition:var(--trans);}
.story_roll dl:hover dd .fs22 {color:var(--main); transition:var(--trans);}
/* STORY */




#partners {overflow: hidden; position: relative; margin:0 0 20px;}

#partners .basic_in {overflow: hidden; position: relative;}
#partners .basic_in::before, #partners .basic_in::after {content:''; width:100px; height:100%; background: linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, var(--white) 100%); position:absolute; top:0; z-index:10;}
#partners .basic_in::before {left:0;}
#partners .basic_in::after {right:0; transform: scaleX(-1);}

#partners .rolling {display: flex; flex-wrap: nowrap; white-space: nowrap; animation: roll linear infinite;}
#partners .rolling li {flex: 0 0 auto; padding: 0 15px; width:235px;}
#partners .rolling img {display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 235 / 120;}

#partners .rolling:hover {animation-play-state: paused;}



@keyframes roll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}



/* .stack-img {
  margin-bottom: 50vh; 원하는 만큼 아래 여백
}
 */







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

#visual .slick-prev {left:5%;}
#visual .slick-next {right:5%;}

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

.about-inner {gap:0 50px;}

#studio .tit-wrap-in {max-width:720px;}
#studio .tit-wrap-in .fs160 {font-size:100px;}
#studio .tit-wrap-in .studio-btn {bottom:35px;}


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


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


#visual .slick-arrow {width:60px; background-size:20px auto;}
#visual .v_page li.gauge {width:250px;}


.pin-spacer {
  padding: 0 !important;
}

.about-inner {height:auto;  gap:0; flex-wrap:wrap; align-content:center; padding:180px 0 0;}
.about-inner .pin-spacer {width:100%;}
.left-stack {width:100%; max-width:100%; order:2;  aspect-ratio: 390 / 260; overflow:hidden; height:auto; margin:50px 0 0;}
.stack-img {height:100%; overflow:hidden; border-radius:var(--borderR20); width:100%;}
.stack-img .stack-img-in {height:100%; width:100%;}
.left-stack img {width:100%; }
.stack-img img.pc {display:none;}
.stack-img img.mo {display:block;}
.stack-img .cover {padding:20px; align-content:center; background:linear-gradient(180deg, rgba(71, 66, 151, 0.00)20%, rgba(0, 0, 0, 0.70) 100%);}
.right-text {flex:none; position:relative; display:block; width:100%; height:auto; order:1;}
.right-text > div {height:auto; display:block; width:100%;}
.right-text br {display:none;}
.right-text svg {width:300px; height:auto;}
.right-text .fs16+.fs16 {margin:15px 0 0;}
.right-text .moreBtn {margin-top:40px;}

#studio .tit-wrap-in {max-width:100%;}
#studio .tit-wrap-in .fs160 {font-size:80px; position:relative; z-index:10;}
#studio .tit-wrap-in .fs160:first-of-type {display:inline-block;}
#studio .tit-wrap-in .studio-btn {bottom:auto; top:-45px; width:100px; right:auto; left:415px;}
#studio .tit-wrap-in .studio-btn svg {width:100%; height:auto;}


.studio_roll dl {width:400px; margin:0 30px;}
.studio_roll dl dt .cover {padding:0 30px;}





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

.tit-box {margin:0 0 25px;}
.tit-box .fs16 {margin:8px 0 0;}

#visual .visual_in .roll .v_txt .fs24 {margin:0 0 15px;}
#visual .visual_in .roll .v_txt .fs18 {margin:15px 0 0;}

#visual .slick-arrow {width:40px; background-size:12px auto; bottom:20px;}

#visual .v_page {bottom:32px;}
#visual .v_page li {font-size:12px;}
#visual .v_page li.gauge {width:100px;}
#visual .visual_in .roll .v_bg .bg.pc {display:none;}
#visual .visual_in .roll .v_bg .bg.mo {display:block;}

.about-inner {padding:80px 0 0;}
.stack-img .cover {padding:20px 20px;}
.stack-img .cover .fs60 {font-size:2rem;}

#studio .tit-wrap {margin-bottom:60px;}
.studio_roll dl {width:300px; margin:0 15px;}
.studio_roll dl dt .cover {padding:0 25px;}
#studio .tit-wrap-in {max-width:300px;}
#studio .tit-wrap-in .fs160 {font-size:40px; position:relative; z-index:10;}
#studio .tit-wrap-in .fs160:first-of-type {display:inline-block;}
#studio .tit-wrap-in .studio-btn {bottom:auto; top:-37px; width:60px; right:auto; left:200px;}



.story_roll dl dd {padding:25px;}
.story_roll dl dd .cateBox {padding:3px 9px;}
.story_roll dl dd .fs16 {margin:8px 0 20px;}
.story_roll dl dd .date::before {font-size:16px;}
.progress {width:calc(100% - 182px);}
.slider_info_cont {margin:20px 0 0;}
.slider_info_cont .arr_cont {gap:0 10px;}
.slider_info_cont .arr_cont .slick-arr-wrap {gap:0 5px;}


#partners .rolling li {width:130px; padding:0 5px;}



}