@charset "UTF-8";


body::-webkit-scrollbar {
  display: none;
} 
body {
  -ms-overflow-style: none; 
  scrollbar-width: none; 
}

.main-scroll-icon {bottom: 60px; left: 50%; transform: translateX(-50%); position: fixed; text-align: center; transition: bottom 0.8s, opacity 0.5s; z-index: 9;}
.main-scroll-icon .circle {border: 1px solid rgba(255,255,255,0.5); border-radius: 50%; display: block; height: 38px; margin: 0 auto; overflow: hidden; position: relative; width: 38px;}
.main-scroll-icon .circle:before {background-color: #d7d7d7; border-radius: 50%; content: ""; height: 4px; left: 50%; margin: -2px 0 0 -2px; position: absolute; top: 50%; width: 4px;}
.main-scroll-icon .txt {margin: 12px 0 0; color: #d7d7d7; display: block; font-family: "Montserrat"; font-size: 12px; font-weight: 400;}

.main-scroll-icon.hide {bottom: 652px; transition: bottom 0.8s ease;}
.main-scroll-icon .circle:before {animation: upDown 1.2s ease-in-out infinite;}
.main-scroll-icon.none {display: none;}

@keyframes upDown {	
	0% {opacity: 0.1; transform: translateY(-30px);}
	50% {opacity: 1; transform: translateY(50%);}
	100% {opacity: 0.1; transform: translateY(30px);}
}
.fp-sr-only {display: none;}

#fp-nav {font-family: "Montserrat";}
#fp-nav i {color: #fff;}
#fp-nav ul {position: relative;}
#fp-nav ul li {margin: 0 auto; position: relative; width: 1px;}
#fp-nav ul li:before {display: block; content: ""; position: absolute; left: 50%; transform:translateX(-50%); width: 1px; height: 100%; background-color: rgba(255, 250, 227, 0.2);}
#fp-nav ul li:last-child {display: none;}
#fp-nav ul li a {box-sizing: border-box; display: block; height: 35px; position: relative; width: 100%;}
#fp-nav ul li a:before {background-color: #fffae3; content: ""; height: 0; left: 50%; transform: translateX(-50%); position: absolute; top: 0; transition: height 0.4s; width: 100%;}
#fp-nav ul li a span {background-color: #fff; height: 100%; opacity: 0.1; transition: all 0.4s; width: 1px;}
#fp-nav ul li a.active:before {height: 100%;}
#fp-nav .cur {color: #fff; display: block; font-size: 14px; font-weight: 700; line-height: 20px; margin: 10px 0 15px;}
#fp-nav .total {color: #fff; display: block; font-size: 14px; font-weight: 700; line-height: 20px; margin-top: 24px; opacity: 0.3;}

.fp-viewing-6 #fp-nav {display: none;}

.main_slide {height: 100%;}
.main_slide .list {}
.main_slide .list li {overflow: hidden;}

.main_slide .list li .box {position: relative; height: 100vh;}
.main_slide .list li .box .text_box {position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%, -50%); text-align: center; z-index: 99;}
.main_slide .list li .box .text_box .title {font-weight: 600; font-size: 55px; line-height: 70px; color: #fff; transition: 0.8s all;}




.main_slide .list li .box .text_box .text {margin: 30px 0 0; font-weight: 400; font-size: 24px; line-height: 36px; color: #ffffff;}
.main_slide .list li .box .text_box .more_btn {display: block; width: 250px; margin: 60px auto 0; border: 1px solid #fff; border-radius: 30px; text-align: center;}
.main_slide .list li .box .text_box .more_btn .txt {display: inline-block; padding: 0 30px 0 0; background: url("/eng/images/sub/tri_arrow_icon.png") no-repeat right center; font-weight: 500; font-size: 16px; line-height: 60px; color: #ffffff;}
.main_slide .list li .box .text_box .img_box {}
.main_slide .list li .box .text_box .img_box img {}

.main_slide .list li .box .bg_img_box img { transform: scale(1.2); transition: all 8s ease}
/* .main_slide .list li .box .bg_img_box video { transform: scale(1.1); transition: all 8s ease} */
.main_slide .list li .box .bg_img_box:before {display: none; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.35); z-index: 1;}
.sec02 .main_slide .list li .box .bg_img_box:before {display: block;}

.main_slide .list li .box .bg_img_box img {position: absolute; top: 50%; left: 50%; width: auto; min-width: 100%; max-width: none; height: auto; min-height: 100%; transform: translate(-50%, -50%) scale(1.2); transition: 6s ease;}
.main_slide .list li .box .bg_img_box video {position: absolute; top: 50%; left: 50%; width: auto; min-width: 100%; max-width: none; height: auto; min-height: 100%; transform: translate(-50%, -50%) scale(1.2); transition: 6s ease;}


/* .main_slide .list li.swiper-slide-active .box .bg_img_box video {transform: translate(-50%, -50%) scale(1)} */
/* .main_slide .list li.swiper-slide-active .box .bg_img_box img {transform: translate(-50%, -50%) scale(1)} */

.com_slide_area .list li.swiper-slide-active .splitting .char {--char-index: 1; animation: slide-in .5s ease both; animation-delay: calc(.4s + (.06s * var(--char-index))); will-change: transform;	transform-origin: top left;}
.com_slide_area .list li .box .text_box .more_btn {opacity: 0; animation-delay: 0.8s; transition: 6s all; transform: translateY(-30px);}
.com_slide_area .list li.swiper-slide-active .box .text_box .more_btn {opacity: 1; transform: translateY(0);}


.fp-viewing-2 .main_slide .list li .box .bg_img_box img { transform: translate(-50%, -50%) scale(1.0);}
.fp-viewing-4 .main_slide .list li .box .bg_img_box img { transform: translate(-50%, -50%) scale(1.0);}
.fp-viewing-5 .main_slide .list li .box .bg_img_box img { transform: translate(-50%, -50%) scale(1.0);}


.sec07 {height: auto !important;}
.sec07 .fp-tableCell {height: auto !important;}

@keyframes slide-in {
	from {transform: translateY(10px) scaleY(1.5); opacity: 0;}
}
@keyframes draw-circle {	
    from {stroke-dashoffset: -70;}
	to {stroke-dashoffset: 0;}
}
@keyframes draw-circle-ios {	
    from {stroke-dashoffset: 100;}
	to {stroke-dashoffset: 50;}
}



@media screen and (max-width: 1600px) {
	.main-scroll-icon {padding: 0 10px;}
	.sec01 .main_visual_area .main_visual_slide .list li .text_box {padding: 0 30px;}
}

@media screen and (max-width: 1400px) {
	.main_slide .list li .box .text_box {padding: 0 10px;}
	.main_slide .list li .box .text_box .title {font-size: 40px; line-height: 50px;}
	.main_slide .list li .box .text_box .img_box img {width: 260px;}
	.main_slide .list li .box .text_box .text {margin: 20px 0 0; font-size: 20px; line-height: 30px;}
	.main_slide .list li .box .text_box .more_btn {width: 200px; margin: 40px auto 0;}
	.main_slide .list li .box .text_box .more_btn .txt {font-size: 14px; line-height: 50px;}


	
}

@media screen and (max-width: 1280px) {
	.main-scroll-icon {display: none;}


}
@media screen and (max-width: 1080px) {
	.main_slide .list li .box .text_box .title {font-size: 30px; line-height: 40px;}
	.main_slide .list li .box .text_box .img_box img {width: 220px;}
	.main_slide .list li .box .text_box .text {margin: 10px 0 0; font-size: 18px; line-height: 24px;}
	.main_slide .list li .box .text_box .more_btn {width: 160px; margin: 30px auto 0;}
	.main_slide .list li .box .text_box .more_btn .txt {padding: 0 25px 0 0; background-size: 6px auto; font-size: 12px; line-height: 40px;}


}


@media screen and (max-width: 767px) {
	#fp-nav {display: none;}
	.main_slide .list li .box .text_box .title {font-size: 24px; line-height: 30px;}
	.main_slide .list li .box .text_box .img_box img {width: 140px;}
	.main_slide .list li .box .text_box .text {font-size: 16px; line-height: 20px;}
	.main_slide .list li .box .text_box .more_btn {width: 130px; margin: 20px auto 0;}
	.main_slide .list li .box .text_box .more_btn .txt {padding: 0 20px 0 0; line-height: 35px;}

}


@media screen and (max-width: 480px) {
	.main_slide .list li .box .text_box .text br.mob {display: none;}
 }