@charset "utf-8"; .index_wrap { line-height: 1; } 

/* section1 */
.section1 { } 
.section1 .mySwiper .swiper-slide { } 
.section1 .mySwiper .swiper-slide .slide_bg {height: 100vh;overflow: hidden;background-repeat: no-repeat;background-size: cover;background-position: 50% 50%;} 
.section1 .mySwiper .swiper-slide .visual_wrap {position: absolute;top: 33%;left: 50%;transform: translateX(-50%);width: 100%;max-width: 1525px;} 
/* .section1 .mySwiper .swiper-slide .visual_wrap:before {content: "";display: block;position: absolute;top: 0;left: 0;width: 180px;height: 175px;background: #3c84bd;z-index: -1;} */
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box {color: #fff;font-size: 24px;margin: 65px 0 0 55px;} 
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box { padding-bottom: 40px; } 
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h2 { font-size: 1.2em; line-height: 2; } 
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h1 {font-size: 84px;} 
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h1 span {display: block;font-size: 74px;font-weight: 300;}
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box p {line-height: 1.6;font-weight: 300;} 
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box p br:nth-of-type(1) {display: none;}


.index_wrap .slider_1 { background-image: url(../../img/main_visu_01.jpg); } 
.index_wrap .slider_2 { background-image: url(../../img/main_visu_02.jpg); } 
.index_wrap .slider_3 { background-image: url(../../img/main_visu_03.jpg); } 

.index_wrap .mySwiper .swiper-slide.swiper-slide-active .slide_bg { animation: zoom_in 5000ms; transition: transform 5000ms ease-in-out, opacity 1000ms ease 0s; } 
.index_wrap .mySwiper .swiper-slide.swiper-slide-active .title_box { animation: t_bottom 1000ms; transition: transform 1000ms ease-in-out, opacity 500ms ease 0s; } 
.index_wrap .mySwiper .swiper-slide.swiper-slide-active .visual_info { animation: t_bottom 1000ms; transition: transform 1000ms ease-in-out, opacity 500ms ease 0s; animation-delay: 0.2s} 

@keyframes zoom_in { 
0% { transform: scale(1.2); /* background-size: 100% 100%; */ } 
100% { transform: scale(1) rotate(0.003deg); } 
}

@keyframes t_bottom { 
0% {transform: translateY(-100px);} 
100% {transform: translateY(0%);} 
}

/* 로딩바 애니메이션 */
@-webkit-keyframes LoadingBar { 
from { width:0px; } 
to { width:160px; } 
}
@keyframes LoadingBar { 
from { width:0px; } 
to { width:160px; } 
}

/* pagnation */
.control_wrap {position: absolute;bottom: 9%;left: 0;right: 0;max-width: 1525px;width: 100%;z-index: 1;margin: 0 auto;}  
.control_wrap .swiper-pagination {text-align: right;position: relative;top: 0;} 
.control_wrap .swiper-pagination-bullet {position: relative;width: 160px;font-family: 'Oxanium', cursive;color: #fff;font-size: 18px;font-weight: 600;text-align: left;opacity: 1;margin-left: 1% !important;}
.control_wrap .swiper-pagination-bullet:before {content:"";display: block;position: absolute;top: 25px;left: 0;width: 100%;height: 8px;border: 1px solid #fff;}
.control_wrap .swiper-pagination-bullet::after {content:"";display: block;width: 160px;height: 8px;opacity: 1;position: absolute;left: 0;top: 25px;} 
.control_wrap .swiper-pagination-bullet {background: var(--swiper-pagination-bullet-inactive-color,none) !important;}
.control_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active:after {animation:LoadingBar 5s both;animation-delay: 0.3s;background: #fff;} 
:root {--swiper-theme-color: none !important;}
                                         
/* mouse wheel */
.mouse_wrap {position: absolute;bottom: -20px;left: 50%;z-index: 99;transform: translateX(-50%);max-width: 1525px;width: 100%;z-index: 2;} 
.mouse_wrap2 {position: relative;}
.mouse_wrap span {position: absolute;bottom: 80px;left: -14px;display:block;color:#fff;font-size: 16px;transform: rotate(-90deg);font-family: 'Oxanium', cursive;font-weight: 600;margin-bottom: 70px;} 
.mouse_wheel {position: absolute;bottom: 55px;left: 9px;display:block;color:#fff;transform:rotate(90deg);z-index: -1;} 
.mouse_wheel:before {content:'';width: 100px;height: 2px;background:rgba(255,255,255,0.3);position:absolute;top: 0;right: -33px;z-index: 1;} 
.mouse_wheel:after {content:'';width: 40px;height: 2px;background:#fff;position:absolute;right: 500px;top: 0;animation: scrollDown 1.8s linear infinite;z-index: 2;} 

@keyframes scrollDown { 
    0%,100% { right:25px; } 
    50% { right:-35px; } 
}

/* section common */
.section .section_wrap {padding: 60px 0px;max-width: 1525px;margin: 0 auto;width: 100%;} 
.section .section_wrap .tit_box {font-size: 24px;margin-bottom: 80px;} 
.section .section_wrap .tit_box .tit_bar {width: 35px;height: 2px;display: block;background: #bc0005;margin: 0 auto;margin-bottom: 40px;} 
.section .section_wrap .tit_box h2 {font-size: 48px;} 
.section .section_wrap .tit_box p {margin: 20px 0;line-height: 1.5; word-break: keep-all} 
.section .section_wrap .tit_box .more:hover a img {animation: btn_left 1s cubic-bezier(.7,0,.3,1); transition: cubic-bezier(.7,0,.3,1) 1s;}
/* ani */
@keyframes btn_left {
    0%,40%,to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    30% {
        -webkit-transform: translateX(40%);
        transform: translateX(40%)
    }

    60% {
        -webkit-transform: translateX(15%);
        transform: translateX(15%)
    }
}


/* square ani */
.section1 .mySwiper .swiper-slide .txt_border { display:block; width:292px; height:308px; position:absolute; top: -81px; left: -100px; opacity:0; } 
.section1 .mySwiper .swiper-slide.swiper-slide-active .txt_border { opacity:1; } 
.section1 .mySwiper .swiper-slide.swiper-slide-active .txt_border .l1,
.section1 .mySwiper .swiper-slide.swiper-slide-active .txt_border .l2,
.section1 .mySwiper .swiper-slide.swiper-slide-active .txt_border .l3,
.section1 .mySwiper .swiper-slide.swiper-slide-active .txt_border .l4 { position:absolute; background:0; width:0; height:0; animation-duration:.3s; animation-iteration-count:1; animation-timing-function:ease-in-out; animation-fill-mode:forwards } 
.section1 .mySwiper .swiper-slide.swiper-slide-active .txt_border .l1 { right:0; top:0px; width:17px; animation-name:txt_border-l1; animation-delay:.3s } 
.section1 .mySwiper .swiper-slide.swiper-slide-active .txt_border .l2 { top:0; right:2%; height:17px; animation-name:txt_border-l2; animation-delay:.8s } 
.section1 .mySwiper .swiper-slide.swiper-slide-active .txt_border .l3 { left:0; top:15px; width:17px; animation-name:txt_border-l3; animation-delay:1.2s } 
.section1 .mySwiper .swiper-slide.swiper-slide-active .txt_border .l4 { bottom:0; left:0; height:17px; animation-name:txt_border-l4; animation-delay:1.6s } 

@keyframes txt_border-l1 { 
0% { height:0; background:#fff } 
100% { height:25%; background:#fff } 
}
@keyframes txt_border-l2 { 
0% { width:0; background:#fff } 
100% { width:98%; background:#fff } 
}
@keyframes txt_border-l3 { 
0% { height:0; background:#fff } 
100% { height:90%; background:#fff } 
}
@keyframes txt_border-l4 { 
0% { width:0; background:#fff } 
100% { width:25%; background:#fff } 
}


.section .content_box {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;align-items: stretch;} 
.section .content_box article:after {content: "";display: block;opacity: 0;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgb(0 106 188 / 50%); transition: all 0.5s;}
.section .content_box article:last-child { margin-right:0; }
.section5 .content_box .content_box2 article a img {width: 100%;object-fit: cover;}
.section .content_box article {position: relative;} 
/* hover */
.section .content_box article:hover:after {opacity: 1; transition: all 0.5s;}



/* section3 메인1 */
.section3 .capa_info {position: absolute;top: 0;left: 0;width: 100%;height: 100%;transition: all 0.5s;padding: 40px;color: #fff;font-size: 30px;z-index: 1;} 
.section3 .capa_info h3, .section3 .capa_info p {margin-bottom: 20px;} 
.section3 .capa_info p, .section3 .capa_info i {opacity: 0; transition: all 0.5s;} 
.section3 .capa_info i {position: absolute;bottom: 20%;left: calc(50% - 20px);font-size: 40px;font-weight: bold;} 
.section3 .capa_info p {font-size: 20px;line-height: 1.5;text-align: center;font-weight: 300;} 
.section3 .content_box article {width: 32%;} 
.section3 .content_box article .img_box { position:relative; } 
.section3 .content_box article .img_box img {width: 100%;} 
.section3 .content_box article .img_box i { font-size: 40px; padding-bottom: 10px; color: #fff; } 
/* hover */
.section3 .content_box article:hover .capa_info {box-shadow: 6px 6px 12px #d1d1d1;text-align: center;font-size: 36px;transition: all 0.5s;padding: 30% 30px 5%;}
.section3 .content_box article:hover .capa_info p,.section3 .content_box article:hover .capa_info i {opacity: 1; transition: all 0.5s 0.2s;}



/* section2 메인2*/
.section2{background: url(../../img/main2_img1.jpg) no-repeat center / cover;max-width: 1860px;margin: 50px auto;}
.section2 .section_wrap .tit_box {font-size: 42px;text-align: center;color: #fff;margin-bottom: 0;line-height: 1.4;font-weight: 300;}
.section2 .section_wrap .tit_box .title {font-size: 24px; color: #fff; line-height: 24px; margin-bottom: 50px;}
.section2 .section_wrap .tit_box .more_btn {font-size: 24px; color: #fff; line-height: 24px; margin-top: 50px;}
.section2 .section_wrap .tit_box .more_btn a {color: #fff;}



/* section5 */
.section5 .section_wrap {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;align-items: stretch;} 
.section5 .content_box {flex-direction: column;width: 49%;}
.section5 .section_wrap .tit_box {margin-bottom: 20px;} 
.section5 .content_box article:after {background: rgb(0 106 188 / 50%);mix-blend-mode: multiply;}
/* hover */
.section5 .content_box:hover article:after {opacity: 1;}
.section5 .content_box:hover .tit_box h2 {color: #da0000;}






/*************** 반응형 ***************/

@media all and (max-width:1600px) { /* 간격 */
.section1 .mySwiper .swiper-slide .visual_wrap, .mouse_wrap, .control_wrap {padding: 0 2%}
/* .section1 .mySwiper .swiper-slide .visual_wrap:before {left: 2%;} */
/* 공통 */
.section .section_wrap {padding: 60px 2%;}
/**/
.section3 .capa_info p br {display: none;}
.section3 .capa_info i {bottom: 20%;}
}
@media (max-width: 1480px) {
.section3 .capa_info {padding: 30px;font-size: 28px;}
.section3 .content_box article:hover .capa_info {font-size: 32px;padding: 20% 30px 5%;}
.section3 .capa_info i {bottom: 10%;}
}
@media (max-width: 1300px) {
.section1 .mySwiper .swiper-slide .visual_wrap {top: 27%;}
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box p br:nth-of-type(1) {display: block;}
}
@media all and (max-width:1200px) {
.section3 .capa_info i {top: 20px;left: auto;right: 30px;} 
/**/
.section5 .section_wrap .tit_box p br {display: none;} 
}
@media all and (max-width:1075px) {
.section5 .section_wrap > div:last-child .tit_box p{margin: 20px 0 56px;}
}
@media all and (max-width:1023px) {
/* .section1 .mySwiper .swiper-slide .visual_wrap:before {width: 155px;height: 150px;} */
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box {margin: 50px 0 0 40px;}
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box {padding-bottom: 25px;}
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h1 {font-size: 74px;}
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h1 span {font-size: 64px;}
.control_wrap .swiper-pagination-bullet, .control_wrap .swiper-pagination-bullet::after {width: 140px;}
/* 로딩바 애니메이션 */
@-webkit-keyframes LoadingBar { 
from { width:0px; } 
to { width:140px; } 
}
@keyframes LoadingBar { 
from { width:0px; } 
to { width:140px; } 
}
/* 공통 */
.section .section_wrap {padding: 40px 2%;}
.section .section_wrap .tit_box h2 {font-size: 42px;}
.section .section_wrap .tit_box {font-size: 22px;margin-bottom: 60px;}
.section .section_wrap .tit_box .more a img {width: 70px;}
/**/
.section3 .content_box article {width: 100%;margin-bottom: 15px;}
.section3 .content_box article .img_box img {object-fit: cover;max-height: 280px;} 
.section3 .capa_info {text-align: center;padding: 13% 30px;font-size: 26px;}
.section3 .content_box article:hover .capa_info {font-size: 30px;padding: 6% 30px 5%;box-shadow: unset;}
.section3 .capa_info p br {display: block;}
    /* hover */
    .section3 .content_box article:hover .capa_info,
    .section3 .content_box article:hover .capa_info p,
    .section3 .content_box article:hover .capa_info i {pointer-events: none !important;}
/**/
.section2 .section_wrap {padding: 80px 2%;}
.section2 .section_wrap .tit_box {font-size: 36px;margin-bottom: 0;}
/**/
.section5 .content_box {width: 100%;}
.section5 .content_box:first-child {margin-bottom: 70px;}
.section5 .content_box .content_box2 article a img {width: 100%;height: 225px;}
.section5 .section_wrap > div:last-child .tit_box p{margin: 20px 0;}
}
@media all and (max-width:950px) {
.section3 .capa_info p br {display: none;}
}
@media all and (max-width:767px) {
.section1 .mySwiper .swiper-slide .visual_wrap {top: 31%;}
/* .section1 .mySwiper .swiper-slide .visual_wrap:before {width: 135px;height: 130px;} */
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box {font-size: 22px;margin: 45px 0 0 25px;}
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box {padding-bottom: 15px;}
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h1 {font-size: 64px;}
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h1 span {font-size: 54px;}
.mouse_wrap2 {position: relative;left: 50%;}
.mouse_wheel:before {width: 70px;}
.mouse_wheel:after {width: 25px;}
.mouse_wrap span {bottom: 35px;transform: rotate(0deg);}
.control_wrap {display: none;}
.control_wrap .swiper-pagination-bullet, .control_wrap .swiper-pagination-bullet::after {width: 140px;}
/* 로딩바 애니메이션 */
@-webkit-keyframes LoadingBar { 
from { width:0px; } 
to { width:140px; } 
}
@keyframes LoadingBar { 
from { width:0px; } 
to { width:140px; } 
}
@keyframes scrollDown { 
0%,100% { right:15px; } 
50% { right:-35px; } 
}   
/* 공통 */
.section .section_wrap {padding: 20px 2%;}
.section .section_wrap .tit_box h2 {font-size: 36px;}
.section .section_wrap .tit_box {font-size: 20px;margin-bottom: 40px;}
.section .section_wrap .tit_box p {margin: 15px 0;} 
.section .section_wrap .tit_box .more a img {width: 60px;}
/**/
.section3 .content_box article {width: 100%;}
.section3 .content_box article .img_box img {max-height: 250px;} 
.section3 .capa_info {padding: 12% 30px;font-size: 24px;}
.section3 .content_box article:hover .capa_info {font-size: 28px;padding: 8% 30px 5%;}
.section3 .capa_info h3, .section3 .capa_info p {margin-bottom: 15px;}
.section3 .capa_info p {font-size: 18px;}

.section3 .capa_info i {display: none;}
/**/
.section2 .section_wrap {padding: 60px 2%;}
.section2 .section_wrap .tit_box {font-size: 30px;margin-bottom: 0;}
}


@media all and (max-width:479px) {
.section1 .mySwiper .swiper-slide .visual_wrap {top: 31%;}
/* .section1 .mySwiper .swiper-slide .visual_wrap:before {width: 120px;height: 115px;} */
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box {font-size: 20px;margin: 45px 0 0 20px;}
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box {padding-bottom: 15px;}
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h1 {font-size: 54px;}
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h1 span {font-size: 44px;}
.mouse_wrap2 {position: relative;left: 50%;}
.mouse_wheel:before {width: 70px;}
.mouse_wheel:after {width: 25px;}
.mouse_wrap span {bottom: 35px;transform: rotate(0deg);}
.control_wrap {display: none;}
.control_wrap .swiper-pagination-bullet, .control_wrap .swiper-pagination-bullet::after {width: 140px;}
/* 로딩바 애니메이션 */
@-webkit-keyframes LoadingBar { 
from { width:0px; } 
to { width:140px; } 
}
@keyframes LoadingBar { 
from { width:0px; } 
to { width:140px; } 
}
@keyframes scrollDown { 
0%,100% { right:15px; } 
50% { right:-35px; } 
}   
/* 공통 */
.section .section_wrap .tit_box h2 {font-size: 32px;}
.section .section_wrap .tit_box p {margin: 10px 0 15px;} 
.section .section_wrap .tit_box .more a img {width: 55px;}
/**/
 
.section3 .capa_info {padding: 12% 30px;font-size: 22px;}
.section3 .content_box article:hover .capa_info {font-size: 26px;}
.section3 .capa_info h3, .section3 .capa_info p {margin-bottom: 10px;}
/**/
.section2 .section_wrap {}
.section2 .section_wrap .tit_box {font-size: 26px;margin-bottom: 0;}
}