@charset "UTF-8";


/* html { height: 100%; overflow: hidden; } */
body { height: 100%; overflow: hidden; } 





/*---------- common ----------*/

strong {font-weight: 600;}
.flex {display: flex;justify-content: space-between;}
.page_wrap.pro .page_con .content .con .flex {flex-wrap: wrap;}
.section .content_area, footer .content_area {position: relative;max-width: 1380px;height: 100%;margin: 0 auto;}
.section .content_area .txt h2 {font-family: "Raleway", sans-serif;font-size: 52px;font-weight: 700;line-height: 1.2;transition: transform 700ms ease-in-out, opacity 700ms ease 0s;}
.section .content_area .txt h2 strong {color: #111;}
.section .content_area .txt > p {font-size: 18px;font-weight: 300;letter-spacing: -.5px;line-height: 1.4;margin-top: 25px;}
.section .content_area .txt > p br {display: none;}
.right_btn {width: 100%;max-width: 1380px;position: absolute;top: 80px;left: 0;right: 0;margin: 0 auto;z-index: 100;text-align: right;}
.right_btn button {border: none;background: transparent;color: #fff;padding: 10px 0 10px 10px;transition: all .3s;}
.right_btn button span {display: inline-block;position: relative;right: 0;vertical-align: -webkit-baseline-middle;font-family: 'Oxanium', sans-serif;font-weight: 300;letter-spacing: 3px;z-index: 10;transition: all .3s;}
.right_btn button p {display: inline-block;position: relative;width: 50px;height: 50px;border: 1px solid #fff;border-radius: 50%;}
.right_btn button p i {vertical-align: -webkit-baseline-middle;}
/* hover */
.right_btn button:hover span {right: 10px;}
.right_btn button:hover p {background: #fff;}
.right_btn button:hover p i {color: #b80000; font-weight: 600;}


/*---------- swiper ----------*/
.swiper { width: 100%; height: 100%; overflow-y: scroll !important; -ms-overflow-style: none; touch-action: pan-y; } 
.swiper::-webkit-scrollbar { display: none; width: 0 !important; } 
.swiper-slide { font-size: 18px; /* Center slide text vertically */
display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; /* display: flex; */
display: block; -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; } 
.mySwiper .swiper-slide {overflow: hidden;position: relative;} 
.mySwiper .slide_bg {width: 100%;height: 100vh;} 


/*---------- scroll event ----------*/

/* fade out -> in */
.o_in.s_event { opacity: 0; transform: translateY(0%); transition: 2s; } 
.o_in.active { opacity: 1; transform: translateX(0%); transition: 2s; } 

/* down -> up */
.d_up.s_event { opacity: 0; transform: translateY(30%); transition: 0.5s; } 
.d_up.active { opacity: 1; transform: translateX(0%); transition: 0.5s; } 

/* up  -> down */
.u_down.s_event {opacity: 0;transform: translateY(-70px);transition: 0.5s;}
.u_down.active {opacity: 1;transform: translateX(0);transition: 0.5s;}

.page_wrap .page_con .con .d_up.s_event { opacity: 0; transform: translate3d(0,100px,0); transition: 1s; } 
.page_wrap .page_con .con .d_up.active {opacity: 1;transform: translateZ(0);transition: 1s;} 


/* left -> right */
.l_right.s_event { opacity: 0; transform: translateX(-70%); transition: 0.7s; } 
.l_right.s_event.active { opacity: 1; transform: translateX(0%); transition: 0.7s; } 



/*---------- section1 ----------*/
#section1 {margin-top: 100px;} 
#section1 .mySwiper .swiper-wrapper {overflow: hidden;} 
#section1 .mySwiper .swiper-slide .slide_bg {height: calc(100vh - 100px);overflow: hidden;background-repeat: no-repeat;background-size: cover;background-position: 50% 50%;} 
#section1 .mySwiper .swiper-slide .visual_wrap {position: absolute;top: 255px;left: 0;right: 0;width: 100%;max-width: 1380px;margin: 0 auto;} 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box {color: #fff;} 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box span {display: inline-block;font-size: 36px;font-weight: 300;padding-bottom: 55px;} 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box span br {display: none;}
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h2 {font-size: 70px;font-weight: 600;line-height: 1.2;} 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h2 span { display: block; font-size: 142px; } 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h2 span:not(.white) { text-indent: 130px; } 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h2 span.white { position: relative; color: rgb(255 255 255 / 70%); } 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h2 span.white:before { content:""; display: block; position: absolute; top: -80px; left: 6px; background: url(../img/main1_1.png) no-repeat; background-size: contain; width: 100%; max-width: 310px; height: 232px; } 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h2 span.transparent { -webkit-text-stroke: 1px #fff; font-weight: 500; color: transparent; font-size: 110px; } 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box p {font-size: 22px;font-weight: 300;line-height: 1.4;margin-top: 30px;} 

#section1 .mySwiper .swiper-slide .slider_1 { background-image: url(../img/main_visual1.jpg); } 
#section1 .mySwiper .swiper-slide .slider_2 { background-image: url(../img/main_visual2.jpg); } 
#section1 .mySwiper .swiper-slide .slider_3 { background-image: url(../img/main_visual3.jpg); } 
#section1 .mySwiper .swiper-slide.swiper-slide-active .slide_bg { animation: zoom_in 5000ms; transition: transform 5000ms ease-in-out, opacity 1000ms ease 0s; } 
#section1 .mySwiper .swiper-slide.swiper-slide-active .visual_wrap .visual_txt_box .title_box h2 { animation: t_top 1000ms; transition: transform 1000ms ease-in-out, opacity 1000ms ease 0s; animation-delay: 0.2} 
@keyframes zoom_in {
0% { transform: scale(1.15); } 
100% { transform: scale(1) rotate(0.003deg); } 
}
@keyframes t_top { 
0% {opacity: 0; transform: translateY(100px);} 
100% {opacity: 1; transform: translateY(0%);} 
}

/* pagnation */
.control_wrap {position: absolute;bottom: 0;left: 0;right: 0;max-width: 1380px;width: 100%;z-index: 1;margin: 0 auto;} 
.control_wrap .pagination_wrap {margin-bottom: 28vh;} 
.control_wrap .swiper-pagination {text-align: left;position: relative;top: 0;left: 30px !important;} 
.control_wrap .swiper-pagination-bullet {position: relative;width: auto;font-size: 16px;color: rgb(255 255 255 / 50%);font-weight: 300;opacity: 1;margin-left: 1.5% !important;}
.control_wrap .swiper-pagination-bullet:first-child { margin-left: 0 !important; } 
.control_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active:before {content:"";display: block;position: absolute;top: 7px;left: 35px;width: 100%;height: 3px;background: transparent;} 
.control_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active::after {content:"";display: block;width: 110px;height: 3px;opacity: 1;position: absolute;left: 35px;top: 7px;} 
.control_wrap .swiper-pagination-bullet { background: var(--swiper-pagination-bullet-inactive-color,none) !important; } 
.control_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 145px; color: #fff; } 
.control_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active:after {animation:LoadingBar1 4.5s both;animation-delay: 0s;background: var(--main-color);} 
/* ani */
@-webkit-keyframes LoadingBar1 {
from { width:0px; } 
to { width:110px; } 
}
@keyframes LoadingBar1 {
from { width:0px; } 
to { width:110px; } 
}

/* arrow_box */
.control_wrap .arrow_box {position: absolute;top: 6px;left: 0;min-width: 290px;z-index: 11 !important;text-align: left;font-size: 0;} 
.control_wrap .arrow_box div {position: relative;display: inline-block;top: calc(100% / 2 - 8px);width: 50%;box-sizing: border-box;margin-top: 0;--swiper-navigation-size: 16px;} 
.control_wrap .arrow_box div:after {font-size: 10px;font-weight: bold;color: #fff;} 
.control_wrap .arrow_box .mv-button-prev { left: 0; } 
.control_wrap .arrow_box .mv-button-next { right: 0; z-index: 14; text-align: right; } 

/* mouse wheel */
.mouse_scroll {position: absolute;bottom: 40px;left: 50%;transform: translateX(-50%);z-index: 99;text-align: center;color: #fff;} 
.mouse_scroll i {font-size: 32px; animation: mouse_ani 1.5s ease-in-out infinite;}
.mouse_scroll span {display:block;font-size: 12px;padding-top: 20px;} 
/* mouse_ani */
@keyframes mouse_ani {
0% {transform: translateY(0px);}
50% {transform: translateY(10px);}
100% {transform: translateY(0px);}
}


/*---------- section2 ----------*/
#section2.section {margin: 170px 0;}
/**/
#section2.section .content_area .txt {margin-bottom: 70px;text-align: center;}
#section2.section .content_area .img ul {margin: 0 -17px;}
#section2.section .content_area .img ul li {position: relative;width: calc(100% / 4 - 34px);margin: 0 17px;border-radius: 15px;overflow: hidden;}
#section2.section .content_area .img ul li:before, #section2.section .content_area .img ul li a i:after {z-index: -1;}
#section2.section .content_area .img ul li:before {content:"";display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-repeat: no-repeat;background-size: cover;transition: all .3s; }
#section2.section .content_area .img ul li:nth-child(1):before {background-image: url('/img/main2_1.png');}
#section2.section .content_area .img ul li:nth-child(2):before {background-image: url('/img/main2_2.png');}
#section2.section .content_area .img ul li:nth-child(3):before {background-image: url('/img/main2_3.png');}
#section2.section .content_area .img ul li:nth-child(4):before {background-image: url('/img/main2_4.png');}
#section2.section .content_area .img ul li a {display: flex;justify-content: space-between;width: 100%;height: 404px;flex-direction: column;padding: 20px 20px 40px;transition: all .3s;}
#section2.section .content_area .img ul li a i {position: relative;align-self: flex-end;color: #fff;width: 58px;height: 58px;border: 1px solid #fff;border-radius: 50%;line-height: 58px;text-align: center;font-weight: 600;font-size: 22px; transition: all .6s ease-in-out;}
#section2.section .content_area .img ul li a i:after {content: "";display: block;position: absolute;top: 28px;left: -30px;width: 58px;height: 58px;background: rgb(7 65 129 / 70%);border-radius: 50%;transform: translate(50%,-50%) scale(0);transition: all .6s ease-in-out;}
#section2.section .content_area .img ul li a div {padding-left: 10px;}
#section2.section .content_area .img ul li a div span {display: block;font-size: 16px;color: rgb(255 255 255 / 70%);margin-bottom: 15px;}
#section2.section .content_area .img ul li a div h3 {font-size: 24px;font-weight: 600;color: #fff;}
/* hover */
#section2.section .content_area .img ul li:hover:before {transform: scale(1.05); transition: all .3s;}
#section2.section .content_area .img ul li:hover a i {color: var(--main-color); background: #fff; transition: all 0.3s .3s;}
#section2.section .content_area .img ul li:hover a i:after {width: 100%;height: 100vh; transform: translate(-50%,-50%) scale(100); transition: all 1.2s cubic-bezier(0.4, 0, 1, 1);}



/*---------- section3 ----------*/
#section3.section .content_area .txt {margin-bottom: 70px;text-align: center;}
#section3.section .content_area .img {max-width: 1320px;margin: 0 auto;}
#section3.section .content_area .img ul {margin: 0 -17px;}
#section3.section .content_area .img ul li {position: relative;width: calc(100% / 3 - 80px);margin: 0 40px;border-radius: 10px;border: 1px solid #dfdfdf;overflow: hidden;}
#section3.section .content_area .img ul li a {position: relative;display: flex;justify-content: space-between;width: 100%;height: 404px;flex-direction: column;padding: 50px 45px 55px;transition: all .3s;}
#section3.section .content_area .img ul li a:before, #section3.section .content_area .img ul li a i:after {z-index: -1;}
#section3.section .content_area .img ul li a:before {content:"";display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-repeat: no-repeat;background-position: bottom 55px left 45px;z-index: 1;transition: all .3s;}
#section3.section .content_area .img ul li:nth-child(1) a:before {background-image: url('/img/main3_1.png');}
#section3.section .content_area .img ul li:nth-child(2) a:before {background-image: url('/img/main3_2.png');}
#section3.section .content_area .img ul li:nth-child(3) a:before {background-image: url('/img/main3_3.png');}
#section3.section .content_area .img ul li a i {position: relative;align-self: flex-end;color: #fff;width: 58px;height: 58px;border-radius: 50%;background: var(--main-color);line-height: 58px;text-align: center;font-weight: 600;font-size: 22px;transition: all .6s ease-in-out;}
#section3.section .content_area .img ul li a i:after {content: "";display: block;position: absolute;top: 28px;left: -30px;width: 58px;height: 58px;background: var(--main-color);border-radius: 50%;transform: translate(50%,-50%) scale(0);transition: all .6s ease-in-out;}
#section3.section .content_area .img ul li a div span {display: block;color: #666;line-height: 1.8;margin-top: 15px; transition: all .3s;}
#section3.section .content_area .img ul li a div h3 {font-size: 24px;font-weight: 500;}
/* hover */
#section3.section .content_area .img ul li:hover a, #section3.section .content_area .img ul li:hover a span {color: #fff; transition: all .3s;}
#section3.section .content_area .img ul li:hover a:before {filter: brightness(100);transition: all .3s;}
#section3.section .content_area .img ul li:hover a i {color: var(--main-color); background: #fff; transition: all 0.3s .3s;}
#section3.section .content_area .img ul li:hover a i:after {width: 100%;height: 100vh; transform: translate(-50%,-50%) scale(100); transition: all 1.2s cubic-bezier(0.4, 0, 1, 1);}



/*---------- section4 ----------*/
#section4.section {position: relative;margin: 115px  0 110px;}
#section4.section:before {content:"";display: block;position: absolute;top: 0;right: 0;background: url(../img/main4_1.png) no-repeat;background-size: cover;width: 100%;max-width: 1920px;height: 416px;z-index: -1;}
#section4.section .content_area {padding: 55px 0 60px;}
/**/
#section4.section .content_area .txt {text-align: center;}
#section4.section .content_area .txt p {font-size: 24px;}
/**/
#section4.section .content_area .btn_more {width: 358px;height: 80px;margin: 120px auto 0;border: 1px solid #ccc; transition: all .3s;}
#section4.section .content_area .btn_more a {display: block;line-height: 80px;text-align: center; transition: all .3s;}
/* hover */
#section4.section .content_area .btn_more:hover {border: 1px solid transparent; background: var(--main-color); transition: all .3s;}
#section4.section .content_area .btn_more:hover a {color: #fff; transition: all .3s;}



/*---------- section5 ----------*/
#section5.section {background: var(--main-color);color: #fff;}
#section5.section .content_area {padding: 70px 0 60px;}
/**/
#section5.section .content_area .txt p {font-size: 24px;}
/**/
#section5.section .content_area .img ul {align-items: center;}
#section5.section .content_area .img ul li {width: 262px;height: 262px;border: 1px solid #fff;border-radius: 50%; transition: all .3s;}
#section5.section .content_area .img ul li:nth-child(1) {margin-right: -20px;}
#section5.section .content_area .img ul li:nth-child(2) {margin-left: -20px;}
#section5.section .content_area .img ul li a {display: block;width: 100%;height: 100%;font-size: 24px;font-weight: 500;text-align: center;padding: 45% 5%;transition: all .3s;}
/* hover */
#section5.section .content_area .img ul li:hover {background: #fff; transition: all .3s;}
#section5.section .content_area .img ul li:hover a {color: var(--main-color); transition: all .3s;}











/*---------- respon ----------*/

@media (max-width: 1380px){
/* common */
.section .content_area {width: 96%;}
.section .content_area .txt > p br {display: block;}

/* section1 */
#section1 .mySwiper .swiper-slide .visual_wrap, #section1 .mySwiper .control_wrap {width: 96%;}
.control_wrap .arrow_box {min-width: 280px;}  

/* section3 */
#section3.section .content_area .img {max-width: 100%;}
#section3.section .content_area .img ul li {width: calc(100% / 3 - 34px);margin: 0 17px;}
}


@media (max-width: 1300px){
/* section1 */ 
#section1 .mySwiper .swiper-slide .slide_bg {height: calc(100vh - 65px);background-position: left 80% center;}  
}


@media (max-width: 1023px){
/* common */
.section .content_area .txt h2 {font-size: 42px;}

/* section1 */
#section1 {margin-top: 80px;}      
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h2 {font-size: 60px;}    
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box p {font-size: 20px;} 
#section1 .mySwiper .swiper-slide .slide_bg {filter: brightness(0.5);}        

/* section2 ~ section5 */
#section2.section .content_area .img ul li a div h3, #section3.section .content_area .img ul li a div h3,
#section4.section .content_area .txt p, #section5.section .content_area .img ul li a {font-size: 20px;}

/* section2, section3 */
#section2.section .content_area .img ul, #section3.section .content_area .img ul {flex-wrap: wrap;}
#section2.section .content_area .img ul li, #section3.section .content_area .img ul li {width: calc(100% / 2 - 34px);margin: 0 17px;}
#section2.section .content_area .img ul li:nth-child(n+1):nth-child(-n+2), #section3.section .content_area .img ul li:nth-child(n+1):nth-child(-n+2) {margin: 0 17px 34px;}
/**/
#section3.section .content_area .img ul li a:before {background-position: bottom 55px left 30px;}
#section3.section .content_area .img ul li a {padding: 50px 30px 55px;}

/* section4 */
#section4.section .content_area .btn_more {width: 300px;height: 70px;margin: 100px auto 0;}
#section4.section .content_area .btn_more a {line-height: 70px;}

/* section5 */
#section5.section .content_area .img ul li {width: 220px;height: 220px;}
} 


@media all and (max-width: 767px){
/* common */
.section .content_area .txt h2 {font-size: 32px;}
.section .content_area .txt > p {font-size: 16px;}

/* section1 */
.control_wrap .pagination_wrap {margin-bottom: 41vh;} 
#section1 .mySwiper .swiper-slide .visual_wrap {top: 25vh;} 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h2 {font-size: 40px;}   
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box p {font-size: 18px;margin-top: 15px;} 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box p br {display: none;} 
#section1 .mySwiper .swiper-slide .slide_bg {background-position: right 20% center;}   
.control_wrap .arrow_box {min-width: 265px;}  

/* section2 */
#section2.section {margin: 120px 0;}


/* section2 ~ section5 */
#section2.section .content_area .img ul li a div h3, #section3.section .content_area .img ul li a div h3,
#section4.section .content_area .txt p, #section5.section .content_area .img ul li a {font-size: 18px;}

/* section2, section3 */
#section2.section .content_area .txt, #section3.section .content_area .txt {margin-bottom: 50px;}
#section2.section .content_area .img ul, #section3.section .content_area .img ul {margin: 0 -10px;}
#section2.section .content_area .img ul li, #section3.section .content_area .img ul li {width: calc(100% / 2 - 20px);margin: 0 10px;}
#section2.section .content_area .img ul li:nth-child(n+1):nth-child(-n+2), #section3.section .content_area .img ul li:nth-child(n+1):nth-child(-n+2) {margin: 0 10px 20px;}
#section2.section .content_area .img ul li a, #section3.section .content_area .img ul li a {height: 300px;}
#section2.section .content_area .img ul li a i, #section3.section .content_area .img ul li a i {width: 48px;height: 48px;line-height: 48px;}
/**/
#section2.section .content_area .img ul li a {padding: 20px 20px 30px;}
#section2.section .content_area .img ul li a div {padding-left: 0;}
#section2.section .content_area .img ul li a div span {font-size: 14px;}
/**/
#section3.section .content_area .img ul li a {padding: 35px 20px 30px;}
#section3.section .content_area .img ul li a:before {background-size: auto 50px;background-position: bottom 30px left 20px;}
#section3.section .content_area .img ul li a div span {font-size: 16px;}

/* section4 */
#section4.section {position: relative;margin: 65px  0 60px;}
#section4.section .content_area .btn_more {margin: 80px auto 0;}
#section4.section .content_area .btn_more a {font-size: 16px;}

/* section5 */
#section5.section .content_area {flex-direction: column;}
#section5.section .content_area .img {margin-top: 50px;}
#section5.section .content_area .img ul {justify-content: center;}
#section5.section .content_area .img ul li {width: 250px;}
#section5.section .content_area .img ul li a {padding: 40% 5%;}
}


@media (max-width: 479px){
/* common */
.section .content_area .txt h2 {font-size: 22px;}
.section .content_area .txt > p {font-size: 14px;}
.section .content_area .txt > p br {display: none;}

/* section1 */
#section1 {margin-top: 65px;}   
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h2 {font-size: 30px;}        
.control_wrap .pagination_wrap {display: none;}

/* section2, section3 */
#section2.section .content_area .txt, #section3.section .content_area .txt {margin-bottom: 25px;}
#section2.section .content_area .img ul, #section3.section .content_area .img ul {margin: 0 auto;}
#section2.section .content_area .img ul li, #section3.section .content_area .img ul li {width: 100%;}
#section2.section .content_area .img ul li, #section2.section .content_area .img ul li:nth-child(n+1):nth-child(-n+2),
#section3.section .content_area .img ul li, #section3.section .content_area .img ul li:nth-child(n+1):nth-child(-n+2){margin: 0 auto 10px;}
/**/
#section2.section .content_area .img ul li:before {background-position: center top 55%;}
#section2.section .content_area .img ul li a {height: 150px;}
#section2.section .content_area .img ul li a div span {font-size: 12px;}
/**/
#section3.section .content_area .img ul li a {height: 250px;}
#section3.section .content_area .img ul li a:before {background-size: auto 50px;background-position: bottom 30px left 20px;}

/* section4 */
#section4.section .content_area .btn_more {width: 100%;height: 60px;margin: 50px auto 0;}
#section4.section .content_area .btn_more a {line-height: 60px;}

/* section5 */
#section5.section .content_area .img {margin-top: 25px;}
#section5.section .content_area .img ul {flex-direction: column;}
#section5.section .content_area .img ul li:nth-child(1) {margin: 0 auto -20px;}
#section5.section .content_area .img ul li:nth-child(2) {margin: -20px auto 0;}
}