/*section1, 2*/
.main-inner {/*height: 100%; transition:all 0.5s ease*/ height:calc(100vh - 10rem); margin-top:10rem}
/*.active.fp-completely .main-inner{height:calc(100% - 10rem); margin-top:10rem}*/
.main-inner .grid {display:grid; height:100%; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); padding: 2rem; grid-gap: 2rem;}
.main-inner .grid .item {position:relative; overflow:hidden}
.main-inner .grid .item:nth-child(1) {grid-column: 1 / span 2; grid-row: 1 / span 2}
.main-inner .grid .item:nth-child(2) {background:url(../img/main/main-grid-img01.jpg) no-repeat center / cover}
.main-inner .grid .item:nth-child(3) {background:url(../img/main/main-grid-img02.jpg) no-repeat center / cover}
.main-inner .grid .item:nth-child(4) {background:url(../img/main/main-grid-img03.jpg) no-repeat center / cover}
.main-inner .grid .item:nth-child(5) {background:url(../img/main/main-grid-img04.jpg) no-repeat center / cover}
.main-inner .grid .item + .item > a {display:block; padding:7rem 6rem 0; width:100%; height:100%}
.main-inner .grid .item > a {position:relative; color:var(--main-white); z-index:2}
.main-inner .grid .item > a:after{content:''; display:block; width:7.3rem; height:8.3rem; position:absolute; left:6rem; bottom:7rem}
.main-inner .grid .item:nth-child(2) > a:after {background: url(../img/main/main-grid-icon01.svg) no-repeat center / 7.1rem}
.main-inner .grid .item:nth-child(3) > a:after {background: url(../img/main/main-grid-icon02.svg) no-repeat center / 7.3rem}
.main-inner .grid .item:nth-child(4) > a:after {background: url(../img/main/main-grid-icon03.svg) no-repeat center / 6.8rem}
.main-inner .grid .item:nth-child(5) > a:after {background: url(../img/main/main-grid-icon04.svg) no-repeat center / 7.2rem}
.main-inner .grid .item + .item:after{content:''; width:100%; height:100%; background:var(--main-theme); display:block; position:absolute; left:0; top:0; z-index:1; opacity:0; transition:all .3s}
.pc .main-inner .grid .item + .item:hover:after {opacity:1}
.main-inner .grid .item .text-md {padding-top:2.5rem}
.main-inner .grid .item .text-sm {position:absolute; right:6rem; bottom:7rem; text-decoration:underline}
.main-inner .grid .item + .item .text-sm span {transition:0.3s all}
.pc .main-inner .grid .item + .item:hover .text-sm span{transform:translateX(1rem); display:inline-block; transition:0.3s all}
.main-inner .grid .item .video-holder {width:100%; height:100%; padding-bottom: 88.25%; position: relative; overflow:hidden}
.main-inner .grid .item .video-holder iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%}

.main-inner .grid.cont-type2 .item:nth-child(2) {background:url(../img/main/main-grid-img05.jpg) no-repeat center / cover}
.main-inner .grid.cont-type2 .item:nth-child(3) {background:url(../img/main/main-grid-img06.jpg) no-repeat center / cover}
.main-inner .grid.cont-type2 .item:nth-child(4) {background:url(../img/main/main-grid-img07.jpg) no-repeat center / cover}
.main-inner .grid.cont-type2 .item:nth-child(5) {background:url(../img/main/main-grid-img08.jpg) no-repeat center / cover}
.main-inner .grid.cont-type2 .item:nth-child(2) > a:after {background: url(../img/main/main-grid-icon05.svg) no-repeat center / 6.8rem}
.main-inner .grid.cont-type2 .item:nth-child(3) > a:after {background: url(../img/main/main-grid-icon06.svg) no-repeat center / 7.1rem}
.main-inner .grid.cont-type2 .item:nth-child(4) > a:after {background: url(../img/main/main-grid-icon07.svg) no-repeat center / 7.3rem}
.main-inner .grid.cont-type2 .item:nth-child(5) > a:after {width:8.5rem; background: url(../img/main/main-grid-icon08.svg) no-repeat center / 8.5rem}

/*section1, 2 미디어쿼리*/
@media (max-width:1280px) {
	.main-inner {height:auto}
	.main-inner .grid .item + .item > a {padding:4rem 3rem 0}
	.main-inner .grid .item .text-md {padding-top:1.5rem}
	.main-inner .grid .item .text-sm {right:3rem; bottom:4rem}
	.main-inner .grid .item > a:after {width:4.3rem; height:5.3rem; left:3rem; bottom:4rem}
	.main-inner .grid .item:nth-child(2) > a:after,
	.main-inner .grid .item:nth-child(3) > a:after,
	.main-inner .grid .item:nth-child(4) > a:after,
	.main-inner .grid .item:nth-child(5) > a:after{background-size:4.3rem}
	.main-inner .grid .item + .item {min-height: 32rem}

	.vertical-scrolling + .vertical-scrolling .main-inner {margin-top:0}
	.main-inner .grid.cont-type2 .item:nth-child(2) > a:after,
	.main-inner .grid.cont-type2 .item:nth-child(3) > a:after,
	.main-inner .grid.cont-type2 .item:nth-child(4) > a:after {background-size:4.3rem}
	.main-inner .grid.cont-type2 .item:nth-child(5) > a:after {width:5.5rem; background-size:5.5rem}
}

@media (max-width:1024px) {
	.main-inner .grid {grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, auto)}
	.main-inner .grid .item .video-holder {padding-bottom:56.25%}
	.main-inner .grid .item + .item {min-height:25rem}
	.main-inner .grid .item + .item > a {padding:4rem 3rem}

	.main-inner .grid.cont-type2 .item:nth-child(1) {height:100vw}
}

@media (max-width:768px) {
	.main-inner {margin-top:7rem}
	.main-inner .grid .item .text-md {padding-top:1rem}
	.main-inner .grid .item + .item > a {padding:3rem 2rem}
	.main-inner .grid .item > a:after {left:2rem; bottom:3rem}
	.main-inner .grid .item .text-sm {right:2rem; bottom:3rem}
}

/*main slider*/
.mySwiper {height:100%}
.mySwiper .headline {font-size: 5.2rem; color:var(--main-white); font-weight:800; line-height:1.3; letter-spacing:-0.2rem; padding-left: 9rem; opacity:0; transition: all 0.5s ease; transform:translateX(20rem); word-break: keep-all; padding-right: 4rem;}
.mySwiper .headline:nth-of-type(1) {padding-top:10rem}
.mySwiper .headline--sub {font-size: 3rem;}
.mySwiper .headline span {font-size:5rem; font-weight:500}
.mySwiper .headline + .headline {padding-top:3rem}
.mySwiper .headline.colored {color:var(--main-theme)}

@keyframes show{
		0% {
			opacity:0;
			transform:translateX(20rem)
		}
		100% {
			opacity:1;
			transform:translateX(0);
		}
	}

@keyframes hide{
		0% {
			opacity:1;
			transform:translateX(0);
		}
		100% {
			opacity:0;
			transform:translateX(20rem);
		}
	}

.swiper-slide-prev .headline,
.swiper-slide-next .headline{
animation-name: hide;
    animation-duration: 1s;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}
.swiper-slide-active .headline {
	animation-name: show;
    animation-duration: 1.5s;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}

.swiper-slide-active .headline + .headline {
   animation-delay: .5s;
   animation-duration: .8s;
}

.custom-fraction {position:absolute; left:9rem; bottom:10rem; z-index:2; display:flex; align-items:center; color:var(--main-white); gap: 1rem}
.custom-fraction .custom-pagination {display:block; width:25rem; height:2px; background: rgba(255,255,255,0.2); position:relative}
.custom-fraction .custom-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:var(--main-white) }
.custom-fraction [class*='Page'] {display:block; font-size:1.5rem; font-weight:800}

.custom-controls {position:absolute; right:9rem; bottom:10rem; display:flex; z-index: 2; gap: 0.5rem;}
.custom-controls > button {display:block; width:5rem; height:5rem; border:1px solid var(--main-white); border-radius:50%; position:relative; transition:all .1s; color:var(--main-white); font-weight:900; font-size:1.5rem}
.pc .custom-controls > button:hover {background: var(--main-theme); border:1px solid var(--main-theme)}
.custom-controls .play-pause.pause {background:url(../img/main/pause.svg) no-repeat center}
.pc .custom-controls .play-pause.pause:hover {background: var(--main-theme) url(../img/main/pause.svg) no-repeat center}
.custom-controls .play-pause.play {background:url(../img/main/play.svg) no-repeat center}
.pc .custom-controls .play-pause.play:hover {background: var(--main-theme) url(../img/main/play.svg) no-repeat center}

/*main slider 미디어쿼리*/
@media (max-width:1919px) {
	.mySwiper .headline {font-size: 3.2477vw}
	.mySwiper .headline--sub {font-size: 3rem}
	.mySwiper .headline:nth-of-type(1) {padding-top:5.2110vw; padding-left:4.6899vw}
	.mySwiper .headline + .headline {padding-top:1.5633vw; padding-left:4.6899vw}
	.mySwiper .headline span {font-size: 2.6055vw}
	.custom-fraction {left:4.6899vw; bottom: 5.2110vw}
	.custom-fraction .custom-pagination {width:15rem}
	.custom-controls {right:4.6899vw; bottom: 5.2110vw}
}

@media (max-width:1024px) {
	.mySwiper .headline {font-size:6.3359vw}
	.mySwiper .headline--sub {font-size: 3rem}
	.mySwiper .headline span {font-size: 4.8828vw}
	.mySwiper .headline:nth-of-type(1) {padding-top:9.7656vw; padding-left:8.7891vw}
	.mySwiper .headline + .headline {padding-top: 2.9297vw; padding-left:8.7891vw}
	.custom-fraction {left:8.7891vw; bottom:9.7656vw}
	.custom-controls {right:8.7891vw; bottom:9.7656vw}
}

/*main 최신글*/
.main-inner .grid-latest {display: grid; grid-template-columns: repeat(2, 50%); grid-template-rows: repeat(2, 50%); height: 100%}
.main-inner .grid-latest > .item {display:flex; padding:5rem 6rem}
.main-inner .grid-latest > .item:nth-child(1),
.main-inner .grid-latest > .item:nth-child(2) {border-bottom:1px solid var(--main-lightgray)}
.main-inner .grid-latest > .item:nth-child(1),
.main-inner .grid-latest > .item:nth-child(3) {border-right:1px solid var(--main-lightgray)}
.main-inner .grid-latest > .item .inner {width: 100%}
.main-inner .grid-latest > .item .inner .title-sm {display:flex; justify-content: space-between; align-items: flex-end}
.main-inner .grid-latest > .item .inner .title-sm + * {padding-top:3rem}
.main-inner .grid-latest > .item .inner .title-sm a {font-size:0; width:2.3rem; height:2.3rem; background:url(../img/main/plus.svg) no-repeat center; display:block; }
.main-inner .grid-latest > .item .inner .title-sm a:hover {mask: url(../img/main/plus.svg) no-repeat center; background: var(--main-theme)}

/*main 최신글 미디어쿼리*/
@media (max-width:1024px) {
	.main-inner .grid-latest {grid-template-columns: repeat(1, 100%); grid-template-rows: repeat(4, auto); height: auto}
	.main-inner .grid-latest > .item {padding:5rem 3rem}
	.main-inner .grid-latest > .item:nth-child(1), 
	.main-inner .grid-latest > .item:nth-child(3) {border-right:none}
	.main-inner .grid-latest > .item:nth-child(3) {border-bottom: 1px solid var(--main-lightgray)}
}

@media (max-width: 768px) {
		.mySwiper .headline--sub {font-size: 2.4rem;}
}