@charset "utf-8";

@import url('default.css'); /* 기본설정 */
@import url('layout.css'); /* 사이트 세부설정 */

.video { }
.video .pc { overflow: hidden; position: relative; height: calc(var(--vh, 1vh) * 100); }
.video .pc video { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%); z-index: 111; }
.video .mobile { display: none; overflow: hidden; position: relative; height: calc(var(--vh, 1vh) * 100); }
.video .mobile video { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%); z-index: 111; }

.visual { position: relative; width: 100%; }
.visual .product { overflow: hidden; position: relative; height: 1020px; }
.visual .product img { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%); z-index: 111; }
.visual .product img.mobile { display: none; }
.visual .text1 { position: absolute; top: 145px; left: 50%; margin-left: -720px; z-index: 333; }
.visual .text2 { position: absolute; top: 38%; left: 50%; margin-left: -720px; z-index: 333; }
.visual .onoff { position: absolute; top: 150px; left: 50%; display: flex; flex-wrap: wrap; justify-content: flex-end; width: 1440px; margin-left: -720px; font-size: 0; line-height: 0; z-index: 2; }
.visual .onoff .swiper-button-next, .visual .onoff .swiper-button-prev { position: unset; }
.visual .onoff .arrow { position: relative; margin-left: 60px; font-size: 0; line-height: 0; }
.visual .onoff .arrow a ~ a { margin-left: 20px; }
.visual .onoff .arrow:hover span { display: block; }
.visual .onoff .line { display: flex; align-items: center; font-size: 0; line-height: 0; }
.visual .onoff .line em { display: inline-block; width: 30px; height: 2px; background: #fff; }
.visual .onoff .line em.on { background-color: #000; }

 h2 { font-size: 55px; font-weight: 700; color: #000; line-height: 55px; }
 h2 span.color1 { color: #bd0018; }
 h2 span.color2 { color: #204d9c; }
 h2 span.color3 { color: #db4040; }
 h2 span.color4 { color: #f37f18; }
 h2 span.color5 { color: #2f88ad; }
.explan_txt { margin-top: 45px; font-size: 24px; font-weight: 300; color: #282828; line-height: 35px; }

.rnd { width: 100%; margin: 120px 0; }
.rnd .cont { display: flex; flex-wrap: wrap; gap: 45px; }
.rnd .cont li { overflow: hidden; position: relative; width: calc((100% - 90px) / 3); }
.rnd .cont li h2 { margin-top: 55px; }
.rnd .cont li .tit { position: absolute; bottom: 55px; left: 50px; font-size: 22px; font-weight: 500; color: #fff; line-height: 31px; }
.rnd .cont li img { width: 100%; border-radius: 30px; }
.rnd .cont li:nth-child(2) img { border-top-left-radius: 60px; }
.rnd .cont li:nth-child(5) img { border-bottom-right-radius: 60px; }

.global { overflow: hidden; width: 100%; background: url('../images/main/global_bg.png') repeat-x left top; }
.global h2 { margin-top: 115px; }
.global .img { margin: 95px 0 100px 0; font-size: 0; line-height: 0; text-align: center; }
.global .img img { max-width: 100%; }

@media screen and (max-width: 1440px) {
	.wrap { width: 1280px; margin: 0 auto; }

	.visual .text1 { margin-left: -640px; }
	.visual .text2 { margin-left: -640px; }
	.visual .onoff { width: 1280px; margin-left: -640px; }
}

@media screen and (max-width: 1280px) {
	.wrap { width: 980px; margin: 0 auto; }

	.visual .text1 { margin-left: -490px; }
	.visual .text2 { margin-left: -490px; }
	.visual .onoff { top: 100px; width: 980px; margin-left: -490px; }

	.explan_txt br { display: none; }

	.rnd .cont li h2 { margin-top: 0; }
	.rnd .cont li .tit br { display: none; }
}

@media screen and (max-width: 980px) {
	.wrap { width: 750px; margin: 0 auto; }

	.visual .text1 { margin-left: -375px; }
	.visual .text2 { margin-left: -375px; }
	.visual .onoff { display: none; }

	.rnd .cont { gap: 40px; }
	.rnd .cont li {  width: calc((100% - 40px) / 2); }
	.rnd .cont li:nth-child(1) { width: 100%; }
	.rnd .cont li:nth-child(2) img { border-top-left-radius: 30px; }
	.rnd .cont li:nth-child(5) img { border-bottom-right-radius: 30px; }
}

@media screen and (max-width: 768px) {
	.wrap { width: auto; margin: 0 20px; }

	.video .pc { display: none; height: 200px; margin-top: 60px; }
	.video .mobile { display: block; }

	.visual .product { height: 400px; }
	.visual .product img.pc { display: none; }
	.visual .product img.mobile { display: block; }
	.visual .text1 { top: 35px; left: 20px; width: calc(100% - 40px); margin-left: 0; }
	.visual .text2 { top: 35px; left: 20px; width: calc(100% - 40px); margin-left: 0; }

	 h2 { font-size: 24px; line-height: 33px; }
	.explan_txt { margin-top: 15px; font-size: 15px; line-height: 22px; }

	.rnd { margin: 55px 0; }
	.rnd .cont { gap: 35px 20px; }
	.rnd .cont li { width: calc((100% - 20px) / 2); }
	.rnd .cont li .tit { position: static; margin-top: 15px; font-size: 14px; color: #555; line-height: 21px; text-align: center; }
	.rnd .cont li img { border-radius: 15px; }
	.rnd .cont li:nth-child(2) img { border-top-left-radius: 15px; }
	.rnd .cont li:nth-child(5) img { border-bottom-right-radius: 15px; }

	.global { background-size: 10px 100px; }
	.global h2 { margin-top: 55px; }
	.global .img { margin: 55px 0 80px 0; }
}

@media screen and (max-width: 480px) {
	.wrap { width: auto; margin: 0 20px; }

}