@charset "UTF-8"; 



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


/*---------- fullpage ----------*/


/*---------- common ----------*/
.more {width: 100%;max-width: 230px;height: 70px;line-height: 70px;transition: all .3s;} 
#section3.section .more {max-width: 100%;}
.more a {display: inline-flex;align-items: center;justify-content: space-around;width: 100%;border: 1px solid #6e7377;font-family: var(--font-robot);font-weight: 500;color: #6e7377;border-radius: 34px;overflow: hidden;transition: all .3s;} 
#section3.section .more a {max-width: 230px;}
.more a span:last-child {display: inline-block;width: 14px;height: 14px;margin-left: 10px;background: #6e7377;border-radius: 50%; transition: all .5s;} 

.section {overflow: hidden;} 
.section .content_area, footer .content_area {position: relative;max-width: 1610px;height: 100%;margin: 0 auto;overflow: hidden;} 
#section2.section .content_area .txt {margin-bottom: 90px;} 
#section3.section .content_area .txt, #section4.section .content_area .txt {text-align: center;margin-bottom: 80px;} 
.section .content_area .txt span {font-family: var(--font-robot);font-size: 20px;font-weight: 600;color: rgb(255 255 255 / 50%);} 
.section .content_area .txt h2 {font-size: 30px;margin-top: 20px;color: #fff;transition: transform 700ms ease-in-out, opacity 700ms ease 0s;} 
/* hover */
.more a:hover {border: 1px solid transparent;color: #fff; background: var(--sub-color); transition: all .3s;}
.more a:hover span:last-child {background: #fff; transition: all .5s;}


/*---------- s_event ----------*/
/* fade out -> in */
#section1 .content_area .top p.left.s_event { opacity: 0; transform: translateY(0%); transition: 2s; } 
#section1 .content_area .top p.left.s_event.active { opacity: 1; transform: translateX(0%); transition: 2s; transition-delay: 0.3s; } 


/*---------- swiper ----------*/
.swiper { width: 100%; height: 100%; -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; } 


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

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

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

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

/* right -> left */
.r_left.s_event { opacity: 0; transform: translateX(15%); transition-duration: 1s; } 
.r_left.s_event.active { opacity: 1; transform: translateX(0%); transition-duration: 1s; } 

/* ------------- */
.td_100 { transition-delay: 100ms; } 
.td_200 { transition-delay: 200ms; } 
.td_300 { transition-delay: 300ms; } 
.td_400 { transition-delay: 400ms; } 
.td_500 { transition-delay: 500ms; } 
.td_600 { transition-delay: 600ms; } 
.td_700 { transition-delay: 700ms; } 


/*---------- section1 ----------*/
#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: 35vh;left: 0;right: 0;width: 100%;max-width: 1610px;margin: 0 auto;} 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box {font-weight: 500;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: 72px;margin-bottom: 15px;} 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box p {font-family: var(--font-robot);font-size: 60px;} 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box p span { font-size: 72px; font-weight: 600; letter-spacing: -2px } 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info {margin-top: 40px;} 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info p {font-size: 30px;color: rgb(255 255 255 / 80%);} 
#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 .slider_4 { background-image: url(../img/main_visual4.jpg); } 
#section1 .mySwiper .swiper-slide.swiper-slide-active .slide_bg { animation: zoom_in 4500ms; transition: transform 4500ms ease-in-out, opacity 1500ms ease 0s; } 
#section1 .mySwiper .swiper-slide.swiper-slide-active .visual_wrap .visual_txt_box .title_box h2 {animation: t_top 2500ms;transition: transform 2500ms ease-in-out, opacity 2500ms ease 0s;animation-delay: 0s} 
#section1 .mySwiper .swiper-slide.swiper-slide-active .visual_wrap .visual_txt_box .title_box p { animation: t_top 2500ms; transition: transform 2500ms ease-in-out, opacity 2500ms ease 0s; animation-delay: 0s } 
#section1 .mySwiper .swiper-slide.swiper-slide-active .visual_wrap .visual_txt_box .visual_info { animation: t_top 2500ms; transition: transform 2500ms ease-in-out, opacity 2500ms ease 0s; animation-delay: .4s } 

@keyframes zoom_in { 
0% { transform: scale(1.2); } 
100% { transform: scale(1) rotate(0.003deg); } 
}

@keyframes t_top { 
0% { opacity: 0; transform: translateY(50px); } 
100% { opacity: 1; transform: translateY(0%); } 
}

@keyframes t_opacity { 
0% { opacity: 0; filter: blur(7px); } 
100% { opacity: 1; filter: blur(0); } 
}

@-webkit-keyframes LoadingBar { 
from { width: 0px; } 
to { width: 80px; } 
}

@keyframes LoadingBar { 
from { background: rgb(255 255 255 / 50%); } 
to { background: #fff; } 
}

/* mouse wheel */
.mouse_scroll {position: absolute;bottom: 30px;left: 50%;transform: translateX(-50%);z-index: 99;text-align: center;}
.mouse_scroll img {animation: mouse_ani 1.5s ease-in-out infinite;}
.mouse_scroll span {display:block;font-family: var(--font-robot);font-size: 16px;font-weight: 600;color: #fff;letter-spacing: 4px;padding-top: 30px;} 
/* mouse_ani */
@keyframes mouse_ani {
0% {transform: translateY(0px);}
50% {transform: translateY(10px);}
100% {transform: translateY(0px);}
}


/*---------- section2 ----------*/
#section2.section {background: #000;} 
#section2.section .content_area, #section3.section .content_area {overflow: clip;overflow-clip-margin: 30px;} 
#section2.section .content_area {flex-direction: column;padding: calc(110px + 7vw) 0 6vw;} 
#section2.section .content_area .img {position: relative;flex-direction: column;}
#section2.section .content_area .img .top {position: absolute;top: -160px;right: 0;}
#section2.section .content_area .img .top .tab {margin: 0 -5px;}
#section2.section .content_area .img .top .tab li {display: flex;align-items: center;width: 230px;height: 70px;border-radius: 34px;border: 1px solid #6e7377;text-align: center;vertical-align: middle;cursor: pointer;margin: 0 5px;overflow: hidden;transition: all .5s;}
#section2.section .content_area .img .top .tab li a {display: block;width: 100%;font-family: var(--font-robot);font-weight: 500;color: #6e7377;line-height: 1.2;}
#section2.section .content_area .img .bottom .tab-content .box {display: flex;}
#section2.section .content_area .img .bottom .tab-content .left {width: 100%;max-width: 760px;height: 410px;border-radius: 15px;margin-right: 135px;box-shadow: 0 0 30px rgb(212 212 212 / 30%);overflow: hidden;} 
#section2.section .content_area .img .bottom .tab-content .left a {display: block;}
#section2.section .content_area .img .bottom .tab-content .right {color: #fff;}
#section2.section .content_area .img .bottom .tab-content .right h3 {font-family: var(--font-robot);font-size: 48px;font-weight: 600;}
#section2.section .content_area .img .bottom .tab-content .right p {font-size: 24px;font-weight: 500;margin: 20px 0 30px;}
#section2.section .content_area .img .bottom .tab-content .right ol li {font-weight: 300;color: #999;line-height: 1.4;}
#section2.section .content_area .img .bottom .tab-content .right ol li:not(:last-child) {margin-bottom: 20px;}
#section2.section .content_area .img .bottom .tab-content .right .more {margin-top: 70px;}
/* active */
#section2.section .content_area .img .top .tab li.current {background: var(--sub-color);border: 1px solid transparent;box-shadow: 0 0px 20px rgb(50 77 150 / 8%);transition: all .5s;} 
#section2.section .content_area .img .top .tab li.current a {color: #fff;transition: all .5s;} 


/*---------- section3 ----------*/
#section3.section:before {content: "";display: block;position: absolute;bottom: 0;left: 0;background: url(../img/main3.png) no-repeat center / cover;width: 100%;max-width: 100%;height: 100%;z-index: -1;} 
#section3.section .content_area {flex-direction: column;justify-content: flex-start;padding: calc(110px + 7.5vw) 0 8vw;} 
/**/
#section3.section .content_area .img ul {margin: 0 -35px;} 
#section3.section .content_area .img ul li {position: relative;width: calc(100% / 3 - 70px);max-width: 490px;margin: 0 35px;}  
#section3.section .content_area .img ul li .top {height: 238px;background: transparent;border-radius: 15px;box-shadow: 0 0 30px rgb(212 212 212 / 30%);margin-bottom: 25px;overflow: hidden;}  
#section3.section .content_area .img ul li .top img {display: block;width: 100%;height: 100%;object-fit: scale-down;}
#section3.section .content_area .flow-container {position: absolute;left: 0;right: 0;bottom: 0;width: 150%;margin: 0 auto;transform: translateX(-25%);z-index: -1;}
#section3.section .content_area .flow-wrap {animation-duration: 40s}
#section3.section .content_area .flow-text {display: flex;white-space: nowrap;overflow: hidden;transition: 0.3s;font-family: var(--font-robot);font-size: 132px;font-weight: 700;color: rgb(51 51 51 / 20%);}
#section3.section .content_area .flow-wrap {animation: textLoop_width 35s linear infinite;padding-right: 1.4881vw;padding-right: 5.4881vw;cursor: default;}
/* ani */
@keyframes textLoop_width {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}


/*---------- section4 ----------*/
#section4.section:before {content: "";display: block;position: absolute;bottom: 0;left: 0;background: url(../img/main4.png) no-repeat center / cover;width: 100%;max-width: 100%;height: 100%;z-index: -1;} 
#section4.section .content_area {flex-direction: column;justify-content: flex-start;padding: calc(110px + 5vw) 0 0px;} 
/**/
#section4.section .content_area .img .top {margin-bottom: 80px;}
#section4.section .content_area .img h3 {position: relative;text-align: center;font-family: var(--font-suit);font-weight: 700;font-size: 24px;color: #fff;}
#section4.section .content_area .img h3:before, #section4.section .content_area .img h3:after {content: "";display: inline-block;position: absolute;top: 50%;width: 45%;height: 1px;transform: translateY(-50%);} 
#section4.section .content_area .img h3:before { left: 0%; background-color: #fff; } 
#section4.section .content_area .img h3:after { right: 0%; background-color: #fff; } 
#section4.section .content_area .img ul {flex-wrap: wrap;margin: 30px -13px 0;} 
#section4.section .content_area .img ul li {position: relative;width: calc(100% / 5 - 26px);max-width: 300px;height: 100px;background: #fff;border-radius: 10px;}  
#section4.section .content_area .img .top ul li {margin: 0 13px;}  
#section4.section .content_area .img .bottom ul li {margin: 0 13px 26px;}
#section4.section .content_area .img ul li img {display: block;width: 100%;height: 100%;object-fit: scale-down;}
/* hover */
#section4.section .content_area .img.s_event.active h3:before, #section4.section .content_area .img.s_event.active h3:after {animation: menu_ani 1s;} 
/* ani */
@keyframes menu_ani {
0% { width: 0% } 
100% { width: 45% } 
} 


/*---------- foot_sec ----------*/
.foot_sec {position: relative;z-index: 1;}
.foot_sec .content_area {max-width: 100%;}










/*---------- respon ----------*/
@media (min-width: 1024px) and (max-width: 1850px) {
.section:not(.foot_sec) .content_area, #section1 .mySwiper .swiper-slide .visual_wrap, .control_wrap {width: 80%;}

#section2.section .content_area .txt {margin-bottom: 65px;} 
#section2.section .content_area .img .bottom .tab-content .left {width: 50%;min-width: 300px;height: 100%;margin-right: 5vw;} 
#section2.section .content_area .img .top {top: -200px;}
#section2.section .content_area .img .bottom .tab-content .left img {display: block;width: 100%;height: 100%;object-fit: cover;} 
#section2.section .content_area .img .bottom .tab-content .right ol li:not(:last-child) {margin-bottom: 0;}
#section2.section .content_area .img .bottom .tab-content .right ol li br {display: none;}

#section3.section .content_area .img ul li .top {min-height: 150px;height: 12vw;}
}

@media (min-width: 768px) and (max-width: 1023px), (min-width: 1301px) and (max-width: 1850px) {
#section3.section .more a:first-child {margin-right: 15px;}
}

@media (max-width: 1850px) {
#section2.section .content_area .img .bottom .tab-content .left img {display: block;width: 100%;height: 100%;object-fit: cover;} 

#section3.section .content_area .img ul li .top img {min-width: 150px;width: 70%;margin: 0 auto;}

#section4.section .content_area .img ul li img {min-width: 120px;width: 70%;margin: 0 auto;}
}

@media (min-width: 1024px) and (max-width: 1700px) {
#section2.section .content_area .img .top .tab {align-items: center;}
#section2.section .content_area .img .top .tab li {position: relative;width: 60px;height: 60px;}
#section2.section .content_area .img .top .tab li:after {display: block;position: absolute;top: 50%;left: 0;right: 0;margin: 0;transform: translateY(-50%);color: #fff;}
#section2.section .content_area .img .top .tab li:nth-child(1):after {content:"1";}
#section2.section .content_area .img .top .tab li:nth-child(2):after {content:"2";}
#section2.section .content_area .img .top .tab li:nth-child(3):after {content:"3";}
#section2.section .content_area .img .top .tab li a {font-size: 0;}

#section3.section .content_area .img ul {margin: 0 -2vw;} 
#section3.section .content_area .img ul li {width: calc(100% / 3 - 4vw);margin: 0 2vw;} 
}

@media (max-width: 1700px) {
#section2.section .content_area .img .bottom .tab-content .right h3 {font-size: 40px;}
#section2.section .content_area .img .bottom .tab-content .right p{font-size: 20px;}
}

@media all and (max-width: 1300px) {
#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: 50px;} 
}

@media (max-width: 767px), (min-width: 1024px) and (max-width: 1300px) {
#section3.section .more {flex-wrap: wrap;height: auto;}
#section3.section .more a {max-width: 100%;}
#section3.section .more a:first-child {margin-bottom: 15px;}
}


@media all and (max-width: 1023px) { 
.section:not(.foot_sec) .content_area, #section1 .mySwiper .swiper-slide .visual_wrap, .control_wrap {width: 96%;}
.section, .fp-tableCell {height: auto !important;} 

#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h2 {font-size: 50px;} 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box p {font-size: 40px;} 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info p {font-size: 25px;} 

#section2.section .content_area {padding: 150px 0 100px;} 
#section2.section .content_area, #section2.section .content_area .img, #section2.section .content_area .img .bottom .tab-content .box {flex-wrap: wrap;}
#section2.section .content_area .img .top {position: unset;align-self: flex-end;margin-bottom: 40px;}
#section2.section .content_area .img .bottom .tab-content .left {width: 100%;height: 350px;margin: 0 auto 50px;}
.mouse_scroll span {letter-spacing: 2px;}

#section3.section .content_area {padding: 100px 0;}  
#section3.section .content_area .img ul {flex-wrap: wrap;margin: 0 -25px;} 
#section3.section .content_area .img ul li {width: calc(100% / 2 - 50px);margin: 0 25px 60px;}  
#section3.section .content_area .img ul li:last-child {margin: 0 25px;}  
#section3.section .content_area .flow-text {font-size: 13vw;}

#section4.section .content_area {padding: 100px 0 150px;} 
#section4.section .content_area .img h3:before, #section4.section .content_area .img h3:after {width: 41%;}
#section4.section .content_area .img ul {justify-content: flex-start;}
#section4.section .content_area .img ul li {width: calc(100% / 3 - 26px);height: 80px;}
#section4.section .content_area .img .top {margin-bottom: 50px;}
#section4.section .content_area .img .top ul li {margin: 0 13px 26px;}  
/* ani */
@keyframes menu_ani {
0% { width: 0% } 
100% { width: 41% } 
} 

#section5.section {display: none;}

#mainFooterCon.foot_sec:before {top: -7vw;}
}

@media all and (max-width: 767px) {
.section .content_area .txt span {font-size: 16px;} 
.section .content_area .txt h2 {font-size: 25px;line-height: 1.4;margin-top: 10px;} 
.more {max-width: 180px;height: 50px;line-height: 50px;}
.more a {font-size: 16px;}

#section1 .mySwiper .swiper-slide .slide_bg {background-position: right 35% center;filter: brightness(0.8);}
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h2 {font-size: 35px;} 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box p {font-size: 25px;} 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info {margin-top: 30px;} 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info p {font-size: 18px;} 
.mouse_scroll span {font-size: 14px;} 

#section2.section .content_area, #section4.section .content_area {padding: 100px 0;} 
#section2.section .content_area, #section3.section .content_area {overflow-clip-margin: 20px;} 
#section2.section .content_area .txt, #section3.section .content_area .txt, #section4.section .content_area .txt {margin-bottom: 50px;} 
#section2.section .content_area .img .top {align-self: unset;}
#section2.section .content_area .img .top .tab {flex-wrap: wrap;}
#section2.section .content_area .img .top .tab li {width: calc(100% / 2 - 10px);height: 50px;margin: 0 5px 10px;}
#section2.section .content_area .img .top .tab li:last-child {margin-bottom: 0;}
#section2.section .content_area .img .top .tab li a {font-size: 16px;letter-spacing: .5px;}
#section2.section .content_area .img .bottom .tab-content .left {height: 250px;margin: 0 auto 30px;box-shadow: 0 0 20px rgb(212 212 212 / 30%);}
#section2.section .content_area .img .bottom .tab-content .right h3 {font-size: 30px;}
#section2.section .content_area .img .bottom .tab-content .right p{font-size: 18px;margin: 15px 0 25px;}
#section2.section .content_area .img .bottom .tab-content .right ol li {font-size: 16px;}
#section2.section .content_area .img .bottom .tab-content .right ol li br {display: none;}
#section2.section .content_area .img .bottom .tab-content .right .more {max-width: 180px;margin-top: 50px;}

#section3.section .content_area .img ul {margin: 0 -10px;} 
#section3.section .content_area .img ul li {width: calc(100% / 2 - 20px);margin: 0 10px 30px;}  
#section3.section .content_area .img ul li .top {box-shadow: 0 0 20px rgb(212 212 212 / 30%);margin-bottom: 15px;}
#section3.section .content_area .img ul li:last-child {margin: 0 15px;}  
#section3.section .content_area .flow-text {font-size: 15vw;}

#section4.section .content_area .img h3 {font-size: 20px;}
#section4.section .content_area .img h3:before, #section4.section .content_area .img h3:after {width: 37%;}
#section4.section .content_area .img ul {margin: 30px -5px 0;}
#section4.section .content_area .img ul li {width: calc(100% / 2 - 10px); max-width: 100%; height: 65px;}
#section4.section .content_area .img .top {margin-bottom: 40px;}
#section4.section .content_area .img .top ul li, #section4.section .content_area .img .bottom ul li {margin: 0 5px 10px;} 
/* ani */
@keyframes menu_ani {
0% { width: 0% } 
100% { width: 37% } 
} 
}

@media all and (max-width: 479px) {
.section .content_area .txt span {font-size: 14px;} 
.section .content_area .txt h2 {font-size: 20px;} 
.more a {font-size: 14px;}

#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h2 {font-size: 25px;} 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box p {font-size: 20px;} 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info p {font-size: 16px;line-height: 1.4} 

#section2.section .content_area .img .top .tab li a {font-size: 14px;}
#section2.section .content_area .img .bottom .tab-content .left {height: 200px;}
#section2.section .content_area .img .bottom .tab-content .right h3 {font-size: 25px;}
#section2.section .content_area .img .bottom .tab-content .right p{font-size: 16px;}
#section2.section .content_area .img .bottom .tab-content .right ol li {font-size: 14px;}
#section2.section .content_area .img .bottom .tab-content .right .more {margin-top: 35px;}

#section3.section .content_area .img ul li .top {height: 200px;}
#section3.section .content_area .img ul li .top img {min-width: 100px;} 
#section3.section .content_area .flow-text {font-size: 20vw;}

#section4.section .content_area .img h3 {font-size: 18px;}
#section4.section .content_area .img ul li img {min-width: 100px;}
}