@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: 40%;left: 50%;transform: translateX(-50%);width: 100%;max-width: 1730px;} 
.section1 .mySwiper .swiper-slide .visual_wrap:after {content:"";background-image: url(../../img/main_visu_t.png);position: absolute;bottom: 22%;left: 0;width: 262px;height: 355px;} 
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box {padding-left: 11.5%;color: #fff;font-size: 24px;} 
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box {padding-bottom: 65px;} 
/* .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 h2 {font-size: 82px;} 
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box p {line-height: 1.6;} 


.index_wrap .slider_1 { background-image: url(../../img/main_visu01.jpg); } 
.index_wrap .slider_2 { background-image: url(../../img/main_visu02.jpg); } 
.index_wrap .slider_3 { background-image: url(../../img/main_visu03.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; } 

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

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

/* pagnation */
.control_wrap {display: flex;position: absolute;bottom: 24%;left: 50%;transform: translateX(-50%);align-items: center;justify-content: flex-start;max-width: 1320px;width: 100%;z-index: 1;}  
.control_wrap .swiper-pagination {text-align:left;background: #f7f7f78f;position: relative;width: 220px;height: 0;} 
.control_wrap .swiper-pagination-bullet {font-size: 18px;color: #fff;transition: all 1s;position: absolute;opacity: 0;left: 0;height: 100%;text-align: right;top: 0;} 
.control_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; } 
.control_wrap .swiper-pagination-bullet::before {content:"";display: block;width: 125px;height: 4px;background-color: #f7f7f78f;left: 35px;top: 9px;opacity: 1;position: absolute;} 
.control_wrap .swiper-pagination-bullet::after {content:"";display: block;width: 125px;height: 4px;background-color: #f7f7f78f;left: 35px;top: 9px;opacity: 1;position: absolute;} 
.control_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active::after {animation:LoadingBar 5s both;animation-delay: 0.3s;left: 35px;top: 9px;height: 4px;background: #fff;position: absolute;} 
.section1 .mySwiper .control_wrap .swiper-pagination::after {display:block;content:'03';position:absolute;font-size: 16px;color: #ffffff8a;right: 21px;top: 4px;} 
 
/* 정지재생 */
.slide_btn {display: none;position:absolute;cursor: pointer;z-index: 100;left: 220px;bottom: -16px;} 
.slide_btn span { display: none; } 
.slide_btn span.on { display: inline-block; } 
.slide_btn i { color: #fff; font-size: 25px; font-weight: 100; } 

 /* mouse wheel */
.mouse_wrap {position: absolute;bottom: 78px;left: 50%;z-index: 99;transform: translateX(-50%);} 
.mouse_wrap span {display:block;color:#fff;z-index:999;font-size: 15px;margin-bottom: 30px;} 
.mouse_wheel { display:block; color:#fff; transform:rotate(90deg); } 
.mouse_wheel:before {content:'';width: 90px;height:1px;background:rgba(255,255,255,0.3);position:absolute;right: -33px;} 
.mouse_wheel:after {content:'';width: 40px;height:1px;background:#fff;position:absolute;right: 60px;top: 0;animation: scrollDown 1.5s linear infinite;} 

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

/* section common */
.section .section_wrap {text-align: center;padding: 75px 0;max-width: 1320px;margin: 0 auto;width: 100%;} 
.section .section_wrap .tit_box {font-size: 18px;color: #666;} 
.section.section2 .section_wrap .tit_box .tit_bar {display: none;} 
.section .section_wrap .tit_box .tit_bar {width: 50px;height: 1px;display: block;background: var(--main-color);margin: 0 auto;margin-bottom: 40px;transform: rotate(-60deg);} 
.section .section_wrap .tit_box h2 {font-size: 48px;font-weight: 600;color: #222;font-family: 'Play';} 
.section.section5 .section_wrap .tit_box h2 {color: #fff;} 
.section .section_wrap .tit_box p {margin: 30px 0 50px;line-height: 1.5;font-family: 'Pretendard-Regular';} 

/* 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 article { margin-right: 2vw; } 
.section .content_box article:last-child { margin-right:0; } 
.section .content_box { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: stretch; cursor: pointer; } 
/* section3 메인1 */
.section3 {} 
.section3 .capa_info {margin-top: 45px;font-size: 18px;transition: all .3s;font-family: 'Pretendard-Regular';} 
.section3 .capa_info h3 {font-size: 24px;margin-bottom: 25px;} 
.section3 .capa_info p {font-size: 1em;line-height: 1.5;} 
.section3 .content_box article { margin-right: 2vw; width: 31%; } 
.section3 .content_box article .img_box {position:relative;box-shadow: 0 0 15px #9b9b9b;} 
.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 h3 {color: var(--main-color); transition: all 0.3s;}
/* ani */
.section3 .content_box article .img_box .box {display:block;width: 100%;height: 100%;position:absolute;top: 0px;left: 0px;opacity:0;} 
.section3 .content_box article:hover .img_box .box { opacity:1; } 
.section3 .content_box article:hover .img_box .box .l1,
.section3 .content_box article:hover .img_box .box .l2,
.section3 .content_box article:hover .img_box .box .l3,
.section3 .content_box article:hover .img_box .box .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 } 
.section3 .content_box article:hover .img_box .box .l1 {right:0;top:0px;height: 3px;animation-name:box-l1;animation-delay:.3s} 
.section3 .content_box article:hover .img_box .box .l2 {top:0;left: 0px;width: 3px;animation-name:box-l2;animation-delay:.8s} 
.section3 .content_box article:hover .img_box .box .l3 {left:0;bottom: 0px;height: 3px;animation-name:box-l3;animation-delay:1.2s} 
.section3 .content_box article:hover .img_box .box .l4 {bottom:0;right:0;width: 3px;animation-name:box-l4;animation-delay:1.6s} 
@keyframes box-l1 { 
 0% { width:0; background:var(--main-color) } 
 100% { width:100%; background:var(--main-color) } 
 }
@keyframes box-l2 { 
 0% { height:0; background:var(--main-color) } 
 100% { height:100%; background:var(--main-color) } 
 }
@keyframes box-l3 { 
 0% { width:0; background:var(--main-color) } 
 100% { width:100%; background:var(--main-color) } 
 }
@keyframes box-l4 { 
 0% { height:0; background:var(--main-color) } 
 100% { height:100%; background:var(--main-color) } 
 }


/* section2 메인2*/
.section2{}
.section.section2 .section_wrap {max-width: 100%;text-align: left;justify-content: flex-start;padding: 75px 0 165px;}
.section2 .main02_list{position: relative;}
.section2 .main02_list li.main02_list_img {position: relative;transition: all .3s;}
.section2 .main02_list li.main02_list_img figure {display: none;opacity: 0;margin: 0;transition: all .3s;}
.section2 .main02_list li.main02_list_img figure img {display: block;width: 100%;max-width: 883px;height: 55vw;max-height: 665px;object-fit: cover;}
.section2 .main02_list li.main02_list_txt {position: absolute;bottom: 15%;right: -240px;}
.section2 .main02_list li.main02_list_txt a {position: relative;padding: 0 0 2% 180px;margin-bottom: 50px;transition: all .3s;text-align: right;}
.section2 .main02_list li.main02_list_txt a:last-child {margin-bottom: 0;}
.section2 .main02_list li.main02_list_txt a:before {content:"";display: block;position: absolute;bottom: 0;right: 0;width: 0px;height: 1px;background: var(--main-color);}
.section2 .main02_list li.main02_list_txt a:after {content:"";display: block;position: absolute;top: 0;right: -50px;background: url(/img/arrow.png);width: 30px;height: 30px;opacity: 0;transition: all .3s;}
.section2 .main02_list li.main02_list_txt a .main02_tit h2{font-size: 24px;font-weight: 300; transition: all .3s;}
/* on */
.section2 .main02_list li .on {display: block;opacity: 1;transition: all .3s;}
.section2 .main02_list li.main02_list_img figure.on {display: block;opacity: 1;}
.section2 .tit_box .on {display: block;opacity: 1;}
.section2 .main02_list li.main02_list_txt a.on:before {animation: border_lr ease-in-out 0.5s; animation-fill-mode:forwards; }
.section2 .main02_list li.main02_list_txt a.on:after {opacity: 1;}
.section2 .main02_list li.main02_list_txt a.on h2{font-size: 32px;font-weight: 600;color: var(--main-color);}
/* ani */
@keyframes border_lr{
	0% {width: 0;}
    100% {width: 100%;}
}

.section2 .tit_box{margin: 60px 0 0 60px;}
.section2 .tit_box h2, .section2 .tit_box p {display: none;opacity: 0;margin: 0;transition: all .3s;}


/* section5 */
.section5 { background: url(../../img/main3_bg.jpg) no-repeat center center; background-size: cover; width: 100%; height: 100%; } 
.section.section5 .section_wrap {padding: 120px 0 100px;} 
.section5 .section_wrap .tit_box { color: #fff; } 
.section5 .section_wrap .tit_box .tit_bar { background:#fff; } 
.section5 .content_box .item_box {width: 30%;border: 1px solid #fff;margin-right: 2.5vw;padding: 70px 0 55px;transition: all .3s;} 
.section5 .content_box .item_box:last-child {margin-right:0;} 
.section5 .content_box .item_box a { color:#fff } 
.section5 .content_box article { margin-right: 0; } 
.section5 .company_item_wrap { } 
.section5 .company_item_wrap .top_box { } 
.section5 .company_item_wrap .top_box .img_box { padding: 0 0 30px; } 
.section5 .company_item_wrap .top_box .img_info { font-size: 19px; } 
.section5 .company_item_wrap .top_box .img_info p:nth-child(1) {font-size: 24px;font-weight: 600;} 
.section5 .company_item_wrap .top_box .img_info p:nth-child(2) { font-size: 1.2em; font-weight: 600; line-height: 1.5; } 

.section5 .company_item_wrap .hr_line {width: 40px;height: 1px;background: #fff;display: block;margin: 25px auto 30px;} 
.section5 .company_item_wrap .bottom_box {font-size: 18px;line-height: 1.8;} 
.section5 .content_box .item_box:hover { background: rgb(255 255 255 / 31%); } 




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

/* 노트북 ~ pc */
@media (max-width: 1730px){
.section1 .mySwiper .swiper-slide .visual_wrap, .control_wrap {width: 96%;max-width: 100%;}
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box {padding-left: 200px;}   

.section2 .main02_list {width: 50%;}
.section2 .section_wrap .tit_box {width: 50%;}
}
@media (max-width: 1400px){
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h2 {font-size: 5.5vw;} 
}
@media (max-width: 1320px){
 /* 공통 */
.section .section_wrap {width: 96%;padding: 100px 0;} 

.section5 .company_item_wrap .bottom_box br {display: none;}
.section3 .content_box article {margin-right: 2.5vw;width: 30%;}
 
.section.section2 .section_wrap .tit_box p br {display: none;} 
 
.section3 .content_box article:nth-child(1) .capa_info p br {display: none;}
 
}


/* 768 - 1023: 태블릿 */
@media (max-width: 1023px){ 
/* 공통 */
.section .section_wrap .tit_box .tit_bar {margin-bottom: 25px;}
.section .section_wrap .tit_box h2 {font-size: 32px;}
.section .section_wrap .tit_box p {width: 90%;margin: 20px auto 50px;}
.section .section_wrap .tit_box p br {display: none;}
.section1 .mySwiper .swiper-slide .visual_wrap:after {bottom: 26%;width: 162px;height: 255px;background-size: 100% 100%;} 
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box {padding-left: 150px;font-size: 20px;}  
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box {padding-bottom: 5%;} 
.control_wrap {bottom: 30%;}
 
.section2 .main02_list {width: 50%;}
.section2 .main02_list li.main02_list_txt {bottom: 7%;}
.section2 .main02_list li.main02_list_txt a {margin-bottom: 10%;}
.section2 .main02_list li.main02_list_txt a .main02_tit h2 {font-size: 20px;}
.section2 .main02_list li.main02_list_txt a.on h2 {font-size: 26px;}
.section2 .main02_list li.main02_list_img figure img {object-position: left center;height: 65vw;}
.section2 .section_wrap .tit_box {width: 50%;}
 
.section3 .capa_info {font-size: 15px;margin-top: 35px;} 
.section3 .capa_info h3 {font-size: 20px;margin-bottom: 15px;}
.section3 .content_box article {margin-right: 0.5vw;width: 32%; border: 3px solid transparent}
.section3 .content_box article:hover .img_box .box {opacity: 0;}
/* hover */
.section3 .content_box article:hover {border: 3px solid var(--main-color);transition: all 0.3s;}

.section5 .company_item_wrap .top_box .img_box img {width: 80px;}
.section5 .company_item_wrap .top_box .img_info { font-size: 17px; } 
.section5 .content_box .item_box {widtH: 32%;margin-right: 0.5vw;padding: 23px 0;}
.section5 .company_item_wrap .top_box .img_info p:nth-child(1) {font-size: 20px;}
.section5 .company_item_wrap .bottom_box {font-size: 15px;}
}


/* 480 - 767: 모바일 가로 */
@media (max-width: 767px){
/* 공통 */
.section .section_wrap {padding: 80px 0;} 
.section .section_wrap .tit_box p {width: 100%;margin: 20px 0 30px;}
.section .section_wrap .tit_box p br, .section3 .capa_info p br {display: none;}
.section .section_wrap .tit_box h2 {font-size: 26px;}
.section .section_wrap .tit_box .tit_bar {margin-bottom: 20px;} 
.section .content_box, .section.section2 .section_wrap, .section2 .main02_list {flex-direction: column;}

.section1 .mySwiper .swiper-slide .visual_wrap {text-align: center;}
.section1 .mySwiper .swiper-slide .visual_wrap:after {display: none;} 
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box {padding-left: 0;font-size: 18px;} 
.control_wrap .swiper-pagination-bullet::before, .control_wrap .swiper-pagination-bullet::after {width: 100px;}
.control_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active::after {animation:LoadingBar_767 4s both; animation-delay: 0.3s;}
/* 로딩바 애니메이션 */
@-webkit-keyframes LoadingBar_767 { 
from { width:0px; } 
to { width:100px; } 
}
@keyframes LoadingBar_767 { 
from { width:0px; } 
to { width:100px; } 
}
.control_wrap .swiper-pagination {width: 195px;margin: 0 auto;}
.mouse_wrap span{margin-bottom: 10px;}
.mouse_wheel:before {width: 70px;}
.mouse_wheel:after{width: 20px;}

.section3 .content_box article {width: 100%;margin: 0 0 10px;position: relative; transition: all 0.3s;}
.section3 .content_box article a{display: flex;align-items: center;}
.section3 .content_box article a div {width: 50%;}
.section3 .content_box article .img_box {position: unset;}
.section3 .capa_info {margin-top: 0;padding: 0 5%;}
.section3 .capa_info h3 {font-size: 18px;}

.section.section2 .section_wrap {flex-wrap: wrap;}
.section2 .main02_list, .section2 .section_wrap .tit_box {width: 100%;}
.section2 .section_wrap .tit_box {margin: 5% 0 0 0;}
.section2 .main02_list li.main02_list_img {margin-bottom: 5%;}
.section2 .main02_list li.main02_list_img figure img {height: 50vw;}
.section2 .main02_list li.main02_list_txt {position: unset;margin-right: 50px;}
.section2 .main02_list li.main02_list_txt a {padding: 0 0 2% 180px;margin-bottom: 5%;}
.section2 .main02_list li.main02_list_txt a:after {background-size: 25px 25px;background-repeat: no-repeat;background-position: center;}
.section2 .main02_list li.main02_list_txt a .main02_tit h2 {font-size: 18px;}
.section2 .main02_list li.main02_list_txt a.on h2 {font-size: 24px;}

.section4 .content_box .item_box.no_visu { display:none; } 
.section4 .content_box .item_box { width: 30%; margin-right: 2vw; margin-bottom: 2vw; } 
.section4 .content_box .item_box a .item_wrap .img_info p { font-size: 15px; } 

.section5 .company_item_wrap .top_box .img_info { font-size: 15px; } 
.section5 .company_item_wrap .top_box .img_box {padding: 0 0 15px;} 
.section5 .company_item_wrap .top_box .img_box img {width: 60px;}
.section5 .company_item_wrap .top_box .img_info p:nth-child(1) {font-size: 18px;}
.section5 .content_box .item_box {padding: 30px 25px;width: 100%;margin: 0 0 10px 0;}
.section5 .content_box .item_box a > div{display: flex;align-items: center;justify-content: space-between;}
.section5 .content_box article.top_box {width: 30%;}
.section5 .company_item_wrap .bottom_box {width: 70%;}
.section5 .company_item_wrap .hr_line {width: 1px;height: 40px;margin: 20px;}
}


/* 320 - 479: 모바일 세로 */
@media (max-width: 479px) {
/* 공통 */
.section .section_wrap {padding: 60px 0;} 
.section .section_wrap .tit_box {padding-bottom: 20px;font-size: 14px;} 
.section .section_wrap .tit_box h2 {font-size: 22px;}

.section .content_box, .section3 .content_box article a {display: block;}
.control_wrap {bottom: 35%;} 
/* .slide_btn { left: 294px; bottom: -8px; }        */

.section3 .content_box article a div {width: 100%;}
.section3 .content_box article {margin: 0 0 40px 0;}                           
.section3 .content_box article .img_box {position: relative;}
.section3 .content_box article .img_box img {height: 200px;object-fit: cover;object-position: center right;}
.section3 .capa_info h3{margin-bottom: 10px;}
.section3 .capa_info {margin: 20px 0;padding: 0;}
.section3 .content_box article:nth-child(1) .capa_info p br {display: block;}  
                                        
.section4 .content_box .item_box { width: 44%; } 
.section4 .content_box .item_box a .item_wrap .img_info { padding: 0; } 
.section4 .content_box .item_box .img_box img { height: calc(100% / 1.5); } 

.section5 .content_box .item_box a > div {display: block;} 
.section5 .content_box article.top_box {display: block;margin: 0 auto;}
.section5 .content_box .item_box {padding: 20px 5%;} 
.section5 .company_item_wrap .hr_line {margin: 20px auto;width: 40px;height: 1px;} 
.section5 .company_item_wrap .bottom_box {width: 100%;}
.section5 .company_item_wrap .top_box {display: flex;align-items: center;justify-content: center;flex-direction: row;} 
}