/* slick-slider 필수 css */
.slick-slider{position:relative; display:block; box-sizing:border-box; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -ms-touch-action:pan-y; touch-action:pan-y; -webkit-tap-highlight-color:transparent;}
.slick-list{position:relative; display:block; overflow:hidden; margin:0; padding:0;}
.slick-list:focus{outline:none;}
.slick-list.dragging{cursor:pointer; cursor:hand;}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); -o-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0);}
.slick-track{position:relative; top:0; left:0; display:block;}
.slick-track:before,.slick-track:after{display:table; content:'';}
.slick-track:after{clear:both;}
.slick-loading .slick-track{visibility:hidden;}
.slick-slide{display:none; float:left; height:100%; min-height:1px; -webkit-transform: translate3d(0,0,0);}
[dir='rtl'] .slick-slide{float:right;}
.slick-slide img{display: block; margin:0 auto;}
.slick-slide.slick-loading img{display:none;}
.slick-slide.dragging img{pointer-events:none;}
.slick-initialized .slick-slide{display:block;}
.slick-loading .slick-slide{visibility:hidden;}
.slick-vertical .slick-slide{display:block;height:auto; border:1px solid transparent;}
.slick-arrow.slick-hidden{display:none;}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}
.slick-slide {
   -webkit-transform: translate3d(0,0,0);
}

/* index common */
.main-title h1 { font-size: 60px; line-height: 1.3; }
.main-title > h1 > span { display: block; font-weight: 400; font-size: 26px; margin: 7px 0 0; }
.main-title-br1, .main-title-br2 { display: none; }

/* quick nav */
.quick-nav { position: fixed; top: 50%; transform: translateY(-50%); right: 0; z-index: 1000; }
.quick-nav ul li { height: 45px; text-align: right; }
.quick-nav ul li a { display: flex; align-items: center; justify-content: flex-end; height: 100%; line-height: 45px; padding: 0 45px 0 0; font-weight: 500; color: #cccccc; letter-spacing: -0.025em; font-family: 'Urbanist', sans-serif; position: relative; }
.quick-nav ul li a::after { content: ""; display: inline-block; width: 30px; height: 1px; background: #dddddd; position: absolute; top: 50%; transform: translateY(-50%); right: 0; }
.quick-nav ul li a img { opacity: 0; margin: 0 5px 0 0; }
.quick-nav ul li a.on { font-weight: 600; color: #ff7a1a;  }
.quick-nav ul li a.on img { opacity: 1; }
.quick-nav ul li a.on::after { height: 2px; background: #ff7a1a; }

/* main */
#section1 { position: relative; }
.main-visual-box div, .main-video { width: 100%; }
.main-visual-box .main-visual, .main-video { overflow: hidden; position: relative; }
/*margin-top: -3.1%;*/
.main-video { width: 100%; overflow: hidden; }
.main-video video:nth-child(2) { display: none; }
/*.main-visual1 { background-image: url("/img/main/section1-bg1.jpg"); }*/
/*.main-visual2 { background-image: url("/img/main/section1-bg2.jpg"); }*/
/*.main-visual3 { background-image: url("/img/main/section1-bg2.jpg"); }*/
/*.main-visual4 { background-image: url("/img/main/section1-bg3.jpg"); }*/
/*.main-visual5 { background-image: url("/img/main/section1-bg4.jpg"); }*/
.main-visual img, .main-visual video, .main-video video { 
	width: 100%; height: auto; object-fit: cover;
}
.main-visual1.main-visual { animation-play-state: paused; }
/*.main-visual-box .main-visual::before, */
/*.main-visual-box .main-visual::after { content: ""; display: block; width: 50%; height: 100%; background: rgba(0, 0, 0, 0.8); position: absolute; transition: all 2s; z-index: 2; }*/
/*.main-visual-box .main-visual::before { top: 0; left: 0; }*/
/*.main-visual-box .main-visual::after { bottom: 0; right: 0; }*/
/*.main-visual-box .main-visual.off::before,*/
/*.main-visual-box .main-visual.off::after,*/
/*.main-visual-box .slick-active .main-visual:not(.main-visual1)::before, */
/*.main-visual-box .slick-active .main-visual:not(.main-visual1)::after { height: 0; }*/
.main-visual-box .main-title, .main-dot-box { width: 100%; max-width: 1500px; position: absolute; left: 50%; transform: translateX(-50%); box-sizing: border-box; }
.main-visual-box .main-title { height: 100%; top: 0; overflow: hidden; }
.main-visual-box .main-title h1 { position: absolute; bottom: 180px; left: -80px; opacity: 0; }
/* text-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);*/
.main-video-title { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #ffffff; }
.main-video-title h1 { font-size: 80px; margin: 0 0 15px; }
.main-video-title span { font-size: 26px; }
.main-dot-box { display: flex; align-items: center; bottom: 100px; }
.main-dot-box button { width: 26px; height: 20px; display: flex; align-items: center; justify-content: center; }
.main-dot-box button.play-btn i { font-size: 18px; color: #ffffff; }
/*.dot-count, .dot-totla { display: block; width: 16px; }*/
/*.dot-count { font-size: 14px; }*/
/*.dot-total { opacity: 0.8; }*/
/*.dot-line, .dot-line2 { width: 100px; height: 2px; background: rgba(255, 255, 255, 0.3); margin: 0 8px; position: relative; }*/
/*.dot-line > span, .dot-line2 > span { display: block; width: 0; height: 2px; background: #0cb48d; position: absolute; top: 0; left: 0; }*/
/*.dot-line2 { width: 200px; }*/
/*.dot-box-line { display: block; width: 1px; height: 10px; background: rgba(255, 255, 255, 0.2); margin: 0 10px 0 20px; }*/
#section1 .dot-line2 { width: 200px; }

/* section common */
.section-padding { padding: 160px 0 110px; box-sizing: border-box; }
.section-title { font-size: 54px; letter-spacing: -0.025em; line-height: 1.25; margin: 15px 0 0; }
.section-title-en { font-size: 22px; position: relative; }
.section-title-en::before, .section-title-en::after { content: ""; display: block; border-radius: 50%; background: #0cb48d; position: absolute; }
.section-title-en::before { width: 4px; height: 4px; top: 50%; transform: translateY(-50%); right: -10px; }
.section-title-en::after { width: 5px; height: 5px; top: 5px; right: -14px; }

/* section2 */
/*margin-top: -2%; */
#section2 { position: relative; background: #fff; z-index: 2; }

/*#section2 { background-image: url("/img/main/section2-bg.png"); background-repeat: no-repeat; background-position: top left; position: relative; z-index: -4; }*/
/*#section2 .ani-border { width: 650px; height: 755px; position: absolute; z-index: -2; }*/
/*#section2 .ani-border::before { width: 1240px; height: 1240px; top: -500px; left: -595px; }*/
/*#section2 .ani-circle { display: block; width: 1240px; height: 1240px; top: -500px; left: -595px;  }*/
/*#section2 .ani-circle::after { width: 11px; height: 11px; top: 600px; right: -6.5px; }*/
.section2-bg { width: 720px; height: 615px; background-image: url("/img/main/section2-bg.png"); background-repeat: no-repeat; background-position: top left; position: absolute; z-index: -4; }
.section2-bg .ani-border { width: 660px; height: 755px; position: absolute; z-index: -2; overflow: hidden; }
.section2-bg .ani-border::before { width: 1240px; height: 1240px; top: -500px; left: -595px; }
.section2-bg .ani-circle { display: block; width: 1240px; height: 1240px; top: -500px; left: -595px;  }
.section2-bg .ani-circle::after { width: 11px; height: 11px; top: 600px; right: -6.5px; }
.section2-box { display: flex; justify-content: space-between; padding: 160px 0 210px; }
.section2-cont { margin: 48px 0 0; }
.section2-cont h3 { font-size: 23px; line-height: 1.3; }
.section2-cont p { margin: 25px 0 45px; line-height: 1.8; }
.section2-item-box { display: flex; justify-content: center; }
.section2-item-a { display: block; width: 280px; height: 300px; }
.section2-item-a:nth-child(2) { margin: 0 30px; }
.section2-item { width: 100%; height: 100%; background: #f1f1f1; padding: 28px; box-sizing: border-box; position: relative; opacity: 0; }
.section2-item::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-repeat: no-repeat; opacity: 0; z-index: -2; }
.section2-item1::after { background-image: url("/img/main/section2-img1.jpg"); }
.section2-item2::after { background-image: url("/img/main/section2-img2.jpg"); }
.section2-item3::after { background-image: url("/img/main/section2-img3.jpg"); }
.section2-item .section2-icons { width: 55px; height: 55px; text-align: center; position: relative; }
.section2-item .section2-icons > img { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.section2-item .section2-icons > img:last-child { display: none; }
.section2-item .section2-item-img-caption { display: block; font-size: 15px; color: #ffffff; margin: 20px 0 0; opacity: 0; line-height: 150%;}
.section2-item > div.english { position: absolute; right: 0; bottom: -62px; text-align: right; }
.section2-item > div.english > span { display: block; }
.section2-item > div.english > span:first-child { font-size: 80px; margin: 0 0 15px; letter-spacing: -0.025em; }
.section2-item > div.english > span:last-child { font-size: 17px; letter-spacing: 0.05em; }
.section2-item:hover::after { opacity: 1; transition: all 0.4s; }
.section2-item:hover .section2-icons > img:first-child { display: none; }
.section2-item:hover .section2-icons > img:last-child { display: block; }
.section2-item:hover .section2-item-img-caption { opacity: 1; }

/* section3 */
.section3-box { display: flex; justify-content: space-between; padding: 60px 0 110px; }
.section3-title-mo { display: none; }
.section3-cont > a { display: block; width: 100%; }
.section3-cont { width: 100%; max-width: 66.66666666666667%; position: relative; }
.section3-item { position: absolute; top: 0; left: 0; }
.section3-item::before, .section3-item::after { content: ""; display: block; height: 100%; background: rgba(255, 255, 255, 0.2); position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.section3-item::before { width: 0; }
.section3-item::after { width: 100%; }
.section3-info { position: absolute; left: 80px; bottom: 75px; }
.section3-info.on { animation-duration: 2s; }
.section3-info h3 { font-size: 26px; margin: 0 0 20px; }
.section3-info h3 span { font-size: 22px; }
.section3-info .sub-p { opacity: 0.6; line-height: 1.7; }
.section3-title-box { margin: 100px 0 85px; width: calc(33.33% - 115px); }
.section3-list { margin: 80px 0 0; }
.section3-list ul li { height: 60px; line-height: 60px; font-weight: 200; font-size: 26px; cursor: pointer; transition: all 0.4s; }
/*.section3-list ul li::before { content: ""; display: block; width: 0; height: 1px; background: #0cb48d; position: absolute; top: 50%; transform: translateY(-50%); transition: all 0.4s; }*/
.section3-list ul li .ani-border::before { opacity: 0; transition: all 0.4s 0.3s; }
.section3-list ul li .ani-border::after { content: ""; display: block; width: 0; height: 1px; background: #0cb48d; position: absolute; top: 50%; right: 90px; }
.section3-list ul li .ani-circle::after { opacity: 0; transition: all 0.4s 0.3s; }
.section3-list ul li.on { font-weight: 700; color: #0cb48d; position: relative; }
/*.section3-list ul li.on::before { width: 130px; left: -160px; }*/
.section3-list ul li.on .ani-border { width: 60px; height: 60px; position: absolute; }
.section3-list ul li.on .ani-border::before { opacity: 1; width: 60px; height: 60px; border: 1px dashed #ffffff; top: 0; left: -200px; }
.section3-list ul li.on .ani-border::after { width: 130px; transition: all 0.4s; }
.section3-list ul li.on .ani-circle { width: 61px; height: 61px; top: 1px; left: -199px; border: 1px solid transparent; }
.section3-list ul li.on .ani-circle::after { opacity: 1; width: 7px; height: 7px; top: -4px; right: 24px; }

/* section4 */
#section4 .ani-border { width: 650px; height: 1100px; position: absolute; right: 0; z-index: -2; overflow: hidden; }
#section4 .ani-border::before { width: 1240px; height: 1240px; top: 10px; left: 10px; }
#section4 .ani-circle { display: block; width: 1240px; height: 1240px; top: 10px; left: 10px;  }
#section4 .ani-circle::after { width: 11px; height: 11px; top: -5px; left: 645px; }
.section4-title-box { padding: 90px 0 0; display: flex; align-items: flex-end; justify-content: space-between; }
.section4-title-box .view-more { width: 130px; color: #222222; box-shadow: 3px 0 8px rgba(0, 0, 0, 0.1); position: relative; }
.section4-title-box .view-more span { border-top: 1px solid #f88e41; border-right: 1px solid #f88e41; }
.section4-title-box .view-more::before { content: ""; display: block; width: 0; height: 100%; border-radius: 21px; position: absolute; top: 0; left: 0; background: #222222; }
.section4-title-box .view-more:hover { color: #ffffff; transition: all 0.4s; }
.section4-title-box .view-more:hover::before { width: 100%; transition: all 0.4s; z-index: -2; }
.section4-cont { margin: 80px 0; display: flex; align-items: center; }
.section4-item { width: 350px; height: 420px; margin: 0 33.33333333333333px 0 0; border: 1px solid #dddddd; overflow: hidden; opacity: 0; }
.section4-item:last-child { margin: 0; }
.section4-item * { transition: all 0.6s; }
.section4-item > a { display: block; width: 100%; height: 100%; position: relative; }
.section4-item > a > div { position: absolute; top: 0; left: 0; }
.section4-img { width: 100%; height: 100%; transition: all 0.4s; opacity: 0; position: relative; }
.section4-img > img { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; }
.section4-info { width: 100%; height: 100%; background: #ffffff; padding: 55px 40px; box-sizing: border-box; }
.section4-info h3 { font-size: 24px; color: #333333; margin: 25px 0; line-height: 1.4em; height: 2.8em; -webkit-line-clamp: 2; }
.section4-info .sub-p { color: #777777; line-height: 1.7em; height: 5.1em; -webkit-line-clamp: 3; }
.section4-info h3, .section4-info .sub-p { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; -webkit-box-orient: vertical; }
.section4-info .date-box { margin: 90px 0 0; }
.date-box { font-size: 15px; color: #777777; display: flex; align-items: center; }
.date-box > div { width: 15px; height: 15px; margin: -1px 4px 0 0; position: relative; }
.date-box > div > img { position: absolute; top: 0; left: 0; }
.date-box > div > img:last-child { opacity: 0; }
.section4-item:hover .section4-img::after { content: ""; display: block; width: 100%; height: 100%;  background: rgba(0, 0, 0, 0.68); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.section4-item:hover .section4-img { opacity: 1; }
.section4-item:hover .section4-info { background: transparent; }
.section4-item:hover .section4-info h3 { color: #ffffff; }
.section4-item:hover .section4-info .sub-p, .section4-item:hover .section4-info .date-box { color: rgba(255, 255, 255, 0.3); }
.section4-item:hover .date-box img:first-child { opacity: 0; }
.section4-item:hover .date-box img:last-child { opacity: 1; }


/* animation */

.main-visual-box .main-visual.off img,
.main-visual-box .slick-active .main-visual img { animation: img-scale 6s forwards; }
@keyframes img-scale {
	0% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}

.main-visual-box .slick-active .main-title h1 { animation: title-on 1.4s 0.8s forwards; }
@keyframes title-on {
	0% {
		left: -80px;
		opacity: 0;
	}
	100% {
		left: 0;
		opacity: 1;
	}
}
/*.main-visual-box .main-title.on,*/
/*.main-visual-box .slick-active .main-title:not(.main-title1) { animation: title-on 2.4s 0.8s forwards; }*/
/*@keyframes title-on {*/
/*	0% {*/
/*		opacity: 0;*/
/*		letter-spacing: 0.32em;*/
/*	}*/
/*	100% {*/
/*		opacity: 1;*/
/*		letter-spacing: -0.5px;*/
/*	}*/
/*}*/

#section2 .ani-circle { animation: section2-rotate 20s linear infinite; }
@keyframes section2-rotate {
	0% {
		transform: rotate(-10deg);
	}
	50% {
		transform: rotate(93.6deg);
	}
	100% {
		transform: rotate(-10deg);
	}
}

.section3-list ul li.on .ani-circle { animation: section3-rotate 10s linear infinite; }
@keyframes section3-rotate {
	0% {
		transform: rotate(-10deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.section3-item.off::before { animation: width100 1s both }
@keyframes width100 {
	0% {
		width: 0;
	}
	100% {
		width: 100%;
		opacity: 0;
	}
}

.section3-item.off::after { animation: width0 1s both}
@keyframes width0 {
	0% {
		width: 100%;
	}
	100% {
		width: 0;
	}
}

#section4 .ani-circle { animation: section4-rotate 20s linear infinite; }
@keyframes section4-rotate {
	0% {
		transform: rotate(0);
	}
	50% {
		transform: rotate(-140deg);
	}
	100% {
		transform: rotate(0);
	}
}