/* 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);
}


/* swiper css */
.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide{
	text-align: center;

/* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}





/* main */
.title-box > *{ line-height: 1.3; }
.title-box span{ display: block; font-size: 18px; font-weight: 700; color: rgba(215, 24, 111, 0.8); margin-bottom: 10px; }
.title-box h3{ font-size: 70px; font-weight: 700; color: #333; }
.title-box p{ font-size: 20px; font-weight: 500; color: #555; margin-top: 20px; }
.title-box a{ margin-top: 40px; }

.viewmore{ display: flex; align-items: center; max-width: max-content; background: #D7186F; border: 1px solid #D7186F; border-radius: 999px; font-size: 20px; font-weight: 500; color: #FFF !important; padding: 17px 37px; transition: background 0.3s, border 0.3s, color 0.3s; }
.viewmore::after{ content: ""; display: inline-block; width: 24px; height: 24px; background: url("/img/main/viewmore_icon.svg") no-repeat center center / contain; margin-left: 6px; filter: invert(0) opacity(1); -webkit-filter: invert(0) opacity(1); transition: filter 0.3s; }

.viewmore:hover{ background: #FFF; border: 1px solid #DDD; color: #333 !important; }
.viewmore:hover::after{ filter: invert(1) opacity(0.8); -webkit-filter: invert(1) opacity(0.8); }

@media screen and (max-width: 1600px){
	.title-box h3{ font-size: 60px; }

	.viewmore{ padding: 15px 30px; }
}

@media screen and (max-width: 1200px){
	.title-box span{ font-size: 16px; margin-bottom: 5px; }
	.title-box h3{ font-size: 50px; }
	.title-box p{ font-size: 18px; margin-top: 10px; }
	.title-box a{ margin-top: 30px; }

	.viewmore{ font-size: 18px; padding: 12px 25px; }
	.viewmore::after{ width: 20px; height: 20px; }
}

@media screen and (max-width: 767px){
	.title-box span{ font-size: 14px; }
	.title-box h3{ font-size: 40px; }
	.title-box p{ font-size: 17px; }

	.viewmore{ font-size: 16px; padding: 12px 20px; }
}

@media screen and (max-width: 480px){
	.title-box span{ font-size: 13px; }
	.title-box h3{ font-size: 30px; }
	.title-box p{ font-size: 16px; }

	.viewmore{ font-size: 15px; padding: 10px 17px; }
}

/* sec01 */
#sec01{ position: relative; overflow: hidden; }
#sec01 .visual{ animation: bgScale 5s both; padding-top: 130px; }
#sec01 .visual .bg{ height: calc(100vh - 130px); transform: scale(1.1); transition: transform 5s; }
#sec01 .visual .bg01{ background: url("/img/main/visual01.jpg") no-repeat center center / cover; }
#sec01 .visual .bg02{ background: url("/img/main/visual02.jpg") no-repeat center center / cover; }
#sec01 .slick-active .visual .bg{ transform: scale(1); }

#sec01 .btns{ display: flex; margin-bottom: 40px; }
#sec01 .btns button{ width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; background: rgba(255, 255, 255, 0.05); border: 1px solid #FFF; border-radius: 50%; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); padding: 0; }
#sec01 .btns button:not(:last-of-type){ margin-right: 10px; }

#sec01 .text-box{ position: absolute; bottom: 120px; left: 0; right: 0; opacity: 0; transition: opacity 0.5s; }
#sec01 .text-box ul li{ display: inline-block; position: relative; z-index: 10; }
#sec01 .text-box ul li::before{ content: ""; width: 100%; height: 100%; background: #000; opacity: 0.8; border-radius: 50%; filter: blur(70px); -webkit-filter: blur(70px); position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%); }
#sec01 .text-box h2{ font-size: 50px; font-weight: 700; color: #FFF; line-height: 1.2; }
#sec01 .text-box h3{ font-size: 40px; font-weight: 700; color: #FFF; line-height: 1.2; }
#sec01 .text-box em{ color: #FF824E; }
#sec01 .text-box em.big{ font-size: 80px; }
#sec01 .text-box p{ font-size: 20px; font-weight: 500; color: #FFF; line-height: 1.6; margin-bottom: 15px; }

#sec01 .text-box.animated{ opacity: 1; }
#sec01 .text-box ul li.active{ animation: textRight 1s both; }
#sec01 .text-box ul li:not(.active){ display: none; }

@keyframes bgScale{
	0%{ transform: scale(1.1); }
	100%{ transform: scale(1); }
}

@keyframes textRight{
	0%{ transform: translateX(-60px); }
	100%{ transform: translateX(0): }
}

@media screen and (max-width: 1600px){
	#sec01 .btns button{ width: 55px; height: 55px; }

	#sec01 .text-box h2{ font-size: 40px; }
	#sec01 .text-box h3{ font-size: 35px; }
	#sec01 .text-box em.big{ font-size: 70px; }
	#sec01 .text-box p{ font-size: 18px; }
}

@media screen and (max-width: 960px){
	#sec01 .btns{ margin-bottom: 30px; }
	#sec01 .btns button{ width: 50px; height: 50px; }

	#sec01 .text-box h2{ font-size: 28px; }
	#sec01 .text-box h3{ font-size: 24px; }
	#sec01 .text-box em.big{ font-size: 50px; }
	#sec01 .text-box p{ font-size: 17px; }
}

@media screen and (max-width: 480px){
	#sec01 .btns button{ width: 45px; height: 45px; }

	#sec01 .text-box h2{ font-size: 24px; }
	#sec01 .text-box h3{ font-size: 22px; }
	#sec01 .text-box em.big{ font-size: 35px; }
	#sec01 .text-box p{ font-size: 15px; }
}


/* sec02 */
#sec02 .itemBox { width: 100%; height: 100%; display: flex; }
#sec02 .itemBox .item { position: relative; width: calc(100% / 5); height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center; }
#sec02 .itemBox .item1 { background-image: url("/img/main/sec02_bg01.jpg"); }
#sec02 .itemBox .item2 { background-image: url("/img/main/sec02_bg02.jpg"); }
#sec02 .itemBox .item3 { background-image: url("/img/main/sec02_bg03.jpg"); }
#sec02 .itemBox .item4 { background-image: url("/img/main/sec02_bg04.jpg"); }
#sec02 .itemBox .item5 { background-image: url("/img/main/sec02_bg05.jpg"); }
#sec02 .itemBox .item::before,
#sec02 .itemBox .item::after { content: ""; display: block; width: 0; height: 100%; position: absolute; top: 0; background: rgba(215, 24, 111, 0.80); transition: all 0.28s ease-in-out; }
#sec02 .itemBox .item::before { right: 50%; }
#sec02 .itemBox .item::after { left: 50%; }
#sec02 .itemBox .item > a { position: relative; z-index: 2; display: flex; width: 100%; height: 100%; padding: 65px 0 0; flex-direction: column; align-items: center; justify-content: center; color: #fff; }
#sec02 .itemBox .item > a > div { position: absolute; transition: all 0.6s; text-align: center; }
#sec02 .itemBox .item > a > .on { transform: translateY(75px); opacity: 0; }
#sec02 .itemBox .item > a .icon { height: 60px; display: flex; justify-content: center; align-items: center; }
#sec02 .itemBox .item > a .icon img { max-height: 100%; }
#sec02 .itemBox .item > a > div > span { display: block; width: 23px; height: 1px; background: rgba(255, 255, 255, 0.3); margin: 15px auto 25px; }
#sec02 .itemBox .item > a h4 { font-size: 28px; font-weight: 700; }
#sec02 .itemBox .item > a p { font-weight: 300; line-height: 1.5; margin: 20px 0 55px; }
#sec02 .itemBox .item .more { margin: 0 auto; padding: 0 16px; color: #fff; height: 45px; display: flex; align-items: center; background: url("/img/main/circle.png") no-repeat right center; }
#sec02 .itemBox .item .more span { font-size: 14px; letter-spacing: -0.020em; }
#sec02 .itemBox .item .more i { margin-left: 8px; }

#sec02 .itemBox .item:hover::before,
#sec02 .itemBox .item:hover::after { width: 50%; }
#sec02 .itemBox .item:hover > a > .on { transform: translateY(25px); opacity: 1; transition-delay: 0.3s; }
#sec02 .itemBox .item:hover > a > .off { transform: translateY(-50px); opacity: 0; }

#sec02 .itemBox .item { transform: translateX(-60px); opacity: 0; transition: all 0.8s; }
#sec02 .itemBox .item:nth-child(1) { transition-delay: 0.2s; }
#sec02 .itemBox .item:nth-child(2) { transition-delay: 0.45s; }
#sec02 .itemBox .item:nth-child(3) { transition-delay: 0.7s; }
#sec02 .itemBox .item:nth-child(4) { transition-delay: 0.95s; }
#sec02 .itemBox .item:nth-child(5) { transition-delay: 1.2s; }

#sec02.active .itemBox .item { transform: translateX(0); opacity: 1; }

@media screen and (max-width: 1200px){
	#sec02 .itemBox .item { padding: 35% 0; }
	#sec02 .itemBox .item > a { padding: 0; }
	#sec02 .itemBox .item > a h4 { font-size: 24px; }
	#sec02 .itemBox .item > a p { margin: 20px 0 35px; }
	#sec02 .itemBox .item:hover > a > .on { transform: translateY(0); }
}

@media screen and (max-width:960px) {
	#sec02 .itemBox{ flex-direction: column; }
	#sec02 .itemBox .item { width: 100%; padding: 32% 0; }
}

@media screen and (max-width: 767px){	
	#sec02 .itemBox .item{ padding: 140px 0; }
	#sec02 .itemBox .item > a .icon { height: 50px; }
	#sec02 .itemBox .item > a h4 { font-size: 20px; }
	#sec02 .itemBox .item > a p { margin: 15px 0 20px; }
}


/* sec03 */
#sec03{ display: flex; align-items: center; overflow: hidden; }
#sec03 > div{ width: 100%; }
#sec03 .flex-box{ display: flex; padding-top: 130px; }
#sec03 .text{ width: 555px; position: relative; z-index: 10; }
#sec03 .text::after{ content: ""; width: 287px; height: 405px; background: url("/img/main/record_bg.png") no-repeat center center / contain; position: absolute; bottom: 0; right: 20px; z-index: -1; }
#sec03 .title-box{ margin-bottom: 260px; }
#sec03 .btns{ display: flex; }
#sec03 .btns button{ width: 70px; height: 70px; background: #FFF; border: 1px solid #DDD; border-radius: 50%; padding: 10px; transition: background 0.3s, border 0.3s; }
#sec03 .btns button:not(:last-of-type){ margin-right: 15px; }
#sec03 .btns button img{ filter: invert(0); -webkit-filter: invert(0); transition: filter 0.3s; }

#sec03 .btns button:hover{ background: #D7186F; border: 1px solid #D7186F; }
#sec03 .btns button:hover img{ filter: invert(1) brightness(2); -webkit-filter: invert(1) brightness(2); }

#sec03 .img{ width: calc(100% - 555px); }
#sec03 .record-wrap{ width: calc(((100vw - 100%) / 2) + 100%); }
#sec03 .record-wrap .slick-slide{ width: 480px; }
#sec03 .record figure{ display: block; width: 100%; margin: 0; position: relative; left: 0; overflow: hidden; padding-bottom: 108.335%; border: 1px solid #CCC; box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.25); transform: translateY(-45px) scale(0.55); transform-origin: bottom center; transition: left 1s, transform 1s; }
#sec03 .record figure img{ width: 100%; min-height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#sec03 .record .txt{ text-align: center; margin-top: 30px; opacity: 0; transition: opacity 1s; }
#sec03 .record .txt h6{ display: -webkit-box; min-height: 3em; font-size: 24px; font-weight: 500; color: #333; line-height: 1.5; margin-bottom: 30px; white-space: normal; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#sec03 .record button{ display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: 400; color: #555; margin: 0 auto; }
#sec03 .record button::after{ content:"\e907"; display: flex; justify-content: center; align-items: center; width: 43px; height: 43px; border: 1px solid #555; border-radius: 50%; font-family: "xeicon"; font-size: 15px; font-weight: normal; box-sizing: border-box; margin-left: -7px; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 90%, 10% 90%, 10% 10%, 0 10%); -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 90%, 15% 90%, 15% 10%, 0 15%); }

#sec03 .slick-now .record figure{ left: 0; transform: translateY(0) scale(1) !important; margin-top: 0; }
#sec03 .slick-now .record .txt{ opacity: 1; }
#sec03 .slick-active .record figure{ left: 0; transform: translateY(0) scale(1) !important; margin-top: 0; }
#sec03 .slick-active .record .txt{ opacity: 1; }

#sec03 .slick-slide.next .record figure{ left: 50%; transform: translate(-35%, -45px) scale(0.55); }

#sec03 .text{ transform: translateX(-60px); opacity: 0; transition: all 0.8s; transition-delay: 0.2s; }
#sec03 .img{ transform: translateX(60px); opacity: 0; transition: all 0.8s; transition-delay: 0.2s; }

#sec03.active .text{ transform: translateX(0); opacity: 1; }
#sec03.active .img{ transform: translateX(0); opacity: 1; }

@media screen and (max-height: 800px){
	#sec03 .flex-box{ padding: 100px 0; }
}

@media screen and (max-width: 1600px){
	#sec03 .btns button{ width: 60px; height: 60px; }

	#sec03 .record-wrap .slick-slide{ width: 400px; }
	#sec03 .record .txt h6{ font-size: 20px; }
}

@media screen and (max-width: 1200px){
	#sec03 .flex-box{ padding: 80px 0; }
	#sec03 .text{ width: 450px; }

	#sec03 .btns button{ width: 55px; height: 55px; }
	#sec03 .btns button:not(:last-of-type){ margin-right: 10px; }

	#sec03 .img{ width: calc(100% - 450px); }
	#sec03 .record-wrap .slick-slide{ width: 350px; }
	#sec03 .record figure{ transform: translateY(-45px) scale(0.7); }
	#sec03 .record .txt{ margin-top: 20px; }
	#sec03 .record .txt h6{ font-size: 18px; margin-bottom: 20px; }

	#sec03 .slick-slide.next .record figure{ left: 50%; transform: translate(-35%, -45px) scale(0.7); }
}

@media screen and (max-width: 960px){
	#sec03 .flex-box{ flex-direction: column; }
	#sec03 .text{ width: 100%; }
	#sec03 .title-box{ margin-bottom: 0; }
	#sec03 .btns{ justify-content: flex-end; margin-top: 10px; }

	#sec03 .img{ width: 100%; }

	#sec03 .slick-slide.next .record figure{ left: 50%; transform: translate(-40%, -45px) scale(0.7); }
}

@media screen and (max-width: 600px){
	#sec03 .record-wrap .slick-slide{ width: 270px; }
}

@media screen and (max-width: 480px){
	#sec03 .btns button{ width: 50px; height: 50px; }

	#sec03 .record-wrap .slick-slide{ width: 250px; }
	#sec03 .record .txt h6{ font-size: 17px; }
}