@charset "utf-8";

/* main intro */
#main-intro {display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100vh;background:#232323;z-index:99999;opacity:1;visibility:visible;transition:opacity .5s ease,visibility .1s ease;}
#main-intro img {display:block;width:328px;opacity:0;animation:main-intro-logo 2s ease forwards;}
#main-intro.hide {opacity:0;visibility:hidden;pointer-events:none;}
html.intro-lock,body.intro-lock {overflow:hidden;}
@keyframes main-intro-logo {
	0% {opacity:0;}
	60% {opacity:1;}
	100% {opacity:0;}
}

/* main navigation */
.main-pagination {display:flex;flex-direction:column;gap:12px;position:fixed;top:50%;right:15px;z-index:200;transform:translateY(-50%);transition:opacity .3s ease,visibility .3s ease;}
.main-pagination button {display:flex;align-items:center;flex-direction: row-reverse;gap:8px;width:65px;height:12px;padding:0;border:0;background:transparent;cursor:pointer;}
.main-pagination button:before {content:"";display:block;width:20px;height:2px;background:rgba(255,255,255,.7);transition:.3s;}
.main-pagination button:after {content:attr(data-number);display:block;color:#37B5E9;font-family:'Playfair Display',serif;font-size:18px;font-weight:700;line-height:1;opacity:0;visibility:hidden;transform:translateX(-4px);transition:.3s;}
.main-pagination button.active:before {width:40px;background: linear-gradient(90deg, #37B5E9 0%, #2C52A0 100%);}
.main-pagination button.active:after {opacity:1;visibility:visible;transform:translateX(0);}
.main-pagination.hide {opacity:0;visibility:hidden;pointer-events:none;}


#main{min-height: calc(100vh - 286px);}
#main .layout {max-width:calc(100% - 160px);}

#main .section1 {position:relative;width:100%;height:100vh;overflow:hidden;}
#main .section1 .mv-text {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align: center;}
#main .section1 .mv-text img {display:block;}
#main .section1 .mv-text p {margin-top:20px;color:#fff;font-size:36px;font-weight:700;letter-spacing:11px;}
#main .section1 video {width:100%;height:100%;object-fit:cover;}

#main .section2 {position:relative;width:100%;height:100vh;background:url('/_public/images2/main/s2_bg.png') no-repeat;background-size:cover;}
#main .section2 .layout {height:100%;}
#main .section2 .text-box {position:absolute;bottom:160px;}
#main .section2 h3 {font-size:90px;font-weight:800;line-height:1.05;margin-bottom:80px;}
#main .section2 h3 span {font-family:inherit;}
#main .section2 strong {display:block;font-size: 24px;margin-bottom:25px;}
#main .section2 p {font-size: 16px;}

#main .section3 {width:100%;height:100vh;padding:80px 0;}
#main .section3 .layout {display:flex;align-items:flex-end;height:100%}
#main .section3 .text {width:calc(50% - 60px);}
#main .section3 .text em {display:block;margin-bottom:40px;font-size:18px;font-weight:700;}
#main .section3 .text h3 {margin-bottom:25px;color:#FFF;font-size:45px;font-weight:800;line-height:1.28;}
#main .section3 .text p {font-size:17px;}
#main .section3 .text .img-box {margin-top:60px;display:flex;gap:20px;}
#main .section3 .text .img-box img {display:block;height:310px;}
#main .section3 .business {width:calc(50% + 60px);}
#main .section3 .business .btn-wrap {}
#main .section3 .business .btn-wrap a {display:flex;align-items:center;padding:90px 0 90px 40px;background:transparent;transition:.3s;}
#main .section3 .business .btn-wrap a + a {border-top:1px solid #373A40;}
#main .section3 .business .btn-wrap a:hover {background:#2E2E2E;}

#main .section4 {width:100%;height:100vh;padding-top:200px;}
#main .section4 h3 {margin-bottom:80px;color:#FFF;font-size:42px;text-align:center;}
#main .section4 .product-wrap {display:grid;grid-template-columns:repeat(3, 1fr);}
#main .section4 .product-wrap a {display:block;border:1px solid #373A40;transition:.3s;}
#main .section4 .product-wrap a .img-area {position:relative;width:100%;height:384px;overflow:hidden;transition:.3s;}
#main .section4 .product-wrap a .img-area span {position:absolute;top:10px;right:10px;}
#main .section4 .product-wrap a:nth-child(1) .img-area {background:url('/_public/images2/main/s4_img01.png') 50% 50% no-repeat;background-size:100%;}
#main .section4 .product-wrap a:nth-child(2) .img-area {background:url('/_public/images2/main/s4_img02.png') 50% 50% no-repeat;background-size:100%;}
#main .section4 .product-wrap a:nth-child(3) .img-area {background:url('/_public/images2/main/s4_img03.png') 50% 50% no-repeat;background-size:100%;}
#main .section4 .product-wrap a .title {position:relative;padding:40px;border-top:1px solid #373A40;}
#main .section4 .product-wrap a .title:after {content:"";display:block;width:30px;height:30px;background:url('/_public/images2/icon/ico_goto.svg');background-size:cover;position:absolute;top:50%;right:40px;transform:translateY(-50%);opacity:0;transition:.3s;}
#main .section4 .product-wrap a .title p {color:#FFF;font-size:28px;font-weight:700;line-height:1;}
#main .section4 .product-wrap a:hover {background:#2E2E2E;border-color:#D5DAE4;}
#main .section4 .product-wrap a:hover .img-area {background-size:110%;}
#main .section4 .product-wrap a:hover .title {border-color:#D5DAE4;}
#main .section4 .product-wrap a:hover .title:after {opacity:1;}

#main .section5 {display:flex;width:100%;height:100vh;}
#main .section5 > div {flex:1;max-width:50%;}
#main .section5 .contact {position:relative;}
#main .section5 .contact video {width:100%;height:100%;object-fit:cover;}
#main .section5 .contact .txt-area {position:absolute;top:0;left:0;padding:200px 80px 80px;width:100%;height:100%;background:rgba(0, 0, 0, 0.75);}
#main .section5 .contact .txt-area img {display:block;width:170px;margin-bottom:100px;}
#main .section5 .contact .txt-area h4 {margin-bottom:40px;font-size:30px;}
#main .section5 .customer {display:flex;flex-wrap:wrap;align-items:center;align-content:center;padding:160px 80px 80px;}
#main .section5 .customer dl {width:100%;}
#main .section5 .customer dl + dl {margin-top:60px;padding-top:60px;border-top:1px solid #373A40;}



/* 2k 2048*1080 해상도 맞추기 */
@media all and (min-width:1921px) {
	#main .layout {max-width:calc(100% - 200px);}
	#main .section2 .text-box {bottom: 160px;}
	#main .section2 h3 {font-size:115px;margin-bottom:95px;}
	#main .section2 strong {font-size:32px;margin-bottom:30px;}
	#main .section2 p {font-size:20px;}

	#main .section3 {padding:100px 0;}
	#main .section3 .text em {margin-bottom: 50px;font-size: 22px;}
	#main .section3 .text h3 {margin-bottom:35px;font-size:50px;}
	#main .section3 .text p {font-size:19px;}
	#main .section3 .text .img-box {margin-top:90px;}
	#main .section3 .text .img-box img {height:330px;}
	#main .section3 .business .btn-wrap a {padding:103px 0 103px 50px;}

	#main .section4 {padding-top:220px;}
	#main .section4 h3 {margin-bottom:100px;font-size:45px;}
	#main .section4 .product-wrap a .img-area {height:450px;}
	#main .section4 .product-wrap a .img-area span {top:20px;right:20px;}
	#main .section4 .product-wrap a .title {padding:42px;}
	#main .section4 .product-wrap a .title:after {width:35px;height:35px;right:42px;}
	#main .section4 .product-wrap a .title p {font-size:30px;}

	#main .section5 .contact .txt-area {padding:240px 100px 100px;}
	#main .section5 .contact .txt-area img {width: 190px;}
	#main .section5 .contact .txt-area h4 {margin-bottom:45px;font-size:34px;}
	#main .section5 .customer dl + dl {margin-top:70px;padding-top:70px;}
}


@media all and (max-width:1600px) {
	#main .layout {max-width:none;}
	#main .section2 .text-box {bottom:120px;}
	#main .section3 {padding:80px 0 40px;}
	#main .section3 .text .img-box img {height:255px;}
	#main .section3 .business .btn-wrap a {padding:70px 0 70px 40px;}
	#main .section4 {padding-top: 160px;}
	#main .section4 h3 {margin-bottom:60px;}
	#main .section4 .product-wrap a .title {padding:30px 40px;}
	#main .section4 .product-wrap a .title p {font-size:25px;}
}


@media all and (max-width:1400px) {
	#main .section3 {padding: 80px 0 20px;}
	#main .section3 .text .img-box {gap:10px;}
	#main .section3 .text .img-box img {height:200px;}
	#main .section3 .business .btn-wrap a {padding:55px 0 55px 40px;}
	#main .section4 {padding-top:140px;}
	#main .section4 h3 {margin-bottom:50px;}
	#main .section4 .product-wrap a .img-area {height:292px;}

}

@media all and (max-width:1280px) {

	.main-pagination {gap:8px;}
	.main-pagination button:before {width:15px;}
	.main-pagination button:after {font-size:16px;}
	.main-pagination button.active:before {width:30px;}

	#main-intro img {width:232px;}

	#main .section1 .mv-text img {height:50px;}
	#main .section1 .mv-text p {margin-top:10px;font-size:32px;}

	#main .section2 {background-position:50% 50%;}
	#main .section2 .text-box {bottom:80px;}
	#main .section2 h3 {font-size:76px;margin-bottom:60px;}
	#main .section2 strong {font-size:22px;margin-bottom:20px;}
	#main .section2 p {font-size:15px;}

	#main .section3 .text {width: 50%;}
	#main .section3 .text em {margin-bottom:35px;font-size:17px;}
	#main .section3 .text h3 {font-size:38px;}
	#main .section3 .text p {font-size:15px;}
	#main .section3 .text .img-box {margin-top:45px;}
	#main .section3 .text .img-box img {height:185px;}
	#main .section3 .business {width:50%;}
	#main .section3 .business .btn-wrap a {padding: 40px 0 40px 25px;}

	#main .section4 h3 {margin-bottom:45px;font-size:38px;}
	#main .section4 .product-wrap a .img-area {height:248px;}
	#main .section4 .product-wrap a .title {padding:25px 30px;}
	#main .section4 .product-wrap a .title:after {width:25px;height:25px;right:25px;}
	#main .section4 .product-wrap a .title p {font-size:22px;}

	#main .section5 .contact .txt-area {padding:180px 40px 40px;}
	#main .section5 .contact .txt-area img {width:135px;margin-bottom:60px;}
	#main .section5 .contact .txt-area h4 {margin-bottom:35px;font-size:28px;}
	#main .section5 .customer {padding:140px 40px 40px;}
	#main .section5 .customer dl + dl {margin-top:50px;padding-top:50px;}

}


@media all and (max-width:1024px) {

	#main .section3 .text em {margin-bottom:25px;}
	#main .section3 .text h3 {margin-bottom:20px;}
	#main .section3 .text .img-box {margin-top:35px;}
}


@media all and (max-width:768px) {

	.main-pagination {display:none;}

	#main-intro img {width:158px;}

	#main .section1 .mv-text img {height: 40px;}
	#main .section1 .mv-text p {margin-top:8px;font-size:22px;}

	#main .section2 {height:auto;background:url(/_public/images2/main/s2_bg_m.png) no-repeat;background-size:cover;}
	#main .section2 .layout {height:auto;}
	#main .section2 .text-box {position:relative;padding:260px 0 100px;bottom:auto;}
	#main .section2 h3 {font-size:48px;margin-bottom:50px;}
	#main .section2 strong {font-size:18px;margin-bottom:15px;}
	#main .section2 p {font-size:14px;}

	#main .section3 {height:auto;}
	#main .section3 .layout {height:auto;flex-direction:column;align-items:flex-start;}
	#main .section3 .text {width:100%;}
	#main .section3 .text em {margin-bottom:30px;font-size:16px;}
	#main .section3 .text h3 {font-size: 32px;}
	#main .section3 .text p {font-size: 14px;}
	#main .section3 .text .img-box {flex-direction: column;}
	#main .section3 .text .img-box img {height:auto;width:100%;}
	#main .section3 .business {width:100%;margin-top:40px;}
	#main .section3 .business .btn-wrap a {padding:30px 0px 30px 10px;}
	#main .section3 .business .btn-wrap a .dl-type1 {grid-template-columns: repeat(1, 150px 1fr);}

	#main .section4 {height:auto;padding-top:120px;}
	#main .section4 h3 {margin-bottom:40px;font-size:32px;}
	#main .section4 .product-wrap {grid-template-columns:repeat(1, 1fr);}
	#main .section4 .product-wrap a .title {padding:20px 25px;}
	#main .section4 .product-wrap a .title:after {width:22px;height:22px;right:20px;}
	#main .section4 .product-wrap a .title p {font-size:20px;}

	#main .section5 {flex-direction:column-reverse;height:auto;margin-top: 80px;}
	#main .section5 > div {flex:none;max-width:none;width:100%;}
	#main .section5 .contact {height:360px;}
	#main .section5 .contact .txt-area {padding:40px 20px;}
	#main .section5 .contact .txt-area img {width:100px;margin-bottom:40px;}
	#main .section5 .contact .txt-area h4 {margin-bottom:25px;font-size:24px;}
	#main .section5 .customer {padding:60px 20px;}
	#main .section5 .customer dl.dl-type1 {grid-template-columns:repeat(1, 150px 1fr);}

}