@charset "utf-8";
/* ===================================================== */
/* MAIN-COMMON */
.body-main main {overflow: hidden; }
.body-main #skip-nav::before {content: ''; position: fixed; inset: 0; pointer-events: none; background-color: #000; z-index: 9999; animation: fade-out .8s ease-in .2s both;}
.section {background: transparent no-repeat center/cover;}


.sec-header {position: relative; display: flex; align-items: center; margin-bottom:6rem;}
.sec-header::after {content:''; display: block; width:100%; height:1px; background-color:#d6d6d6; position: absolute; top:50%; left:0; z-index: -1;}
.sec-tit { font-weight: 800; font-size: 5.6rem; color:#000; background-color: #fff;padding-right:3rem;}

.sec-desc {font-size: 1.8rem;  color:#000; line-height: 1.1; margin-top:1.5rem;}






@media (hover: hover) and (pointer: fine) {
}
@media (max-width: 1280px){

}
@media (max-width: 1024px){
	.sec-header {margin-bottom:4rem;}
	.sec-tit {font-size: 4.8rem; padding-right:2rem;}
}
@media (max-width: 960px){

}

@media (max-width: 768px){

}
@media (max-width: 576px){
}
@media (max-width: 480px){
	.sec-header {flex-direction: column;}
	.sec-header::after {display: none;}
	.sec-tit {font-size: 4rem; padding-right:0rem;}
}
/* MAIN-COMMON */
/* ===================================================== */

/*Button*/
.m_rbtn {display: inline-flex; min-width:18rem; height:6rem; position: relative; font-size:2rem; transition:all 0.3s ease-in-out; color:#000; font-weight: 700; align-items: center; justify-content: center; padding:0 3rem; border:2px solid #000; border-radius: 3rem; text-align: center;  background-color: #fff;}
.m_rbtn span {display: block; padding:0;line-height:1; position: relative; white-space: nowrap;}
.m_rbtn.icon span {padding:0 0 0 3.2rem;}
.m_rbtn.icon.type1 span {padding:0 3.2rem 0 0;}
.m_rbtn.icon span::after{content:''; display: block; width:3rem; height:3rem; transition:all 0.3s ease-in-out; position: absolute; background-position: 50% 50%; background-repeat: no-repeat; background-size:contain; top:50%; left:0; transform: translate(0, -50%); transition: all 0.3s ease-in-out;}

.m_rbtn.icon span.book::after {background-image: url('../images/main/ico_book.png');}

.m_rbtn.icon.type1 span.plus::before,
.m_rbtn.icon.type1 span.plus::after {content:''; display: block; width:1.8rem; height:4px; border-radius: 2px; background-color: #222; position: absolute; top:50%; left:auto; right:0; transform: translate(0%, -50%); transition: all 0.3s ease-in-out;}
.m_rbtn.icon.type1 span.plus::after {transform: translate(0%, -50%) rotate(90deg);}



.m_rbtn:hover {background-color: var(--color-main); color:#fff; border-color:var(--color-main)}


.m_rbtn.icon.type1:hover span.plus::before {transform: translate(0%, -50%) rotate(360deg); background-color: #fff;}
.m_rbtn.icon.type1:hover span.plus::after {transform: translate(0%, -50%) rotate(450deg); background-color: #fff;}




@media (max-width: 1024px) {
	.m_rbtn {min-width:17rem;height: 5rem; padding:0 2rem;}
	.m_rbtn.icon.type1 span.plus::before,
	.m_rbtn.icon.type1 span.plus::after {height:3px;}
}

@media (max-width: 768px) {
}


@media (max-width: 576px) {
}
@media (max-width: 480px) {

}




.main__control {display: flex; gap: 1rem; align-items: center;}
.main__control .pagingNum {border:2px solid #d6d6d6; border-radius: 3rem; padding:0 2rem; height:6rem; min-width: 15rem; background-color: #fff; display: flex; align-items: center; justify-content: center; gap:0.5rem; font-size:2.4rem; font-weight: 100; color:#000;}
.main__control .pagingNum em {font-weight:700; color:var(--color-sub);}
.main__control .pagingNum i {font-weight:400; color:#666;}

.main__control .arrow-btn {width:6rem; height:6rem; cursor: pointer;}
.main__control .arrow-btn a {display: block; width:100%; height:100%; font-size:0; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; background-position: 50% 50%; border:2px solid #000; border-radius: 50%; position: relative; transition:all 0.3s ease-in-out; background-color: #fff;}

.main__control .arrow-btn a::before,
.main__control .arrow-btn a::after {content:''; display: block; width:1.8rem; height:0.4rem; border-radius: 2px; background-color: #000; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);transition:all 0.3s ease-in-out;}

.main__control .arrow-btn a::before {transform: translate(-40%, -175%) rotate(45deg);}
.main__control .arrow-btn a::after {transform: translate(-40%, 75%) rotate(-45deg);}
.main__control .arrow-btn.prev a {transform: rotate(180deg);}


.main__control .arrow-btn a:hover {background-color:var(--color-main); border-color:var(--color-main);}
.main__control .arrow-btn a:hover::before,
.main__control .arrow-btn a:hover::after {background-color: #fff;}

.main__control .arrow-btn a:hover::before {transform: translate(0%, -175%) rotate(45deg);}
.main__control .arrow-btn a:hover::after {transform: translate(0%, 75%) rotate(-45deg);}


/*More Button*/
.main__more-btn a {overflow: hidden; width:6rem; height:6rem; text-indent: -9999px; font-size:0; transition:all 0.3s ease-in-out; border-radius: 50%; border:2px solid var(--color-main); position: relative; background-color: var(--color-main);}
.main__more-btn a::before,
.main__more-btn a::after {content:''; display: block; width:1.8rem; height:0.4rem; border-radius: 2px; background-color: #fff; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
.main__more-btn a::after {transform: translate(-50%, -50%) rotate(90deg);}
.main__more-btn a:hover {background-color: #000; border-color: #000; transform: rotate(360deg);}


@media (max-width: 1280px) {

}
@media (max-width: 1024px) {
	.main__control .pagingNum {height:5rem;}
	.main__control .arrow-btn {width:5rem; height:5rem;}
	.main__more-btn a {width:5rem; height:5rem;}

	.main__control .arrow-btn a::before,
	.main__control .arrow-btn a::after {width:1.4rem;}
	.main__control .arrow-btn a::before {transform: translate(-50%, -150%) rotate(45deg);}
	.main__control .arrow-btn a::after {transform: translate(-50%, 50%) rotate(-45deg);}
	.main__control .arrow-btn a:hover::before {transform: translate(0%, -150%) rotate(45deg);}
	.main__control .arrow-btn a:hover::after {transform: translate(0%, 50%) rotate(-45deg);}
}

@media (max-width: 768px) {
}
@media (max-width: 576px) {
}
@media (max-width: 480px) {
}




/* ===================================================== */






/* ===================================================== */
/* MAIN-VISUAL */

.visual {position: relative; overflow: hidden;}
.main__visual {display: flex; padding-top:var(--header-height); --vborder-wd : 3.2rem; width: 100%;}
.main__visual-cols {position:relative;}
.main__visual-cols.nth-1 {width:60%;animation: fade-in 2s linear both;}
.main__visual-cols.nth-2 {width:40%; padding:10rem var(--outer-padding) 20rem 4rem;}
.main__visual-cols.nth-2::after {content:''; display: block; background:url('../images/main/visual_cmec.png') 100% 100% no-repeat; background-size: contain; position: absolute; left:-8%; bottom:0; width:108%;  height:100%; z-index: -1;animation: fade-in 2s linear 1s both; max-width: 85rem;}


.visual-slick,
.visual-slick .slick-list,
.visual-slick .slick-track {height:100%;}
.visual-slide { min-height: 80rem; height:100%; border-radius: 0 30rem 30rem 0; overflow: hidden; border:var(--vborder-wd) solid var(--color-main); border-left-width:0;position: relative;}
.visual-slide.vod {border-color:var(--color-main);}
.visual-slide.banner {border-color:var(--color-sub);}
.visual-slide.image {border-color:var(--color-main);}

.visual-slide-inner { display: block; height: 100%; background: #222 no-repeat center/cover; transform: scale(1.3); transition: 11s linear;}
.visual-slide.vod .visual-slide-inner,
.visual-slide.banner .visual-slide-inner {transform: scale(1);}

.visual-on .visual-slide-inner { transform: scale(1); }

.main__visual video {
	object-fit: cover;
	object-position: 50% 50%;
	width:100%;
	height:100%;
	min-height:100%;
}




.visual-cotrol{animation: fade-in 1s linear 1s both; width:100%; position: absolute; bottom:0rem; left:0; display: flex; align-items: center; padding:0px var(--inner-padding);  transition: all 0.3s ease-in-out;}

.visual-dot .slick-dots {display: flex; gap:1rem;}
.visual-dot button { font-size: 0; text-indent:-99999px; height:var(--vborder-wd); width:var(--vborder-wd); border-radius:50%; z-index: 2; background-color: var(--color-main); border:0.5rem solid #fff;}
.visual-dot .slick-active button {background-color: var(--color-sub);}





.visual-tit {font-size: 5.2rem; font-weight: 700; position: relative; display: inline-block; z-index: 1; color:#000; text-transform: uppercase; letter-spacing: -0.025em;}
.visual-desc {font-size:1.7rem; font-weight:400; margin-top:1rem;}
/*.visual-on .visual-tit {animation: fade-in 2.5s ease-out .6s both;}*/
.visual-on .visual-tit .char{
	--vdd: 1s; /* visual-desc 애니메이션 시간 */
	animation: fade-down .5s ease-out calc(.8s + (var(--vdd) / var(--char-total) * var(--char-index))) both; }
.visual-on .visual-desc .char {
	--vdd: 2s; /* visual-desc 애니메이션 시간 */
	animation: fade-in .5s ease-out calc(2s + (var(--vdd) / var(--char-total) * var(--char-index))) both;}

.visual-link {margin:8rem 0 0;}
.visual-link .list {display: inline-flex; gap:3rem; }
.visual-link .item {width:15rem; height:12rem;}
.visual-link .item > a {background-color: #dce0ee; display: flex;  flex-direction: column; align-items: center; justify-content: center; height:100%;width:100%; border-radius: 5rem; transition: all 0.3s ease-in-out;}

.visual-link .item .icon {margin-bottom:0.5rem; transition: all 0.3s ease-in-out;}
.visual-link .item .tit {font-size: 2rem; letter-spacing: -0.05em; color:#222; transition: all 0.3s ease-in-out;}

.visual-link .item > a:hover {background-color: var(--color-sub);}
.visual-link .item > a:hover .icon {animation: wobble 1.5s infinite linear;}
.visual-link .item > a:hover .tit {color:#fff;}


@media (hover: hover) and (pointer: fine) {
}


@media (max-width: 1600px) {
	.main__visual-cols.nth-2::after {left:-15%; width:115%;}
}

@media (max-width: 1440px) {
	.main__visual { --vborder-wd : 3rem;}
	.visual-slide {min-height: 75rem;border-radius:0 25rem 25rem 0;}
	.main__visual-cols.nth-2 {padding:5rem var(--outer-padding) 20rem 3rem;}
	.main__visual-cols.nth-2::after {left:-12%; width:112%;}

	.visual-link .list {display: flex; gap:0; justify-content: space-between;}
}

@media (max-width: 1280px) {
	.main__visual { --vborder-wd : 2.4rem;}
	.visual-slide {min-height: 70rem; border-radius:0 20rem 20rem 0;}
	.main__visual-cols.nth-2 {padding:5rem var(--outer-padding) 20rem;}
	.main__visual-cols.nth-2::after {left:-10%; width:110%;}

	.visual-tit {font-size: 4.8rem;}
	.visual-desc {font-size:1.6rem;}

	.visual-link {margin:4rem 0 0;}

	.visual-link .item {width:12rem; height:12rem;}
	.visual-link .item > a {border-radius: 4rem;}

	.visual-link .item .icon {max-width: 40%;}
	.visual-link .item .tit {font-size: 1.8rem;}

}

@media (max-width: 1024px) {
	.main__visual { --vborder-wd : 2rem;}
	.visual-slide {min-height: 60rem; border-radius:0 18rem 18rem 0;}
	.main__visual-cols.nth-2 {padding:3rem var(--outer-padding) 20rem;}

	.visual-tit {font-size: 4.6rem;}


	.visual-link .item {width:11rem; height:10rem;}
	.visual-link .item > a {border-radius: 3.5rem;}

	.visual-link .item .icon {max-width: 35%;}
}

@media (max-width: 960px) {
	.main__visual { --vborder-wd : 2rem; flex-direction: column;}
	.main__visual-cols.nth-1 {width:100%; padding-right:var(--inner-padding);}

	.main__visual-cols.nth-2 {width:100%; padding:3rem var(--outer-padding) 20rem;}
	.main__visual-cols.nth-2::after {left:var(--inner-padding); width:calc(100% - var(--inner-padding) * 2); max-width: none; height:16rem; background-position: 50% 100%;}

	.visual-slide {min-height:auto; height:50rem; border-radius:0 10rem 10rem 0;}

	.visual-cotrol{justify-content: center;}

	.visual-txt {text-align: center;}

	.visual-link {margin:3rem 0 0;}
	.visual-link .list { justify-content: center; gap:1.5rem;}
}

@media (max-width: 480px) {
	.visual-slide {height:40rem;}
	.main__visual-cols.nth-2 { padding:3rem var(--outer-padding) 18rem;}
	.visual-slide {min-height:auto; height:50rem; border-radius:0 10rem 10rem 0;}
	.visual-link .list { justify-content: space-around; gap:1.5rem;}
}

/* MAIN-VISUAL */
/* ===================================================== */





/* ===================================================== */
/*Main 상단배너 샘플*/
.main__banner-sample-1 {height:100%; background: url('../images/main/main_visual03.jpg') no-repeat 0 50%; padding-left:40%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background-size: cover;}

.main__banner-sample-1 .top-txt{font-size:2.4rem; color:#fff; font-weight: 700; height: 5rem; background-color: #da673a; border-radius: 2.5rem; padding:0.5rem 2rem; display: inline-block; width: 16rem; text-align: center; margin-bottom:2rem;}
.main__banner-sample-1 .title{ font-size:5.2rem; color:#000; font-weight: 700; margin-bottom:2rem;}
.main__banner-sample-1 .title em {font-weight:300;}

.main__banner-sample-1 .txt{font-size:3.2rem; color:#222; font-weight: 400; margin-bottom:2rem;}

.main__banner-sample-1 .link {display: inline-flex; border:2px solid #222; height:5rem; align-items: center; padding:0 6rem 0 4rem; border-radius:2.5rem; position: relative; transition: all 0.3s ease-in-out;}
.main__banner-sample-1 .link::before,
.main__banner-sample-1 .link::after {content:''; display: block; width:16px; height:2px; background-color: var(--color-main); position: absolute; right:2rem; top:50%; transform:translate(0, -50%); transition: all 0.3s ease-in-out;}
.main__banner-sample-1 .link::after { transform:translate(0, -50%) rotate(90deg);}
.main__banner-sample-1 .link span {color:#000; font-weight: 700; font-size:1.8rem; transition: all 0.3s ease-in-out;}

.main__banner-sample-1 .link:hover {background-color: var(--color-main); border-color:var(--color-main);}
.main__banner-sample-1 .link:hover::before,
.main__banner-sample-1 .link:hover::after {background-color: #fff;}
.main__banner-sample-1 .link:hover::before {transform:translate(0, -50%) rotate(360deg);}
.main__banner-sample-1 .link:hover::after {transform:translate(0, -50%) rotate(450deg);}
.main__banner-sample-1 .link:hover span {color:#fff;}
/* ===================================================== */






/* ===================================================== */
/* SECTION 2 Program */

.main__program {padding:13rem 0;}
.main__program-list {position: relative; padding-top:4rem;}
.main__program-list::before {content:''; display: block; width:200%; height:4rem; background-color:rgba(29, 84, 143, 0.2); position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index: -1;  box-shadow: 0 0 0rem var(--color-black-a2);}

.main__program-list .slick-list {overflow: visible;height:100%;}
.main__program-list .item {width:44rem; padding:0 4rem;height:100%;}
.main__program-list .list {margin-left:-4rem;}

.main__program-list .list a {display: block; height:100%; position: relative; padding:0 3rem; transition: all 0.3s ease-in-out;}
.main__program-list .list a::before {content:''; display: block; width:100%; height:calc(100% - 6rem); background-color:#fff; border:1px solid #d6d6d6; border-radius: 3rem; position: absolute; top:2rem; left:0; z-index: -1; transition: all 0.3s ease-in-out;}

.main__program-list .list .thumb {overflow: hidden; position: relative; transition: all 0.3s ease-in-out; margin-bottom:4rem; background-color: #fff;}
.main__program-list .list .thumb span{display: block; background:50% 50% no-repeat; background-size: cover; transform: scale(1); transition: all 0.3s ease-in-out; mix-blend-mode: luminosity; opacity: 0.7;}

.main__program-list .list .subject {font-size:2.4rem; font-weight: 700; color:#222; line-height: 1.3;  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; -webkit-line-clamp: 2; transition: all 0.3s ease-in-out; text-underline-offset: 0.15em; min-height:6rem;}


.main__program-list .list .desc {border-top:1px solid rgba(214, 214, 214, 1); margin-top:2rem; padding:2rem 0 3rem 4rem; transition: all 0.3s ease-in-out;}
.main__program-list .list .date {font-size:1.8rem; font-weight: 700; color:#000000; margin-bottom:1rem; position: relative;transition: all 0.3s ease-in-out;}
.main__program-list .list .date::before {content:''; display: block; width:3rem; height:3rem; border-radius: 50%; background:#333333 url('../images/main/ico_calendar.png') 50% 50% no-repeat; background-size: contain; position: absolute; top:50%; left:-4rem; transform: translate(0, -50%);transition: all 0.3s ease-in-out;}
.main__program-list .list .txt {font-size:1.8rem; color:var(--color-sub3);transition: all 0.3s ease-in-out;}
.main__program-list .list .state {margin:0 auto; width:8rem; height:8rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color:var(--color-sub2); color:#fff; font-size:1.6rem; font-weight: 700;transition: all 0.3s ease-in-out;}
.main__program-list .list .state.nth-1 {background-color: var(--color-sub);}
.main__program-list .list .state.nth-2 {background-color: #999999;}




.main__program-list .list a:hover {transform: translate(0, -4rem);}
.main__program-list .list a:hover::before{box-shadow: 0 0 3rem var(--color-black-a2); background-color: #000000; border-color:#000;}
.main__program-list .list a:hover .thumb span {transform: scale(1.1);mix-blend-mode: normal; opacity: 1;}
.main__program-list .list a:hover .subject {color:#fff;}
.main__program-list .list a:hover .desc {border-color:rgba(214, 214, 214, 0.3);}
.main__program-list .list a:hover .date {color:#fff;}
.main__program-list .list a:hover .date::before {background-color: var(--color-white-a3);}
.main__program-list .list a:hover .txt {color:#eac038;}


.main__program-list .list .slick-active a {transform: translate(0, -4rem);}
.main__program-list .list .slick-active a::before{box-shadow: 0 0 3rem var(--color-black-a2); background-color: #000000; border-color:#000;}
.main__program-list .list .slick-active .thumb span {transform: scale(1.1);mix-blend-mode: normal; opacity: 1;}
.main__program-list .list .slick-active .subject {color:#fff;}
.main__program-list .list .slick-active .desc {border-color:rgba(214, 214, 214, 0.3);}
.main__program-list .list .slick-active .date {color:#fff;}
.main__program-list .list .slick-active .date::before {background-color: var(--color-white-a3);}
.main__program-list .list .slick-active .txt {color:#eac038;}


.main__program .main__control {position: absolute; top:0.4rem; right:0; background-color: #fff;}



@media (max-width: 1280px){
}


@media (max-width: 1024px){
	.main__program {padding:10rem 0;}
}


@media (max-width: 960px){
	/*.main__program .sec-header::after {display: block; width:200%; top:-5rem; left:50%; transform: translate(-50%, 0);}*/
	.main__program .sec-header .m_rbtn {margin-left:auto;}
	.main__program .main__control {position:static; margin-top:2rem; justify-content: center;}
}


@media (max-width: 768px){
	.main__program-list .list {margin-left:-3rem;}
	.main__program-list .item {width:45rem; padding:0 3rem;height:100%;}
}


@media (max-width: 576px){

}


@media (max-width: 480px){
	.main__program .sec-header::after {display: block; width:200%; top:-5rem; left:50%; transform: translate(-50%, 0);}
	.main__program .sec-header .m_rbtn {margin-top:1.5rem; margin-left:0;}
	.main__program-list .list {margin-left:0;}
	.main__program-list .item {padding:0 2rem;}
}
/* ===================================================== */







/* ===================================================== */
/* SECTION 3 */
.main__infofloor {padding: 18rem 0; background: url('../images/main/section03_bg01.png') no-repeat center / cover; overflow: hidden; --floor-tab-w: 23rem;}
.main__infofloor-wrap {display: flex; padding-left:var(--inner-padding);min-width: 0;}
.main__infofloor-box.nth-1 {display: flex; flex-direction: column; justify-content: space-between; width:var(--floor-tab-w); flex-shrink: 0;}
.main__infofloor-box.nth-2 {width:calc(100% - var(--floor-tab-w) - 12rem); margin-left:12rem; display: flex; flex-direction: column;min-width: 0;}
.main__infofloor-box.nth-2::before,
.main__infofloor-box.nth-2::after {content:''; display: block; width: 100%; height:25px; background: url('../images/main/section03_bg03.png') 0 50% no-repeat; background-size:auto 25px;}
.main__infofloor-box.nth-2::after {transform: rotateX(180deg); margin-top:-1px;}

.main__infofloor .sec-header {margin-bottom:4rem;}
.main__infofloor .sec-header::after {display: none;}
.main__infofloor .sec-tit {color: #fff; background-color: transparent; padding:0;}

.main__infofloor-tab {display: flex; flex-direction: column-reverse; position: relative;}
.main__infofloor-tab::before {content:''; display: block; width: calc(100% + var(--inner-padding));  height: 1px; background: rgba(255, 255, 255, 0.1); position: absolute; top:0; right:0;}
.main__infofloor-tab > .line{display: none;}
.main__infofloor-tab .item .link{display: flex; align-items: center; justify-content: space-between; position: relative; height:10rem; padding: 0 2rem 0 0;}
.main__infofloor-tab .item .link::before,
.main__infofloor-tab .item .link::after {content:''; display: block; width: calc(100% + var(--inner-padding)); height: 1px; background: rgba(255, 255, 255, 0.1); position: absolute; transition: all 0.3s ease-in-out;}
.main__infofloor-tab .item .link::before {bottom:0; right:0;}
.main__infofloor-tab .item .link::after {width:0; left:calc( 0px  - var(--inner-padding)); bottom:0;background: rgba(255, 255, 255, 1);}
.main__infofloor-tab .item .floor {font-size:4.5rem; font-weight: 300; color:#fff; transition: all 0.3s ease-in-out; padding-left:1rem;}
.main__infofloor-tab .item .floor::before {content:''; display: block; width:1.4rem; height:1.4rem; border-radius: 50%; background-color: #fff; opacity: 0; transition: all 0.3s ease-in-out; position: absolute; top:50%; left:0; transform: translate(-0%, -50%);}
.main__infofloor-tab .item .floor-tit {font-size:1.8rem; font-weight: 800; color:#fff; transition: all 0.3s ease-in-out;}

.main__infofloor-tab .item .link:hover::after,
.main__infofloor-tab .item.is-active .link::after {width: calc(100% + var(--inner-padding));}
.main__infofloor-tab .item .link:hover .floor,
.main__infofloor-tab .item.is-active .floor {font-weight: 800;}
.main__infofloor-tab .item .link:hover .floor::before,
.main__infofloor-tab .item.is-active .floor::before {transform: translate(-100%, -50%); opacity: 1;}
.main__infofloor-tab .item .link:hover .floor-tit,
.main__infofloor-tab .item.is-active .floor-tit {color:#5199e3;}


.main__infofloor-box.nth-2 .item-wrap {background-color: #fff; height:100%; padding:8rem 10rem; width:100%;}
.main__infofloor-con {opacity: 0; visibility: hidden; height:0;}
.main__infofloor-con.is-active {opacity: 1; visibility: visible; height:100%; animation: fade-in 2s linear;}

.main__infofloor-con {display: flex;min-width: 0; width:100%;}

.main__infofloor-desc {width: 25rem; flex-shrink: 0; padding-right:3rem;}
.main__infofloor-desc h6 {display: inline-block; padding: 0.5rem 2rem; border-radius: 4rem; background: #005fbf; font-size: 2.4rem; font-weight: 700; color: #fff; letter-spacing: 0.05em;}
.main__infofloor-desc h2 {margin-top: 2rem; font-size: 4.5rem; font-weight: 500; color: #000;}
.main__infofloor-desc h2 em {border-bottom: 2px solid #000;}
.main__infofloor-desc p {margin-top: 2rem; font-size: 1.8rem; font-weight: 500; color: #666;}



.main__infofloor-image {display: flex; height:100%; gap:4rem; position: relative; min-width: 0; width: 100%; align-items: center; }
.main__infofloor-image .image-nav {width:3.2rem; flex-shrink: 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;min-width: 0; height:100%;}
.main__infofloor-image .list {width: calc(100% - 7.2rem);}



.main__infofloor-image .arrow-btn {cursor: pointer; width:100%; height:2rem; position: absolute; top:0; left:50%; transform: translate(-50%, 0);}
.main__infofloor-image .arrow-btn.next {top:auto; bottom:0; transform:  translate(-50%, 0) rotate(180deg);}

.main__infofloor-image .arrow-btn::before,
.main__infofloor-image .arrow-btn::after {content:''; display: block; width:1.8rem; height:0.4rem; border-radius: 2px; background-color: #000; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);transition:all 0.3s ease-in-out;}

.main__infofloor-image .arrow-btn::before {transform: translate(-80%, -50%) rotate(-45deg);}
.main__infofloor-image .arrow-btn::after {transform: translate(-20%, -50%) rotate(45deg);}

.main__infofloor-image .arrow-btn:hover::before,
.main__infofloor-image .arrow-btn:hover::after{background-color: var(--color-sub2);}



.main__infofloor-image .image-dot .slick-dots {display: flex; flex-direction: column; align-items: center;justify-content: center;}
.main__infofloor-image .image-dot li {line-height: 1; font-size:0; overflow: hidden; padding:1rem; cursor:pointer;}
.main__infofloor-image .image-dot button {width: 8px; height: 8px; border-radius: 50%; background: #c0c0c0;}
.main__infofloor-image .image-dot .slick-active button {background: #005fbf;}





.main__infofloor-image .more-btn {position: absolute; top: -2rem; right: -2rem;}
.main__infofloor-image .more-btn a {display: flex; align-items: center; justify-content: center; width: 12rem; height: 12rem; border-radius: 50%; background: #000; text-align: center; transition:all 0.3s ease-in-out;box-shadow: 0 0 3rem var(--color-black-a2);}
.main__infofloor-image .more-btn span {padding-bottom: 2.5rem; font-size: 2rem; font-weight: 500; color: #fff; position: relative;}
.main__infofloor-image .more-btn span::after {display: block; content: ''; width: 1.8rem; height: 1.8rem; background: url('../images/main/section03_more.png') no-repeat center; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transition:all 0.3s ease-in-out; background-size: contain;}
.main__infofloor-image .more-btn em {font-weight: 700;}

.main__infofloor-image .more-btn a:hover {background-color:var(--color-sub);transform:translateY(-1rem); box-shadow: 0 0 3rem var(--color-black-a4);}
.main__infofloor-image .more-btn a:hover span::after {transform: translateX(-50%) rotate(360deg);}


@media (max-width: 1600px){
	.main__infofloor {padding: 16rem 0; --floor-tab-w: 23rem;}
	.main__infofloor-box.nth-2 {width:calc(100% - var(--floor-tab-w) - 10rem); margin-left:10rem;}
	.main__infofloor-box.nth-2::before,
	.main__infofloor-box.nth-2::after {height:21px;  background-size:auto 20px;}
	.main__infofloor-box.nth-2::after {transform: rotateX(180deg); margin-top:-1px;}

	.main__infofloor-tab .item .link{height:10rem;}
	.main__infofloor-box.nth-2 .item-wrap {padding:6rem 8rem;}
}

@media (max-width: 1440px){
	.main__infofloor {padding: 14rem 0; --floor-tab-w: 20rem;}
	.main__infofloor .sec-tit {letter-spacing: -0.05em;}

	.main__infofloor-box.nth-2 {width:calc(100% - var(--floor-tab-w) - 6rem); margin-left:6rem;}
	.main__infofloor-box.nth-2::before,
	.main__infofloor-box.nth-2::after {height:19px;  background-size:auto 18px;}

	.main__infofloor-tab .item .link{height:9rem;}
	.main__infofloor-box.nth-2 .item-wrap {padding:5rem 7rem;}
}


@media (max-width: 1280px){
	.main__infofloor-desc {width: 21rem; padding-right:2rem;}
	.main__infofloor-desc h2 {margin-top: 1rem; font-size: 4rem;}

	.main__infofloor-image {gap:3rem;}
	.main__infofloor-image .image-nav {width:3rem;}
	.main__infofloor-image .list {width: calc(100% - 6rem);}

}


@media (max-width: 1024px){
	.main__infofloor {padding: 13rem 0; --floor-tab-w: 19rem;}
	.main__infofloor-box.nth-2 {width:calc(100% - var(--floor-tab-w) - 5rem); margin-left:5rem;}
	.main__infofloor-box.nth-2::before,
	.main__infofloor-box.nth-2::after {height:16px;  background-size:auto 15px;}

	.main__infofloor-box.nth-2 .item-wrap {padding:4rem 6rem;}

	.main__infofloor-image .more-btn a {width:11rem; height:11rem;}
}


@media (max-width: 960px){
	.main__infofloor {padding: 10rem 0; --floor-tab-w: 100%;}
	.main__infofloor-wrap {flex-direction: column; padding-left:0;}
	.main__infofloor-box.nth-1 {flex-direction: column; justify-content: flex-start; padding:0 var(--inner-padding); margin-bottom:2rem;}
	.main__infofloor-box.nth-2 {width:100%; margin-left:0rem; padding-left:var(--inner-padding); }


	.main__infofloor .sec-header {justify-content: center; margin-bottom:3rem}


	.main__infofloor-tab {flex-direction: row; position: relative;}
	.main__infofloor-tab::before {content:''; display: block; width: calc(100% + var(--inner-padding) * 2);  height: 1px; background: rgba(255, 255, 255, 0.1); position: absolute; top:0; right:calc(0px - var(--inner-padding));}

	.main__infofloor-tab .item {flex:1 1 25%;}
	.main__infofloor-tab > .line{display: block; position: absolute; bottom:0; left:calc(0px - var(--inner-padding)); width:0%;  height:1px; background-color: #fff;transition:width 0.5s;}
	.main__infofloor-tab .item::before {content:''; position: absolute; display: none; width:0; height:1px; background-color: #fff; transition: width 0.5s; left:calc(0px - var(--inner-padding)); bottom:0; }

	.main__infofloor-tab .item .link{justify-content: center; gap:1rem; height:10rem; padding: 0 0 0 0; position: static;}
	.main__infofloor-tab .item .link::before,
	.main__infofloor-tab .item .link::after {display: none;}

	.main__infofloor-tab .item .floor {padding:0; position: relative;}
	.main__infofloor-tab .item .floor::before {position: absolute; top:0; left:50%; transform: translate(-50%, 0%);}


	/*
	.main__infofloor-tab .item:nth-of-type(1).is-active::before {width:calc(var(--inner-padding) + 25%);}
	.main__infofloor-tab .item:nth-of-type(2).is-active::before {width:calc(var(--inner-padding) + 50%);}
	.main__infofloor-tab .item:nth-of-type(3).is-active::before {width:calc(var(--inner-padding) + 75%);}
	.main__infofloor-tab .item:nth-of-type(4).is-active::before {width:calc(var(--inner-padding) + 100%);}
	*/

	.main__infofloor-tab .item.is-active + .item + .item + .item + .line {width:calc(var(--inner-padding) + 25%);}
	.main__infofloor-tab .item + .item.is-active + .item + .item + .line {width:calc(var(--inner-padding) + 50%);}
	.main__infofloor-tab .item + .item + .item.is-active + .item + .line {width:calc(var(--inner-padding) + 75%);}
	.main__infofloor-tab .item + .item + .item + .item.is-active + .line {width:calc(var(--inner-padding) + 100%);}

	.main__infofloor-tab .item .link:hover .floor::before,
	.main__infofloor-tab .item.is-active .floor::before {transform: translate(-50%, -100%); opacity: 1;}






	.main__infofloor-box.nth-2 .item-wrap {margin-top:-1px;}
	.main__infofloor-con {display: flex; flex-direction: column;}

	.main__infofloor-desc {width: 100%; padding-right:0rem; margin-bottom:3rem;}
	.main__infofloor-desc p {margin-top: 1rem;}


	.main__infofloor-image {height:auto; gap:2rem; flex-direction: column; align-items: center; }
	.main__infofloor-image .image-nav {width:100%; flex-direction: row; height:auto; order:2;}
	.main__infofloor-image .list {width: 100%;}
	.main__infofloor-image .list img {margin:0 auto;}



	.main__infofloor-image .arrow-btn {width:3rem; height:3rem; top:50%; left:0; transform: translate(0%, -50%) rotate(-90deg);}
	.main__infofloor-image .arrow-btn.next {top:50%; left:auto; right:0; transform:  translate(0%, -50%) rotate(90deg);}

	.main__infofloor-image .image-dot .slick-dots {flex-direction: row; padding: 0 3rem;}


}


@media (max-width: 768px){

}

@media (max-width: 640px){
	.main__infofloor-box.nth-2 .item-wrap {padding:2rem 3rem;}
	.main__infofloor-tab .item .floor-tit {display: none;}
}


@media (max-width: 480px){
}

/* ===================================================== */







/* ===================================================== */
/* SECTION 4 상영관 */
.main__movie {padding:12rem 0;}
.main__movie .sec-header {margin-bottom:3rem;}
.main__movie .sec-header .m_rbtn {margin-left:auto;}
.main__movie-inner {background-color: #efefef; border-radius: 3rem; padding: 4rem;}

.main__movie-title {display: flex; align-items: center; justify-content: center; gap:3rem; margin-bottom:2rem;}
.main__movie-title .title {font-size:3.2rem; font-weight: 800; color:#000;}
.main__movie-title .title .year::after {content:'.';}


.main__movie-title > a{display: block; width:3.4rem; height:3.4rem; font-size:0; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; background-position: 50% 50%; border-radius: 50%; position: relative; transition:all 0.3s ease-in-out; background-color: #fff;}

.main__movie-title > a::before,
.main__movie-title > a::after {content:''; display: block; width:12px; height:4px; border-radius: 2px; background-color: #000; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);transition:all 0.3s ease-in-out;}

.main__movie-title > a::before {transform: translate(-40%, -125%) rotate(45deg);}
.main__movie-title > a::after {transform: translate(-40%, 25%) rotate(-45deg);}
.main__movie-title > a.prev {transform: rotate(180deg);}


.main__movie-title > a:hover {background-color:var(--color-main); border-color:var(--color-main);}
.main__movie-title > a:hover::before,
.main__movie-title > a:hover::after {background-color: #fff;}

.main__movie-title > a:hover::before {transform: translate(-15%, -125%) rotate(45deg);}
.main__movie-title > a:hover::after {transform: translate(-15%, 25%) rotate(-45deg);}


/*달력스크롤바*/
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
	background-color: var(--color-main);
}
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
	background-color: var(--color-main);
}


.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
	background-color: var(--color-main);
}


.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
	width: 100%;
	height: 2px;
	margin: 8px 0;
	background-color: #ccc;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
	height: 6px;
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger {width:12rem !important}

/*달력영역*/
.main__calendar-inner {width: auto;}

.calendar-type1 {font-size:0; white-space: nowrap;}
.calendar-type1 .item {display:inline-block; width:8rem; text-align: center;}
.calendar-type1 .item .week {font-size:1.4rem; padding:1rem 0; color:#000; background-color:#fff; position:relative; font-weight: 400;}
.calendar-type1 .item:first-child .week,
.calendar-type1 .item:last-child .week{background-color:transparent; }
.calendar-type1 .item:first-child .week::before,
.calendar-type1 .item:last-child .week::before {content:''; display:block; width:100%; height:100%; background-color: #fff; border-radius: 2rem 0 0 2rem; position:absolute; top:0; left:0; z-index: -1;}
.calendar-type1 .item:last-child .week::before {border-radius: 0 2rem 2rem 0;}
.calendar-type1 .item .day { padding:1rem 0;}

.calendar-type1 .item .day a {display:block; padding:1rem 0; font-size:2rem; font-weight:700; position:relative; z-index: 2; color:#222; line-height:1;}
.calendar-type1 .item .day a::before {content:''; display:block; width:0px; height:0px; border-radius: 50%; position:absolute; background-color:transparent; top:50%; left: 50%; transform:translate(-50%, -50%); z-index: -1; transition: all 0.3s ease-in-out;}



.calendar-type1 .item.sun .week,
.calendar-type1 .item.sun .day a{color:#c30e23;}
.calendar-type1 .item.sat .week,
.calendar-type1 .item.sat .day a{color:#007bff;}


.calendar-type1 .item.is-on .day a {color:#fff;}
.calendar-type1 .item.is-on .day a::before {width:4rem; height:4rem; background-color:var(--color-sub); border:2px solid var(--color-sub);}
.calendar-type1 .item.is-on .day a:hover::before {background-color:#222; border-color:#222; }

.calendar-type1 .item.today .day a {color:#fff;}
.calendar-type1 .item.today .day a::before {width:4rem; height:4rem; background-color:var(--color-sub3); border:2px solid var(--color-sub3);}
.calendar-type1 .item.today .day a:hover::before {background-color:#222; border:2px solid #222;}



.calendar-type1 .item.is-active .day a::before,
.calendar-type1 .item.is-on.is-active .day a::before,
.calendar-type1 .item.today.is-active .day a::before {width:4rem; height:4rem; border:2px dashed #222;}

.calendar-type1 .item .day a:hover {color:#fff;}
.calendar-type1 .item .day a:hover::before {width:4rem; height:4rem; background-color:#222; border:2px solid #222;}



.movie__list {margin:6rem 0 0 0;}
.movie__list .movie__list-wrap {position: relative;}
.movie__list .list .slick-list{width:calc(100% - 1px)}
.movie__list .list .slick-track{display: flex;}
.movie__list .item { padding:0 4rem;}
.movie__list .item + .item {border-left:1px solid #d6d6d6;}
.movie__list .item a{display: block; padding:1rem 0; transition: all 0.3s ease-in-out;}

.movie__list .item .day {display: flex; align-items: center; gap:1rem;}
.movie__list .item .day .time{display: flex; align-items: center; justify-content: center; height:4rem; background-color: var(--color-main); padding:0 2rem; border-radius: 2rem; font-size: 1.8rem; font-weight: 700; color:#fff; transition: all 0.3s ease-in-out;}
.movie__list .item .day .date {font-size:2rem; font-weight: 500; color:var(--color-sub);transition: all 0.3s ease-in-out;}
.movie__list .item .subject {font-size:3.2rem; font-weight: 700; color:#222; line-height: 1.2;  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; -webkit-line-clamp: 2; transition: all 0.3s ease-in-out; text-underline-offset: 0.15em; min-height:7.8rem; margin-top:2rem;}

.movie__list .item.nodata .day {justify-content:center;}
.movie__list .item.nodata .subject {text-align: center; padding:2rem 0; margin:0; color:#aaa; min-height: auto; font-weight: 500;}

.movie__list .item .desc {margin-top:3rem; font-size:1.8rem; display: flex;}
.movie__list .item .desc span {display: inline-block;}
.movie__list .item .desc span + span {position: relative; margin-left:1rem; padding-left:1rem;}
.movie__list .item .desc span + span::before {content:''; display: block; width:1px; height:10px; background-color: #ccc; position: absolute; left:0; top:50%; transform: translate(0, -50%);}
.movie__list .item .type { color:var(--color-sub); font-weight: 500;}
.movie__list .item .grade {color:#999;}

.movie__list .item a:hover {transform: translateY(-5px);}
.movie__list .item a:hover .day .time{background-color: var(--color-sub); padding:0 2rem; border-radius: 2rem; font-size: 1.8rem; font-weight: 700; color:#fff;}
.movie__list .item a:hover .day .date { color:#000;}
.movie__list .item a:hover .subject {text-decoration: underline;}

.movie__list .item a:hover .type { color:var(--color-main);}
.movie__list .item a:hover .grade {color:var(--color-sub);}


.movie__list .main__control {position: absolute; top:50%; left:0; width:100%;}
.movie__list .main__control .arrow-btn {position: absolute; top:50%; left:0; transform: translate(-100%, -50%);}
.movie__list .main__control .arrow-btn.next {left: auto; right:0; transform: translate(100%, -50%);}
.movie__list .main__control .arrow-btn.slick-disabled {display: none!important;}


@media (max-width: 1440px){
	.movie__list {padding: 0 4rem;}
}

@media (max-width: 1280px){

}


@media (max-width: 1024px){
}


@media (max-width: 960px){

}


@media (max-width: 768px){
	.calendar-type1 .item {width:6rem;}

	.movie__list .item + .item {border-left:0;}
}

@media (max-width: 576px){

}


@media (max-width: 480px){
	.main__movie .sec-header .m_rbtn {margin:1.5rem 0 0 0;}
}
/* ===================================================== */






/* ===================================================== */
/* SECTION 5 장비대여 */
.main__equipment-wrap {position: relative; padding-left:var(--inner-padding); padding-bottom: 5rem; display: flex; align-items: flex-end;}
.main__equipment-wrap::before {content:''; display: block; width:100%; height:calc(100% - 9rem); background-color: var(--color-main); position: absolute; bottom:0; left:0; z-index: -1;}

.main__equipment-wrap .sec-header {flex-direction: column; align-items: flex-start; margin: 0 0 5rem;}
.main__equipment-wrap .sec-header::after {display: none;}
.main__equipment-wrap .sec-header .sec-tit {background-color: transparent; color:#fff;}
.main__equipment-wrap .sec-header .sec-desc {background-color: transparent; color:#fff;}

.main__equipment-box {padding-bottom:3rem; width:max(35rem, 25%); flex-shrink: 0;}


.main__equipment-box .main__control .arrow-btn a {border:2px solid #fff; background-color: transparent;}
.main__equipment-box .main__control .arrow-btn a::before,
.main__equipment-box .main__control .arrow-btn a::after {background-color: #fff;}
.main__equipment-box .main__control .arrow-btn a:hover {background-color:var(--color-sub); border-color:var(--color-sub);}

.main__equipment-box .m_rbtn {color:#fff;border-color:#fff; background-color: transparent;}
.main__equipment-box .m_rbtn.icon.type1 span.plus::before,
.main__equipment-box .m_rbtn.icon.type1 span.plus::after { background-color: #fff;}

.main__equipment-box .m_rbtn:hover {background-color: var(--color-sub); border-color:var(--color-sub)}


.main__equipment-list .slick-list {height:100%;}
.main__equipment-list .item {width:44rem; padding:0 3rem;height:100%;}


.main__equipment-list .list a {display: block; height:100%; position: relative; padding:0 3rem; transition: all 0.3s ease-in-out;}
.main__equipment-list .list a::before {content:''; display: block; width:100%; height:calc(100% - 8rem); background-color:#fff; border-radius: 3rem; position: absolute; top:5rem; left:0; z-index: -1; transition: all 0.3s ease-in-out;}

.main__equipment-list .list .thumb {overflow: hidden; position: relative;  margin-bottom:3rem; border-radius: 2rem; border:1px solid #d6d6d6;}
.main__equipment-list .list .thumb span{display: block; transform: scale(1); transition: all 0.3s ease-in-out;}

.main__equipment-list .list .subject {font-size:2.4rem; font-weight: 700; color:#222; line-height: 1.3; transition: all 0.3s ease-in-out;  text-align: center; margin-bottom:2rem;}

.main__equipment-list .list .more {overflow: hidden; width:6rem; height:6rem; text-indent: -9999px; font-size:0; transition:all 0.3s ease-in-out; border-radius: 50%; border:2px solid #000; position: relative; background-color: #000; margin:0 auto;}
.main__equipment-list .list .more::before,
.main__equipment-list .list .more::after {content:''; display: block; width:18px; height:4px; border-radius: 2px; background-color: #fff; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
.main__equipment-list .list .more::after {transform: translate(-50%, -50%) rotate(90deg);}


.main__equipment-list .list a:hover::before{box-shadow: 0 0 3rem var(--color-black-a2); background-color: #000000; border-color:#000;}
.main__equipment-list .list a:hover .thumb {border:2px solid #000;}
.main__equipment-list .list a:hover .thumb span {transform: scale(1.1);mix-blend-mode: normal; opacity: 1;}
.main__equipment-list .list a:hover .subject {color:#fff;}
.main__equipment-list .list a:hover .desc {border-color:rgba(214, 214, 214, 0.3);}
.main__equipment-list .list a:hover .date {color:#fff;}
.main__equipment-list .list a:hover .date::before {background-color: var(--color-white-a3);}
.main__equipment-list .list a:hover .txt {color:#eac038;}
.main__equipment-list .list a:hover .more {background-color: var(--color-sub); border-color: var(--color-sub); transform: rotate(360deg);}



@media (max-width: 1280px){

}


@media (max-width: 1024px){

}


@media (max-width: 960px){
	.main__equipment-wrap {padding:10rem 0 20rem; display: block;}
	.main__equipment-wrap::before {height:100%;}
	.main__equipment-wrap .sec-header {margin: 0 0 4rem; align-items: center; padding:0 var(--inner-padding);}
	.main__equipment-wrap .sec-header::after {display: none;}
	.main__equipment-box {padding-bottom:0rem; width:100%;}

	.main__equipment-box .main__control {position: absolute; bottom:10rem; left:50%; transform:translate(-50%, 0);}
}


@media (max-width: 768px){

}

@media (max-width: 576px){

}


@media (max-width: 480px){
	.main__equipment-list .item  {padding:0 2rem;}
}

/* ===================================================== */









/* ===================================================== */
/* */

@media (hover: hover) and (pointer: fine) {
}
@media (max-width: 1280px) {
}
@media (max-width: 1024px) {
}
@media (max-width: 768px) {
}
@media (max-width: 576px) {
}
@media (max-width: 480px) {
}
/* */
/* ===================================================== */
