@charset "utf-8";

.main-visual {position: relative;}
.main-visual .origin .items {position: relative; height: 100vh;}
.main-visual .origin .item {position: relative; height: 100vh;}
.main-visual .origin .item .img-box {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: -1;}
.main-visual .origin .item:nth-child(1) .img-box {background-image: url('../img/main/main_visual01.jpg');}
.main-visual .origin .item:nth-child(2) .img-box {background-image: url('../img/main/main_visual02.jpg');}
.main-visual .origin .item:nth-child(3) .img-box {background-image: url('../img/main/main_visual03.jpg');}
.main-visual .origin .item.slick-active .img-box {transform: scale(1.06); transition: all 4.5s;}
.main-visual .thumb {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 1470px; width: 100%; padding: 0 15px; margin-top: 50px; z-index: 2;}
.main-visual .thumb .text-box h2 {font-size: 68px; font-weight: 600; line-height: 1.32em; letter-spacing: -0.03em; color: #fff; margin-bottom: 30px;}
.main-visual .thumb .text-box p {font-size: 22px; line-height: 1.4em; color: #fff; margin-bottom: 70px;}
.main-visual .item.slick-active .text-box h2 {animation: text-focus-in 1.2s both 0.4s;}
.main-visual .item.slick-active .text-box p {animation: text-focus-in 1.2s both 0.6s;}
@keyframes text-focus-in {0% {filter: blur(12px); transform: translateY(60px); opacity: 0;} 100% {filter: blur(0px); transform: translateY(0px); opacity: 1;}}

.main-visual .controler-wrap {position: relative;}
.main-visual .arrows {display: flex;}
.main-visual .slick-arrow {display: block; width: 10px; height: 17px; background-repeat: no-repeat; border: 0; font-size: 0; background-color: transparent;}
.main-visual .slick-prev {background-image: url('../img/main/main_visual_btn_prev.png'); background-position: left center; margin-right: 205px;} 
.main-visual .slick-next {background-image: url('../img/main/main_visual_btn_next.png'); background-position: right center;}
.main-visual .paging {position: absolute; top: 50%; left: 46px; margin-top: -3px;}
.main-visual .slick-dots {display: flex; align-items: center; margin: 0 -11px;}
.main-visual .slick-dots li {padding: 0 11px;}
.main-visual .slick-dots button {position: relative; display: block; width: 7px; height: 7px; border: 1px solid #fff; border-radius: 3px; background: #fff; font-size: 0; overflow: hidden; transition: all 0.5s;}
.main-visual .slick-dots li.slick-active button {width: 40px; background: transparent;}
.main-visual .slick-dots button:after {position: absolute; top: 0; left: 0; content: ''; width: 0; height: 6px; background: #fff; transition: all 4s;}
.main-visual .slick-dots li.slick-active button:after {width: 100%;}
.main-visual .controler {position: absolute; top: 50%; left: 168px; margin-top: -5px;}
.main-visual .controler button {display: block; width: 10px; height: 10px; background-repeat: no-repeat; background-position: center center; border: 0; background-color: transparent;}
.main-visual .controler .btn-stop {background-image: url('../img/main/main_visual_btn_stop.png');}
.main-visual .controler .btn-play {display: none; background-image: url('../img/main/main_visual_btn_play.png');}

.sec-title h3 {opacity: 0; position: relative; font-family: 'montserrat'; font-size: 60px; font-weight: 700; line-height: 1em; color: #000; padding-top: 30px;}
.sec-title h3:before {opacity: 0; position: absolute; top: 9px; left: 0px; content: ''; width: 9px; height: 9px; background: #00aeef; border-radius: 2px;}
.sec-title h3:after {opacity: 0; position: absolute; top: 0px; left: 9px; content: ''; width: 9px; height: 9px; background: #194274; border-radius: 2px;}
.sec-title p {opacity: 0; font-size: 22px; line-height: 1.7em; color: #666; margin-top: 20px;}
.sec-title.white h3 {font-family: 'wanted sans'; font-size: 52px; color: #fff; padding-top: 37px;}
.sec-title.white p {color: #fff; margin-top: 25px;}

.fp-section.on .sec-title h3:before {animation: rotate-in-diag-2 1s both .6s;}
.fp-section.on .sec-title h3:after {animation: rotate-in-diag-2 1s both .8s;}

.main-service .sec-title {margin-bottom: 44px;}
.main-service .items {display: flex; margin: 0 -6px;}
.main-service .item {opacity: 0; width: 25%; padding: 0 6px;}
.main-service .item:nth-child(odd) {margin-top: 70px;}
.main-service .item a {position: relative; height: 464px; background-repeat: no-repeat; background-position: center center; background-size: cover; border-radius: 16px; overflow: hidden;}
.main-service .item:nth-child(1) a {background-image: url('../img/main/sec01_img01.jpg');}
.main-service .item:nth-child(2) a {background-image: url('../img/main/sec01_img02.jpg');}
.main-service .item:nth-child(3) a {background-image: url('../img/main/sec01_img03.jpg');}
.main-service .item:nth-child(4) a {background-image: url('../img/main/sec01_img04.jpg');}
.main-service .item a:after {opacity: 0; position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background: #194274; transition: all 0.3s; z-index: 1;}
.main-service .item a:hover:after {opacity: 1;}
.main-service .item .text-box {position: absolute; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; height: 100%; padding: 50px 50px 62px; z-index: 2;}
.main-service .item .icon {opacity: 0; position: absolute; top: 55px; right: 55px; width: 18px; height: 17px; background: url('../img/main/section_img_active_arrow.png') no-repeat center center;}
.main-service .item a:hover .icon {opacity: 1; top: 50px; right: 50px; transition: all 0.4s; transition-delay: 0.5s;}
.main-service .item .text {text-align: center; transform: translateY(0);  transition: all 0.6s;}
.main-service .item a:hover .text {transform: translateY(-30px); transition-delay: 0.1s;}
.main-service .item .text-box h4 {font-size: 38px; font-weight: 600; line-height: 1.26em; color: #fff;}
/* .main-service .item .text-box p {opacity: 0; height: calc(1.66em*3); font-size: 18px; line-height: 1.66em; color: rgba(255,255,255,0.8); margin-top: 30px;}
.main-service .item a:hover .text-box p {opacity: 1; transition: all 0.6s; transition-delay: 0.3s;} */
.main-service.on .sec-title h3 {animation: text-right 1s both .3s;}
.main-service.on .item:nth-child(1) {animation: text-up 1.5s both .5s;}
.main-service.on .item:nth-child(2) {animation: text-up 1.5s both 1.1s;}
.main-service.on .item:nth-child(3) {animation: text-up 1.5s both 0.9s;}
.main-service.on .item:nth-child(4) {animation: text-up 1.5s both 0.7s;}

.main-rnd {position: relative; background: #f2f9fd;}
.main-rnd:before {position: absolute; bottom: 0; left: 0; content: ''; width: 1028px; height: 348px; background: url('../img/main/sec02_bg.png') no-repeat left bottom;}
.main-rnd .cont-wrap {display: flex; justify-content: space-between;}
.main-rnd .items {display: flex; margin: 0 -20px;}
.main-rnd .item {opacity: 0; padding: 0 20px;}
.main-rnd .item:nth-child(1) {margin-top: -50px;}
.main-rnd .item:nth-child(2) {margin-top: 90px;}
.main-rnd .item a {position: relative; width: 440px; height: 410px; border-radius: 16px; overflow: hidden; background-repeat: no-repeat; background-position: center center; background-size: cover; transition: all 0.3s;}
.main-rnd .item:nth-child(1) a {background-image: url('../img/main/sec02_img01.jpg');}
.main-rnd .item:nth-child(2) a {background-image: url('../img/main/sec02_img02.jpg');}
.main-rnd .item a:before {opacity: 0; position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background: #194274; transition: all 0.4s;}
.main-rnd .item a:hover:before {opacity: 1;}
.main-rnd .item .icon {opacity: 0; position: absolute; top: 60px; right: 60px; width: 18px; height: 17px; background: url('../img/main/section_img_active_arrow.png') no-repeat center center;}
.main-rnd .item a:hover .icon {opacity: 1; top: 50px; right: 50px; transition: all 0.4s; transition-delay: 0.3s;}
.main-rnd .item .text-box {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; align-content: center; transition: all 0.3s;}
.main-rnd .item .text-box h4 {font-size: 44px; font-weight: 600; line-height: 1.22em; color: #fff; text-align: center;}
.main-rnd.on .sec-title h3 {animation: text-right 1s both .3s;}
.main-rnd.on .sec-title p {animation: text-right 1s both .5s;}
.main-rnd.on .item:nth-child(1) {animation: text-up 1.5s both .8s;}
.main-rnd.on .item:nth-child(2) {animation: text-up 1.5s both 1s;}

.main-contact .wrap {display: flex; flex-direction: column; justify-content: space-between; height: 500px; padding: 70px 70px 70px 80px; background: url('../img/main/sec03_img.jpg') no-repeat center center/cover; border-radius: 20px; overflow: hidden;}
.main-contact .btn-area a {position: relative; width: 228px; height: 70px; font-size: 18px; font-weight: 500; line-height: 66px; color: #fff; border: 2px solid #fff; border-radius: 10px; padding: 0 40px; margin: 0 0 0 auto; z-index: 2; transition: all 0.1s;}
.main-contact .btn-area a:before {position: absolute; top: 0; left: 0; content: ''; width: 0; height: 100%; background: #fff; transition: all 0.8s; z-index: -1;} 
.main-contact .btn-area a:after {position: absolute; top: 50%; margin-top: -7px; right: 40px; content: ''; width: 13px; height: 13px; background: url('../img/main/sec03_btn_arrow.png') no-repeat right center;}
.main-contact .btn-area a:hover {color: #194274; font-weight: 600;}
.main-contact .btn-area a:hover:before {width: 100%;}
.main-contact .btn-area a:hover:after {background-image: url('../img/main/sec03_btn_arrow_active.png');}
.main-contact.on .sec-title h3 {animation: text-right 1s both .3s;}
.main-contact.on .sec-title p {animation: text-right 1s both .5s;}
.main-contact.on .btn-area {animation: text-up 1s both .9s;}

@keyframes text-up {
    0% {
        transform: translateY(70px);
        opacity: 0;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}
@keyframes text-right {
    0% {
        transform: translateX(-40px);
        opacity: 0;
    }
    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}
@keyframes text-left {
    0% {
        transform: translateX(60px);
        opacity: 0;
    }
    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}
@keyframes rotate-in-diag-2 {
  0% {
    -webkit-transform: rotate3d(-1, 1, 0, -360deg);
            transform: rotate3d(-1, 1, 0, -360deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate3d(-1, 1, 0, 0deg);
            transform: rotate3d(-1, 1, 0, 0deg);
    opacity: 1;
  }
}