html, body {
  height: auto;
  margin: 0;
  overflow-y: auto;
  scrollbar-gutter: stable overlay;
  overflow-x: hidden;
}

body::-webkit-scrollbar {
  width: 4px;
}

body::-webkit-scrollbar-track {
  background: transparent;
}

body::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.3);
  border-radius:4px;
}
.font70{font-size:55px;line-height: 70px}
.font40{font-size:40px;}
.font30{font-size:30px;line-height: 45px}
.center_cont{
  width:100%;
  height: 100%;
  display: flex;
  align-items: center;justify-content: center
}
.mask {overflow: hidden;display: inline-block;}
.flexcol{display: flex;flex-direction: column;}
.btn_plus{background: #fff;height: 64px;line-height: 64px;padding: 0 25px;background:#fff url('/img/main/btn_more.svg') right 25px center/ 36px no-repeat;
border-radius: 300px;display: inline-block;padding-right: 77px;font-size: 20px;box-shadow: 0px 0px 10px 0px var(--main3)4D;border: 1px solid #CDE3EF;}
.main_wrap section{position: relative;}
.sec01{height: 100vh}
.sec01 .cont01 p{font-size: 50px}
.sec01 .cont01 .text_center>img{margin-bottom: 50px}
.sec01 .cont01 .text_center{clip-path: none;
  transform-origin: 50% 50%;}
.sec01 .diagram .shape_wrap>*{position: absolute;opacity: 0; transform:scale(0);}
.sec01 .diagram .shape_wrap img{display: none;}
.sec01 .diagram .shape_wrap{position: absolute;left: 50%;
    transform: translate(-50%, -50%);top: 50%; z-index: -1;width:700px;height: 700px;display: flex;align-items: center;justify-content: center}
.sec01 .diagram .img04{width:700px;height: 700px}
.sec01 .diagram .img04>*{background: #F372B2;width:700px;height: 700px;transform-origin: 50% 50%;position: absolute;}
.sec01 .img04 .polygon {clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);}
.sec01 .img04 .circle {clip-path: circle(50% at 50% 50%);transform:scale(0.8);opacity: 0}
.sec01 .mov_wrap {display: none;position: absolute;width: 100%;height: 100%;z-index: 2;top: 0; clip-path: circle(0% at 50% 50%);
overflow: hidden;transform-origin: 50% 50%;}
.sec01 .mov_wrap .video_wrap video{position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;z-index: -1;
    transform: translate(-50%, -50%);}
.sec01 .mov_wrap .video_wrap::before{display: inline-block;content: '';width:100%;height: 100%;
background: #D9D9D9;position: absolute;mix-blend-mode: multiply;}
.sec01 .mov_wrap .center_cont{flex-direction: column;position: relative;z-index: 2}
.sec01 .mov_wrap p:last-child{font-size: 80px;text-transform: uppercase;font-weight: 700}
.sec01 .mov_wrap p:first-child{font-size:45px;font-weight: 200;}

.sec02{padding:300px 0 0;}
.sec02 h3{overflow:hidden;color:#150201;text-align:center;}
.sec02 h3 .mask {overflow: hidden;}
.sec02 h3 p{ transform:translateY(-100%);}
.sec02 .visual{
	position:relative;
	width:100%;height:100vh;
	margin:100px 0 0;
}
.sec02 .visual .bg{
	overflow:hidden;
	position:absolute;left:0;top:0;
	width:100%;height:100%;
	background:url('/img/main/sec02_bg.jpg') no-repeat;
	background-size:cover;
	transition:all 0.2s;
}
.sec02 .visual h4{
	position:absolute;left:50%;top:50%;z-index:10;
	transform:translate(-50%,-50%);    text-align: center;
}
.sec02 .visual h4 span{
	display:inline-block;
      width: 100%;color:#fff;
	opacity:0;transform:translateY(-100px);
}
.sec02 .visual h4 span:last-child{font-weight: 700}
.sec02 .visual .bg_color {
	opacity: 0;
  position: absolute;
  top: 50%; left:50%;
  width: 100vw;
height: 100vh;
transform: translate(-50%, -50%);
  background: #A9A494;
  mix-blend-mode: multiply;
}
.sec03{background:#F8F6DE;height: 100vh;position: relative;overflow: hidden;}
.sec03>div{display: flex;flex-direction: column;align-items: center;justify-content: center;width:100%;height: 100vh}
.sec03 .text1, .sec03 .text2 {
  color: #150201;
}

.sec03 .text2-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
text-align: center;
}

.sec03 .line {
  position: absolute;
  bottom: 50%;
  height: 6px;
   width: 100vw;
  background: #150201;
  transform-origin: center center;
  transform: scaleX(0);
}
.sec03 .bg{
	opacity: 0;
	overflow:hidden;
	position:absolute;left:0;top:0;
	width:100%;height:100%;
	background:url('/img/main/sec03_bg.jpg') no-repeat;
	background-size:cover;
	transition:all 0.2s;
}
.sec03 .text_wrap03{display: none;position: absolute;top: 0;}
.sec03 .text_wrap03 p{transform: translateY(-100px);color:#fff;opacity: 1}
.sec03 .text_wrap03 .text3{font-size: 24px;margin-bottom: 35px}

.sec05{background: var(--main);position: relative;}
.sec05 .cont01{min-height: 100vh}
.sec05 .cont01 .text_wrap{text-align: center;position: absolute;top:10vh;left:50%;transform: translateX(-50%);}
.sec05 .cont01 .text_wrap p.font70{transform: translateY(-100%);}
.sec05 .cont01 .container p:last-child{font-size: 34px;font-weight: 200;margin-top: 74px;line-height: 50px}
.sec05 .cont01 .img_wrap{width:100%;height: 100vh;overflow: hidden;position: relative;}
.sec05 .cont01 .img_wrap .img{transform: translateY(100%);position: absolute;width:33.33%;height: 100%;background-repeat: no-repeat;background-size: cover;
background-position: center center}
.sec05 .cont01 .img_wrap .img02{right:33.33%;z-index: 1}
.sec05 .cont01 .img_wrap .img01{z-index: 2}
.sec05 .cont01 .img_wrap .img03{right:0}

.sec05 .cont01>.container{position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    display: flex;
    align-items: center;}
.sec05 .cont01 .text{opacity: 0;transform: translateY(40px);}
.sec0501 .cont02{padding: 150px 0 120px;width:100%;height: 100%;background: var(--main)}
.sec0501 .cont02 .container{overflow: visible;}
.sec0501 .cont02 .flex{gap:32px;margin-top: 80px}
.sec0501 .cont02 .flex>div{width:calc(50% - 16px);background: #fff;box-shadow: 4px 4px 10px 0px #CEC88A;padding: 70px 0 70px 38px;display: flex;align-items: center;gap:32px;border-radius: 40px}
.sec0501 .cont02 .flex>div p{text-align: left;font-size: 20px;line-height: 30px}
.sec0501 .cont02 .flex>div p.name{margin-top: 24px}
.sec0501 .cont02 .flex>div p.name b{margin-right: 8px}

.sec0502 {overflow: hidden;}
.sec0502 .flex {display:flex;}
.sec0502 .flex.line1{padding-top: 140px}
.sec0502 .flex.line1 .txt_wrap {padding-left:100px; padding-top:200px;margin-left: -40px;}
.sec0502 .flex.line1 .num{top:200px;left:10px}
.sec0502 .flex .img_wrap {width:50%;}
.sec0502 .flex .txt_wrap {width:50%;position: relative;}
.sec0502 .txt_wrap .font70{font-weight: 200}
.sec0502 .num{width:60px;height:60px;  position: absolute;top:0px;left:40px;display: inline-flex;align-items: center;justify-content: center;background: rgba(219, 219, 219, 0.5);
    -webkit-backdrop-filter: blur(8px);backdrop-filter: blur(8px);border-radius: 50%; }
.sec0502 .num span{position: absolute;z-index:10;font-size:14px;color:#fff;letter-spacing: 2px;font-weight: 700;}
.sec0502 .num:after{content: "";position: absolute; top: 0; right: 0;bottom: 0; left: 0;width: 34px; height: 34px;margin: auto; background: #CCCCCC;border-radius: 50%;z-index: 9;}
.sec0502 .num.active:after{background: #FC9661}

.sec0502 .line2 {padding: 0;margin-bottom: 150px;margin-top: 170px;}
.sec0502 .line2 .txt_wrap {text-align:center;position: relative;}
.sec0502 .line2 .num{bottom:-80px;top:auto;left:calc(50% - 30px);}
.sec0502 .line3 {justify-content:flex-end;margin-top: 80px;padding-bottom: 140px}
.sec0502 .line3 .txt_wrap {padding:63px 0 0 115px; width:auto; flex:1;}
.sec0502 .line3 .num{top:100px;left:0;}
.sec0502 svg{position: absolute;top: 0;left:50%;transform: translateX(-50%);max-width: 1222px}

.sec06{position: relative;}
.sec06 .flex{gap:60px;}
.sec06 .cont02{height: 100vh;overflow: hidden;}
.sec06 .cont0201{height: 100%;padding: 50px}
.sec06 .cont02 .flex{display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;grid-template-rows: 1fr 1fr 1fr;gap:47px 60px;height: 100%}
.sec06 .cont02 .flex .img{width:100%;background-size: cover;background-repeat: no-repeat;background-position: center center}
.sec06 .cont0202{opacity: 0;position: absolute;top:0;width:100%;height: 100%}
.sec06 .cont0202 .flex{grid-template-columns: 1fr 1fr 1fr;gap:90px;}
.sec06 .text_wrap{opacity: 0;position: absolute;top: 0;}
.sec06 .text_wrap .bg{position: absolute;top:0;left:0;background: linear-gradient(180deg, rgba(248, 246, 222, 0) 0%, #F8F6DE 100%);width:100%;height: 100%;opacity: 0}
.sec06 .text_wrap .bg02{background: linear-gradient(180deg, rgba(248, 246, 222, 0.5) 0%, #F8F6DE 100%)}
.sec06 .text_wrap .text1,.sec06 .text_wrap .text3{font-size: 40px;font-weight: 200;line-height: 60px}
.sec06 .text_wrap .text2{margin-bottom:48px}
.sec06 .text_wrap>div:not(.bg){display: flex;flex-direction: column;text-align: center}
.sec06 .text_wrap p{transform: translateY(-120px);}
.sec06 .text_wrap .mask {overflow: hidden;display: inline-block;}

.sec07 {background: #3796F4;height: 100vh;overflow: hidden;}
.sec07 .text_wrap01{position: absolute;top: 0;}
.sec07 .text_wrap01 p{transform: translateY(-100px);color:#fff;font-weight: 200}
.sec07 .text_wrap01 .text4{transform: translateX(-60px);opacity: 0;display: none}
.sec07 .text_wrap01 .text5{transform: translateX(60px);opacity: 0;display: none}
.sec07 .text_wrap01 .line{width:120px;height: 120px;margin:85px 0;display: none;transform: scale(0);}
.sec07 .text_wrap01 .line span{display: inline-block;content: '';width:120px;height: 10px;background: #fff;position: absolute;top:50%;left:50%;transform: translate(-50%,-50%)}
.sec07 .text_wrap01 .line span:last-child{transform: translate(-50%,-50%) rotate(90deg);}
.sec07 .cont02{position: absolute;top:0;width:100%;height: 100%;left:0;z-index: 2;opacity: 0;flex-wrap: wrap;background: #fff;display: none}
.sec07 .cont02 .grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  height: 100vh;
  --col1: 1;
  --col2: 1;
}

.sec07 .cont02 .grid>div {
  position: relative;
  flex: 1 1 calc(50% - 5px);
  height: 50vh;
  transition: all 0.3s;
}
.sec07 .cont02 .grid >div:not(.on)::before{transition: all 0.3s;display: inline-block;content: '';width:100%;height: 100%;background: rgba(0, 0, 0, 0.7);position: absolute;top:0;left:0;z-index: 2;}
.sec07 .cont02 .grid >div.on p:not(.tit){display: block}

.sec07 .cont02>div .box01{background: url('/img/main/sec07_img01.jpg') center center / cover no-repeat;text-align: right}
.sec07 .cont02>div .box02{background: url('/img/main/sec07_img02.jpg') center center / cover no-repeat;}
.sec07 .cont02>div .box03{background: url('/img/main/sec07_img03.jpg') center top / cover no-repeat;text-align: right}
.sec07 .cont02>div .box04{background: url('/img/main/sec07_img04.jpg') center center / cover no-repeat;}
.sec07 .cont02>div p.tit{color:#fff;font-size:40px;font-weight: bold;font-family: 'HGGGothicssi';letter-spacing: -3px}
.sec07 .cont02>div p:not(.tit){color:#fff;font-size: 24px;line-height: 34px;margin-top: 55px;display: none}
.sec07 .cont02>div .text{position: absolute;bottom:75px;right:60px}
.sec07 .cont02>div .box03 .text,.sec07 .cont02>div .box04 .text{top:75px;bottom:auto}
.sec07 .cont02>div .box02 .text,.sec07 .cont02>div .box04 .text{left:60px;right:auto}
.sec07 .btn_arrow{box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);border-radius: 30px;font-size: 18px;background: #fff url('/img/main/sec07_arrow.svg') right 20px center;background-repeat: no-repeat;padding: 0 60px 0 20px;
position: absolute;bottom:30px;left:50%;transform: translateX(-50%);z-index: 2;height: 53px;line-height: 53px}

.sec08{height: 100vh}
.sec08 .text_wrap01{display: flex;width: 100%;}
.sec08 .text_wrap01 p{display: inline-block; transform: translateY(-100%);}
.sec08 .text_wrap01 p:not(.bold){font-weight: 200;}
.sec08 .img_wrap{margin-top: 70px;position: relative;overflow: hidden;}
.sec08 .img_wrap .img01 {
  width:0;height: 523px;
  background-position: center center;
  background-size: cover;
}
.sec08 .img_wrap .img02{
  width:1280px;height: 523px;background-position: center center;
  background-size: cover;opacity: 0;position: absolute;top:0;left:0
}
.sec08 .img_wrap .img03,.sec08 .img_wrap .img04{
  opacity: 0;position: absolute;top:0;left:0;width: 100%;
    height: 100%;background-size: cover;
}
.sec08 .text_wrap{opacity: 0;position: absolute;top: 0;}
.sec08 .text_wrap .bg{position: absolute;top:0;left:0;background: linear-gradient(180deg, rgba(248, 246, 222, 0) 0%, #F8F6DE 100%);width:100%;height: 100%;opacity: 0}
.sec08 .text_wrap .bg02{background: linear-gradient(180deg, rgba(248, 246, 222, 0.5) 0%, #F8F6DE 100%)}
.sec08 .text_wrap .text1{font-weight: 200}
.sec08 .text_wrap .text1 span{font-weight: 600}
.sec08 .text_wrap .text2{margin-bottom:60px;font-weight: 200}
.sec08 .text_wrap .text3{font-size: 24px;line-height: 40px}
.sec08 .text_wrap>div:not(.bg){display: flex;flex-direction: column;text-align: center}
.sec08 .text_wrap p{transform: translateY(-120px);}
.sec08 .text_wrap .mask {overflow: hidden;display: inline-block;}

.sec09{height: 100vh;background: url('/img/main/sec09_bg.jpg') center center / cover no-repeat}
.sec09 .text_wrap{display: none;padding-top: 10vh;}
.sec09 .text_wrap .flexcol{width:100%}
.sec09 .text_wrap .flexcol p{display: inline-block;overflow: hidden;transform: translateY(-100px); white-space: nowrap;}
.sec09 .text1 {font-weight: 200;}
.sec09 .text2{font-size:30px;margin-top: 30px}


.sec10{height: 100vh;background: var(--main);padding-top: 10vh;overflow: hidden}
.sec10  .text_wrap{}
.sec10 .text3 {font-size: 30px;}
.sec10 .text_wrap{position: relative;z-index: 3}
.sec10 .text_wrap .text1{margin:20px 0 45px;line-height: 1;}
.sec10 .text2{font-size:30px;}
.sec10 .text_wrap p{transform: translateY(-120px);}
.sec10 .img_wrap{display: flex;justify-content: space-between;align-items: center;position: absolute;bottom: 0;    left: 50%;
    transform: translateX(-50%);z-index: 2;}
.sec10 .img_wrap .img01{transform: translateY(150%);}
.sec10 .img_wrap .img02{transform: translateY(120%);}
.sec10 .img_wrap .img03{opacity: 0;display: none;top: 50%;position: absolute;left: 50%;transform: translate(-60%, -50%);}
.sec10 .img_wrap .img0102,.sec10 .img_wrap .img0103{opacity: 0;display: none;position: absolute;left:0;bottom:0}
.sec10 .bg{width: 100vw;}
.sec10 .bg{position: absolute;left:0;bottom:0;transform: translateX(-100%);z-index: 1}
.sec10 .text_wrap02{display: none;position: relative;z-index: 2}
.sec10 .text_wrap02 p{transform: translateY(-120px);}

.sec11{height: 100vh;background: #3796F4;margin-top: -1px !important;position: relative;}
.sec11 p.font70{font-weight: 700;width: max-content;color:rgba(255,255,255,0.2);
    background: linear-gradient(to right, #fff, #fff) no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 0%;
    transition: background-size cubic-bezier(.1,.5,.5,1) 0.5s;position: relative;z-index: 2}
.sec11 img{position: absolute;opacity: 0;top:50%;transform: translateY(-50%);}
.sec11 img.left{left:115px;}
.sec11 img.right{right:65px}

.sec12{height: 100vh;overflow: hidden;}
.sec12 .text_wrap01,.sec12 .text_wrap02{display: none;width: 100%;}
.sec12 .text_wrap01{display: flex}
.sec12 .text_wrap02 span{transform: translateY(-200px);display: inline-block; font-weight: 400}
.sec12 .text_wrap01 .mask p{transform: translateY(-150px);}
.sec12 .text_wrap01 .text3{font-size: 40px;padding-top: 60px}
.sec12 .text_wrap02{position: absolute;top:15vh}
.sec12 .text_wrap02 .text2 span{font-weight: 700 !important}
.sec12 .wrapper {
  height: 100%;
  position: relative;
   padding-top: 40vh;
  text-align: center;
  background: var(--main);
}
 .sec12 .wrapper img {max-width: 90vw }
 .sec12 .slide_text{font-size: 40px;position: absolute;bottom: 15vh;opacity: 0;margin-bottom: -30px;
    left: 50%;transform: translateX(-50%);max-width: 90vw;}
.sec12 .navi_btn{position: absolute;bottom:7vh;left:50%;transform: translateX(-50%);}
.sec12 .navi_btn p{cursor: pointer;}
.sec12 .navi_btn .next_btn{transform: scaleX(-1);}

.sec1202{height: 100vh;background: var(--main);position: relative;overflow: hidden}
.sec1202 .container{overflow: visible;}
.sec1202 .text_wrap01{width: 100%;}
.sec1202 .text_wrap01{display: inline-block; font-weight: 200}
.sec1202 .text_wrap01 .text2{font-weight: 600}
.sec1202 p.box{transform: translateY(100vh);position: absolute;min-width:335px;height: 480px}
.sec1202 p.box .multi_img02{opacity: 0;position: absolute;left:0;max-width: initial;}
.sec1202 p.box.box0402{transform: none;opacity: 0;}
.sec1202 img.box_text{position: absolute;opacity: 0}
.sec1202 img.box03_text{top:-104px;left:calc(50% - 51px);z-index: -1}
.sec1202 img.box04_text{top: -104px;left: 50%;z-index: -1;max-width: initial;}
.sec1202 p:has(img){position: relative;}

.sec13{height: 100vh}
.sec13 .text_wrap01{display: flex;width: 100%;}
.sec13 .text_wrap01 span{display: inline-block; font-weight: 400;}
.sec13 .text_wrap01 .bold span{font-weight: 700 !important}
.sec13 .text_wrap01 .text1{font-size: 40px}
.sec13 .text_wrap01 .text3{font-size: 24px;margin-top: 35px;line-height: 34px}
.sec13 .book_slide{display: flex;gap:30px;margin-top: 80px;align-items: flex-start;opacity: 0}
.sec13 .book_slide img:nth-child(even){margin-top: 57px}
.sec13 .book_slide img {flex-shrink: 0;}

.sec14{height: 100vh;overflow: hidden;position: relative;border-bottom: solid 1px #ccc}
.sec14 .container::before,.sec14 .container::after,.sec14::before{display: inline-block;content: '';width:1px;height: 100vh;position: absolute;top: 0;background: #cccc;left:0;z-index: 2;}
.sec14 .container::after{left:auto;right:0}
.sec14::before{left:50%;}
.sec14 .sec14_slide {width:50%;}
.sec14 .swiper-slide{align-items: center;justify-content: space-between;height: 90%}
.sec14 .swiper-slide .font30{margin-top: 40px}
.sec14 .text_wrap{padding-left: 30px;width:50%}
.sec14 .swiper-slide>div{text-align: center}
.sec14 .img_wrap{position: relative;    margin-top: 14px;}
.sec14 .tablet{position: absolute;top:0;left:0;z-index: 2}
.sec14 .swiper-slide .tit{font-size: 34px;margin: 50px 0 30px;line-height: 1;font-weight: 700}
.sec14 .swiper-slide p{font-size: 24px}
.sec14 .btn_plus{margin-top:40px;}

.sec14 .slide_page{display: inline-block;width:auto;box-shadow: 0px 0px 4px 0px #B3CEE1;background: #fff;border-radius: 14px;height: 50px;position: absolute;line-height: 50px;
    left: 50%;transform: translateX(-50%);bottom: 30px;z-index: 3}
.sec14 .slide_page .swiper-pagination-bullet{position: relative;width:auto;height: auto;background:#fff;opacity: 1;border-radius: 0;margin:0 18px}
.sec14 .slide_page span.bullet{display: inline-block;width:10px;height: 10px;background: #B3CEE1;border-radius: 100%;}
.sec14 .slide_page .swiper-pagination-bullet-active span.bullet{background: var(--main3)}
.sec14 .slide_page span.text{position: absolute;top:-55px;background: #3796F4;color:#fff;width: max-content;width: max-content;
    padding: 0 17px;border-radius: 4px;height: 40px;line-height: 40px;    left: 50%;
    transform: translateX(-50%);}
.sec14 .slide_page span.text:before {
  width:18px;height: 20px;
            position: absolute;
            content: '';
          background: #3796F4;
          transform: rotate(45deg);
bottom: -6px;
border-radius: 4px;
left: calc(50% - 9px);
        }
.sec14 .slide_page .swiper-pagination-bullet span.text{display: none}
.sec14 .slide_page .swiper-pagination-bullet-active span.text{display: block}

.sec15{min-height: 100vh;position: relative;padding-top: 140px;padding-bottom: 58px}
.sec15 .container{overflow: visible;position: static;}
.sec15 .text_wrap  .font40{margin-bottom: 30px;line-height: 1}
.sec15 .text_wrap .text3{margin:30px 0 54px;font-size:20px;line-height: 30px}
.sec15 .swiper{overflow: visible;}
.sec15 .btn_plus{margin:64px auto 0;position: relative;}
.sec15 .btn_plus::before{display: inline-block;content: '';width:200vw;height: 1px;position: absolute;background:#686868;left:-100vw;bottom: 50%;z-index: -1}

.sec16{background: url('/img/main/sec16_bg.jpg') center center / cover no-repeat;padding:140px 0 }
.sec16 .text1{font-size: 60px;margin-bottom: 32px}
.sec16 .text_wrap{margin-bottom: 60px}

.sec17{background: #ECEFF0;position: relative;}
.sec17 .flex{justify-content: space-between;width:100%}
.sec17 .text1{font-size: 60px;}
.sec17 .flow__image {
    position: relative;
    width: 100%;
    height: 100%
}
.sec17 .flow__body {position: relative;height: 330px;}
.sec17  .container{overflow: visible;}
.sec17 .flow__image{width:600px;border-left:solid 1px #ABABAB;border-right:solid 1px #ABABAB;text-align: center;background: #ECEFF0}
.sec17 .flow__image .flow__item{padding: 250px 0;}
.sec17 .flow__body .flow__item{width: max-content;position: absolute;overflow: hidden;background: #ECEFF0;width:30vw}
.sec17 .flow__body .flow__item>div{transform: translateY(-100px);transition: all 0.4s;opacity: 0;}
.sec17 .flow__body .flow__item.active>div{transform: translateY(0);opacity: 1}
.sec17 .flow__body .font30 span{color:#00A7FF;font-weight: 700}
.sec17 .flow__body .text2 {font-size: 20px;line-height: 34px;margin-top: 30px;margin-bottom: 40px}
.sec17 .flow__side .title{padding-bottom: 145px;position: relative;}
.sec17 .flow__side>.flexcol{height: 100vh;justify-content: center;}
.sec17 .flow__side .title::after{display: inline-block;content: '';width:100vw;height: 1px;background: #ABABAB;position: absolute;left: -50vw;bottom:75px}

.sec18{height: 100vh;background: #3796F4;overflow: hidden;}
.sec18 .text_wrap01{display: none;width: 100%;}
.sec18 .text_wrap01 p{opacity: 0}
.sec18 .review_slide{display: flex;gap:30px;margin-top: 80px;align-items: flex-start;opacity: 0;align-items: stretch;}
.sec18 .review_slide>div{background: #A3DFFF;border-radius: 40px;padding: 28px 28px 58px;width:315px;position: relative;}
.sec18 .review_slide>div .img{width:40px;height: 40px;background-position: center center;background-size: cover;border-radius: 100%;overflow: hidden;margin-bottom: 24px}
.sec18 .review_slide>div p{font-size: 18px;line-height: 30px;word-break: keep-all;display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.sec18 .review_slide>div p.nickname{font-size:16px;line-height: 1;margin-top: 20px;position: absolute;bottom:28px}
.sec18 .review_slide02{margin-top: 47px}
.sec1802{background: #3796F4;padding-bottom: 140px}
.sec1802 .flex{gap:40px}
.sec1802 .flex>div{width:400px;position: relative;}
.sec1802 .flex>div .img{width:100%;border-radius: 12px;overflow: hidden;aspect-ratio: 400 / 711;max-height: 711px;}}
.sec1802 .flex>div .img video{width: 100%;height: 100%;object-fit: cover}
.sec1802 .flex>div span{font-size:14px;font-weight: 700;position: absolute;top:40px;left: 40px;color:#fff;letter-spacing: 2px;}
.sec1802 .flex>div p{font-size:20px;padding: 26px 15px 0;color:#fff}

.sec19{height: 100vh;overflow: hidden;}
.sec19 .cont01{position: relative;overflow: hidden;}
.sec19 .cont01 .text_wrap{position: absolute;top:20vh}
.sec19 .text2{font-size: 60px;font-weight: 600;margin-top:27px;line-height: 1}
.sec19 .cont01 .img{z-index: -1;border-radius: 20px;overflow: hidden;aspect-ratio:476/342;max-width: 25vw;position: absolute;top:40vh;background: #898989}
.sec19 .cont01 .img img{width:100%;height: 100%;object-fit: cover}
.sec19 .cont02{display: none;position: absolute;top: 0;width: 50vw;right: -50%;height: 100vh;}
.sec19 .cont02 .text2{font-weight: 700;line-height: 70px;}
.sec19 .cont02 .slide{opacity: 0;position: absolute;}
.sec19 .cont02 .slide .flex{gap:90px;position: relative;}
.sec19 .cont02 .slide .item{width:500px;text-align: center}
.sec19 .cont02 .slide .item p.title{font-size: 60px;margin-bottom: 60px;font-weight: 700}
.sec19 .cont02 .slide .item p.text{margin-top: 34px}
.sec19 .cont02 .slide .item p.text span{font-size: 24px;font-weight: 700;line-height: 1;}
.sec19 .cont02 .slide .item p.text span:last-child{color:#3796F4}
.sec19 .cont02 .slide .item p.text span + span::before{display: inline-block;content: '';width:2px;height: 20px;background: #DDDDDD;margin:0 24px;vertical-align: middle;}
.sec19 .cont02 .slide .item .slide_img{width:500px;height: 360px;transition: all 0.5s;filter: grayscale(1);}
.sec19 .cont02 .slide .item .slide_img img{width:100%;height: 100%;object-fit: cover;}
.sec19 .cont02 .slide .item p{opacity: 0;transition: all 0.5s}
.sec19 .cont02 .slide .item.active .slide_img{border-radius: 400px;overflow: hidden;filter:none}
.sec19 .cont02 .slide .item.active p{opacity: 1;}

section.sec20{background: url('/img/main/sec20_bg.jpg') center center / cover no-repeat;padding: 160px 0 210px 0;position: relative;z-index: 2;}
section.sec20 .sub_title{color:#fff;margin-bottom: 70px;}
section.sec20 .sub_title p{font-size: 24px}
section.sec20 .sub_title .text2{font-size: 60px;margin-top: 40px;line-height: 1}
section.sec20 .flex{gap:40px}
section.sec20 .flex>a{position: relative;width:400px;height: 420px;border-radius: 12px;padding: 50px;text-align: left}
section.sec20 .flex>a:nth-child(1){background: var(--main3);}
section.sec20 .flex>a:nth-child(2){background: var(--main);}
section.sec20 .flex>a:nth-child(3){background: #FFBC01;}
section.sec20 .flex>a div{position: absolute;bottom: 70px}
section.sec20 .flex>a div p{font-size: 40px;line-height: 1;font-weight: 700;margin-top: 25px}
section.sec20 .flex>a div span{font-size: 20px;line-height: 1;font-weight: 700;    letter-spacing: 2px;}
section.sec20 .btn_plus{margin-top: 60px;}
.main_wrap + .footer{margin-top: -50px;}

.sec04{height: 100vh;  overflow: hidden;padding-top: 65vh !important;}
.sec04 .sec04_arrow{
    z-index: 2;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;bottom:5vh;gap:30px
}
.sec04 .sec04_arrow button{width:60px;height: 60px;cursor: pointer;    transition: all 0.4s;
border-radius: 100%;box-shadow: 0px 0px 10px 0px #00000026;text-align: center;line-height: 60px;border:solid 2px #fff}
.sec04 .sec04_arrow button img{vertical-align: text-bottom;}
.sec04 .sec04_arrow button#sec04_next_btn{transform: scaleX(-1);}
.sec04 .sec04_arrow button.step1{background-color: var(--main);}
.sec04 .sec04_arrow button.step2{background-color: #3796f4;}
.sec04 .sec04_arrow button.step2 img{filter:brightness(1000%)}
.sec04 .sec04_arrow button.step3{background-color:#fff;}
.sec04 .text_wrap{opacity: 0;width: 100%;position: absolute;top:-200px;width: max-content;
    left: 50%;transform: translateX(-50%);}
.sec04 .text_wrap p{font-weight: 200}
.sec04 .item.active .text_wrap {animation: slideup 0.3s .1s forwards;}
.sec04 .wrapper {
  opacity: 0;
    position: relative;
        transform: rotate(-90deg);
}
@keyframes slideup {
  from {
    transform: translate(-50%,-20px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}
.sec04 .item{
  width:450px;
  text-align: center;
}
.sec04 .img_wrap,.sec04 .video_wrap{
width:450px;
height: 450px;max-height: 60vh;
  overflow: hidden;border-radius: 18px;
  position: relative;
      background-position: center top;
      background-repeat: no-repeat;
}
.sec04 .item .img_wrap p,.sec04 .item .video_wrap p{font-size: 34px;position: absolute;top:60px;color:#fff;text-align: center;width:100%;line-height: 50px;word-break: keep-all;}
.sec04 #box1 .img_wrap p{color:#150201}
.sec04 #box3 .diagram{position: absolute;top: -60px;
    left: 0;width: 180%;left: 50%;transform: translateX(-50%);max-width: 833px;opacity: 0;}
.sec04 #box3.active .diagram{animation: sec04dia 0.6s .2s forwards;}
@keyframes sec04dia {
  from {
    opacity: 0
  }

  to {
    opacity: 1;
  }
}
.sec04 #box3 .video_wrap video{width: 100%;}
.sec04 #box3 .video_wrap::before{
  display: inline-block;content: '';width:100%;height: 137px;
  background: linear-gradient(180deg, #7B959C 0%, rgba(123, 149, 156, 0) 100%);
position: absolute;top:0
}
.sec04 svg {
    height: 1418px;
    overflow: visible;
    width: 1418px;
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.quick_wrap{position: fixed;bottom:50px;z-index: 99;left:calc(100% - 90px);text-align: center;transform: translate(-50%, 0);z-index:0;opacity: 0;}
.quick_wrap .right a.move{width:120px;height: 120px;border-radius: 100%;display: inline-flex;align-items: center;justify-content: center;flex-direction: column;
  background: linear-gradient(133.96deg, #3796F4 23.59%, #1B80E4 100%);color:#fff;gap:15px;box-shadow: 0px 0px 7.73px 0px rgba(80, 80, 80, 0.25);}
.quick_wrap .right a.move img{width:50px}
.quick_wrap .right a.top{margin-top: 20px;display: block}
.quick_wrap.active{z-index: 2;opacity: 1;}
.ft_popup_wrap{position: fixed;bottom:0;left:50%;transform: translateX(-50%);z-index: 0;opacity: 0;width:100%}
.ft_popup_wrap .cont{position: relative;}
.ft_popup_wrap .btn_close{position: absolute;right:30px;bottom: 45px;z-index: 2;cursor: pointer;}
.ft_popup_wrap.active{z-index: 90;opacity: 1;}
#wrap:has(.ft_popup_wrap:not(.hidden)) .quick_wrap{bottom:130px}

.mobile_popup{display: none}

  .mobile_popup .overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 10000;
  }

  .mobile_popup .popup-top {
    position: absolute;
    right: 0;
    top: -50px;
    border-radius: 100%;
    overflow: hidden;
  }

  .mobile_popup .popup-wrap {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 10001;
    transform: translate(-50%,-50%);
    background: #fff;
    padding: 0;
    aspect-ratio: 720 / 800;
    width: 720px;
    max-height: 80vh;
    max-width: 90vw;
  }

.layerPop-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  display: none;
}

.layerPop-wrap {
  margin: 0 auto;
  max-width: 720px;
  position: fixed;
  height: 100%;
  top: 100px;
  z-index: 10001;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  display: none;
}
.layerPop-wrap .layerPopTop{position: relative;top:0;right:0;display:flex;align-items: center;justify-content: flex-end;width: 100%;margin-bottom: 20px; text-align:right;}
.layerPop-wrap .layerPopTop input[type="checkbox"]{display: none;}
.layerPop-wrap .layerPopTop input[type="checkbox"]+ label {background: url("../img/main/main_pop_chkbox.svg") center left no-repeat;background-size: 16px;
    height: 16px;padding-left: 24px;}
.layerPop-wrap .layerPopTop input[type="checkbox"]:checked+label {background-image:url("../img/main/main_pop_chkbox_on.svg"); }
.layerPop-wrap .layerPopTop .label{width: auto;color:#fff;font-size:14px;background-size: 14px;line-height: 14px;height: 14px;padding-left: 20px;}
.layerPop-wrap .layerPopTop button{background: none;cursor: pointer;vertical-align: text-bottom;margin-left: 10px}

.layerPop-wrap .layerPopCont{max-width: 1100px;border-radius: 12px;    overflow: hidden;}
.layerPop-wrap .swiper-slide{max-height: 620px;overflow: hidden;background: #f7f7f7;}
.layerPop-wrap .swiper-slide a{display: block}
.layerPop-wrap .layerPopCont img{max-width: 100%;max-height: 620px;}
.layerPop-wrap .swiper-page{display: grid;gap:1px;background: #DDDDDD;grid-template-columns: repeat(auto-fit, minmax(0, 1fr));}
.layerPop-wrap .swiper-page .swiper-pagination-bullet{width:100%;height: 60px;display: inline-block;border-radius: 100%;background: #fff;
opacity: 1 !important;border-radius: 0;margin:0;line-height: 60px;font-family: 'HGGGothicssi';font-weight: 400;}
.layerPop-wrap .swiper-page .swiper-pagination-bullet-active{background: #3796F4 !important;color:#fff;}