@charset "UTF-8";
.bg-black { background-color: #292929; color: #fff; } 
br.mo { display: none; } 
.img-wrap img{width: 100%;}

main { padding-top: 60px; overflow-x: hidden;} 
.sect00{ height: calc((var(--vh, 1vh) * 100) - 60px); position: relative;}
.sect00-top { position: relative; padding-bottom: 58px;} 
.main-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } 
.main-video video { width: 100%; height: 100%; object-fit: cover; } 
.main-video__txt {/*max-width: 678px;*/ width: 100%; margin: 0 auto; padding-top: 195px;position: relative;z-index: 11;text-align: center;}
.main-video__txt video {width: 100%}
.main-video__txt .img-wrap{font-size: 0;}
.main-video__txt .img-txt{display: flex; align-items: flex-end; justify-content: center; margin-top: 45px; font-size: 27px; font-weight: 400;}
.main-video__txt .img-txt .hd-logo{width: 145px; height: 35px;}
.scroll-txt {display: flex; align-items: center; justify-content: center; padding-top: 81px; } 
/* lottie-player */
.mouse-scroll { position: absolute; bottom: 84px; left: 50%; transform: translateX(-50%);  opacity: 1; transition: opacity .35s, transform .35s; } 
.lottie--mouse_scroll { max-width: 22px; margin: 0 auto; position: fixed; bottom: 25px; width: 100%; left: 50%; transform: translateX(-50%); z-index: 99;} 
.mouse-scroll span{ color:var(--color-orange); text-align: center; font-size: 14px; font-weight: 700;}
.mouse-scroll.active { opacity: 0; z-index: 0; pointer-events: none; transform: translateX(-50%) translateY(60px); transition: opacity .35s .15s, transform .35s; } 
.mouse-scroll .img01{animation: scrollUpDown 3s infinite;}
.mouse-scroll .img02{ position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 2px; height: 2px; background: var(--color-orange); animation: upDown 3s infinite;}
@keyframes upDown { 
    0%{ transform: translate(-50%, 6px); height: 2px; } 
    25% {transform: translate(-50%, 6px); height:7px;}
    50% { transform: translate(-50%, 6px); height:2px; } 
    75% {transform: translate(-50%, 6px); height:7px;}
    100% {transform: translate(-50%, 3px); height: 2px;}
}
@keyframes scrollUpDown { 
    0%,100% { transform: translateY(3px); } 
    50% { transform: translateY(-3px); } 
    
}
.sect-blur{position: absolute; bottom: -40px; z-index: 1; width: 100%; height: 80px; background: rgba(255, 255, 255, 0.01); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);}

@keyframes fadeInUp {
    0% {
      opacity: 0;
      -webkit-transform: translateY(50px);
      -ms-transform: translateY(50px);
      transform: translateY(50px);
    }
  
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
  }
  
  .fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
  }

.sect01{background: #FDEFE9; padding: 230px 0; position: relative;}
.sect01 .img-wrap{max-width: 499px;}
.sect01 .img-wrap img{width: 100%;}
.color-orange{color: var(--color-orange);}
.txt-line{text-decoration: underline;}
.sect01-cont .cont1, .sect01-cont .cont2 {opacity: 0;}
.sect01-cont .cont1.fadeInUp, .sect01-cont .cont2.fadeInUp {animation: fadeInUp 1.2s cubic-bezier(.39,.575,.565,1.000) both; animation-delay: .3s;}
.sect01-cont > div:not(:last-child){margin-bottom: 120px;}
.sect01-cont .l{margin-right: 140px;}
.sect01-cont .txt-wrap{text-align: center; position: relative; padding-top: 110px;}
.sect01-cont .txt-wrap .num {position: absolute; top: 0; left: 50%; transform: translateX(-50%); text-align: center;font-size: 120px;font-weight: 900;opacity: 0.05; } 
.sect01-cont .txt-wrap .tit{font-size: 28px; font-weight: 900; margin-bottom: 30px;}
.sect01-cont .txt-wrap .txt{color: #000; font-size: 18px; font-weight: 500; line-height: 1.9;}
.sect01-cont .txt-wrap .txt span{font-weight: inherit; font-size: inherit;}
.sect01-cont .txt-wrap .txt b{font-weight: 700;}


.sect-tit.type01{text-align: center;}
.sect-tit.type01 h2 { color: #000; text-align: center; font-size: 40px; font-weight: 900; display: flex; align-items: center; justify-content: center; } 
.sect-tit.type01 h2::before,
.sect-tit.type01 h2::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #000; margin: 0 20px; } 
.sect-tit.type01 p {color: #A8A8A8;text-align: center;font-size: 16px;font-weight: 500;} 
.sect02{margin-top: 130px;}
.sect02-img{margin-top: 52px;font-size: 0;position: relative; margin-bottom: 10px;}
.sect02-img .inner{position: relative;padding-bottom: 150px;}
.sect02-img::before{content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 60px; background: no-repeat 50% / cover; background-image: url(/resources/dist/img/user/main/sect02-line.png);}
.sect02-img .inner::before{content: '';position: absolute; bottom: -10px; right: 0; width: 492px; height: 378px; background: no-repeat 50% / cover; background-image: url(/resources/dist/img/user/main/sect02-people.png);}
.sect02-img__wrap{position: relative; max-width: 1065px; width: 100%; margin: 0 auto;}
.sect02-img__wrap > div { position: relative; display: block; width: 100%; height: 73px; } 
.sect02-img__wrap img{position: absolute;}
.sect02-img__wrap .img01 img{left: 52%;}
.sect02-img__wrap .img03 img{right: 0;}
.sect02-img__wrap .img04 img{left: 25%;}
.sect02-img__wrap .img05 img{left: 52%;}
.sect02-img__wrap .img06 img{left: 7%;}
.sect02-bottom{background: var(--color-orange); padding: 30px 0;}
.sect02-bottom .tit{color: #fff;font-size: 28px;font-weight: 700;line-height: 1.2;align-items: start;}
.sect02-bottom .tit span {font-weight: 700;}
.sect02-bottom .hd-logo {height: 44px; line-height: 1; margin-right: 5px;} 
.sect02-bottom p{color: #FBDFD5; font-size: 16px; font-weight: 400; line-height: 2.5;}
.sect02-bottom p br {display: none;}

.sect02-img__wrap div {opacity: 0;}
.sect02-img__wrap div.fadeInUp {animation: fadeInUp 1.2s cubic-bezier(.39,.575,.565,1.000) both;}
.sect02-img__wrap .img01 {animation-delay: .3s;}
.sect02-img__wrap .img02 {animation-delay: .6s;}
.sect02-img__wrap .img03 {animation-delay: .9s;}
.sect02-img__wrap .img04 {animation-delay: 1.2s;}
.sect02-img__wrap .img05 {animation-delay: 1.5s;}
.sect02-img__wrap .img06 {animation-delay: 1.8s;}

.sect03{padding: 184px 0 220px; background: no-repeat 50% / cover; background-image: url(/resources/dist/img/user/main/sect03-bg.png); background-size: cover; background-color: var(--color-orange2);}
.sect03 .total-tit{text-align: center; position: relative; font-size: 25px; font-weight: 700; color:  var(--color-navy); display: flex; align-items: center; justify-content: center; line-height: 1.4;}
.sect03 .total-tit b{font-size: 45px; margin-right: 5px;}
.sect03 .total-tit::before,
.sect03 .total-tit::after{content: ''; width: 4px; height: 39px; background: var(--color-orange);}
.sect03 .total-tit::before{margin-right: 26px;}
.sect03 .total-tit::after{margin-left: 26px;}
.sect03 .total-list{margin-top: 196px; display: flex;}
.sect03 .total-list li{position: relative; flex: 1;}
.sect03 .total-list li:not(:last-child){padding-right: 142px;}
.sect03 .total-list li:not(:last-child)::after{content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: 56px; width: 30px; height: 30px; background: no-repeat 50% / cover; background-image: url(/resources/dist/img/user/main/ico-plus.svg);}
.sect03 .list-box{padding: 45px 22px 45px 45px; position: relative; background-color: #fff; border-radius: 15px; border: 1px solid #e9e9e9; height: 435px;}
.sect03 .total-img{position: absolute; bottom: 25px; right: 34px;}
.sect03 .total-list__tit{margin-top: 25px; font-size: 28px; color: var(--color-navy); font-weight: 700; line-height: 1.5;}
.sect03 .total-list__cont{margin-top: 15px; color: #A8A8A8; font-size: 16px; font-weight: 400; line-height: 1.7;}

.sect03 .total-list li {opacity: 0;}
.sect03 .total-list li.fadeInUp {animation: fadeInUp 1.2s cubic-bezier(.39,.575,.565,1.000) both;}
.sect03 .total-list .list02 {animation-delay: .3s !important;}
.sect03 .total-list .list03 {animation-delay: .6s !important;}







@media screen and (max-width: 1280px){
    .main-video__txt {max-width: calc(678px + 80px); padding: 195px 40px 0;}
    .sect01 {padding: 80px 0;}
    .sect01-cont .l {margin-right: 0;}
    .sect01-cont .txt-wrap {padding-top: 30px;}
    .sect01-cont .txt-wrap .num {display: none;}
    .sect01-cont .cont1 {flex-direction: column;}
    .sect01-cont .cont2 {flex-direction: column-reverse;}
    .sect01-cont > div:not(:last-child) {margin-bottom: 100px;}

    .sect02-img {margin-bottom: 0;}
    .sect02-img__wrap div:not(:last-child) {margin-bottom: 20px;}
    .sect02-img .inner::before {right: -60px; width: 424px; height: 372px; background-size: contain;}
    .sect02-img__wrap .img01 img {left: 12%;}
    .sect02-img__wrap .img02 img {right: 12%;}
    .sect02-img__wrap .img03 img {left: 6%;}
    .sect02-img__wrap .img04 img {left: 35%;}
    .sect02-img__wrap .img05 img {left: 8%;}
    .sect02-img__wrap .img06 img {left: 30%;}
    .sect02-bottom .tit {display: flex; justify-content: center;}
    .sect02-bottom p {line-height: 1.8; text-align: center;}
    .sect02-bottom p br {display: block;}
    .sect02-bottom p br.mo {display: none;}

    .sect03 {padding: 70px 0 100px;}
    .sect03 .total-list {flex-direction: column; margin-top: 70px;}
    .sect03 .total-tit b {font-size: 35px;}
    .sect03 .list-box {height: 200px; padding: 40px;}
    .sect03 .list-box .total-icon {display: none;}
    .sect03 .total-list__tit {margin-top: 0;}
    .sect03 .total-list__tit br {display: none;}
    .sect03 .total-img img {max-width: 80%;}
    .sect03 .total-list li:not(:last-child) {padding: 0 0 70px;}
    .sect03 .total-list li:not(:last-child)::after {width: 22px; height: 22px; left: 50%; transform: translateX(-50%); top: unset; bottom: 25px;}
}


@media screen and (max-width: 768px) { 
    br.mo {display: block !important;}
    .main-video__txt {padding: 120px 20px 0;}
    .main-video__txt .img-txt {font-size: 20px; margin-top: 20px; display: inline-block; line-height: 1.8;}
    .main-video__txt .img-txt .hd-logo {display: inline-block; width: 130px; height: 30px; vertical-align: text-bottom;}
 
    .sect01 .img-wrap {display: flex; justify-content: center;}
    .sect01 .img-wrap img {width: 90%;}
    .sect01-cont .txt-wrap .tit {font-size: 18px; margin-bottom: 20px;}
    .sect01-cont .txt-wrap .txt {font-size: 16px;}
    .sect-tit.type01 h2 {font-size: 30px;}

    .sect02 {margin-top: 80px;}
    .sect02-img {margin-top: 25px;}
    .sect02-bottom .tit {display: block; font-size: 24px; text-align: center;}
    .sect02-bottom .tit .none {display: none;}
    .sect02-bottom .hd-logo {margin-right: 0;}
    .sect02-bottom .hd-logo img {height: 40px; vertical-align: middle;}
    .sect02-bottom p {margin-top: 10px;}
    .sect02-img__wrap > div, .sect02-img__wrap img {height: 60px;}
    .sect02-img__wrap img {left: 50% !important; transform: translateX(-50%); right: unset;}
    .sect02-img__wrap div:not(:last-child) {margin-bottom: 0;}
    .sect02-img .inner {padding-bottom: 70px;}
    .sect02-img .inner::before {width: 215px; height: 189px; right: -40px; z-index: 1;}

    .sect03 {padding: 50px 0 40px; background-image: unset;}
    .sect03 .total-list {margin-top: 40px;}
    .sect03 .total-list li:not(:last-child) {padding-bottom: 20px;}
    .sect03 .total-list li:not(:last-child)::after {content: unset;}
    .sect03 .total-tit::before, .sect03 .total-tit::after {content: unset;}
    .sect03 .total-tit {display: block;}
    .sect03 .total-tit b {font-size: 32px; margin-right: 0;}
    .sect03 .list-box {padding: 20px; height: 100%;}
    .sect03 .total-img img {display: none;}
    .sect03 .total-list__tit {font-size: 20px; text-align: center;}
    .sect03 .total-list__cont {font-size: 14px; text-align: center; margin-top: 5px;}
}