:root {
  --color-red:#DC1E1E;
}

.salpha{
  background-color: #fff;
  font-family: 'Pretendard', sans-serif;
}

/* 완료 후 삭제 */


.salpha .color-white{color: #fff;}
.salpha .color-black{color: #191919;}
.salpha .color-red{color: var(--color-red);}
.salpha .color-7b7b7b{color: #7b7b7b;}
.salpha .color-737373{color: #737373;}
.salpha .color-949494{color: #949494;}

.salpha .fm-geol{font-family: "Geologica", sans-serif;}
.salpha .fm-open{font-family: 'Open Sans', sans-serif;}

.salpha .text-center{text-align: center;}

.salpha .fs-12{font-size: 1.2rem;}
.salpha .fs-18{font-size: 1.8rem;}
.salpha .fs-20{font-size: 2rem;}
.salpha .fs-22{font-size: 2.2rem;}
.salpha .fs-24{font-size: 2.4rem;}
.salpha .fs-28{font-size: 2.8rem;}
.salpha .fs-32{font-size: 3.2rem;}
.salpha .fs-36{font-size: 3.6rem;}
.salpha .fs-42{font-size: 4.2rem;}
.salpha .fs-64{font-size: 6.4rem;}
.salpha .fs-68{font-size: 6.8rem;}

@media all and (max-width:1400px){
.salpha .fs-32{font-size: 3.1rem;}
.salpha .fs-36{font-size: 3.4rem;}
.salpha .fs-42{font-size: 4rem;}
.salpha .fs-64{font-size: 6rem;}
.salpha .fs-68{font-size: 6.2rem;}
}

@media all and (max-width:1200px){
  .salpha .fs-18{font-size: 1.7rem;}
  .salpha .fs-20{font-size: 1.9rem;}
  .salpha .fs-22{font-size: 2.1rem;}
  .salpha .fs-24{font-size: 2.2rem;}
  .salpha .fs-28{font-size: 2.6rem;}
  .salpha .fs-32{font-size: 3rem;}
  .salpha .fs-36{font-size: 3.2rem;}
  .salpha .fs-42{font-size: 3.8rem;}
  .salpha .fs-64{font-size: 5.8rem;}
  .salpha .fs-68{font-size: 6rem;}
}
@media all and (max-width:1024px){
  .salpha .fs-18{font-size: 1.6rem;}
  .salpha .fs-20{font-size: 1.8rem;}
  .salpha .fs-22{font-size: 2rem;}
  .salpha .fs-24{font-size: 2.1rem;}
  .salpha .fs-28{font-size: 2.4rem;}
  .salpha .fs-32{font-size: 2.7rem;}
  .salpha .fs-36{font-size: 3rem;}
  .salpha .fs-42{font-size: 3.4rem;}
  .salpha .fs-64{font-size: 5.2rem;}
  .salpha .fs-68{font-size: 5.5rem;}
}
@media all and (max-width:768px){
  .salpha .fs-22{font-size: 1.9rem;}
  .salpha .fs-24{font-size: 2rem;}
  .salpha .fs-28{font-size: 2.2rem;}
  .salpha .fs-32{font-size: 2.4rem;}
  .salpha .fs-36{font-size: 2.6rem;}
  .salpha .fs-42{font-size: 3rem;}
  .salpha .fs-64{font-size: 4.6rem;}
  .salpha .fs-68{font-size: 4.8rem;}
}
@media all and (max-width:576px){
  .salpha .fs-18{font-size: 1.4rem;}
  .salpha .fs-20{font-size: 1.6rem;}
  .salpha .fs-22{font-size: 1.8rem;}
  .salpha .fs-24{font-size: 1.8rem;}
  .salpha .fs-28{font-size: 2.1rem;}
  .salpha .fs-32{font-size: 2.2rem;}
  .salpha .fs-36{font-size: 2.4rem;}
  .salpha .fs-42{font-size: 2.8rem;}
  .salpha .fs-64{font-size: 4rem;}
  .salpha .fs-68{font-size: 4.2rem;}

  .salpha .xs-fs-16{font-size: 1.6rem;}
  .salpha .xs-fs-18{font-size: 1.8rem;}
}

.salpha .fw-100{font-weight: 100;}
.salpha .fw-200{font-weight: 200;}
.salpha .fw-300{font-weight: 300;}
.salpha .fw-400{font-weight: 400;}
.salpha .fw-500{font-weight: 500;}
.salpha .fw-600{font-weight: 600;}
.salpha .fw-700{font-weight: 700;}
.salpha .fw-800{font-weight: 800;}
.salpha .fw-900{font-weight: 900;}

.salpha .lh-14{line-height: 1.4;}
.salpha .lh-16{line-height: 1.6;}

.salpha .bg-red{background-color: var(--color-red);}
.salpha .bg-black{background-color: #191919;}
.salpha .bg-white{background-color: #ffffff;}
.salpha .bg-white01{background-color: rgba(255,255,255,.1);}
.salpha .bg-white005{background-color: rgba(255,255,255,.05);}
.salpha .bg-lightpink{background-color: #F9F4F4;}
.salpha .bg-7b7b7b{background-color: #7b7b7b;}
.salpha .bg-gray{background-color: #F5F5F5;}

.salpha .bd-red{border: 1px solid var(--color-red);}
.salpha .bd-lightpink{border: 1px solid #F9F4F4;}
.salpha .bd-white03{border: 1px solid rgba(255,255,255,.3);}

.salpha .py-100{padding: 100px 0;}
.salpha .py-120{padding: 120px 0;}
.salpha .py-140{padding: 140px 0;}

@media all and (max-width:1200px){
  .salpha .py-100{padding: 80px 0;}
  .salpha .py-120{padding: 100px 0;}
  .salpha .py-140{padding: 110px 0;}
}
@media all and (max-width:1024px){
  .salpha .py-100{padding: 60px 0;}
  .salpha .py-120{padding: 80px 0;}
  .salpha .py-140{padding: 85px 0;}
}
@media all and (max-width:768px){
  .salpha .py-100{padding: 40px 0;}
  .salpha .py-120{padding: 60px 0;}
  .salpha .py-140{padding: 70px 0;}
}
@media all and (max-width:576px){
  .salpha .py-100{padding: 35px 0;}
  .salpha .py-120{padding: 55px 0;}
  .salpha .py-140{padding: 65px 0;}
}

.salpha .pt-0{padding-top: 0;}

.salpha .mt-10{margin-top: 10px;}
.salpha .mt-20{margin-top: 20px;}
.salpha .mt-30{margin-top: 30px;}
.salpha .mt-40{margin-top: 40px;}
.salpha .mt-60{margin-top: 60px;}
.salpha .mt-80{margin-top: 80px;}
.salpha .mt-100{margin-top: 100px;}
.salpha .mt-120{margin-top: 120px;}

@media all and (max-width:1200px){
.salpha .mt-20{margin-top: 18px;}
.salpha .mt-30{margin-top: 26px;}
.salpha .mt-40{margin-top: 35px;}
.salpha .mt-60{margin-top: 50px;}
.salpha .mt-80{margin-top: 67px;}
.salpha .mt-100{margin-top: 80px;}
.salpha .mt-120{margin-top: 100px;}
}
@media all and (max-width:1024px){
.salpha .mt-10{margin-top: 8px;}
.salpha .mt-20{margin-top: 15px;}
.salpha .mt-30{margin-top: 22px;}
.salpha .mt-40{margin-top: 30px;}
.salpha .mt-60{margin-top: 45px;}
.salpha .mt-80{margin-top: 62px;}
.salpha .mt-100{margin-top: 65px;}
.salpha .mt-120{margin-top: 70px;}
}
@media all and (max-width:768px){
.salpha .mt-10{margin-top: 7px;}
.salpha .mt-20{margin-top: 13px;}
.salpha .mt-30{margin-top: 19px;}
.salpha .mt-40{margin-top: 26px;}
.salpha .mt-60{margin-top: 40px;}
.salpha .mt-80{margin-top: 55px;}
.salpha .mt-100{margin-top: 60px;}
.salpha .mt-120{margin-top: 70px;}
}
@media all and (max-width:576px){
.salpha .mt-30{margin-top: 17px;}
.salpha .mt-40{margin-top: 24px;}
.salpha .mt-60{margin-top: 35px;}
.salpha .mt-80{margin-top: 50px;}
.salpha .mt-100{margin-top: 55px;}
.salpha .mt-120{margin-top: 65px;}
}

.salpha .container{
  max-width: 1440px;
  width: 95%;
  margin: 0 auto;
}
.salpha .tit-border-top{
  padding-top: 20px;
  border-top: 1px solid #191919;
}
.salpha .tit-border-top.white{
  border-color: #fff;
}

/* common > > > 화살표 박스 */
.salpha .com-opac-flex{
  padding: 50px 40px;
  border-radius: 20px;
  display: flex;
  gap: 40px 100px;
  flex-wrap: wrap;
}

.salpha .com-opac-flex .opac-box.w100{
  width: 100%;
}
.salpha .com-opac-flex .opac-box{
  width: calc(50% - 50px);
}
.salpha .com-opac-flex .opac-cont{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.salpha .com-opac-flex .box{
  padding: 33px 5px;
  border-radius: 20px;
  transform: translateY(50px);
  opacity: 0;
  transition: transform .7s cubic-bezier(0.405, 0.00, 0.165, 1.000), opacity .7s cubic-bezier(0.405, 0.00, 0.165, 1.000);
}

.salpha .com-opac-flex .opac-cont.in-view .box:nth-child(1){transition-delay: .3s;}
.salpha .com-opac-flex .opac-cont.in-view .box:nth-child(2){transition-delay: .6s;}
.salpha .com-opac-flex .opac-cont.in-view .box:nth-child(3){transition-delay: .9s;}
.salpha .com-opac-flex .opac-cont.in-view .box:nth-child(4){transition-delay: 1.2s;}
.salpha .com-opac-flex .opac-cont.in-view .box:nth-child(5){transition-delay: 1.5s;}

.salpha .com-opac-flex .opac-cont.in-view .box{
  transform: translateY(0);
  opacity: 1;
}

@media all and (max-width:768px){
  
  .salpha .com-opac-flex .opac-box.mo-mb--10{
    margin-bottom: -30px;
  }
}

.salpha .com-arw-box{position: relative;}
.salpha .com-arw-box:before{
  position: absolute;
  width: 34px;
  height: 20px;
  content: '';
  background: url(../img/com-arw.svg)no-repeat center center;
  top: 50%;
  left: -50px;
  transform: translate(-50%,-50%);
  animation: arwMove01 .5s ease-in-out infinite alternate;
}

@keyframes arwMove01 {
  0% {
    transform: translate(-50%, -50%) translateX(-5px);
  }
  100% {
    transform: translate(-50%, -50%) translateX(5px);
  }
}
.salpha .com-arw-mo{position: relative;}
.salpha .com-arw-mo:before{
  position: absolute;
  width: 15px;
  height: 24px;
  content: none;
  background: url(../img/com-arw02.svg)no-repeat center center;
  top: -25px;
  left: 50%;
  transform: translate(-50%,-50%);
  animation: arwMove02 .5s ease-in-out infinite alternate;
}
@keyframes arwMove02 {
  0% {
    transform: translate(-50%, -50%) translateY(-5px);
  }
  100% {
    transform: translate(-50%, -50%) translateY(5px);
  }
}


@media all and (max-width:1200px){
  .salpha .com-opac-flex{
    gap: 30px 50px;
    padding: 40px 35px;
  }
  .salpha .com-opac-flex .box{
    padding: 28px 5px;
  }
  .salpha .com-opac-flex .opac-box{
    width: calc(50% - 25px);
  }
  .salpha .com-arw-box:before{
    left: -25px;
  }
}
@media all and (max-width:1024px){
  .salpha .com-opac-flex{
    padding: 30px;
  }
  .salpha .com-opac-flex .box{
    padding: 20px 5px;
  }
}
@media all and (max-width:768px){
  .salpha .com-opac-flex{
    padding: 20px;
    gap: 50px;
  }
  .salpha .com-opac-flex .opac-box{
    width: 100%;
  }
  .salpha .com-arw-box:before{
    content: none;
  }
.salpha .com-arw-mo:before{
  content: '';
}
  .salpha .com-opac-flex .box{
    padding: 15px 5px;
    border-radius: 10px;
  }

  .salpha .com-opac-flex .opac-cont.in-view .box:nth-child(1){transition-delay: 0.1s;}
  .salpha .com-opac-flex .opac-cont.in-view .box:nth-child(2){transition-delay: 0.2s;}
  .salpha .com-opac-flex .opac-cont.in-view .box:nth-child(3){transition-delay: 0.3s;}
  .salpha .com-opac-flex .opac-cont.in-view .box:nth-child(4){transition-delay: 0.4s;}
  .salpha .com-opac-flex .opac-cont.in-view .box:nth-child(5){transition-delay: 0.5s;}
}

@media all and (max-width:576px){}

/* animation */
.salpha .ele-up{
  transform: translateY(50px);
  opacity: 0;
  transition: all .7s cubic-bezier(0.405, 0.00, 0.165, 1.000);
}
.salpha .ele-up.in-view{
  transform: translateY(0);
  opacity: 1;
}

.salpha .ele-right{
  transform: translateX(50px);
  opacity: 0;
  transition: all .7s cubic-bezier(0.405, 0.00, 0.165, 1.000);
}
.salpha .ele-right.in-view{
  transform: translateX(0);
  opacity: 1;
}

.salpha .ele-left{
  transform: translateX(-50px);
  opacity: 0;
  transition: all .7s cubic-bezier(0.405, 0.00, 0.165, 1.000);
}
.salpha .ele-left.in-view{
  transform: translateX(0);
  opacity: 1;
}


/* sec01 */
.salpha .sec01 {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.salpha .sec01 .container{
  max-width: 1600px;
}
.salpha .sec01 .banner-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  clip-path: inset(0 100% 0 0);
}
.salpha .sec01 .air-box {
  position: absolute;
  bottom: 55px;
  width: 100%;
}
.salpha .sec01 .txt-box{
  font-size: 10.4rem;
  text-align: right;
}
.salpha .sec01 .con-flex{
  display: flex;
  justify-content: space-around;
  border-radius: 10px;
  background-color: #fbfbfb;
  padding: 30px 0;
  transform: translateY(50px);
  opacity: 0;
  transition: all .7s cubic-bezier(0.405, 0.00, 0.165, 1.000);
}
.salpha .sec01 .con-txt{
  color: #777777;
}

.salpha .sec01.in-view .banner-img{
  animation: sec01-clip-left 1.2s 0.3s forwards;
}

.salpha .sec01 .txt-box.ani{
  transition: transform .7s 1.2s cubic-bezier(0.405, 0.00, 0.165, 1.000), 
              opacity .7s 1.2s cubic-bezier(0.405, 0.00, 0.165, 1.000);
}
.salpha .sec01.in-view .con-flex{
}
.salpha .sec01.in-view .con-flex.ani{
  transform: translateY(0);
  opacity: 1;
  transition: transform .7s 1.5s cubic-bezier(0.405, 0.00, 0.165, 1.000), 
              opacity .7s 1.5s cubic-bezier(0.405, 0.00, 0.165, 1.000);
}

@keyframes sec01-clip-left {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0 0% 0 0);
  }
}

@media all and (max-width:1200px){
  .salpha .sec01 .txt-box{
    font-size: 8rem;
  }
}
@media all and (max-width:1024px){
  .salpha .sec01 .txt-box{
    font-size: 6rem;
  }
  .salpha .sec01 .con-flex{
    flex-wrap: wrap;
    padding: 20px;
    gap: 20px 0;
  }
  .salpha .sec01 .con-box{
    width: 50%;
  }
}
@media all and (max-width:768px){
  .salpha .sec01 .air-box {
    bottom: 30px;
  }
  .salpha .sec01 .txt-box{
    font-size: 6rem;
  }
}
@media all and (max-width:576px){
  .salpha .sec01 .con-box{
    width: 100%;
  }
  .salpha .sec01 .txt-box{
    font-size: 3rem;
  }
  .salpha .sec01 .con-flex{
    gap: 10px 0;
    padding: 15px;
  }

}

/* sec02 */
.salpha .sec02 .flex-box{
  display: flex;
  align-items: center;
  gap: 40px;
}

.salpha .sec02 .logo-box{
  width: 32.5%;
}
.salpha .sec02 .txt-box{
  width: calc(67.5% - 40px);
}


@media all and (max-width:1200px){
  .salpha .sec02 .flex-box{
    gap:20px;
  }
  .salpha .sec02 .txt-box{
    width: calc(67.5% - 20px);
  }
}
@media all and (max-width:1024px){
.salpha .sec02 .logo-box{
  width: 40%;
}
.salpha .sec02 .txt-box{
  width: calc(60% - 20px);
}
}
@media all and (max-width:768px){
  .salpha .sec02 .flex-box{
    flex-wrap: wrap;
  }
.salpha .sec02 .logo-box{
  width: 100%;
}
.salpha .sec02 .txt-box{
  width: 100%;
}
}
@media all and (max-width:576px){
}

/* sec03 */
.salpha .sec03 {  
  position: relative;
}

.salpha .sec03 .img-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.salpha .sec03 .img-wrap .img {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  clip-path: ellipse(90% 100% at 50% 100%);
  z-index: 0;
}

.salpha .sec03 .img-wrap img {
  inset: 0;
  width: 100%;
  transform: scale(1.3); /* 초기값 */
  transform-origin: top center;
}

.salpha .sec03 .img-box {
  text-align: center;
  position: relative;
  z-index: 2;
}

@media all and (max-width:1600px){
.salpha .sec03 .img-wrap .img {
  clip-path: ellipse(100% 100% at 50% 100%);
}
}
@media all and (max-width:1024px){
}
@media all and (max-width:768px){
}
@media all and (max-width:576px){
}


/* sec04 */
.salpha .sec04{
  overflow: hidden;
}
.salpha .sec04 .circle-list{
  max-width: 1480px;
  width: 95%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}
.salpha .sec04 .circle-box{
  max-width: 330px;
  width: calc(33.333% - 30px);
  aspect-ratio: 1/1;
  border: 1px solid #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  position: relative;
}

.salpha .sec04 .circle-box:before,
.salpha .sec04 .circle-box:after{
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 18px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 1px solid #000;
}
.salpha .sec04 .circle-box:after{
  left: auto;
  right: 0;
  transform: translate(50%,-50%);
}

.salpha .sec04 .circle-box.before-black:before,
.salpha .sec04 .circle-box.after-black:after{
  background-color: #000;
  z-index: -1;
}
.salpha .sec04 .circle-line{
  position: relative;
}
.salpha .sec04 .circle-line:before{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 1px;
  content: '';
  background-color: #000;
  z-index: 1;
  transition: width 2s 1s;
}

.salpha .sec04 .circle-box:nth-child(2){transition-delay: .3s;}
.salpha .sec04 .circle-box:nth-child(3){transition-delay: .6s;}
.salpha .sec04 .circle-line:has(.circle-box.in-view):before{
  width: 100vw;
}

@media all and (max-width:768px){
  
.salpha .sec04 .circle-box{
  width: calc(33.333% - 15px);
  font-size: 1.8rem;
}
.salpha .sec04 .circle-box:before,
.salpha .sec04 .circle-box:after{
  width: 15px;
}
}
@media all and (max-width:576px){
  
.salpha .sec04 .circle-box{
  width: calc(33.333% - 8px);
  font-size: 1.5rem;
}
.salpha .sec04 .circle-box:before,
.salpha .sec04 .circle-box:after{
  width: 10px;
}
}

/* sec05 */
.salpha .sec05 .img-list{
  display: flex;
  gap: 50px;
}
.salpha .sec05 .img-list .img-box:nth-child(2){
  margin-top: 100px;
}
.salpha .sec05 .img-list .img-box:nth-child(3){
  margin-top: -30px;
}

@media all and (max-width:768px){
  .salpha .sec05 .img-list{
    gap: 10px;
  }
  .salpha .sec05 .img-list .img-box:nth-child(2){
    margin-top: 50px;
  }
  .salpha .sec05 .img-list .img-box:nth-child(3){
    margin-top: -10px;
  }
}

/* sec06 */
.salpha .sec06{
  background: url(../img/sec06_bg.png)no-repeat center center / cover;
}
.salpha .sec06 .container{
  display: flex;
  flex-direction: column;
  gap:1080px;
}

.salpha .sec06 .top-tit .txt{
  color: #262626;
}

.salpha .sec06 .top-tit .tit{
  font-size: 13rem;
  color: #9cbdbf;
}
.salpha .sec06 .fs-88{
  font-size: 8.8rem;
}

@media all and (max-width:1600px){
  .salpha .sec06 .container{
    gap: 900px;
  }
  .salpha .sec06 .top-tit .tit{
    font-size: 10rem;
  }
  .salpha .sec06 .fs-88{
    font-size: 7rem;
  }
}

@media all and (max-width:1400px){
  .salpha .sec06 .container{
    gap: 720px;
  }
  .salpha .sec06 .top-tit .tit{
    font-size: 8rem;
  }
  .salpha .sec06 .fs-88{
    font-size: 6rem;
  }
}

@media all and (max-width:1024px){
  .salpha .sec06 .container{
    gap: 600px;
  }
  .salpha .sec06 .top-tit .tit{
    font-size: 6.5rem;
  }
  .salpha .sec06 .fs-88{
    font-size: 5rem;
  }
}
@media all and (max-width:768px){
  .salpha .sec06 .container{
    gap: 450px;
  }
  .salpha .sec06 .top-tit .tit{
    font-size: 5.8rem;
  }
  .salpha .sec06 .fs-88{
    font-size: 4rem;
  }
}

@media all and (max-width:576px){
  .salpha .sec06 .container{
    gap: 300px;
  }
  .salpha .sec06 .top-tit .tit{
    font-size: 3.4rem;
  }
  .salpha .sec06 .fs-88{
    font-size: 2.4rem;
  }
  .salpha .sec06 .fs-42{
    font-size: 2rem;
  }
  .salpha .sec06 .fs-24{
    font-size: 1.6rem;
  }
}


/* sec07 */
.salpha .sec07 {
  background-color: #f5f5f5;
}
.salpha .sec07 .container{
  max-width: 1840px;
}
.salpha .sec07 .see-both{
  max-width: 900px;
  width: 100%;
  aspect-ratio: 1/0.767;
  margin: 0 auto;
  position: relative;
}
.salpha .sec07 .see-both:before{
  left: 0;
  top: 50%;
  position: absolute;
  content: '';
  width: ;
}
.salpha .sec07 .see-both img{
  width: 100%;
  height: 100%;
}
.salpha .sec07 .click-list{
  display: flex;
  gap: 80px;
}
.salpha .sec07 .click-both{
  position: relative;
  cursor: pointer;
  border-radius: 5px;
  overflow:hidden;
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.20);
}
.salpha .sec07 .click-both img{
  width: 100%;
  height: 100%;
}
.salpha .sec07 .click-both:before{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border: 3px solid #9cbdbf;
  z-index: 1;
  opacity: 0;
  border-radius: 5px;
}
.salpha .sec07 .click-both.active:before{
  opacity: 1;
}



@media all and (max-widtH:1600px){
  .salpha .sec07 .click-list{
    gap: 60px;
  }
}
@media all and (max-widtH:1400px){
  .salpha .sec07 .click-list{
    gap: 40px;
  }
}
@media all and (max-widtH:1200px){
  .salpha .sec07 .click-list{
    gap: 30px;
  }
}
@media all and (max-widtH:1024px){
  .salpha .sec07 .click-list{
    gap: 20px;
  }
}
@media all and (max-widtH:768px){
  .salpha .sec07 .click-list{
    gap: 10px;
  }
}
@media all and (max-widtH:576px){
  .salpha .sec07 .click-list{
    gap: 5px;
  }
}



.salpha .sec07{
  overflow: hidden;
}
.salpha .sec07 .circle-list{
  max-width: 1760px;
  width: 95%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}
.salpha .sec07 .circle-box{
  max-width: 360px;
  width: calc(25% - 13px);
  aspect-ratio: 1/1;
  border: 1px solid #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  position: relative;
}

.salpha .sec07 .circle-box.bg01{
  background: url(../img/sec08_circle.png)no-repeat center center;
}
.salpha .sec07 .circle-box:before,
.salpha .sec07 .circle-box:after{
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 11px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 1px solid #000;
}
.salpha .sec07 .circle-box:after{
  left: auto;
  right: 0;
  transform: translate(50%,-50%);
}

.salpha .sec07 .circle-box.before-black:before,
.salpha .sec07 .circle-box.after-black:after{
  background-color: #000;
  z-index: -1;
}
.salpha .sec07 .circle-line{
  position: relative;
}
.salpha .sec07 .circle-line:before{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 1px;
  content: '';
  background-color: #000;
  z-index: 1;
  transition: width 2s 1.3s;
}

.salpha .sec07 .circle-box.mint-color{
  border-color: #05c6c4;
}
.salpha .sec07 .circle-box.mint-color .tit{
  color: #05c6c4;
}
.salpha .sec07 .circle-box.mint-color:before,
.salpha .sec07 .circle-box.mint-color:after{
  background-color: #05c6c4;
  border-color: #05c6c4;
}


.salpha .sec07 .circle-box:nth-child(2){transition-delay: .3s;}
.salpha .sec07 .circle-box:nth-child(3){transition-delay: .6s;}
.salpha .sec07 .circle-box:nth-child(4){transition-delay: .9s;}
.salpha .sec07 .circle-line:has(.circle-box.in-view):before{
  width: 100vw;
}

@media all and (max-width: 1200px){
.salpha .sec07 .circle-box{
  width: calc(25% - 10px);
}
.salpha .sec07 .circle-box .txt{
  font-size: 1.8rem;
}

}
@media all and (max-width: 1024px){
.salpha .sec07 .circle-list{
  flex-wrap: wrap;
}
.salpha .sec07 .circle-box{
  width: calc(50% - 10px);
}
.salpha .sec07 .circle-box:nth-child(3){transition-delay: 0s;}
.salpha .sec07 .circle-box:nth-child(4){transition-delay: .3s;}

.salpha .sec07 .circle-line:before{
  top:25%;
}
.salpha .sec07 .circle-line:after{
  width: 100vw;
  height: 1px;
  background-color: #191919;
  content: '';
  position: absolute;
  left: 50%;
  bottom: 25%;
  transform: translate(-50%,-50%);
}

}
@media all and (max-width:768px){
    .salpha .sec07 .circle-box{
    }
    .salpha .sec07 .circle-box .tit{
      font-size: 1.8rem;
    }
    .salpha .sec07 .circle-box .txt{
      font-size: 1.6rem;
    }
  .salpha .sec07 .circle-box .txt br{
    display: none;
  }
  .salpha .sec07 .circle-line:after,
  .salpha .sec07 .circle-line:before{display: none}
  .salpha .sec07 .circle-list{
    justify-content: center;
  }
}

@media all and (max-width:576px){
    .salpha .sec07 .circle-box .tit{
      font-size: 1.5rem;
    }
    .salpha .sec07 .circle-box .txt{
      font-size: 1.3rem;
    }
}



/* sec08 */
.salpha .sec08 .img-list{
  display: flex;
  gap: 80px;
}

.salpha .sec08 .img-box {
  width: calc(50% - 40px);
}
.salpha .sec08 .img-box img{
  filter: drop-shadow(-1.93px 2.30px 10px rgba(0, 0, 0, 0.20));
}
.salpha .sec08 .flex-box{
  display: flex;
  align-items: center;
  gap: 80px;
}
.salpha .sec08 .flex-font{
  width: 21%;
}
.salpha .sec08 .flex-color{
  width: calc(79% - 80px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.salpha .sec08 .fs-140{
  font-size: 14rem;
}
.salpha .sec08 .fc-color{
  aspect-ratio: 1/1;
  border-radius: 20px;
  width: 255px;
}
.salpha .sec08 .fc-color.bg-white{
  border: 1px solid #dcdcdc;
  background-color: #fff;
}
.salpha .sec08 .fc-color.bg-mint{
  background-color: #00c5c3;
}
.salpha .sec08 .fc-box{
  display: flex;
  align-items: center;
  gap:40px;
}

.salpha .sec08 .img-list{
  display: flex;
  gap:80px;
}
.salpha .sec08 .img-box{

}

@media all and (max-width:1400px){
  
  .salpha .sec08 .flex-box{
    gap: 20px;
  }
.salpha .sec08 .flex-font{
  width: 200px;
}
  .salpha .sec08 .flex-color{
  width: calc(100% - 220px);
}
.salpha .sec08 .fc-box{
  gap: 20px;
}
}

@media all and (max-width:1024px){
.salpha .sec08 .img-list{
  gap: 40px;
}

.salpha .sec08 .img-box {
  width: calc(50% - 20px);
}
.salpha .sec08 .fs-140{
  font-size: 10rem;
}
  .salpha .sec08 .flex-box{
    flex-wrap: wrap;
    justify-content: center;
  }
  .salpha .sec08 .flex-color{
  width: 100%;
}
.salpha .sec08 .fc-color{
  width: 200px;
}
.salpha .sec08 .img-list{
  gap: 40px;
}
}
@media all and (max-width:768px){
.salpha .sec08 .img-list{
  gap: 10px;
}

.salpha .sec08 .img-box {
  width: calc(50% - 5px);
}
.salpha .sec08 .fs-140{
  font-size: 8rem;
}
.salpha .sec08 .flex-color{
  flex-wrap: wrap;
  gap: 20px 0;
}
.salpha .sec08 .fc-box{
  width: 100%;
  justify-content: center;
}
.salpha .sec08 .fc-color{
  width: 160px;
}
.salpha .sec08 .img-list{
  gap: 20px;
}
}

@media all and (max-width:576px){
  .salpha .sec08 .fc-color{
    width: 140px;
  }
}

/* sec09 */

.salpha .sec09{
  position: relative;
}

.salpha .sec09 .num{
  position: absolute;
  left: -10px;
  top: -50px;
  color:#00c5c3;
  opacity: .2;
  font-size: 36rem;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}
.salpha .sec09 .img-box{
  text-align: center;
}


.salpha .sec09 .i-list01{
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.salpha .sec09 .i-list01 .icon-box{
  width: calc(12.5% - 35px);
  border-radius: 20px;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #00c5c3;
  transform: translateY(50px);
  opacity: 0;
  transition: all .7s cubic-bezier(0.405, 0.00, 0.165, 1.000);
}
.salpha .sec09 .i-list01.in-view .icon-box{
  transform: translateY(0);
  opacity: 1;
}

.salpha .sec09 .i-list01.in-view .icon-box:nth-child(2){transition-delay: .3s;}
.salpha .sec09 .i-list01.in-view .icon-box:nth-child(3){transition-delay: .6s;}
.salpha .sec09 .i-list01.in-view .icon-box:nth-child(4){transition-delay: .9s;}
.salpha .sec09 .i-list01.in-view .icon-box:nth-child(5){transition-delay: 1.2s;}
.salpha .sec09 .i-list01.in-view .icon-box:nth-child(6){transition-delay: 1.5s;}
.salpha .sec09 .i-list01.in-view .icon-box:nth-child(7){transition-delay: 1.8s;}
.salpha .sec09 .i-list01.in-view .icon-box:nth-child(8){transition-delay: 2.1s;}
.salpha .sec09 .i-list01.in-view .icon-box:nth-child(9){transition-delay: 2.4s;}
.salpha .sec09 .i-list01.in-view .icon-box:nth-child(10){transition-delay: 2.7s;}
.salpha .sec09 .i-list01.in-view .icon-box:nth-child(11){transition-delay: 3s;}
.salpha .sec09 .i-list01.in-view .icon-box:nth-child(12){transition-delay: 3.3s;}
.salpha .sec09 .i-list01.in-view .icon-box:nth-child(13){transition-delay: 3.6s;}
.salpha .sec09 .i-list01.in-view .icon-box:nth-child(14){transition-delay: 3.9s;}
.salpha .sec09 .i-list01.in-view .icon-box:nth-child(15){transition-delay: 4.2s;}

.salpha .sec09 .i-list02{
  display: flex;
  gap: 40px;
}
.salpha .sec09 .i-list02 .icon-box{
  width: calc(20% - 32px);
  transform: translateY(50px);
  opacity: 0;
  transition: all .7s cubic-bezier(0.405, 0.00, 0.165, 1.000);
}
.salpha .sec09 .i-list02.in-view .icon-box{
  transform: translateY(0);
  opacity: 1;
}
.salpha .sec09 .i-list02.in-view .icon-box:nth-child(2){transition-delay: .3s;}
.salpha .sec09 .i-list02.in-view .icon-box:nth-child(3){transition-delay: .6s;}
.salpha .sec09 .i-list02.in-view .icon-box:nth-child(4){transition-delay: .9s;}
.salpha .sec09 .i-list02.in-view .icon-box:nth-child(5){transition-delay: 1.2s;}

@media all and (max-width:1200px){
  .salpha .sec09 .num{
    font-size: 28rem;
    top: -40px;
  }
}
@media all and (max-width:1024px){
  .salpha .sec09 .num{
    font-size: 20rem;
    top: -25px;
  }
  .salpha .sec09 .i-list01{
    gap: 20px;
  }
  .salpha .sec09 .i-list01 .icon-box{
    width: calc(12.5% - 17.777px);
  }
}
@media all and (max-width:768px){
  .salpha .sec09 .num{
    font-size: 15rem;
    top: -10px;
  }
  .salpha .sec09 .txt-box .txt br{display: none;}
  .salpha .sec09 .i-list01,
  .salpha .sec09 .i-list02{
    gap: 10px;
  }
  .salpha .sec09 .i-list02{
    flex-wrap: wrap;
  }
  .salpha .sec09 .i-list01 .icon-box,
  .salpha .sec09 .i-list02 .icon-box{
    width: calc(20% - 8px);
  }
}
@media all and (max-width:576px){
  .salpha .sec09 .num{
    font-size: 10rem;
  }
  .salpha .sec09 .i-list01 .icon-box,
  .salpha .sec09 .i-list02 .icon-box{
    width: calc(33.333% - 6.666px);
  }
}


/* sec11 */
.salpha .sec11{
  height: 1200px;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  position: relative;
}
.salpha .sec11 img{
  width: 100%;
  object-fit: cover;
  height: 100%;
}
.salpha .sec11 .air-txt{
  position: absolute;
  width: 100%;
  left: 0;
  text-align: right;
  bottom: 200px;
}

.salpha .sec11 .fs-88{
  font-size: 8.8rem;
}

@media all and (max-width:1200px){
  .salpha .sec11{
    height: 900px;
  }
  .salpha .sec11 .fs-88{
    font-size: 7rem;
  }
  .salpha .sec11 .air-txt{
    bottom: 150px;
  }
}
@media all and (max-width:1024px){
  .salpha .sec11{
    height: 700px;
  }
  .salpha .sec11 .fs-88{
    font-size: 5rem;
  }
  .salpha .sec11 .air-txt{
    bottom: 100px;
  }
}
@media all and (max-width:768px){
  .salpha .sec11{
    height: 500px;
  }
  .salpha .sec11 .fs-88{
    font-size: 3rem;
  }
  .salpha .sec11 .air-txt{
    bottom: 60px;
  }
}
@media all and (max-width:576px){
  .salpha .sec11{
    height: 300px;
  }
  .salpha .sec11 .fs-88{
    font-size: 2rem;
  }
  .salpha .sec11 .air-txt{
    bottom: 30px;
  }
}

/* sec12 */
.salpha .sec12 .img-list{
  display: flex;
  max-width: 1830px;
  width: 98%;
  margin-left: auto;
  margin-right: 0;
  justify-content: space-between;
  gap: 30px;
}
.salpha .sec12 .img-box{
}

.salpha .sec12 .img-box:nth-child(2){transition-delay: .3s;}
.salpha .sec12 .img-box:nth-child(3){transition-delay: .6s;}
.salpha .sec12 .img-box:nth-child(4){transition-delay: .9s;}

@media all and (max-width:768px){
  
.salpha .sec12 .img-list{
  gap: 10px;
}
}