/* 
	main - 공통 css 
*/
.viewmore{ display: inline-block; font-family: var(--engFont); font-size: 1.6rem; font-weight: 400; padding: 20px 45px; border-radius: 60px; transition: all 0.3s; }

/* top button */
.topBtn{ width: 23px; height: 23px; background: none; padding: 0; position: absolute; bottom: 120px; right: 40px; z-index: 50; border: 1px solid #111; border-radius: 50%; cursor: pointer; }
.topBtn::after{ content: ""; width: 23px; height: 67px; background: url("/img/common/top_button.png") no-repeat center center / auto; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); }

.topBtn:hover::after{ animation: scrollTop 1s infinite; }

.topBtn.white{ border: 1px solid #fff; }
.topBtn.white::after{ background: url("/img/common/top_button_white.png") no-repeat center center / auto; }

@keyframes scrollTop{
	0%{ top: 30px; }
	100%{ top: 8px; }
}

/* 
	main - sec01
*/
.sec01{ position: relative; }
.sec01 .visual{ height: 100vh; position: relative; overflow: hidden; }
.sec01 .visual .bg{ height: 100vh; transform: scale(1.25); transition: all 0.8s ease-in-out; }
.sec01 .visual .bg.bg01{ background: url("/img/main/main_visual01.jpg") no-repeat center center / cover; }
.sec01 .visual .bg.bg02{ background: url("/img/main/main_visual02.jpg") no-repeat center center / cover; }

.sec01 .visual .text{ position: absolute; top: 43%; left: 5.8%; transform: translateY(-50%); }
.sec01 .visual .text br.none{ display: none; }
.sec01 .visual .text > span{ font-family: var(--engFont); display: inline-block; font-size: 2rem; font-weight: 400; color: #fff; -webkit-clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%);
      clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%); transform: translateY(-50px); opacity: 0; }
.sec01 .visual .text h2{ font-size: 7rem; font-weight: 700; color: #fff; line-height: 1.2142; margin: 6% 0 7%; -webkit-clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%); clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%); transform: translateY(-50px); opacity: 0; }

/* sec01 - slick-active */
.sec01 .visual.slick-active .bg{ transform: scale(1); }
.sec01 .visual.slick-active span{ animation: titleAnimation 1.5s ease; animation-fill-mode: forwards; animation-delay: 0.3s; }
.sec01 .visual.slick-active h2{ animation: titleAnimation 1.5s ease; animation-fill-mode: forwards; animation-delay: 0.8s; }

@keyframes titleAnimation {
    0% {
      transform: translateY(-50px);
      opacity: 0;
      -webkit-clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%);
      clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%);
  }
  100% {
      transform: translateY(0);
      opacity: 1;
      -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 5%);
      clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 5%);
  }
}


/* sec01 - progress */
.sec01 .progress{ position: absolute; top: 67%; left: 5.8%; }
.sec01 .progress ul{ display: flex; margin-left: -10px; }
.sec01 .progress ul li{ display: flex; align-items: center; }
.sec01 .progress ul li span{ display: inline-block; font-family: var(--engFont); font-size: 1.6rem; font-weight: 400; color: #d8d8d8; padding: 0 10px; cursor: pointer }
.sec01 .progress ul li .progress-bar{ width: 160px; height: 1px; background: rgba(255, 255, 255, 0.3); margin: 0 10px; display: none; }
.sec01 .progress ul li .progress-bar .bar{ width: 0; height: 100%; background-color: #ffff; }

.sec01 .progress ul li.on span{ font-weight: 700; color: #fff; }
.sec01 .progress ul li.on .progress-bar{ display: block; }


/* sec01 - scroll animation */
.sec01 .scroll_box{ position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.sec01 .scroll_box ul li{ display: flex; justify-content: center; }
.sec01 .scroll_box ul li span{ display: inline-block; font-family: var(--engFont); font-size: 1.1rem; font-weight: 300; color: #fff; margin-bottom: 30px; }
.sec01 .scroll_box .scroll_bar{ width: 1px; height: 80px; background: rgba(255, 255, 255, 0.3); overflow: hidden; }
.sec01 .scroll_box .scroll_bar .scroll{ width: 100%; height: 40px; background-color: #fff; animation: scroll_animation 1.5s infinite; }

@keyframes scroll_animation{
	0%{ transform: translateY(0); opacity: 1; }
	100%{ transform: translateY(80px); opacity: 0; }
}


/* 
	main - sec02	
*/
/* sec02 - text */
.sec02 .flex-box{ display: flex; justify-content: space-between; align-items: center; margin-top: 4%; }
.sec02 .flex-box > div:not(.tab_content){ width: 25%; }
.sec02 .text h2{ font-family: var(--engFont); font-size: 7rem; font-weight: 700; color: #111; line-height: 1.1428;}
.sec02 .text p{ font-size: 1.8rem; font-weight: 400; color: #333; line-height: 1.6666; margin: 40px 0 60px; }
.sec02 .text .viewmore{ color: #111; border: 1px solid #111; }
.sec02 .text .viewmore:hover{ background-color: #e60012; border: 1px solid #e60012; color: #fff; }

/* sec02 - tab_content */
.sec02 .tab_content{ position: relative; width: 863px; /* height: 393px; */ }
.sec02 .tab_content .default, .sec02 .tab_content .zoom, .sec02 .tab_content .zoom ul li{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.sec02 .tab_content .default img{ transition: all 0.8s ease-in-out; }
.sec02 .tab_content .zoom ul li img{ opacity: 0; transform: scale(0.5); transition: all 0.8s ease-in-out; }

.sec02 .tab_content.scale .default img{ transform: scale(1.25); }
.sec02 .tab_content .zoom ul li.fade img{ opacity: 1; transform: scale(1); }


/* sec02 - tab_menu */
.sec02 .tab_menu ul li{ display: block; font-family: var(--engFont); font-size: 2.5rem; font-weight: 600; color: #e1e1e1; text-align: right; padding: 28px 0; cursor: pointer; }
.sec02 .tab_menu ul li.active{ font-size: 7rem; font-weight: 800; color: #e60012; }



/* 
	main - sec03
*/
.sec03 .main_bg{ height: 100vh; background: url("/img/main/main_bg01.jpg") no-repeat center center/ cover; }
.sec03 .text{ height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 5%; }
.sec03 .text h3{ font-size: 6rem; font-weight: 700; color: #fff; line-height: 1.25; text-align: center; }
.sec03 .text p{ font-size: 1.8rem; font-weight: 400; color: #fff; line-height: 1.6666; text-align: center; margin: 2% 0 4%; }
.sec03 .text .viewmore{  color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); }
.sec03 .text .viewmore:hover{ background-color: #e60012; border: 1px solid #e60012; color: #fff; }

/* 
	main - sec04
*/
.sec04 .text{ margin-top: 3%; text-align: center; }
.sec04 .text > h2{ font-family: var(--engFont); font-size: 7rem; font-weight: 700; color: #111; text-align: center; }
.sec04 .text > p{ font-size: 1.8rem; font-weight: 400; color: #111; text-align: center; margin: 40px 0; }

.sec04 .textCenter{ text-align: center; }
.sec04 ul li{ position: relative; border-bottom: 1px solid #ddd; padding: 40px 50px; text-align: left; } 
.sec04 ul li:first-of-type{ border-top: 1px solid #ddd; }
.sec04 ul li p{ display: inline-block; width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 2.2rem; font-weight: 500; color: #222; line-height: 1.2727; letter-spacing: -0.015em; margin-bottom: 5px; transition: all 0.3s;  }
.sec04 ul li span{ display: inline-block; width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.6rem; font-weight: 300; color: #333; letter-spacing: -0.015em; line-height: 1.75; }
.sec04 ul li button{ border: none; background: none; width: 48px; height: 27px; position: absolute; top: 50%; right: 50px; transform: translateY(-50%); background: url("/img/main/main_arrow.png") no-repeat center center / auto; }
.sec04 ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

.sec04 ul li:hover p{ color: #e60012; }
.sec04 ul li:hover button{ background: url("/img/main/main_arrow_hover.png") no-repeat center center / auto; }

.sec04 .viewmore{ color: #111; border: 1px solid #111; margin-top: 40px; } 
.sec04 .viewmore:hover{ background-color: #e60012; border: 1px solid #e60012; color: #fff; }


/* text 나타나는 효과 */
.up{ transform: translateY(80px); opacity: 0; transition: all 0.8s; /* transition-delay: 0.5s; */ }
.right{ transform: translateX(-50px); opacity: 0; transition: all 0.5s; /* transition-delay: 0.5s; */ }
.left{ transform: translateX(50px); opacity: 0; transition: all 0.5s; /* transition-delay: 0.5s; */ }
.on .up{ transform: translateY(0); opacity: 1; }
.on .right{ transform: translateX(0); opacity: 1; }
.on .left{ transform: translateX(0); opacity: 1; }
.delay{ transition-delay: 0.3s; }

/* 반응형 */
@media screen and (max-width: 1700px){
	/* main - sec02 */
	.sec02 .text{ margin-right: 3%; }
	.sec02 .text h2 font-size: 6rem; }
	.sec02 .tab_menu ul li.active{ font-size: 6rem; }
}

@media screen and (max-width: 1400px){
	.viewmore{ padding: 15px 35px; }

	/* main - sec01 */
	.sec01 .visual .text h2{ font-size: 5rem; }

	/* main - sec02 */
	.sec02 .flex-box > div:not(.tab_content){ width: 40%; }
	.sec02 .tab_menu ul li{ padding: 20px 0; }
	.sec02 .tab_menu ul li.active{ font-size: 5.5rem; }

	/* main - sec03 */
	.sec03 .text h3{ font-size: 5rem; }

	.sec04 .text > h2{ font-size: 6rem; }
}

@media screen and (max-width: 1250px){
	.topBtn{ position: fixed; right: 20px; }

	.sec02{ padding: 100px 0; }
	.sec02 .flex-box{ flex-direction: column; }
	.sec02 .flex-box > div:not(.tab_content){ width: 100%; }
	.sec02 .flex-box .text br{ display: none; }
	.sec02 .text{ text-align: center; }
	.sec02 .text p{ margin: 20px 0; }
	.sec02 .tab_content{ width: 100%; padding: 30% 0 25%; }
	.sec02 .tab_content .default, .sec02 .tab_content .zoom, .sec02 .tab_content .zoom ul li{ text-align: center; }
	.sec02 .tab_menu{ display: none; }

	.sec04{ padding: 70px 0 160px; }
}

@media screen and (max-width: 1200px){

	.sec02 .tab_content{ margin-top: 50px; }
	
	/* main - sec04 */
	.sec04 ul li{ padding: 30px 20px; }
	.sec04 ul li p{ width: calc(100% - 80px); font-size: 1.9rem; }
	.sec04 ul li span{ width: calc(100% - 80px); }
	.sec04 ul li button{ right: 20px; }
}

@media screen and (max-width: 800px){
	/* main - sec01 */
	.sec01 .visual .text{ left: 20px; padding-right: 20px; }

	/* main - sec03 */
	.sec03 .text h3{ font-size: 5rem; }
	.sec03 .text h3 br{ display: none; }
	.sec03 .text p{ margin: 20px 0 40px; }
}

@media screen and (max-width: 600px){
	.sec01 .visual .text br.none{ display: block; }
}