@charset "UTF-8";

/* common */
#wrap {overflow: hidden;}
.section {padding: var(--spacing-160) 0; background-repeat: no-repeat; background-position: center center; position: relative;}
.sec_tit {font-size: var(--font-title); font-family: var(--font-eng); color: var(--color-black); line-height: 1; letter-spacing: 0; font-weight: var(--font-wth-bk); margin: -.14em 0;}
.sec_txt {font-size: var(--font-size-18); line-height: calc(var(--font-size-18) + 10px); letter-spacing: -0.075em; margin: -.18em 0; /* font-weight: var(--font-wth-md); */}
.sec2 .sec_txt,
.sec3 .sec_txt:not(.lg) {color: rgba(255,255,255,.6) !important;}
.sec_txt.lg {font-size: var(--font-size-36); margin: 0;}
.sec_txt::before {content: ""; display: block;}
.sec_txt + .sec_txt::before {margin-top: 1.2em;}
.sec_tit + .sec_txt::before {margin-top: 0.75em;}
.sec_tit + .sec_txt.lg::before {margin-top: 1.25em}
.el_more {font-size: 14px; line-height: .8; letter-spacing: 0; display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex; white-space: nowrap; fill: var(--color-black); color: var(--color-black); font-family: var(--font-eng); width: 122px;}
.el_more .ico {display: block; overflow: hidden; margin-left: auto; padding-right: 6px;}
.el_more svg {width: 31px; margin-top: 1px;}
.el_more.ani svg {opacity: 0; animation: arrow 1.5s ease-out infinite;}
.el_more.white {color: #fff; fill: #fff}
a.el_more {padding: 1em 0;}

@media (max-width: 992px) {
	.sec_txt {line-height: calc(var(--font-size-18) + 6.6px)}
	.sec_txt + .sec_txt::before,
	.sec_tit + .sec_txt::before,
	.sec_tit + .sec_txt.lg::before {margin-top: 1.429em}
	.el_more {font-size: 13.5px; width: calc(7.155rem + 6px);}
	.el_more svg {width: 1.463rem;}
}

@media (max-width: 576px) {
	.el_more {font-size: 13px;}
}


@-webkit-keyframes arrow {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-50%);
		        transform: translateX(-50%);
	} 
	45%, 70% {
		opacity: 1;
		-webkit-transform: translateX(0);
		        transform: translateX(0);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateX(6px);
		        transform: translateX(6px);
	}
}
@keyframes arrow {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-50%);
		        transform: translateX(-50%);
	} 
	40%, 65% {
		opacity: 1;
		-webkit-transform: translateX(0);
		        transform: translateX(0);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateX(6px);
		        transform: translateX(6px);
	}
}

.main_visual {height: 100vh;}
/* @supports (-webkit-appearance:none) and (stroke-color: transparent) {
	.main_visual {height: -webkit-fill-available; }
} */
.visual_slider {height: 100%; position: relative;}
.visual_slider .swiper-slide {overflow: hidden;}
.visual_slider .img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover;}
.visual_slider .img1 {background-image: url(../../images/img/main_visual_01.jpg);}
.visual_slider .img2 {background-image: url(../../images/img/main_visual_02.jpg);}
.visual_slider .img3 {background-image: url(../../images/img/main_visual_03.jpg);}
.visual_slider .swiper-slide .img {-webkit-transform: scale(1);transform: scale(1); -webkit-transition: transform 7s linear; transition: transform 7s linear;}
/* .visual_slider .swiper-slide.on .img {-webkit-transform: scale(1.1);transform: scale(1.1);} */
.visual_slider .page {width: 37.3%; max-width: 500px; height: 3px; background: rgba(255,255,255,.4); margin-left: 2.69%; position: relative;}
.visual_slider .page .slideshow-pagination-item {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; -webkit-transform-origin: 0 0; transform-origin: 0 0; opacity: 0; -webkit-transform: scaleX(0);transform: scaleX(0);}
.visual_slider .page .slideshow-pagination-item.active {opacity: 1; -webkit-animation: pageAni 5.5s linear forwards; animation: pageAni 5.5s linear forwards;}
.visual_slider .start .page .slideshow-pagination-item.active {-webkit-animation-duration: 4s;animation-duration: 4s;} /* 처음 시작할 때 delay 속도 다른거 조정 */

@media (max-width: 992px) {
	.visual_slider .img {background-position: 60% center;}
	.visual_slider .page {margin-left: 4.8%;}
}

@media (max-width: 766px) {
	.visual_slider .img1 {background-image: url(../../images/img/main_visual_01_m.jpg);}
	.visual_slider .img2 {background-image: url(../../images/img/main_visual_02_m.jpg);}
	.visual_slider .img3 {background-image: url(../../images/img/main_visual_03_m.jpg);}
}

@-webkit-keyframes pageAni {
	0% {
		-webkit-transform: scaleX(0);
		        transform: scaleX(0);
	}
	100% {
		-webkit-transform: scaleX(1);
		        transform: scaleX(1);
	}
}
@keyframes pageAni {
	0% {
		-webkit-transform: scaleX(0);
		        transform: scaleX(0);
	}
	100% {
		-webkit-transform: scaleX(1);
		        transform: scaleX(1);
	}
}

/* .visual_content {position: absolute; top: 23.37%; left: 0; bottom: 23.37%; z-index: 10; width: 100%;} */
.visual_content {position: absolute; top: 15%; left: 0; bottom: 20.5%; z-index: 10; width: 100%;}
.visual_content .inner_md {-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1; height: 100%;}
.visual_content .item > * {opacity: 0; display: none;}
.visual_content .item.active > * {display: block; -webkit-animation: fadeUp 1.6s var(--easing_out) var(--delay) forwards; animation: fadeUp 1.6s var(--easing_out) var(--delay) forwards;}
.visual_content .copyTxt {font-size: var(--font-size-65); line-height: calc(var(--font-size-65) + 10px); letter-spacing: var(--letter-sp-lg); font-weight: var(--font-wth-bd); margin-top: -.15em; margin-bottom: .7em;}
.visual_content .copyTxt.eng {font-family: var(--font-eng); letter-spacing: -0.025em; font-size: var(--font-size-75); line-height: calc(var(--font-size-75) + 10px); margin-bottom: .45em;}
.visual_content .copyTxt .icon {display: inline-block; position: relative; padding-right: 150px;}
.visual_content .copyTxt .icon::after {content: ""; display: block; width: 130px; height: 56px; position: absolute; right: 0; top: -10px; background: url(../../images/img/main_smile.png) no-repeat 0/cover;}
.visual_content .tit {font-size: var(--font-size-30); line-height: .85; letter-spacing: 0; font-weight: var(--font-wth-bd); margin-bottom: .57em;}
.visual_content p:not(.copyTxt) {font-size: var(--font-size-17); line-height: calc(var(--font-size-17) + 10px); margin: -.35em 0;}
.visual_content .el_more {margin-top: 38px;}

.visual_slider .swiper-controls {margin-top: auto; animation-duration: 1.6s;}

@media (min-width: 993px) {
	.visual_content .item {position: absolute; top: 45.6%; transform: translateY(-50%);}
}

@media (max-width: 992px) {
	/* .visual_content {top: inherit; height: 41.4%; bottom: calc(11.46% + 88px + env(safe-area-inset-bottom));} */
	.visual_content {top: inherit; bottom: calc(8.46% + 88px + env(safe-area-inset-bottom));}
	.visual_content .copyTxt {line-height: calc(var(--font-size-65) + 3px); margin-bottom: .9em;}
	.visual_content .copyTxt.eng {line-height: calc(var(--font-size-75) + 3px);}
	.visual_content .copyTxt .icon {padding-right: 6rem;}
	.visual_content .copyTxt .icon::after {width: 5.386rem; height: 2.309rem; top: -0.719rem;}
	.visual_content p:not(.copyTxt) {line-height: calc(var(--font-size-17) + 3px); margin: -.2em 0;}
	.visual_content .tit {margin-bottom: .895em;}
	.visual_content .el_more {margin-top: 1.539rem;}

	.visual_slider .swiper-controls {margin-top: 2.463rem;}
}

@media (max-width: 576px) {
	/* .visual_content {bottom: calc(11.46% + 78px + env(safe-area-inset-bottom));} */
	.visual_content {bottom: calc(8.46% + 78px + env(safe-area-inset-bottom));}
}


/* sec1 */
.sec1  {background: #f4f4f7 url(../../images/img/main_service_bg02.png)no-repeat right bottom/cover;}
.sec1 .inner {z-index: 1;}
.service_bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;}
.service_bg::after {content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background: url(../../images/img/main_service_bg.png) no-repeat center/cover; animation: bgAni 5s ease-in-out infinite alternate-reverse; -webkit-perspective: 800px; perspective: 800px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;}
.service_img_wrap {position: absolute; right: 0; bottom: -25.8%; z-index: 5; width: 35%; max-width: 550px; overflow: hidden;}
.service_img {-webkit-perspective: 800px; perspective: 800px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; animation: imgAni 2.5s ease-in-out infinite alternate-reverse;} /* 1.5s */
.service_slider {position: relative;}
.service_slider::after {content: ""; display: block; position: absolute; left: 0; bottom: 0; top: 37.5%; width: 100%; background: #fff; box-shadow: -60px 60px 105px 0 rgba(0,0,0,0.15);}
.service_slider .swiper-slide a {display: block;}
.service_slider .swiper-slide .item {padding-top: 30px;}
.service_slider .swiper-slide .thumb {width: 100%; position: relative; box-shadow: -35px 35px 70px 0 rgba(0,0,0,0.15);}
.service_slider .swiper-slide .thumb::after {content: ""; display: block; padding-bottom: 63.8%;}
.service_slider .swiper-slide .thumb::before {content: ""; display: block; position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; background: #fff; opacity: .55; transition: opacity .5s;}
.service_slider .swiper-slide.swiper-slide-active .thumb::before,
.service_slider .swiper-slide.swiper-slide-duplicate-active .thumb::before {opacity: 0; }
.service_slider .swiper-slide .thumb img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center;}
.service_slider .swiper-controls {position: absolute; right: 0; top: var(--spacing-50); z-index: 10;}
.service_content {padding-left: 2.24%; position: relative; width: 70%; max-width: 740px;}
.service_content .item a {display: block; height: 100%; padding: var(--spacing-50) 0;}
.service_content .tit {font-size: var(--font-size-45); font-family: var(--font-eng); font-weight: var(--font-wth-bd); color: var(--color-black); line-height: .75;}
.service_content .subTit {font-size: var(--font-size-24); line-height: calc(var(--font-size-24) + 10px); color: var(--color-black); letter-spacing: var(--letter-sp-lg); font-weight: var(--font-wth-md); margin: -.35em 0;}
.service_content .tit + .subTit::before {content: ""; display: block; margin-top: .67em;}
.service_content p {margin: -.72em 0; min-height: 112px;}
.service_content .subTit + p::before {content: ""; display: block; margin-top: 2.07em;}
.service_content .item {display: none;}
.service_content .item.active {display: block; opacity: 0; -webkit-animation: vslFadeUp 1s var(--easing_out) .2s forwards;animation: vslFadeUp 1s var(--easing_out) .2s forwards;}

@media (min-width: 993px) {
	.service_slider {max-width: 900px; margin-left: 17.38%;}
	.service_slider .swiper {width: 100vw; max-width: 1870px;}
}

@media (min-width: 577px) {
	.service_slider .swiper {-webkit-transform: translateX(6.741%);transform: translateX(6.741%); padding-left: 10%; margin-left: -10%;}
	.service_slider .swiper-slide {opacity: 1; transform: scale(1);}
	.service_slider .swiper-slide.swiper-slide-duplicate-next {opacity: 0;}
	.service_slider .swiper-slide.swiper-slide-prev {opacity: 0; transform: scale(0.9); transition: opacity .3s ease, transform .3s ease;}
	.service_slider .swiper-slide.swiper-slide-active {transition: opacity .3s ease, transform .3s ease;}
}

@media (min-width: 577px) and (max-width: 992px) {
	.service_slider .swiper-slide	{width: 60vw !important;}
}

@media (max-width: 992px) {
	.sec1 {background-image: url(../../images/img/main_service_bg02_m.png);}
	.service_bg::after {background-image: url(../../images/img/main_service_bg_m.png);}
	.service_img_wrap {width: 28%; bottom: -17%;}
	.service_img { margin-right: -28%;}
	.service_slider::after,
	.service_slider .swiper-slide .thumb {box-shadow: -0.692rem 0.692rem 2.564rem 0 rgba(0,0,0,0.15);}
	.service_content {padding: 0; width: calc(100% - 13.482%); max-width: inherit;}
	.service_content p {padding-bottom: 1.54em;}
	.service_content .item a {padding-bottom: var(--spacing-60);}
	.service_content .subTit + p::before {margin-top: 1.54em;}
}

@media (max-width: 576px) {
	.service_slider::after,
	.service_slider .swiper-slide .thumb {box-shadow: -0.692rem 0.692rem 2.564rem 0 rgba(0,0,0,0.15);}
	.service_slider .swiper-slide .thumb {margin: 0 2.308rem; width: auto;}
	.service_slider .swiper-controls {right: 2.308rem;}
	.service_content {width: auto; padding: 0 2.308rem;}
}


@-webkit-keyframes bgAni {
	0%{
		-webkit-transform: scale(1) rotate(0) translate3d(0, 0, 0);
		        transform: scale(1) rotate(0) translate3d(0, 0, 0);
	}
	100% {
		-webkit-transform: scale(1.02) rotate(0.3deg) translate3d(0.1rem, 0.2rem, 0.3rem);
		        transform: scale(1.02) rotate(0.3deg) translate3d(0.1rem, 0.2rem, 0.3rem);
	}
}
@keyframes bgAni {
	0%{
		-webkit-transform: scale(1) rotate(0) translate3d(0, 0, 0);
		        transform: scale(1) rotate(0) translate3d(0, 0, 0);
	}
	100% {
		-webkit-transform: scale(1.02) rotate(0.3deg) translate3d(0.1rem, 0.2rem, 0.3rem);
		        transform: scale(1.03) rotate(0.3deg) translate3d(0.1rem, 0.2rem, 0.3rem);
	}
}

@-webkit-keyframes imgAni {
	0% {
		-webkit-transform: scale(1) rotate(0) translate3d(0, 0, 0);
		        transform: scale(1) rotate(0) translate3d(0, 0, 0);
	}
	100% {
		-webkit-transform: scale(1.03) rotate(2deg) translate3d(1em, 1rem, 0);
		        transform: scale(1.03) rotate(2deg) translate3d(1em, 1rem, 0);
	}
}
@keyframes imgAni {
	0% {
		-webkit-transform: scale(1) rotate(0) translate3d(0, 0, 0);
		        transform: scale(1) rotate(0) translate3d(0, 0, 0);
	}
	100% {
		-webkit-transform: scale(1.03) rotate(2deg) translate3d(1em, 1rem, 0);
		        transform: scale(1.03) rotate(2deg) translate3d(1em, 1rem, 0);
	}
}

@-webkit-keyframes vslFadeUp {
	0% {
		opacity: 0;
		-webkit-transform: translateY(30px);
		        transform: translateY(30px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		        transform: translateY(0);
	}
}

@keyframes vslFadeUp {
	0% {
		opacity: 0;
		-webkit-transform: translateY(30px);
		        transform: translateY(30px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		        transform: translateY(0);
	}
}

/* sec2 */
.sec2 {background-image: url(../../images/img/main_news_bg.png); background-position: center 0; background-color: var(--color-point);}
.sec2 .news_slider {margin-top: var(--spacing-30);}
.news_slider .swiper-controls {margin-bottom: var(--spacing-50);}
.news_slider .swiper-slide a {display: block;}
.news_slider .swiper-slide .thumb {width: 100%; position: relative;}
.news_slider .swiper-slide .thumb::after {content: ""; display: block; padding-bottom: 56.25%;}
.news_slider .swiper-slide .thumb img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center;}
.news_slider .swiper-slide .content {background: #fff; padding: 30px 20px 40px;} 
.news_slider .swiper-slide .subject {font-size: var(--font-size-20); letter-spacing: var(--letter-sp-lg); line-height: 1.5; font-weight: var(--font-wth-md); color: var(--color-black); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: -.3em 0; min-height: 3em;}
.news_slider .swiper-slide .date {font-size: 14px; line-height: .8; color: var(--color-gray); font-weight: var(--font-wth-sm);}
.news_slider .swiper-slide .date::before {content: ""; display: block; margin-top: 40px;}
.news_slider .swiper-slide .more {font-size: 14px; letter-spacing: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #fff; border-top: 1px solid #ccc; color: var(--color-black); fill: var(--color-black); height: 52px; padding: 0 20px; transition-property: color, background, border-color, fill; transition-duration: .3s; font-family: var(--font-eng);}
.news_slider .swiper-slide .more svg {width: 25px; margin-right: 3.41%;}
.news_slider .swiper-slide a:hover .more {background: #efefef; border-color: #efefef; color: var(--color-point); fill: var(--color-point);}

@media (max-width: 1400px) {
	.sec2 {background-size: 150% auto; background-position: 70% 0;}
}

@media (max-width: 992px) {
	.sec2 {background-image: none;}
	.sec2 .news_slider .swiper {overflow: visible;}
	.news_slider .swiper-slide .date {font-size: 13px;}
	.news_slider .swiper-slide .more {font-size: 13.5px;}
	.news_slider .swiper-slide .more svg {width: 1.463rem;}
}

@media (max-width: 576px) {
	.news_slider .swiper-slide .date {font-size: 12px;}
	.news_slider .swiper-slide .more {font-size: 13px;}
}

/* sec3 */
.sec3 {background-image: url(../../images/img/main_contact_bg.jpg); background-size: cover; height: 750px;}
.sec3 .el_btn_more {margin-top: var(--spacing-70);}

@media (max-width: 992px) {
	.sec3 {height: 540px;}
}

@media (min-width: 577px) and (max-width: 992px) {
	.sec3 {background-size: auto 110%; background-position: 60% 60%;}
}

@media (max-width: 576px) {
	.sec3 {height: 450px; background-image: url(../../images/img/main_contact_bg_m.jpg);}
}

/* popup */
.popup {--pt: 5vh; position: fixed; inset: 0; z-index: 1000; display: none;}
.popup .inner_full {padding-top: var(--pt); padding-bottom: var(--pt); height: 100%; pointer-events: none;}
.popup_content {display: inline-block; pointer-events: all; position: relative; z-index: 10; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.26);}
.popup_body {position: relative;}
.popup_download {--lt: calc((40/580) * 100%); --bt: calc((40/760) * 100%); position: absolute; left: var(--lt); right: var(--lt); bottom: var(--bt); height: calc((60/760) * 100%); z-index: 10;}
.popup_btns {display: flex; background: #fff;}
.popup_btns .el_btn {flex: 1; font-size: var(--font-size-15); padding: .7em;}
.popup_btns .el_btn + .el_btn {border-left: 1px solid #e0e0e0;}
.popup_close {position: absolute; right: 0; top: 0; width: calc((40/580) * 100%); aspect-ratio: 1; background: #fff url('../../images/common/ico_close2.svg') no-repeat center/contain; z-index: 10;}

@media (min-width: 1301px) {
	.popup .inner_full {width: 93.75%;}
}

@media (max-width: 992px){
	.popup .inner {display: flex; justify-content: center; align-items: center;}
	.popup .back {position: absolute; inset: 0; z-index: 0; background: rgba(0,0,0,.6);}
	.popup_content {max-width: 480px;}
}