@charset "utf-8";
#scroller { width: 100%; }
.section {}

.section1 { min-height: 170vh; height: 170vh; position: relative; overflow: hidden; }
.section1 .box { width: 100%; height: 100vh; background: url('../img/main/sec1_bg.jpg') center/cover no-repeat; display: flex; align-items: center; }
.section1 .box.fixed { position: absolute !important; bottom: 0 !important; left: 0 !important; margin: 0 !important; top: auto; }
.section1 .box .inner { width: 47.9166vw; height: 13.5416vw; padding-left: 15.4166vw; opacity: 0; }
.section1 .box .inner img { width: 100%; }
.section1 .box .overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; background: url('../img/main/sec1_over.png') center/cover no-repeat; }
.section1 > p { position: absolute; left: 50%; top: 90vh; z-index: 3; margin-left: -25px; }

.section2 { width: 100%; height: 100vh; position: relative; overflow: hidden; background: #000; font-family: 'NanumSquare'; }
.section2 .clearfix{ *zoom: 1; }
.section2 .clearfix:after{ content: ''; display: block; clear: both; }
.section2 > ul {position: absolute; left: 0; top: 0; width: 400vw; }
.section2 > ul > li { width: 100vw; height: 100vh; float: left; }
.section2 > ul > li .txt-wrap { width: 1500px; height: inherit; margin: 0 auto; display: flex; align-items: center; background: rgba(0,0,0,0.5); color: #fff; line-height: 1; }
.section2 > ul > li .txt-wrap .box { transform: skew(-0.03deg); }
.section2 > ul > li .txt-wrap .box p,
.section2 > ul > li .txt-wrap .box span { color: #fff; }
.section2 > ul > li .txt-wrap .box > p:nth-of-type(1) { font-size: 17px; text-transform: uppercase; letter-spacing: 2px; }
.section2 > ul > li .txt-wrap .box > p:nth-of-type(1) > span { display: inline-block; margin-left: 60px; }
.section2 > ul > li .txt-wrap .box > p:nth-of-type(2) { font-size: 60px; font-weight: 700; margin: 45px 0 40px; }
.section2 > ul > li .txt-wrap .box > dl > dt { font-size: 21px; }
.section2 > ul > li .txt-wrap .box > dl > dd { font-size: 17px; line-height: 1.5; margin: 15px 0 35px; }
.section2 > ul > li .txt-wrap .box > p:nth-of-type(3) { color: #f19ec2; position: relative; }
.section2 > ul > li .txt-wrap .box > p:nth-of-type(3)::after { content: ''; position: absolute; left: 50px; top: 50%; width: 185px; height: 1px; background: #f19ec2; }

.section2 > ul > li .txt-wrap .box1 { flex: auto; }
.section2 > ul > li .txt-wrap .box2 { width: 779px; }
.section2 > ul > li .txt-wrap .box2 img { width: 100%; }

.section2.show-modal { position: absolute; left: 0; z-index: 9; }

.section2 .bg { position: absolute; left: 50%; top: 50%; transform: translate(-20%, -50%); }

.section3 { width: 100vw; min-width: 1240px; height: 1064px; position: relative; }
.section3 > div { width: 900px; margin: 100px auto 20px; }
.section3 > div > video { width: 100%; }
.section3 > p { text-align: center; }
.section3 ul.inner { position: absolute; bottom: 200px; left: 50%; width: 1400px; display: flex; margin-left: -700px; }
.section3 ul.inner > li { width: 350px; text-align: center; line-height: 1; }
.section3 ul.inner > li > p { font-family: 'Anton', sans-serif !important; color: #000 !important; }
.section3 ul.inner > li > p:first-child { font-size: 75px; margin-bottom: 15px; }
.section3 ul.inner > li > p:nth-child(2) { font-size: 16px; }

@keyframes slideIn{
	0% {
		transform: translate(100%,0);
	}
	100% {
    	transform: translate(-100%,0);
    }
}
@keyframes slideIn_reverse{
	0% {
		transform: translate(-100%,0);
	}
	100% {
    	transform: translate(100%,0);
    }
}

.section4 { width: 100%; overflow: hidden; position: relative; }
.section4 > p:nth-of-type(1) { z-index: 2; }
.section4 > p:nth-of-type(2),
.section4 > p:nth-of-type(3) { z-index: 1; position: absolute; top: 50%; }
.section4 > p:nth-of-type(2) { left: 0; margin-top: -110px; animation: slideIn 10s linear infinite; }
.section4 > p:nth-of-type(3) { right: 0; margin-top: 40px; animation: slideIn_reverse 10s linear infinite; }

.section5 { width: 100%; background: url('../img/main/sec5-bg.jpg') center no-repeat; }
.section5 .tscroll { position: relative; width: 100%; padding: 50px 0; font-size: 100px; z-index: 2; }
.section5 .tscroll > p { text-align: center; }
.section5 .tscroll:nth-of-type(2) > p { transform: translate(0,0); }

.section6 {}
.section6 > p { text-align: center; font-size: 16px; letter-spacing: 4px; font-weight: bold; }
.section6 > ul { display: grid; place-content: center; grid-template-columns: repeat(5, 292px); gap: 14px; margin: 50px 0; }
.section6 > ul > li { cursor: pointer; }
.section6 > ul > li > img { width: 100%; }

.videoBox { display: none; background: rgba(0,0,0,0.5); box-sizing: border-box; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; }
.videoview { position: relative; width: 900px; height: 600px; margin: 100px auto; background: #fff; border-radius: 15px; box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.3); }
.videoview div { overflow: hidden; padding: 45px 50px; }
.videoview ul { width: 100%; overflow:hidden; }
.videoview ul li {}
.videoview a { font-size: 3em; font-weight: normal; position: absolute; right: 15px; top: 15px; cursor: pointer; }