@charset "UTF-8";

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


/*---------- common ----------*/
.flex {display: flex;justify-content: space-between;}
.section {position: relative;width: 100%;height: 100%;overflow: hidden;margin: 0 auto;} 
.section .content_area {position: relative;max-width: 1315px;height: 100%;margin: 0 auto;}
.section .content_area .txt h2 {font-size: 52px;font-weight: 500;text-align: center;}
.section .content_area .txt p {font-size: 20px;}
/* aos */
[data-aos=fade-up] {transform: translate3d(0,50px,0)}
[data-aos=fade-down] {transform: translate3d(0,-50px,0)}
[data-aos^=fade][data-aos^=fade].aos-animate {transform: translateZ(0)}
/**/
.more {width: auto;transition: all .3s;}
.more a {display: inline-flex;align-items: baseline;justify-content: unset;font-size: 18px;color: #131313;}
.more a i {padding-left: 20px;}
 /* hover */
.more a:hover {transition: width .2s;}
.more a:hover i {padding-left: 30px;transition: all .3s;animation: more_left ease-in-out .3s alternate;}
 /* ani */
@keyframes more_left {
0% {padding-left: 20px;} 
100% {padding-left: 30px;} 
}

/* .more a {padding: 14px 17px;font-weight: 300;background: transparent;border: 1px solid #e12c24;transition: all .2s;}
 hover
.more a:hover {color: #fff;background: #e12c24;box-shadow: 0px 10px 10px rgb(10 11 12 / 10%);transition: all .2s;} */


/*---------- 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; } 


/*---------- section1 ----------*/
/* section1 */
#section1 { } 
/* #section1 */
#section1 {border-bottom: 1px solid #9b9b9b;} 
#section1 .slide_bg {height: 100vh;overflow: hidden;background-repeat: no-repeat;background-size: cover;background-position: 50% 50%;} 
#section1 .slide_bg:after {content:""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(0 0 0 / 10%);}
#section1 .visual_wrap {position: absolute;top: 350px;left: 0;right: 0;width: 100%;max-width: 1315px;margin: 0 auto;} 
#section1 .visual_wrap .visual_txt_box {color: #fff;} 
#section1 .visual_wrap .visual_txt_box .title_box div {font-size: 84px;line-height: 1.4;} 
#section1 .visual_wrap .visual_txt_box .title_box div span {font-weight: 100;}
#section1 .visual_wrap .visual_txt_box .visual_info {/* padding: 10px 10px; */margin-top: 30px;/* background: rgb(255 255 255 / 90%); */} 
#section1 .visual_wrap .visual_txt_box .visual_info p {font-size: 26px;font-weight: 300;} 
#section1 .visual_wrap .visual_txt_box .visual_info p br {display: none;}

#section1 .slider_1 { background-image: url(../img/main_visual1.jpg);} 
#section1 .slider_2 { background-image: url(../img/main_visual2.jpg);} 
#section1 .slider_3 { background-image: url(../img/main_visual3.jpg);} 
#section1 .mySwiper .swiper-slide.swiper-slide-active .slide_bg { animation: zoom_in 4000ms; transition: transform 4000ms ease-in-out, opacity 1000ms ease 0s; }
#section1 .mySwiper .swiper-slide.swiper-slide-active .visual_wrap .visual_txt_box .title_box div { animation: d_up 1000ms; } 
#section1 .mySwiper .swiper-slide.swiper-slide-active .visual_wrap .visual_txt_box .visual_info { animation: d_up 1000ms; animation-delay: 0.7s;} 

@keyframes zoom_out {
0% { transform: scale(1); } 
100% { transform: scale(1.2) rotate(0.003deg); } 
}
@keyframes zoom_in {
0% { transform: scale(1.2); } 
100% { transform: scale(1) rotate(0.003deg); } 
}
@keyframes t_left {
0% { opacity: 0; filter: Alpha(opacity=0); transform: translateX(-70px); transition: opacity 1s, transform 1s; } 
100% { opacity: 1.0; filter: Alpha(opacity=100); transform: translateX(0px); transition: opacity 1s, transform 1s; } 
}
/**/
@keyframes l_right {
0% {opacity: 0;filter: Alpha(opacity=0);transform: translateX(-50%);transition: opacity 1s, transform 1s;} 
100% { opacity: 1.0; filter: Alpha(opacity=100); transform: translateX(0px); transition: opacity 1s, transform 1s; } 
}
@keyframes u_down {
0% { opacity: 0; filter: Alpha(opacity=0); transform: translateY(-50%); transition: opacity 1s, transform 1s; } 
100% { opacity: 1.0; filter: Alpha(opacity=100); transform: translateY(0px); transition: opacity 1s, transform 1s; } 
}
@keyframes d_up {
0% { opacity: 0; filter: Alpha(opacity=0); transform: translateY(50%); transition: opacity 1s, transform 1s; } 
100% { opacity: 1.0; filter: Alpha(opacity=100); transform: translateY(0px); transition: opacity 1s, transform 1s; } 
}


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


/* control_wrap */
.control_wrap {position: absolute;top: 0;left: 0;right: 0;width: 100%;height: 100%;max-width: 1315px;margin: 0 auto;padding-top: 650px;z-index: 999;}
.control_wrap .swiper-pagination{position: unset;vertical-align:middle;text-align: left;}
.control_wrap .swiper-pagination span {opacity: 1;position:relative;display:inline-block;transition:all 0.6s;margin-right: 105px !important;font-size: 16px;color: rgb(255 255 255 / 60%);background: none;}
.control_wrap .swiper-pagination span:before{position:absolute;content:"";width: 100px;height: 3px;background-color:#fff;left:0px;top: 20px;opacity:0.3}
.control_wrap .swiper-pagination span:after{position:absolute; content:"";}
.control_wrap .swiper-pagination span{--swiper-theme-color: transparent;}
.control_wrap .swiper-pagination span.swiper-pagination-bullet-active{margin-right:105px;color: #fff;}
.control_wrap .swiper-pagination span.swiper-pagination-bullet-active:after{animation:LoadingBar 5.5s both;animation-delay:0.2s;width:100px;height: 3px;background-color:#fff;left:0px;top:20px;opacity:1}

@keyframes zoom_in { 
 0% { transform: scale(1.2); } 
 100% { transform: scale(1) rotate(0.003deg); } 
}
@-webkit-keyframes LoadingBar{from{width:0px;}to{width:100px;}}
@keyframes LoadingBar{from{width:0px;}to{width:100px;}}

@-webkit-keyframes LoadingBar{
 0% {opacity: 0;}
 50% {opacity: 0.5;}
 100% {opacity: 1;}
}

.control_wrap .swiper-button > div {width: auto;color: #fff;}
.control_wrap .swiper-button > div.swiper-button-prev {}
.control_wrap .swiper-button > div.swiper-button-next {right: auto;left: 165px;}
.control_wrap .swiper-button > div:after {font-size: 22px;font-weight: 600;}


/* mouse wheel */
.mouse_wrap {position: absolute;bottom: 0;right: 0;z-index: 99;} 
.mouse_wrap span {display:block;writing-mode: tb-rl;color: #fff;letter-spacing: .5px;padding-bottom: 130px;font-weight: 300;} 
.mouse_wheel {display:block;transform:rotate(90deg);} 
.mouse_wheel:before {content:'';width: 130px;height: 2px;background: rgba(255,255,255,0.3);position:absolute;right: 0;bottom: 0;} 
.mouse_wheel:after {content:'';width: 40px;height: 2px;background: #fff;position:absolute;right: 0;bottom: 0;animation: scrollDown 2s linear infinite;} 

@keyframes scrollDown {
  0%,100% {right: 0;} 
  50% {right: 90px;} 
}


/*---------- section2 ----------*/
#section2.section .content_area {padding: 140px 0 125px;}
#section2.section  .content_area .img .box p {font-size: 28px;}
/**/
#section2.section  .content_area .img {max-width: 1650px;margin-top: 80px;}
#section2.section  .content_area .img .clone {}
#section2.section  .content_area #img_m.img {display: none;}
#section2.section .content_area .img > .flex {f;justify-content: center;}
#section2.section  .content_area .img .box {position: relative;width: 520px;margin: 0 58px;border: 1px solid #ccc;box-shadow: 0px 0px 6px rgb(51 51 51 / 20%);overflow: hidden;transition: all .3s;}
#section2.section  .content_area .img .box:after {content:'';display:block;position:absolute;top:0;left: -80%;z-index: 1;width: 50%;height:100%;background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);transform:skewX(-30deg);}
#section2.section  .content_area .img .box img {display: block;width: 100%;height: auto;object-fit: cover;}
#section2.section  .content_area .img .box .txt {padding: 30px 40px 40px;}
#section2.section  .content_area .img .box .more {margin-top: 25px;}
/* hover */
#section2.section  .content_area .img .box:hover {border: 1px solid #17549d;transition: all .3s;}
#section2.section  .content_area .img .box:hover:after { animation: shine 1s; }
/* ani */
@keyframes shine {
 0% {
  left:-80%;
 } 
 100% {
  left:130%;
 } 
}


/*---------- section3 ----------*/
#section3.section {height: 460px;}
#section3.section:before {content:"";display: block;position: absolute;top: 0;left: 0;background: url(../img/main3_test.png) no-repeat center / cover;background-attachment: fixed;filter: blur(2px);width: 100%;height: 100%;z-index: -1;}
#section3.section .content_area {padding: 90px 0;}
#section3.section .content_area .txt {font-size: 22px;color: #fff;line-height: 1.8;text-align: center;}
#section3.section .content_area .txt h2 {display: inline-block;line-height: 1;font-size: 46px;margin-bottom: 20px;}
#section3.section .more a {display: block;width: 364px;height: 80px;font-size: 20px;color: #fff;text-align: center;border: 1px solid #fff;padding: 30px;margin: 50px auto 0;transition: all .3s;}
/* hover */
#section3.section .more a:hover  {background: #fff;color: #17549d; transition: all .3s;}

/*---------- section4 ----------*/
#section4.section .content_area {padding: 140px 0 200px;}
#section4.section .content_area .flex_wrap > div {width: 45%;}
#section4.section .content_area .tit {justify-content: unset;align-items: center;color: #17549d;margin-bottom: 20px;}
#section4.section .content_area .hr {display: inline-block;width: 50px;height: 2px;background: #17549d;margin-right: 10px;} 
#section4.section .content_area .txt h2 {text-align: unset;}
/**/
#section4.section .content_area .flex_wrap > div.left .txt p {font-size: 15px;}
/**/
#section4.section .content_area .flex_wrap > div.right {position: relative;max-width: 550px;height: 490px;margin: 0 25px 25px 0;}
#section4.section .content_area .flex_wrap > div.right .img {position: relative;}
#section4.section .content_area .flex_wrap > div.right .img:before {content:"";display: block;position: absolute;top: 25px;right: -25px;background: #eee;width: 100%;height: 100%;z-index: -1;}
#section4.section .content_area .flex_wrap > div.right .img img {display: block;width: 100%;max-width: 550px;height: 490px;object-fit: cover;}
#section4.section .content_area .flex_wrap > div.right .txt {position: absolute;top: 80px;left: 70px;color: #fff;}
#section4.section .content_area .flex_wrap > div.right .txt p {font-weight: 300;margin: 30px 0 90px;}
#section4.section .content_area .flex_wrap > div.right .more a {color: #Fff;}
/**/
#section4.section .content_area .flex_wrap > div.right .img[data-aos=fade-up-left] {opacity: 1;transform: translate3d(0,0,0)}
#section4.section .content_area .flex_wrap > div.right .img[data-aos^=fade][data-aos^=fade].aos-animate {transform: translate(-20px, -20px);}



/* respon */
@media all and (max-width: 1650px){
/* section1 */
#section1 .slide_bg {background-position: center right;}
}
@media all and (max-width: 1315px){ /* width */
#section1 .visual_wrap, #section1 .mouse_scroll, #section1 .control_wrap,
.section .content_area {max-width: 96%;}

/* section2 */
#section2.section .content_area .img > .flex {justify-content: space-between;margin: 0 -2%;}
#section2.section .content_area .img .box {width: calc(100% / 2 - 4%);margin: 0 2%;}

/* section4 */
#section4.section .content_area .flex_wrap {f;margin: 0 calc(2% - 25px) 0 -2%;}
#section4.section .content_area .flex_wrap > div {width: calc(100% / 2 - 4%);margin: 0 2%;}
#section4.section .content_area .flex_wrap > div.right {max-width: calc(605px - 25px);margin: 0 2% 25px;}
#section4.section .content_area .flex_wrap > div.right .img img {max-width: 100%;}
}

@media (max-width: 1023px){
.section .content_area .txt h2, #section3.section .content_area .txt h2 {font-size: 42px;}
.section .content_area .txt p {font-size: 18px;}
 
/* section1 */
#section1 .visual_wrap {top: 300px;}
#section1 .visual_wrap .visual_txt_box .title_box div {font-size: 64px;}
.typed-cursor {font-size: 50px;}
#section1 .visual_wrap .visual_txt_box .visual_info p {font-size: 22px;letter-spacing: -.5px;}
.control_wrap {padding-top: 550px;}
.mouse_wrap {right: 50%;}
.mouse_wrap span {display: none;}
.mouse_wheel:before {width: 100px;}
.mouse_wheel:after {width: 30px;}
@keyframes scrollDown {
  0%,100% {right: 0;} 
  50% {right: 70px;} 
}
 
/* section2 */
#section2.section .content_area {padding: 100px 0 80px;}
#section2.section .content_area .img {margin-top: 40px;}
#section2.section .content_area .img .box p {font-size: 24px;}
 
/* section3 */
#section3.section .content_area {padding: 98px 0;}
#section3.section .content_area .txt {font-size: 20px;}
#section3.section .more a {width: 265px;font-size: 18px;}

/* section4 */
#section4.section .content_area {padding: 100px 0 160px;}
#section4.section .content_area .hr {width: 30px;}
#section4.section .content_area .flex_wrap > div.right .txt {top: 44px;left: 35px;}
}

@media (max-width: 767px){
.section .content_area .txt h2, #section3.section .content_area .txt h2 {font-size: 32px;margin: 0 auto 20px;}
.more a {font-size: 16px;}
.more a i {padding-left: 10px;}
.more a:hover i {padding-left: 20px;}
/* ani */
@keyframes more_left {
0% {padding-left: 10px;} 
100% {padding-left: 20px;} 
}
 
/* section1 */
#section1 .visual_wrap {top: 32%;}
#section1 .visual_wrap .visual_txt_box .title_box div {font-size: 44px;}
.typed-cursor {font-size: 40px;}
#section1 .visual_wrap .visual_txt_box .visual_info {margin-top: 20px;}
#section1 .visual_wrap .visual_txt_box .visual_info p {font-size: 18px;line-height: 1.8;}
#section1 .visual_wrap .visual_txt_box .visual_info p br {display: block;}
.control_wrap {padding-top: 450px;}
.control_wrap .swiper-pagination span {font-size: 14px;margin-right: 80px !important;}
.control_wrap .swiper-pagination span:before, .control_wrap .swiper-pagination span.swiper-pagination-bullet-active:after {width: 70px;}
/* ani */
@-webkit-keyframes LoadingBar{from{width:0px;}to{width:70px;}}
@keyframes LoadingBar{from{width:0px;}to{width:70px;}}

/* section2 */
#section2.section .content_area .img > .flex {margin: 0 -1%;}
#section2.section .content_area .img .box {width: calc(100% / 2 - 2%);margin: 0 1%;}
#section2.section  .content_area .img .box .txt {padding: 30px 20px;}
#section2.section .content_area .img .box p {font-size: 20px;}

/* section3 */
#section3.section .content_area .txt {font-size: 18px;}
#section3.section .more a {width: 220px;height: 60px;font-size: 16px;padding: 20px;}

/* section4 */
#section4.section .content_area {padding: 100px 0 160px;}
#section4.section .content_area .flex_wrap {flex-direction: column;margin: 0;}
#section4.section .content_area .flex_wrap > div, #section4.section .content_area .flex_wrap > div.right {width: 100%;}
#section4.section .content_area .flex_wrap > div.left {margin: 0 auto 40px;}
#section4.section .content_area .flex_wrap > div.right {height: auto;max-width: 100%;margin: 0 auto;}
#section4.section .content_area .flex_wrap > div.right .img:before {display: none;}
#section4.section .content_area .flex_wrap > div.right .img img {height: 200px;}
#section4.section .content_area .flex_wrap > div.left .txt p {font-size: 13px;}
#section4.section .content_area .flex_wrap > div.right .txt {width: calc(100% - 40px);top: 25px;left: 20px;right: 20px;}
#section4.section .content_area .flex_wrap > div.right .txt p {margin: 0 auto 20px;}
#section4.section .content_area .flex_wrap > div.right .more {text-align: right;}
}

@media (max-width: 479px){
.section .content_area .txt h2, #section3.section .content_area .txt h2 {font-size: 22px;}
.section .content_area .txt p {font-size: 16px;}
.more a {font-size: 14px;}
 
/* section1 */
#section1 .visual_wrap {top: 40%;}
#section1 .slide_bg {background-position: center center;}
#section1 .visual_wrap .visual_txt_box .title_box div {font-size: 34px;}
#section1 .visual_wrap .visual_txt_box .visual_info {margin-top: 10px;}
#section1 .visual_wrap .visual_txt_box .visual_info p {font-size: 16px;}
.control_wrap {padding-top: 400px;}
.control_wrap .swiper-pagination {display: none;}
.mouse_wheel:before {width: 60px;}
.mouse_wheel:after {width: 20px;}
@keyframes scrollDown {
  0%,100% {right: 0;} 
  50% {right: 40px;} 
}

/* section2 */
#section2.section .content_area {padding: 80px 0;}
#section2.section .content_area .img {margin-top: 0;}
#section2.section .content_area .img > .flex {flex-wrap: wrap; margin: 0 auto;}
#section2.section .content_area .img .box {width: 100%;margin: 0 auto 20px;}
#section2.section .content_area .img .box.box2 {margin: 0;}
#section2.section .content_area .img .box img {height: 150px;object-position: top center;}
#section2.section  .content_area .img .box .txt {display: flex;justify-content: space-between;align-items: center;}
#section2.section  .content_area .img .box .more {margin-top: 0;text-align: right;}
#section2.section .content_area .img .box p {font-size: 16px;}

/* section3 */
#section3.section {height: 370px;}
#section3.section .content_area {padding: 80px 0;}
#section3.section .content_area .txt {font-size: 16px;}
#section3.section .content_area .txt br:not(:nth-child(2)) {display: none;}
#section3.section .more a {width: 180px;font-size: 14px;padding: 20px 10px;}

/* section4 */
#section4.section .content_area {padding: 80px 0;}
#section4.section .content_area .flex_wrap > div.left {margin: 0 auto 20px;}
#section4.section .content_area .flex_wrap > div.right .txt {top: 34px;}
}