@charset "utf-8";

.subpage {}
.subpage .sub-visual {height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center;}
.subpage .sub-visual .title {font-size: max(312rem,80px); letter-spacing: -0.02em; }
.subpage .sub-visual .desc {font-weight: 600; font-size: max(38rem,14px); line-height: 1.3; margin-top: max(70rem, 24px);}
.subpage .sub-visual .desc .br {display: none; width: 100%; height: 0;}
.subpage .sub-visual .desc .light {font-weight: 400;}
.subpage .sub-visual .desc em {font-weight: 600;}

@media screen and (max-width:1024px) {
  /* .subpage .sub-visual {height: 50vh;} */
}
@media screen and (max-width:768px){
  .subpage .sub-visual .desc {line-height: 1.5;}
  .subpage .sub-visual .desc .br {display: block;}
}


/* form */
.form-box input[type="text"] {appearance: none; border: none; width: 100%; height: 50px; border-bottom: 1px solid #000; padding: 0; font-size: inherit; border-radius: 0;}
.form-box input[type="text"]::placeholder {color: #333; }
.form-box textarea {appearance: none; border: none; border-radius: 0; font-size: inherit; width: 100%; height: 50px; border-bottom: 1px solid #000; resize: vertical; padding: 12px 0; }

.form-area .form-cont {display: flex; flex-wrap: wrap; gap: 60px 30px; }
.form-cont .item {width: calc(50% - 15px); }
.form-cont .item .form-tit {font-weight: 600; font-size: var(--font25); color: #222; line-height: 1; margin-bottom: 8px;}
.form-cont .item .form-box {font-size: var(--font18);}

.form-cont .item .type-box {display: flex; flex-wrap: wrap; gap: var(--font16); margin-top: var(--gap24);}
.form-cont .item .type-box .type {position: relative;}
.form-cont .item .type-box .type label {display: flex; height: 48px; align-items: center; justify-content: center; font-size: var(--font20); line-height: 1; border-radius: 24px; border: 1px solid #000; padding: 0 var(--gap24); font-weight: 500; letter-spacing: -0.025em; transition: 0.3s;}
.form-cont .item .type-box .type label:has(input:checked) {border-color: #FFD905; background: #FFD905; }
.form-cont .item .type-box .type label input {position: absolute; opacity: 0; pointer-events: none;}
@media screen and (max-width:768px) {
  .form-cont .item {width: 100%;}
  .form-cont .item .type-box {gap: 12px;}
  .form-cont .item .type-box .type label {height: 36px; font-size: 14px; padding: 0 1em;}
}
@media screen and (max-width:480px) {
  .form-area .form-cont {gap: 32px;}
  .form-cont .item .form-tit {font-size: 16px;}
  .form-cont .item .type-box {gap: 8px; font-size: 14px;}
  .form-cont .item .type-box .type label {height: 28px; font-size: 12px; }
}


/* contact */
#contact .form-area {max-width: 1520px; margin: var(--gap80) auto calc(var(--gap120) * 2); width: 90%; }
#contact .form-area .agree {margin-top: var(--gap24); font-size: var(--font16); position: relative;}
#contact .form-area .agree .text {display: flex; align-items: center; gap: 12px;}
#contact .form-area .agree .text label {display: flex; gap: 8px; align-items: center;}
#contact .form-area .agree .text a {font-size: var(--font16);}
#contact .form-area .agree .ly-agree {position: absolute; left: 0; max-width: 600px; top: 50px; z-index: 500;} 
#contact .form-area .agree .ly-agree .ly-cont .bold {font-weight: 600; margin-bottom: 1em;}
#contact .form-area .agree .ly-agree .ly-cont dt {color: #333; font-weight: 600; font-size: var(--font14);}
#contact .form-area .agree .ly-agree .ly-cont dd {font-size: var(--font14); margin-top: 6px;}
#contact .form-area .agree .ly-agree .ly-cont dd + dt {margin-top: 12px;}

#contact .btn-box {margin-top: var(--gap100);}
#contact .btn-box .submit {width: 228rem; height: 228rem; border-radius: 50%; border: 1px solid #000; display: flex; align-items: center; justify-content: center; font-family: var(--barlow); font-size: 26rem; font-weight: 500; line-height: 0.9; margin: auto; position: relative;}
#contact .btn-box .submit span {position: relative;}
#contact .btn-box .submit .hover {width: 100%; height: 100%; background: #000; position: absolute; left: 0; top: 0; border-radius: 50%; clip-path: circle(0% at 50% 50%); transition: clip-path 0.3s; display: flex; align-items: center; justify-content: center;}
#contact .btn-box .submit .hover svg {width: 4vw;}
#contact .btn-box .submit:hover .hover {clip-path: circle(50% at 50% 50%); }


#contact .map {padding: var(--gap80) 2.8%; margin-bottom: 250px;}
#contact .map .head {display: flex; justify-content: space-between; align-items: end; margin-bottom: var(--gap80);}
#contact .map .head .tit {font-size: 108px; font-weight: 700; line-height: 1;  }
#contact .map .head .btn-down {}
#contact .map .cont-box {display: flex; gap: 48px;}
#contact .map .cont-box .map-wrap {width: 50%; height: 500px; flex-shrink: 0; background: #ccc;}
#contact .map .cont-box .map-wrap .box {height: 100%;}
#contact .map .cont-box .map-wrap .box iframe {width: 100%; height: 100%;}
#contact .map .cont-box .com-info {width: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: var(--gap24) 0;} 
#contact .map .cont-box .com-info .line {display: flex; justify-content: space-between; align-items: start; line-height: 1.3;  font-size: var(--font24); letter-spacing: -0.025em;}
#contact .map .cont-box .com-info .line .dt { color: #222; font-weight: 500;}
#contact .map .cont-box .com-info .line .dd { text-align: right;  font-weight: 600; flex-shrink: 0; }
#contact .map .cont-box .com-info .line .dd span {font-size: var(--font28); font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; display: inline-block; margin-bottom: 12px;}
#contact .map .cont-box .com-info .contact {}
#contact .map .cont-box .com-info .contact .line {padding-bottom: var(--font16); border-bottom: 1px solid #D7D7D7; }
#contact .map .cont-box .com-info .contact .line + .line {margin-top: 1em; }

@media screen and (max-width: 1260px) {
  #contact .map .cont-box .com-info .line .dd span {font-size: inherit;}
}
@media screen and (max-width: 1024px){
  #contact .map {margin-bottom: 160px;}
  #contact .map .head .tit {font-size: 60px;}
  #contact .map .cont-box {flex-wrap: wrap; }
  #contact .map .cont-box .map-wrap {width: 100%; height: 400px;} 
  #contact .map .cont-box .com-info {}
  #contact .map .cont-box .com-info .contact {margin-top: var(--gap80);}

  #contact .btn-box .submit {width: 110px; height: 110px;}
  #contact .btn-box .submit span {font-size: var(--font14);}
  #contact .btn-box .submit .hover svg {width: 36px;}
}
@media screen and (max-width:768px) {
  #contact .map .head .tit {font-size: 48px;}
  
}
@media screen and (max-width:480px) {
  #contact .map .head {flex-direction: column; align-items: start; gap: var(--gap80);}
  #contact .map .head .btn-down {margin-left: auto;}

  #contact .map .cont-box .map-wrap {height: 200px;}
  #contact .map .cont-box .com-info .line {font-size: 14px;}
  #contact .map .cont-box .com-info .line .dd {font-size: 14px;}
}



/* portfolio */
#portfolio {}

#portfolio .list-area {padding: var(--gap24) 2.8% var(--gap100); }
#portfolio .list-area .tag-box {display: flex; flex-wrap: wrap; max-width: 870px; margin: auto; gap: 12px; justify-content: center;}
#portfolio .list-area .tag-box .tag a {display: flex; padding: 0 var(--gap24); align-items: center; justify-content: center; height: 40px; border: 1px solid #111; line-height: 1; font-weight: 500; font-size: var(--font20); transition: 0.3s; background: #fff; border-radius: 20px; text-transform: uppercase;}
#portfolio .list-area .tag-box .tag.active a {color: #fff; background: #111;}

#portfolio .list-area .list {margin: var(--gap160) 0;}
#portfolio .list-area .list ul li {border-bottom: 1px solid #D7D7D7; }
#portfolio .list-area .list ul li:first-child {border-top: 1px solid #D7D7D7;}
#portfolio .list-area .list .pofol {display: flex; position: relative; min-height: 170px; align-items: center; padding: var(--font20); background: #fff; }
#portfolio .list-area .list .pofol .subject {font-size: var(--font28); font-weight: 500; line-height: 1.3; margin-bottom: 12px; display:-webkit-box; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; }
#portfolio .list-area .list .pofol .tag {display: flex; flex-wrap: wrap;  gap: 8px 4px; line-height: 1; color: #666; font-size: var(--font18); }
#portfolio .list-area .list .pofol .thumb {width: 380px; position: fixed; right: 10%; top: 50%; transform: translateY(-40%); opacity: 0; pointer-events: none; transition:  opacity 0.3s ease-in-out, transform 0.3s ease-in-out; z-index: 6;}
#portfolio .list-area .list .pofol .thumb .img-box {width: 100%; padding-top: 132.72%; border-radius: 8px; overflow: hidden; position: relative;}
#portfolio .list-area .list .pofol .thumb .img-box img {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover; }
#portfolio .list-area .list .desc-empty {border-top: 1px solid #D7D7D7; border-bottom: 1px solid #D7D7D7; padding: var(--gap160) 0; font-size: var(--font20); text-align: center; font-weight: 500;}

@media (hover:hover) {
  #portfolio .list-area .list .pofol:hover {background: #FFD905; z-index: 5;}
  #portfolio .list-area .list.active .pofol:hover .thumb {opacity: 1; transform: translateY(-50%); }
}
@media screen and (max-width: 1260px) {
  #portfolio .list-area .list .pofol .thumb {width: 280px;}
}
@media screen and (max-width: 1024px) {
  #portfolio .list-area .list .pofol .thumb {width: 200px;}
}
@media screen and (max-width: 768px) {
  #portfolio .list-area .list .pofol {min-height: 140px;}
  #portfolio .list-area .list .pofol .subject {font-size: 20px;}
  #portfolio .list-area .list .pofol .thumb {display: none;}
}
@media screen and (max-width: 480px) {
  #portfolio .list-area .list {margin-top: 60px;}
  #portfolio .list-area .list .pofol {min-height: unset;}
  #portfolio .list-area .list .pofol .subject {font-size: 18px; margin-bottom: 8px;}
  #portfolio .list-area .list .pofol .tag {font-size: 14px;}

  #portfolio .list-area .tag-box {gap: 8px;}
  #portfolio .list-area .tag-box .tag a {height: 28px; font-size: 12px; padding: 0 1em;}
}



/* view */
#portfolio.view {padding-top: 100rem; padding-bottom: var(--gap160);}
#portfolio.view .view-title {display: flex; padding: 0 2.8%; gap: var(--gap32); align-items: center; justify-content: space-between;}
#portfolio.view .view-title .thumb {max-width: 650px; width: 40%; flex-shrink: 0; clip-path: polygon(0 100%, 0 100%, 100% 100%, 100% 100%); transition: 1s 0.3s;}
#portfolio.view .view-title .thumb .img-box {width: 100%; position: relative; border-radius: 8px; padding-top: 132.72%; overflow: hidden;  }
#portfolio.view .view-title .thumb .img-box img {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover; }
#portfolio.view .view-title .title-box {padding-bottom: var(--gap100); }
#portfolio.view .view-title .title-box .subject {font-size: 64px; font-weight: 500; line-height: 1.3; color: #000; letter-spacing: -0.02em; margin-bottom: 1em; }
#portfolio.view .view-title .title-box .tag {color: #666; font-size: var(--font18); line-height: 1; margin-bottom: var(--gap24); }
#portfolio.view .view-title .title-box .info {color: #333; font-size: var(--font18); font-weight: 600; line-height: 1;}
#portfolio.view .view-title .title-box .info + .info {margin-top: 0.6em; }

#portfolio.view .view-title.active .thumb {clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);}

#portfolio.view .view-cont {margin-top: calc(var(--gap100)*2); width: 100%; overflow: hidden;}
#portfolio.view .view-cont .max1300 {max-width: 1300px; width: 90%; margin: auto;}

#portfolio.view .view-cont .pofol-detail {font-size: var(--font20); line-height: 1.3; text-align: center; margin: 0 auto var(--gap160);}
#portfolio.view .view-cont .vod-box {margin: 0 auto var(--gap160);}
#portfolio.view .view-cont .vod-box iframe {width: 100%; aspect-ratio: 16/9;}

#portfolio.view .view-cont .img-detail { overflow: hidden; margin: 0 auto var(--gap160);}
#portfolio.view .view-cont .img-detail.ty-slide {width: 100%; position: relative;}
#portfolio.view .view-cont .img-detail.ty-slide .detail-slide {width: 35%; margin: auto; }
#portfolio.view .view-cont .img-detail.ty-slide .detail-slide .swiper-slide {}
#portfolio.view .view-cont .img-detail.ty-slide .detail-slide .swiper-slide .img-box {width: 100%; position: relative; padding-top: 78.3%; overflow: hidden;}
#portfolio.view .view-cont .img-detail.ty-slide .detail-slide .swiper-slide .img-box img {width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); object-fit: cover; }

#portfolio.view .view-cont .img-detail.ty-slide .detail-slide {width: 35%; margin: auto; }
#portfolio.view .view-cont .img-detail.ty-slide .detail-slide .slick-list {overflow: visible;}
#portfolio.view .view-cont .img-detail.ty-slide .detail-slide .item {margin-right: 24px;}
#portfolio.view .view-cont .img-detail.ty-slide .detail-slide .item .img-box {width: 100%; position: relative; padding-top: 78.3%; overflow: hidden;}
#portfolio.view .view-cont .img-detail.ty-slide .detail-slide .item .img-box img {width: 100%; height: 100%; object-fit: cover; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}

#portfolio.view .view-cont .img-detail.ty-slide .paging {margin-top: 36px;}
#portfolio.view .view-cont .img-detail.ty-slide .slick-dots {display: flex; justify-content: center; align-items: center;   gap: 36px; font-size: 0;}
#portfolio.view .view-cont .img-detail.ty-slide .slick-dots li button {margin: 0; width: 10px; height: 10px; opacity: 1; background: #d9d9d9; font-size: 1px; color: rgba(0,0,0,0); border-radius: 50%;}
#portfolio.view .view-cont .img-detail.ty-slide .slick-dots li.slick-active button {background: #111;}

#portfolio.view .view-cont .img-detail.ty-slide .paging {display: flex; justify-content: center; margin-top: 36px; gap: 36px; }
#portfolio.view .view-cont .img-detail.ty-slide .paging .swiper-pagination-bullet {margin: 0; width: 10px; height: 10px; opacity: 1; background: #d9d9d9; }
#portfolio.view .view-cont .img-detail.ty-slide .paging .swiper-pagination-bullet.swiper-pagination-bullet-active {background: #111;}
#portfolio.view .view-cont .img-detail.ty-slide .hover-btn {width: 130px; height: 130px; display: flex; align-items: center; justify-content: center; font-family: var(--barlow); font-size: var(--font18); font-weight: 500; color: #666; line-height: 1; background: rgba(255,255,255,0.47); border-radius: 50%; position: fixed; z-index: 5; left: 0; top: 0; opacity: 0; z-index: 50; transform: translate(-50%,-50%); pointer-events: none; clip-path: circle(0% at 50% 50%); transition: clip-path 0.3s, opacity 0.3s; }


@media (hover:hover) {
  #portfolio.view .view-cont .img-detail.ty-slide:hover .hover-btn {clip-path: circle(50% at 50% 50%); opacity: 1;}
}


#portfolio.view .view-cont .img-detail.ty-scroll {max-width: 1300px; margin: auto; width: 90%;}
#portfolio.view .view-cont .img-detail.ty-scroll .img-box {margin-bottom: var(--gap24); text-align: center;}
#portfolio.view .view-cont .img-detail.ty-scroll .img-box img {max-width: 100%;}

@media screen and (max-width: 1260px) {
  #portfolio.view .view-title .title-box .subject {font-size: 52px;}
}
@media screen and (max-width: 1024px) {
  #portfolio.view {padding-top: 70px;}
  #portfolio.view .view-title .title-box .subject {font-size: 46px;}

  #portfolio.view .view-cont .img-detail.ty-slide .detail-slide .item {margin-right: 12px;}
}
@media screen and (max-width: 768px) {
  #portfolio.view .view-title {flex-direction: column-reverse; padding: 0 5%;}
  #portfolio.view .view-title .thumb {width: 80%; max-width: 300px;}
  #portfolio.view .view-title .title-box {width: 100%; max-width: 480px; }
  #portfolio.view .view-title .title-box .subject {font-size: 28px;}

  #portfolio.view .view-cont .img-detail.ty-slide .paging {gap: 12px;}
  #portfolio.view .view-cont .img-detail.ty-slide .slick-dots {gap: 12px;}
  #portfolio.view .view-cont .img-detail.ty-slide .detail-slide {width: 45%;}

  #portfolio.view .view-cont .img-detail.ty-slide .hover-btn {display: none;}

  #portfolio.view .view-cont .img-detail.ty-slide .detail-slide .item {margin-right: 8px;}
}
@media screen and (max-width: 480px){
  #portfolio.view .view-cont .img-detail.ty-slide .paging {gap: 8px; margin-top: 24px;}
  #portfolio.view .view-cont .img-detail.ty-slide .slick-dots {gap: 8px;}
  #portfolio.view .view-cont .img-detail.ty-slide .slick-dots li button {width: 8px; height: 8px;}
  #portfolio.view .view-cont .img-detail.ty-slide .paging .swiper-pagination-bullet {width: 8px; height: 8px;}
}


/* about */
#about {}

#about .sect-tit {font-family: var(--barlow); line-height: 0.9;}
#about .sect-tit .s-tit {font-size: 78rem; font-weight: 500; margin-bottom: 30rem; }
#about .sect-tit .b-tit {font-size: 180rem; font-weight: 700; }

#about .section {padding: 0 2.8%; width: 100%; overflow: hidden; margin: 280rem 0;}


#about .sect1 {display: flex;}
#about .sect1 .s-tit img {vertical-align: text-bottom; width: 90rem;}
#about .sect1 > div {width: 50%;}
#about .sect1 .sect-cont {padding-left: 48rem; line-height: 1.3; font-weight: 500; font-size: 40rem; padding-top: 136rem;}

#about .sect2 {text-align: center;  }
#about .sect2 .ani-text {font-family: var(--barlow);  }
#about .sect2 .ani-text .item {display: flex; align-items: center; gap: 20rem; justify-content: center; width: 100%;}
#about .sect2 .ani-text .item + .item {margin-top: max(30rem, 12px);}
#about .sect2 .ani-text span {display: inline-block; font-size: 210rem; font-weight: 700; line-height: 0.9;}
#about .sect2 .ani-text .img {vertical-align: bottom; font-size: 0; flex-shrink: 0;} 
#about .sect2 .ani-text .img .in {width: 0; height: 186rem; display: inline-block; opacity: 0; transition: width 0.8s cubic-bezier(.6,0,.2,1), opacity 0.5s linear; overflow: hidden;}
#about .sect2 .ani-text .img .in img {width: 100%; height: 100%; object-fit: cover; vertical-align: top;}
#about .sect2 .desc {margin-top: 90rem; font-weight: 500; font-size: 28rem; color: #222; line-height: 1.3; vertical-align: top;}
#about .sect2 .desc p + p {margin-top: var(--font16); }

#about .sect2 .ani-text .item.active .img .in {width: 308rem; opacity: 1;}

#about .sect3 {}
#about .sect3 .sect-cont {margin-top: 180rem; }
#about .sect3 .circle-ani {position: relative; }
#about .sect3 .circle-ani .cont-wrap {display: flex; align-items: center; justify-content: center; width: 100%;}
#about .sect3 .circle-ani .item {width: 515rem; height: 515rem;  text-align: center; display: flex; align-items: center; justify-content: center; position: relative; border-radius: 50%; padding-bottom: 25rem; }
#about .sect3 .circle-ani .item::before {content:""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 50%; border: 1px solid #000; box-sizing: border-box;}
#about .sect3 .circle-ani .item .bg {position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 50%; }
#about .sect3 .circle-ani .item > span {position: relative; z-index: 1; opacity: 0; display: inline-block; transform: translateY(10%);}
#about .sect3 .circle-ani .item .top {height: calc(24rem * 2.6); display: flex; align-items: center; margin-bottom: 60rem; justify-content: center;}
#about .sect3 .circle-ani .item .btm {vertical-align: bottom;}
#about .sect3 .circle-ani .item .desc1 {font-size: 24rem; font-weight: 600; line-height: 1.3;}
#about .sect3 .circle-ani .item .desc2 {font-family: var(--barlow); font-weight: 600; line-height: 0.9; font-size: max(206rem, 70px);}
#about .sect3 .circle-ani .item .desc3 {font-weight: 800; font-size: max(70rem,24px); line-height: 1.2;}

#about .sect3 .circle-ani .item:nth-child(1)::before {border-color: #FF7BCA; }
#about .sect3 .circle-ani .item:nth-child(1) .bg {background: #FF7BCA;}
#about .sect3 .circle-ani .item:nth-child(2) { z-index: 2;}
#about .sect3 .circle-ani .item:nth-child(2)::before {border-color: #FFD905;}
#about .sect3 .circle-ani .item:nth-child(2) .bg {background: #FFD905; clip-path: circle(0% at 50% 50%);}
#about .sect3 .circle-ani .item:nth-child(2) .btm .desc2 {position: relative;}
#about .sect3 .circle-ani .item:nth-child(2) .btm .desc2::before {content:""; width: 36rem; height: 36rem; background: url(/img/sub/icon_plus.png) center no-repeat; background-size: cover; position: absolute; right: 0; top: 0; transform: translate(100%,100%);}
#about .sect3 .circle-ani .item:nth-child(3) {color: #fff;}
#about .sect3 .circle-ani .item:nth-child(3)::before {border-color: #5546FF; }
#about .sect3 .circle-ani .item:nth-child(3) .bg {background: #5546FF;}

#about .sect3 .circle-ani .item:nth-child(1),
#about .sect3 .circle-ani .item:nth-child(3) {position: absolute; left: 50%; top: 50%;  opacity: 0;}


@keyframes rotationStar {
  0% {transform: rotate(0);}
  100% {transform: rotate(-360deg);};
}
#about .sect4 {}
#about .sect4 .rolling-bnr {font-family: var(--barlow); font-style: italic; font-size: 120px; line-height: 1; font-weight: 500; margin-bottom: 75rem;}
#about .sect4 .rolling-bnr .swiper-wrapper {-webkit-transition-timing-function:linear!important; transition-timing-function:linear!important;}
#about .sect4 .rolling-bnr .swiper-slide {width: fit-content; white-space: nowrap; }
#about .sect4 .rolling-bnr .swiper-slide img {display: inline-block; animation: rotationStar 3.6s linear infinite;}
#about .sect4 .cards-area {display: flex; gap: 44rem;}
#about .sect4 .cards-area .card {position: relative; border-radius: 8rem; overflow: hidden;}
#about .sect4 .cards-area .card .img-box {font-size: 0;  }
#about .sect4 .cards-area .card .img-box img {width: 100%;}
#about .sect4 .cards-area .card .text-box {position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;}
#about .sect4 .cards-area .card .text-box .text {font-weight: 600; font-size: 32rem; line-height: 1.3; text-align: center; position: relative; opacity: 0; transition: 0.5s 0.2s;}
#about .sect4 .cards-area .card .text-box .bg {position: absolute; left: 50%; top: 50%; width: 200%; padding-top: 200%; border-radius: 50%; transform: translate(-50%,-50%); clip-path: circle(0% at 50% 50%); transition: clip-path 0.6s; /*clip-path: polygon(100% 100%, 100% 0, 50% 50%, 0 100%);*/}

#about .sect4 .cards-area .card:nth-child(1) .text-box .bg {background-color: #FFD905;}
#about .sect4 .cards-area .card:nth-child(2) .text-box .bg {background-color: #5546FF;}
#about .sect4 .cards-area .card:nth-child(2) .text-box .text {color: #fff; }
#about .sect4 .cards-area .card:nth-child(3) .text-box .bg {background-color: #FF7BCA;}
#about .sect4 .cards-area .card:nth-child(4) .text-box .bg {background-color: #93FF7E;}

@media screen and (min-width:769px) {
  @media (hover:hover) {
    #about .sect4 .cards-area .card:hover .text-box .bg {clip-path: circle(50% at 50% 50%);}
    #about .sect4 .cards-area .card:hover .text-box .text {opacity: 1;}
  }
}





#about .sect5 {}

#about .sect5 .sect-cont {width: 100%; overflow: hidden; margin-top: var(--gap120); cursor: grab;}
#about .sect5 .sect-cont .paging {position: relative; height: 2px; background: #d9d9d9; }
#about .sect5 .sect-cont .paging .swiper-pagination-progressbar-fill {background: #111;}
#about .sect5 .h-item {padding-top: var(--gap100);} 
#about .sect5 .h-item .h-year {font-family: var(--barlow); font-size: 96px; line-height: 1; padding-left: 20%;} 
#about .sect5 .h-item .h-cont {font-size: 18px; line-height: 1; padding-left: 25%; margin-top: 3em; }
#about .sect5 .h-item .h-cont p + p {margin-top: 0.6em; }

#about .sect5 .sect-cont .hover-btn {width: 130px; height: 130px; display: flex; align-items: center; justify-content: center; font-family: var(--barlow); font-size: var(--font18); font-weight: 500; color: #666; line-height: 1; background: rgba(0,0,0,0.14); border-radius: 50%; position: fixed; z-index: 5; left: 0; top: 0; opacity: 0; z-index: 50; transform: translate(-50%,-50%); pointer-events: none; clip-path: circle(0% at 50% 50%); transition: clip-path 0.3s, opacity 0.3s; }

@media (hover:hover) {
  #about .sect5 .sect-cont:hover .hover-btn {clip-path: circle(50% at 50% 50%); opacity: 1;}
}

@media screen and (max-width: 1024px){

  #about .sect5 .h-item .h-year {font-size: 76px; padding-left: 10%;}
  #about .sect5 .h-item .h-cont {font-size: 16px; padding-left: 15%;}
}

@media screen and (max-width: 768px){
  #about .section {margin: 100px 0;}
  #about .sect-tit .b-tit {font-size: 72px;}
  #about .sect-tit .s-tit {font-size: 32px; margin-bottom: 12px;}

  #about .sect1 {flex-direction: column; }
  #about .sect1 .s-tit img {width: 32px;}
  #about .sect1 > div {width: auto;}
  #about .sect1 .sect-cont {margin-left: auto; font-size: 16px; padding: 3em 1em 0; }


  #about .sect2 .desc {font-size: 16px; margin-top: 34px;}

  #about .sect3 .circle-ani {height: 100vh;}
  #about .sect3 .circle-ani .cont-wrap {height: 100%;}
  #about .sect3 .circle-ani .item {width: 26vh; height: 26vh;}
  #about .sect3 .circle-ani .item .top {height: auto;}
  #about .sect3 .circle-ani .item .desc1 {font-size: 14px;}

  #about .sect4 .rolling-bnr {font-size: 80px; margin-bottom: var(--gap32);}
  #about .sect4 .rolling-bnr .swiper-slide img {width: 64px;}
  #about .sect4 .cards-area {flex-wrap: wrap; gap: 16px;}
  #about .sect4 .cards-area .card {width: calc(50% - 8px); border-radius: 8px;}
  #about .sect4 .cards-area .card .text-box {align-items: end; justify-content: end;}
  #about .sect4 .cards-area .card .text-box .text {font-size: 18px; padding: 1em;}
  #about .sect4 .cards-area .card .text-box .bg {padding-top: unset; width: 100%; height: 50%; clip-path: polygon(100% 100%, 0% 100%, 100% 100%); border-radius: 0; left: 0; top: unset; bottom: 0; transform: translate(0,0); transition: 0.5s ease-in-out; }

  #about .sect4 .cards-area.active .card .text-box .bg {clip-path: polygon(100% 0, 0% 100%, 100% 100%);}
  #about .sect4 .cards-area.active .card .text-box .text {opacity: 1;}
}

@media screen and (max-width: 480px){

  #about {padding-bottom: 120px;}
  #about .section {margin: 80px 0;}
  #about .sect-tit .b-tit {font-size: 58px;}
  #about .sect-tit .s-tit {font-size: 28px; margin-bottom: 4px;}

  #about .sect1 .sect-cont {font-size: 14px;}

  #about .sect2 .ani-text span {font-size: 48px;}
  #about .sect2 .ani-text .img .in {height: 36px;}
  #about .sect2 .ani-text .item.active .img .in {width: 60px;}
  #about .sect2 .desc {font-size: 14px; padding: 0 2%;}
  #about .sect2 .desc br {display: none;}
  

  #about .sect4 .rolling-bnr {font-size: 60px;}
  #about .sect4 .rolling-bnr .swiper-slide img {width: 48px;}
  #about .sect4 .cards-area {gap: 12px; }
  #about .sect4 .cards-area .card .text-box .bg {height: 60%;}
  #about .sect4 .cards-area .card .text-box .text {font-size: 14px; padding: 0.5em;}

  #about .sect5 .h-item .h-year {font-size: 52px; padding-left: 5%;}
  #about .sect5 .h-item .h-cont {font-size: 14px; margin-top: 2em; padding-left: 10%; padding-right: 5%;}


  
}