@charset "utf-8";
/* Info
 ========================================================================== */
/**   * 1. Writer: Hyerin Lim. (Weaverloft Corp.)
    * 2. Production Date: 2025-07
    * 3. Client: Auoseed
 */

/*========== Main Layout ==========*/
.head-area #header{transition: transform 0.4s; }

/*========== Common ==========*/
.main{position: relative;}
.main-sec *{letter-spacing: 0;}
/* sec-title */
.main-sec .sec-title{ text-align: center; margin-bottom: 80px;}
.main-sec .sec-title .label { display: inline-block; min-width: 142px; margin-bottom: 24px; padding: 10px 30px; border: 2px solid var(--border-color-d); border-radius: 30px; font-size: 20px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--point-color); }
.main-sec .sec-title .title { font-size: 36px; font-weight: 700; line-height: 1.55; word-break: keep-all;}
.main-sec .sec-title .text {margin-top: 34px; font-size: 20px; font-weight: 500; color: var(--text-color-5); line-height: 1.6; letter-spacing: -0.025em; word-break: keep-all;}
/* sec-btn */
.main-sec .sec-btn {display: flex; justify-content: center;}
.main-sec .sec-btn *{letter-spacing: -0.025em;}
.main-sec .sec-btn .btn{display: flex; align-items: center; justify-content: center; gap: 40px; width: auto; padding: 10px 10px 10px 30px; border-radius: 40px; background-color: #000; font-size: 18px; font-weight: 700; line-height: 1; color: #fff;}
.main-sec .sec-btn .btn .icon{display: flex; align-items: center; justify-content: center; width: 40px; height: auto; aspect-ratio: 1/1; border-radius: 50%; background-color: #fff; overflow: hidden; transform: rotate(-45deg);}
.main-sec .sec-btn .btn .icon i{position: relative; left: 0; display: inline-block; width: 16px; height: auto; aspect-ratio: 1/1; background-image: url('../images/front/main/btn-arrow.svg'); background-repeat: no-repeat; background-size: 100% 100%;  transition: transform 0.3s ease;}

.main-sec .mo-only{display: none;}
@media screen and (max-width: 1440px) {
  .main-sec .sec-title{ margin-bottom: clamp(60px, 5.556vw, 80px);}
  .main-sec .sec-title .label { font-size: clamp(17px, 1.389vw, 20px);}
  .main-sec .sec-title .title { font-size: clamp(30px, 2.500vw, 36px); }
  .main-sec .sec-title .text { font-size: clamp(18px, 1.389vw, 20px);}
}
@media screen and (max-width: 1260px) {
  .main-sec .sec-btn .btn{gap: clamp(16px, 3.175vw, 40px); padding: 0.455em 0.5556em 0.455em 1.6667em; font-size: clamp(17px, 1.429vw, 18px);}
  .main-sec .sec-btn .btn .icon{width: 2.2222em;}
  .main-sec .sec-btn .btn .icon i{ width: 0.8889em; }
}
@media screen and (max-width: 1024px) {
  .main-sec .sec-title{ margin-bottom: clamp(38px, 5.859vw, 60px);}
  .main-sec .sec-title .label { min-width: 96px; min-height: 31px; margin-bottom: clamp(18px, 2.344vw, 24px); padding: 0.5em 1.5em; border-radius: clamp(24px, 2.93vw, 30px); font-size: clamp(14px, 1.660vw, 17px); line-height: 0.9;}
  .main-sec .sec-title .title { font-size: clamp(24px, 2.930vw, 30px); line-height: 1.4; }
  .main-sec .sec-title .text { margin-top: clamp(28px, 3.32vw, 34px); font-size: clamp(16px, 1.758vw, 18px);}
  .main-sec .sec-btn .btn{ font-size: clamp(16px, 1.66vw, 17px);}
  .main-sec .sec-btn .btn .icon{width: clamp(30px, 3.613vw, 37px);}
}
@media all and (max-width:767px) {
  .main-sec .sec-btn .btn{padding: 10px 10px 10px 20px;}
  .main-sec .pc-only{display: none;}
  .main-sec .mo-only{display: block;}
}

/*========== Visual ==========*/
.visual{ padding-top: 80px;}
.visual{ --visual-left: calc(30px + 170px); --visual-right: calc(30px + 170px); --visual-bottom: calc(25px + 60px);}
.visual .inner{position: relative; overflow: hidden; }
.visual .visual-image .image-wrap { position: relative; width: 100%; height: auto; aspect-ratio: 1860/940; min-height: 900px; margin: 0 auto; background: #000; border-radius: 34px; }
.visual .visual-image .img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; aspect-ratio: 1860/940; background-color: #000; border-radius: 34px; overflow: hidden; opacity: 0; transition: opacity 1s ease;}
.visual .visual-image .img.active{opacity: 1; transition: opacity 1s ease;}
.visual .visual-image img { width: 100%; height: 100%; object-fit: cover; animation: visual-image 12s 0s infinite; }
@keyframes visual-image {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.visual-content .visual-tabs{ position: absolute; left: var( --visual-left); bottom: var( --visual-bottom); z-index: 10; display: flex; flex-flow: row nowrap; align-items: flex-end; justify-content: center; gap: 10px;}
.visual-content .visual-tabs .tab { display: flex; flex-flow: column wrap; justify-content: space-between; width: 225px; height: auto; aspect-ratio: 225 / 100; padding: 10px 10px 20px 20px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.6); font-size: 16px; font-weight: 800; color: rgba(255,255,255,0.6); text-align: left; cursor: pointer; transition: background-color 0.3s;}
.visual-content .visual-tabs .tab.active { background-color: rgba(255,255,255,0.2); color: #fff;}
.visual-content .visual-tabs .tab::before{ content: ''; align-self: flex-end; width: 24px; height: auto; aspect-ratio: 1/1; border-radius: 50%; background-image: url('../images/front/main/visual-tab-active.svg'); background-size: 100% 100%; opacity: 0; transition: opacity 0.3s;}
.visual-content .visual-tabs .tab.active::before{opacity: 1;}
.visual-text-wrap {position: absolute; top: 0; right: 0; width: 48%; height: 100%; display: flex; flex-flow: column wrap; align-items: center; justify-content: center; align-items: center; padding-bottom: 25px; transition: 1.0s; opacity: 0;}
.visual-text-wrap .text-box {width: 100%; padding-right: var( --visual-right); color: #fff;}
.visual-text-wrap .text-box{position: relative; text-align: right; transform: translateY(28px)}
.visual-text-wrap .text-box .tit{margin-bottom: 45px; font-size: 54px; font-weight: 800; line-height: 1.2; white-space: pre-line;}
.visual-text-wrap .text-box .tit02{position: absolute; top: -60px; right: var( --visual-right); opacity: 0;}
.visual-text-wrap .text-box .sub-tit{display: block; font-size: 28px; font-weight: 600; line-height: 1.4;}
.visual-text-wrap .text-box .sub-tit02{ opacity: 0; transform: translateY(0);}
.visual-text-wrap .text-box.box02{position: absolute; top: 0; right: 0; height: 100%; transform: translateY(-30px); }
.visual-text-wrap .text-box.box02 ul{position: relative; display: flex; flex-flow: column wrap; align-items: flex-end; justify-content: center; width: 100%; height: inherit;}
.visual-text-wrap .text-box.box02 li{position: absolute; opacity: 0; display: flex; flex-direction: column; }
.visual-text-wrap .text-box.box02 .typing { position: relative; }
.visual-text-wrap .text-box.box02 .typing::after { content: ''; display: block; position: absolute; right: -2px; bottom: 0; width: 2px; height: 1em; opacity: 0; background: currentColor; animation: none; transition: opacity 0.3s ease-in-out; -webkit-animation: none; -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -ms-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; }
.visual-text-wrap .text-box.box02 .typing.is-typing::after { opacity: 1; animation: cursorBlink 1.5s ease-in-out infinite; -webkit-animation: cursorBlink 1s ease-in-out infinite; }
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.visual .explore{position: absolute; bottom: var( --visual-bottom); right: var( --visual-right); display: flex; flex-flow: column wrap; align-items: flex-end; gap: 15px; transition: opacity 0.3s;}
.visual .explore .arrow{display: flex; justify-content: center; align-items: center; width: 40px; height: auto; aspect-ratio: 1/1; border-radius: 50%; border: 1px solid #fff;}
.visual .explore .arrow img{width: 13px; height: auto; animation: explore-arrow 2s infinite; }
.visual .explore .text{font-size: 16px; font-weight: 500; line-height: 1; color: #fff; }
@keyframes explore-arrow {
  0% { transform: translateY(-4px); }
  50% { transform: translateY(4px); }
  100% { transform: translateY(-4px); }
}
@media (min-aspect-ratio: 1860/980) {
  .visual .visual-image .image-wrap { aspect-ratio: auto; height: calc(100vh - 130px); min-height: auto; overflow: hidden; }
}
@media screen and (max-width: 1680px) and (max-height: 1020px)  {
  .visual .visual-image .image-wrap { aspect-ratio: auto; height: calc(100vh - 130px); min-height: auto; overflow: hidden; }
}
@media screen and (min-width: 1024px) and (max-height: 840px) {
  .visual{ --visual-bottom: 2.905vw;}
  .visual .visual-image .image-wrap{min-height: auto;}
  .visual-text-wrap{padding-bottom: 1.5vw;}
  .visual-text-wrap .text-box.box02 ul{margin: 24px auto 3vw;}
}
@media screen and (max-width: 1680px) {
  .visual{ --visual-left: calc(30px + 8.119vw); --visual-right: calc(30px + 8.119vw); }
  .visual-content .visual-tabs .tab { width: 14.0625em; font-size: clamp(14px, 0.952vw, 16px); }
  .visual-text-wrap .text-box .tit{margin-bottom: 0.8333em; font-size: clamp(42px, 3.214vw, 54px);}
  .visual-text-wrap .text-box .sub-tit{font-size: clamp(20px, 1.667vw, 28px); }
  .visual .explore .arrow{ width: 2.5em; font-size: clamp(12px, 0.952vw, 16px);}
  .visual .explore .arrow img{width: 0.8125em; }
  .visual .explore .text{font-size: clamp(12px, 0.952vw, 16px);}
  @keyframes explore-arrow {
    0% { transform: translateY(-0.25em); }
    50% { transform: translateY(0.25em); }
    100% { transform: translateY(-0.25em); }
  }
}
@media screen and (max-width: 1440px) {
  .visual{ --visual-left: calc(30px + 4.25vw); --visual-right: calc(30px + 4.25vw); }
  .visual-text-wrap{width: 70%; padding-bottom: 10%;}
}
@media screen and (max-width: 1024px) and (max-height: 840px) {
  .visual{ --visual-bottom: 4.905vw;}
  .visual .visual-image .image-wrap{min-height: auto;}
  .visual-text-wrap{padding-bottom: 14vw;}
}
@media screen and (max-width: 1024px) {
  .visual{ padding-top: 64px;}
  .visual{ --visual-left: calc(16px + 3.25vw); --visual-right: calc(16px + 3.25vw); }
  .visual .visual-image .image-wrap { aspect-ratio: 328/645; max-height: calc(100vh - 110px); min-height: auto; border-radius: clamp(24px, 3.32vw, 34px); }
  .visual .visual-image .img { aspect-ratio: 328/645; border-radius: clamp(24px, 3.32vw, 34px);}
  .visual .visual-image .img:nth-child(1) img{ object-position: 45%;}
  .visual .visual-image .img:nth-child(2) img{ object-position: 62%;}
  .visual .visual-image .img:nth-child(3) img{ object-position: 38%;}
  .visual-content .visual-tabs .tab { width: clamp(165px, 17.871vw, 182.81px); padding: 10px 10px 1.4286em 1.4286em; font-size: clamp(12px, 1.367vw, 14px); }
  .visual-content .visual-tabs .tab::before{width: 1.7143em;}
  .visual-text-wrap .text-box .tit{font-size: clamp(34px, 4.102vw, 42px);}
  .visual-text-wrap .text-box .sub-tit{font-size: clamp(18px, 1.953vw, 20px); }
}
@media screen and (max-width: 767px) {
  .visual{ --visual-bottom:  calc(20px + 25px);}
  .visual .visual-image .img:nth-child(1) img,
  .visual .visual-image .img:nth-child(2) img,
  .visual .visual-image .img:nth-child(3) img{ object-position: center;}
  .visual-content .visual-tabs{top: 62px; left: 0; right: 0; bottom: auto; margin: 0 auto;}
  .visual-content .visual-tabs .tab{position: absolute; left: 0; right: 0; margin: 0 auto; display: none; width: fit-content; aspect-ratio: auto; font-size: 14px; padding: 0; border: none; background: none; line-height: 1; opacity: 0; transition: opacity 0.4s ease-in-out;}
  .visual-content .visual-tabs .tab.active{display: inline-block; background: none; opacity: 1;transition: opacity 0.4s ease-in-out;}
  .visual-content .visual-tabs .tab::before{display: none;}
  .visual-text-wrap{top: 50%; bottom: calc(20px + 70px); width: 100%; height: auto; padding: 0;}
  .visual-text-wrap .text-box{padding: 76px 0 0; text-align: center; transform: translateY(0);}
  .visual-text-wrap .text-box .tit{margin-bottom: clamp(20px, 3.39vw, 26px); font-size: clamp(24px, 4.433vw, 34px);}
  .visual-text-wrap .text-box .sub-tit{font-size: clamp(16px, 2.347vw, 18px); }
  .visual-text-wrap .text-box .tit02, .visual-text-wrap .text-box.box02 li{top: 0; left: 0; right: 0; margin: 0 auto;}
  .visual-text-wrap .text-box.box02{padding-top: clamp(72px, 19.987vw, 210px); transform: translateY(0);}
  .visual .explore{left: 0; right: 0; align-items: center; gap: clamp(8px, 1.956vw, 15px);}
  .visual .explore .arrow{ width: clamp(24px, 3.911vw, 30px); }
  .visual .explore .arrow img{width: 0.8125em; }
}

/*========== Features ==========*/
.features{padding: 180px 30px calc(140px - 25px);}
.features > .inner{ width:100%; max-width: 1200px; margin:0 auto; }
.feature-cont .feature-list{position: relative; margin-bottom: 50px;}
.feature-cont .feature-list .card{position: sticky; top: 100px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; gap: 10px; width: 100%; height: 540px; margin-bottom: 30px; border-radius: 40px; background-color: var(--bg-color); overflow: hidden;}
.feature-cont .feature-list .card:last-child{margin: 0;}
.feature-cont .feature-list .card::after{position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.03); content: ''; opacity: 0; transition: opacity 0.3s;}
.feature-cont .feature-list .card.show-after::after{opacity: 1; transition: opacity 1s;}
.feature-cont .feature-list .card *{ letter-spacing: -0.025em;}
.feature-cont .feature-text{ margin-bottom: 16px; padding-left: 80px; }
.feature-cont .feature-text .num { position: relative; display: inline-block; overflow: hidden; width: 90px; padding: 10px 14px; border: 1px solid #333; border-radius: 20px; font-size: 16px; font-weight: 700; line-height: 1.063; text-align: center; transition: color 0.3s}
.feature-cont .feature-text .num::before { content: ''; position: absolute; top: -1px; left: -1px; z-index: -1; width: 0; height: calc(100% + 2px); background: var(--text-color-2); transition: width 0.6s ease;}
.feature-cont .feature-text .num.active { color: #fff;}
.feature-cont .feature-text .num.active::before { width: calc(100% + 2px);}
.feature-cont .feature-text .card-tit {margin: 16px 0 35px; font-size: 32px; font-weight: 400; line-height: 1.375; word-break: keep-all;}
.feature-cont .feature-text .card-tit strong { font-weight: 700;}
.feature-cont .feature-text .card-txt { font-size: 16px; line-height: 1.5; word-break: keep-all;}
@media screen and (max-width: 1440px) {
  .features{padding: clamp(130px, 12.5vw, 180px) 30px calc(140px - 25px);}
  .feature-cont .feature-text{ padding-left: clamp(50px, 4.556vw, 80px); }
}
@media screen and (max-width: 1260px) {
  .feature-cont .feature-list .card{height: clamp(500px, 42.857vw, 540px);}
  .feature-cont .feature-text .num { width: 5.625em; padding: 0.625em 0.875em; font-size: clamp(14px, 1.27vw, 16px);}
  .feature-cont .feature-text .card-tit {margin: 0.5em 0 1.0938em; font-size: clamp(29px, 2.54vw, 32px);}
}
@media screen and (max-width: 1024px) {
  .features{padding: clamp(80px, 12.683vw, 130px) clamp(16px, 2.93vw, 30px) clamp(calc(120px - 20px), 11.23vw, calc(140px - 25px));}
  .feature-cont .feature-list{margin-bottom: clamp(40px, 4.883vw, 50px);}
  .feature-cont .feature-list .card{top: 70px; flex-flow: column wrap; align-items: flex-start; gap: 35px; height: auto; margin-bottom: clamp(20px, 2.93vw, 30px); padding: clamp(50px, 6.836vw, 70px) clamp(30px, 4.883vw, 50px) clamp(30px, 4.883vw, 50px); border-radius: clamp(20px, 3.906vw, 40px);}
  .feature-cont .feature-text{width: 100%; margin: 0; padding: 0; }
  .feature-cont .feature-text .num{width: clamp(61px, 7.617vw, 78px); min-height: 25px; padding: clamp(4px, 0.879vw, 9px) 0.8571em; font-size: clamp(12px, 1.367vw, 14px); line-height: 1; }
  .feature-cont .feature-text .card-tit {margin: clamp(10px, 1.465vw, 15px) 0 clamp(10px, 2.93vw, 30px); font-size: clamp(20px, 2.832vw, 29px); line-height: 1.3;}
  .feature-cont .feature-text .card-txt br{display: none;}
}
@media screen and (max-width: 767px) {
  .feature-cont .feature-text .num{line-height: 1.25;}
}
@media screen and (max-width: 580px) {
  .feature-cont .feature-text .card-txt br{display: block;}
}
@media all and (max-width:359px) {
  .feature-cont .feature-list .card{padding: 50px clamp(16px, 8.333vw, 30px) 30px;}
}
/* card01 */
.feature-cont .feature-list .card01 .feature-vis{align-self: flex-start; display: flex; flex-flow: column; position: relative; height: 100%; padding: 0 92px 40px 0;}
.feature-cont .feature-list .card01 .trend-list {position: absolute; top: 104px; z-index: 1; display: flex; flex-flow: row nowrap; align-items: flex-start; justify-content: flex-end; gap: 20px; width: 100%; padding-right: 128px;}
.feature-cont .feature-list .card01 .trend-list .trend { display: flex; flex-flow: column nowrap; align-items: flex-start; gap: 4px; width: 157px; height: 174px; padding: 20px 16px; background: #fff; border-radius: 13px; box-shadow: 6px 3px 8px rgba(185,185,229,0.2);}
.feature-cont .feature-list .card01 .trend-list .trend .icon{display: inline-block; width: 32px; min-width: 32px; height: auto; aspect-ratio: 1/1; margin-bottom: 3px; background-size: 100% 100%; background-repeat: no-repeat;}
.feature-cont .feature-list .card01 .trend-list .trend .title{font-size: 14px; font-weight: 700; line-height: 1.29;} 
.feature-cont .feature-list .card01 .trend-list .trend .desc{display: block; margin-top: 2px; font-size: 12px; font-weight: 500; line-height: 1; color: var(--text-color-8)A;} 
.feature-cont .feature-list .card01 .trend-list .trend .data{align-self: flex-end; margin-top: auto; font-size: 26px; font-weight: 700; line-height: 1; white-space: nowrap;} 
.feature-cont .feature-list .card01 .trend-list .trend .data strong{font-weight: inherit;}
.feature-cont .feature-list .card01 .trend-list .trend .data span{font-size: 20px;}
.feature-cont .feature-list .card01 .trend-list .trend .data span.sup{vertical-align: top;}
.feature-cont .feature-list .card01 .trend-list .trend.trend01 .icon{background-image: url('../images/front/main/trend01.svg');}
.feature-cont .feature-list .card01 .trend-list .trend.trend01 .data{color: var(--point-color);}
.feature-cont .feature-list .card01 .trend-list .trend.trend02 {margin-top: 50px;}
.feature-cont .feature-list .card01 .trend-list .trend.trend02 .icon{background-image: url('../images/front/main/trend02.svg');}
.feature-cont .feature-list .card01 .trend-list .trend.trend02 .data{color: #EF4444;}
.feature-cont .feature-list .card01 .trend-list .trend.trend03 .icon{background-image: url('../images/front/main/trend03.svg');}
.feature-cont .feature-list .card01 .trend-list .trend.trend03 .data{color: #09955F;}
.feature-cont .feature-list .card01 .feature-vis .bg-map{width: 583px; height: auto; aspect-ratio: 583/256; margin-top: auto; background-image: url('../images/front/main/card-map.svg'); background-repeat: no-repeat; background-size: 100% auto;}
@media screen and (max-width: 1440px) {
  .feature-cont .feature-list .card01 .feature-vis{padding: 0 clamp(50px, 6.389vw, 92px) 40px 0;}
  .feature-cont .feature-list .card01 .trend-list{ padding-right: clamp(100px, 8.889vw, 128px);}
}
@media screen and (max-width: 1024px) {
  .feature-cont .feature-list .card01 .feature-vis{ width: 100%; max-width: 600px; margin: 0 auto; padding: 0;}
  .feature-cont .feature-list .card01 .trend-list{position: static; justify-content: center; margin-bottom: -90px; padding: 0; }
  .feature-cont .feature-list .card01 .trend-list .trend{ width: calc(100% / 3 - 30px); height: auto; min-height: 170px; aspect-ratio: 157/174;}
  .feature-cont .feature-list .card01 .trend-list .trend .icon{margin: 0;} 
  .feature-cont .feature-list .card01 .trend-list .trend .data{font-size: clamp(22px, 2.539vw, 26px);}
  .feature-cont .feature-list .card01 .trend-list .trend .data span{font-size: clamp(16px, 1.953vw, 20px);}
  .feature-cont .feature-list .card01 .feature-vis .bg-map{width: 100%;}
}
@media screen and (max-width: 767px) {
  .feature-cont .feature-list .card01 .trend-list{gap: clamp(10px, 2.608vw, 20px);}
}
@media screen and (max-width: 580px) {
  .feature-cont .feature-list .card01 .trend-list{flex-flow: column wrap; max-width: 360px; margin: 0 auto; margin-bottom: -40px;}
  .feature-cont .feature-list .card01 .trend-list .trend{flex-flow: row nowrap; gap: 9px; width: 100%; min-height: 75px; aspect-ratio: auto; margin: 0 auto; padding: 20px 22px 20px 16px;}
  .feature-cont .feature-list .card01 .trend-list .trend.trend02{margin-top: 0;}
  .feature-cont .feature-list .card01 .trend-list .trend .data{align-self: auto; margin: 4px 0 0 auto;}
  .feature-cont .feature-list .card01 .feature-vis .bg-map{width: calc(100% + 20px); margin: 0 -10px;;}
}
@media screen and (max-width: 359px) {
  .feature-cont .feature-list .card01 .trend-list .trend{flex-flow: row wrap;}
  .feature-cont .feature-list .card01 .trend-list .trend .data{width: 100%; text-align: right;}
}
/* card02 */
.feature-cont .feature-list .card02 .feature-text .br{display: none;}
.feature-cont .feature-list .card02 .feature-vis{padding-right: 58px;}
.feature-cont .feature-list .card02 .bubble-list { display: flex; flex-direction: column; gap: 22px; width: 570px; margin: 0 auto;}
.feature-cont .feature-list .card02 .bubble-list .bubble { position: relative; padding: 18px 30px; border-radius: 35px; font-size: 15px; line-height: 1.5; word-break: keep-all; background: #fff; box-shadow: 0 3px 6px rgba(205,205,214,0.2);}
.feature-cont .feature-list .card02 .bubble-list .bubble:nth-child(2n-1){margin-right: auto;}
.feature-cont .feature-list .card02 .bubble-list .bubble:nth-child(2n){margin-left: auto;}
.feature-cont .feature-list .card02 .bubble-list .bubble::before, 
.feature-cont .feature-list .card02 .bubble-list .bubble::after{content: ''; position: absolute; bottom: 3px; right: 48px; width: 0; height: 0; border: 18px solid transparent; border-top-color: #fff; border-bottom: 0; border-left: 0; margin-bottom: -18px;}
.feature-cont .feature-list .card02 .bubble-list .bubble.bubble02::before,
.feature-cont .feature-list .card02 .bubble-list .bubble.bubble02::after { right: inherit; left: 48px; border: 18px solid transparent; border-bottom: 0; border-right: 0;}
.feature-cont .feature-list .card02 .bubble-list .bubble::before, 
.feature-cont .feature-list .card02 .bubble-list .bubble.bubble02::before {z-index: -1;margin-bottom: -20px; border-width: 19px;}
.feature-cont .feature-list .card02 .bubble-list .bubble.bubble01 { color: var(--point-color);}
.feature-cont .feature-list .card02 .bubble-list .bubble.bubble02 { margin-right: 6px; background-color: #FFF6E8; border: 1px solid rgba(255,114,10,0.2); color: #FF720A;}
.feature-cont .feature-list .card02 .bubble-list .bubble.bubble02::after{border-top-color: #FFF6E8;}
.feature-cont .feature-list .card02 .bubble-list .bubble.bubble02::before{border-top-color: rgba(255,114,10,0.2);}
.feature-cont .feature-list .card02 .bubble-list .bubble.bubble03 { color: #09955F;}
.feature-cont .feature-list .card02 .bubble-list .bubble.bubble04 { background-color: #EFEBFF; border: 1px solid rgba(98,80,188,0.2); color: #6250BC;}
.feature-cont .feature-list .card02 .bubble-list .bubble.bubble04::after{border-top-color: #EFEBFF;}
.feature-cont .feature-list .card02 .bubble-list .bubble.bubble04::before{border-top-color: rgba(98,80,188,0.2);}
.feature-cont .feature-list .card02 .bubble-list .bubble span.strong{font-weight: 700;}
.feature-cont .feature-list .card02 .bubble-list .bubble strong{font-weight: 700; color: inherit;}
.feature-cont .feature-list .card02 .bubble-list .bubble .dots { position: relative; font-weight: 600; color: inherit;}
.feature-cont .feature-list .card02 .bubble-list .bubble .dots::before { content: '···'; position: absolute; top: -0.85em; left: 4px; display: inline-block; font-size: 15px; letter-spacing: 9px; color: inherit; }
.feature-cont .feature-list .card02 .bubble-list .bubble.bubble04 .dots::before{content: '··';}
.feature-cont .feature-list .card02 .circle-container { position: absolute; top: -58px; left: 50%; z-index: -1; width: 100%; height: auto; aspect-ratio: 1/1; border-radius: 50%;}
.feature-cont .feature-list .card02 .circle {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: auto; aspect-ratio: 1/1; border-radius: 50%; border: 8px solid var(--point-color-2); animation: blinkFade 5s ease-in-out infinite;}
.feature-cont .feature-list .card02 .circle01 { width: 982px; --opacity: 0.05; }
.feature-cont .feature-list .card02 .circle02 { width: 752px; --opacity: 0.1; }
.feature-cont .feature-list .card02 .circle03 { width: 518px; --opacity: 0.2; }
.feature-cont .feature-list .card02 .circle04 { width: 362px; --opacity: 0.3; }
.feature-cont .feature-list .card02 .circle05 { width: 214px; --opacity: 0.4; }
@keyframes blinkFade {
  0%, 100% { opacity: var(--opacity); transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
}
@media screen and (max-width: 1440px) {
  .feature-cont .feature-list .card02 .feature-text .br{display: block;}
  .feature-cont .feature-list .card02 .feature-vis{ padding-right: clamp(40px, 3.472vw, 58px); }
  .feature-cont .feature-list .card02 .bubble-list{width: clamp(530px, 39.583vw, 570px);}
  .feature-cont .feature-list .card02 .bubble-list .bubble{padding: clamp(16px, 1.25vw, 18px) clamp(24px, 2.083vw, 30px);}
}
@media screen and (max-width: 1260px) {
  .feature-cont .feature-list .card02 .bubble-list .bubble{font-size: clamp(14px, 1.19vw, 15px);}
}
@media screen and (max-width: 1024px) {
  .feature-cont .feature-list .card02{ padding: clamp(50px, 6.836vw, 70px) clamp(30px, 4.883vw, 50px) 50px; }
  .feature-cont .feature-list .card02 .feature-text .br{display: none;}
  .feature-cont .feature-list .card02 .feature-vis{margin: 0 auto; padding: 0;}
  .feature-cont .feature-list .card02 .circle-container{top: auto; bottom: -44.922vw;}
  .feature-cont .feature-list .card02 .circle{font-size: clamp(8px, 1.563vw, 16px);}
  .feature-cont .feature-list .card02 .circle01 { width: 61.375em;}
  .feature-cont .feature-list .card02 .circle02 { width: 47em;}
  .feature-cont .feature-list .card02 .circle03 { width: 32.375em;}
  .feature-cont .feature-list .card02 .circle04 { width: 22.625em;}
  .feature-cont .feature-list .card02 .circle05 { width: 13.375em;}
}
@media screen and (max-width: 840px) {
  .feature-cont .feature-list .card02 .feature-text .card-txt br:not(.br):not(.mo-only){display: block;}
}
@media screen and (max-width: 767px) {
  .feature-cont .feature-list .card02 .bubble-list{align-items: center; gap: clamp(20px, 2.868vw, 22px); width: 100%;}
  .feature-cont .feature-list .card02 .bubble-list .bubble{width: 100%; padding: clamp(10px, 2.086vw, 16px) clamp(12px, 3.129vw, 24px) clamp(8px, 2.086vw, 16px); text-align: center; line-height: 1.42;}
  .feature-cont .feature-list .card02 .bubble-list .bubble:nth-child(2n-1){margin: 0;}
  .feature-cont .feature-list .card02 .bubble-list .bubble:nth-child(2n){margin: 0;}
  .feature-cont .feature-list .card02 .bubble-list .bubble::before, 
  .feature-cont .feature-list .card02 .bubble-list .bubble::after{ bottom: 0.1875em; right: 3em; border-width: 1.125em; margin-bottom: -1.125em; font-size: clamp(10px, 2.086vw, 16px);}
  .feature-cont .feature-list .card02 .bubble-list .bubble.bubble02::before,
  .feature-cont .feature-list .card02 .bubble-list .bubble.bubble02::after { left: 3em; border-width: 1.125em; }
  .feature-cont .feature-list .card02 .bubble-list .bubble::before, 
  .feature-cont .feature-list .card02 .bubble-list .bubble.bubble02::before {margin-bottom: -1.25em; border-width: 1.1875em;}
  .feature-cont .feature-list .card02 .bubble-list .bubble.bubble02 { margin-right: 0.375em; }
  .feature-cont .feature-list .card02 .bubble-list .bubble.bubble03::before, 
  .feature-cont .feature-list .card02 .bubble-list .bubble.bubble03::after{ right: 10em; }
  .feature-cont .feature-list .card02 .bubble-list .bubble .dots::before { top: -0.85em; left: 0.2667em;font-size: clamp(14px, 1.956vw, 15px); letter-spacing: 0.6em; }
}
@media screen and (max-width: 580px) {
  .feature-cont .feature-list .card02 .feature-text .card-txt br{display: none;}
}
@media screen and (max-width: 495px) {
  .feature-cont .feature-list .card02 .feature-text .card-txt br:not(.br):not(.mo-only){display: none;}
}
@media screen and (max-width: 480px) {
  .feature-cont .feature-list .card02 .feature-text .card-tit .br{display: block;}
  .feature-cont .feature-list .card02 .feature-text .card-txt .mo-only{display: block;}
  .feature-cont .feature-list .card02 .feature-vis{width: 100%; max-width: 280px;}
  .feature-cont .feature-list .card02 .bubble-list .bubble strong{display: block;}
  .feature-cont .feature-list .card02 .bubble-list .bubble .dots::before { top: -10px; }
}
@media all and (max-width:359px) {
  .feature-cont .feature-list .card02{padding: 50px clamp(16px, 8.333vw, 30px);}
  .feature-cont .feature-list .card02 .feature-text .card-txt .mo-only{display: none;}
  .feature-cont .feature-list .card02 .feature-vis{width: calc(100% + 20px); margin-left: -10px;}
}
/* card03 */
.feature-cont .feature-list .card03 .card-txt br.mo-only{display: none;}
.feature-cont .feature-list .card03 .feature-vis{padding-right: 70px;}
.feature-cont .feature-list .card03 .feature-vis .inner{display: flex; flex-flow: column wrap; align-items: center; justify-content: center; gap: 40px;}
.feature-cont .feature-list .card03 .feature-vis .cont{position: relative; width: 538px; margin: 0 auto; padding: 20px;}
.feature-cont .feature-list .card03 .process { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); gap: 30px 38px; width: 100%; margin: 0 auto; }
.feature-cont .feature-list .card03 .process .step { position: relative; display: flex; flex-flow: row nowrap; align-items: center; gap: 12px; padding: 14px 20px; background: #fff; border-radius: 12px; box-shadow: 0 3px 6px rgba(205,205,214,0.2)}
.feature-cont .feature-list .card03 .process .step.step01 { grid-column: 1; grid-row: 1; }
.feature-cont .feature-list .card03 .process .step.step02 { grid-column: 1; grid-row: 2; }
.feature-cont .feature-list .card03 .process .step.step03 { grid-column: 1; grid-row: 3; }
.feature-cont .feature-list .card03 .process .step.step04 { grid-column: 2; grid-row: 3; }
.feature-cont .feature-list .card03 .process .step.step05 { grid-column: 2; grid-row: 2; }
.feature-cont .feature-list .card03 .process .step.step06 { grid-column: 2; grid-row: 1; }
.feature-cont .feature-list .card03 .process .step .icon{display: inline-block; width: 41px; height: auto; aspect-ratio: 1/1; border-radius: 10px; background-size: 100% 100%; background-repeat: no-repeat;}
.feature-cont .feature-list .card03 .process .step.step01 .icon{background-image: url('../images/front/main/process-step01.svg');}
.feature-cont .feature-list .card03 .process .step.step02 .icon{background-image: url('../images/front/main/process-step02.svg');}
.feature-cont .feature-list .card03 .process .step.step03 .icon{background-image: url('../images/front/main/process-step03.svg');}
.feature-cont .feature-list .card03 .process .step.step04 .icon{background-image: url('../images/front/main/process-step04.svg');}
.feature-cont .feature-list .card03 .process .step.step05 .icon{background-image: url('../images/front/main/process-step05.svg');}
.feature-cont .feature-list .card03 .process .step.step06 .icon{background-image: url('../images/front/main/process-step06.svg');}
.feature-cont .feature-list .card03 .process .step .text { font-size: 15px; font-weight: 700; color: var(--text-color-5); line-height: 1.33; white-space: nowrap;}
.feature-cont .feature-list .card03 .process .step::after { content: ''; position: absolute; z-index: -1; width: 11px; height: auto; aspect-ratio: 8/21; background-image: url('../images/front/main/process-arrow.svg'); background-size: 100% auto; background-repeat: no-repeat;}
.feature-cont .feature-list .card03 .process .step.step01::after,
.feature-cont .feature-list .card03 .process .step.step02::after { top: 100%; left: 50%; }
.feature-cont .feature-list .card03 .process .step.step03::after {right: -20px; transform: rotate(-90deg);}
.feature-cont .feature-list .card03 .process .step.step04::after,
.feature-cont .feature-list .card03 .process .step.step05::after { top: -28px; left: 50%; transform: rotate(180deg);}
.feature-cont .feature-list .card03 .process .step.step06::after {left: -20px; transform: rotate(90deg);}
.feature-cont .feature-list .card03 .feature-vis svg.border {position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: auto; box-sizing: content-box;}
.feature-cont .feature-list .card03 .feature-vis svg.border .flow { stroke-dasharray: 8 4; stroke-linecap: round; animation: dashFlow 1s linear infinite; }
@keyframes dashFlow {
  to { stroke-dashoffset: -10; }
}
.feature-cont .feature-list .card03 .feature-vis svg.border .dot { animation: pulse 1.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box;}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}
.feature-cont .feature-list .card03 .feature-vis .vis-tit{width: 183px; margin-top: 10px; padding: 16px 20px; border-radius: 28px; background-color: var(--point-color); font-size: 16px; font-weight: 800; line-height: 1; color: #fff; text-align: center;}
.feature-cont .feature-list .card03 .feature-vis svg.border.mo-only{display: none;}
@media screen and (max-width: 1440px) {
  .feature-cont .feature-list .card03 .feature-vis{padding-right: clamp(40px, 3.861vw, 70px);}
}
@media screen and (max-width: 1260px) {
  .feature-cont .feature-list .card03 .feature-vis .cont{ width: clamp(484px, 42.698vw, 538px); padding: clamp(16px, 1.587vw, 20px);}
  .feature-cont .feature-list .card03 .process{gap: 30px clamp(34px, 3.016vw, 38px);}
  .feature-cont .feature-list .card03 .process .step {padding: clamp(12px, 1.111vw, 14px) clamp(16px, 1.587vw, 20px);}
  .feature-cont .feature-list .card03 .process .step .icon{width: clamp(37px, 3.254vw, 41px);}
  .feature-cont .feature-list .card03 .process .step .text{font-size: clamp(14px, 1.190vw, 15px);}
}
@media screen and (max-width: 1024px) {
  .feature-cont .feature-list .card03 .feature-vis{margin: 0 auto; padding: 0;}
  .feature-cont .feature-list .card03 .feature-vis .cont{ width: clamp(450px, 52.539vw, 538px); padding: clamp(16px, 1.953vw, 20px);}
  .feature-cont .feature-list .card03 .process{gap: clamp(24px, 2.93vw, 30px) clamp(28px, 3.711vw, 38px);}
  .feature-cont .feature-list .card03 .process .step {gap: clamp(10px, 1.172vw, 12px)
; padding: clamp(10px, 1.367vw, 14px) clamp(16px, 1.953vw, 20px);}
  .feature-cont .feature-list .card03 .process .step .icon{width: clamp(32px, 4.004vw, 41px);}
  .feature-cont .feature-list .card03 .process .step .text{font-size: clamp(14px, 1.465vw, 15px);}
  .feature-cont .feature-list .card03 .process .step::after { width: 0.6875em; font-size: clamp(11px, 1.563vw, 16px); }
  .feature-cont .feature-list .card03 .process .step.step03::after {right: -1.25em; }
  .feature-cont .feature-list .card03 .process .step.step04::after,
  .feature-cont .feature-list .card03 .process .step.step05::after { top: -1.75em;}
  .feature-cont .feature-list .card03 .process .step.step06::after {left: -1.25em;}
  .feature-cont .feature-list .card03 .feature-vis .vis-tit{width: 11.4375em; margin-top: 0.625em; padding: 1em 1.25em; font-size: clamp(14px, 1.563vw, 16px); }
}
@media all and (max-width:540px) {
  .feature-cont .feature-list .card03 .feature-vis{width: 100%;}
  .feature-cont .feature-list .card03 .feature-vis .cont{width: 100%;}
}
@media all and (max-width:520px) {
  .feature-cont .feature-list .card03 .feature-vis{width: 100%; max-width: 270px;}
  .feature-cont .feature-list .card03 .feature-vis .cont{width: 100%; padding: 20px;}
  .feature-cont .feature-list .card03 .process{display: flex; flex-flow: column wrap; gap: 6px;}
  .feature-cont .feature-list .card03 .process .step::after{display: none;}
  .feature-cont .feature-list .card03 .feature-vis svg.border{display: none;}
  .feature-cont .feature-list .card03 .feature-vis svg.border.mo-only{display: block; }
  .feature-cont .feature-list .card03 .feature-vis svg.border{width: 100%; height: auto; aspect-ratio: 268/415;}
}
@media all and (max-width:430px) {
  .feature-cont .feature-list .card03 .card-txt br.mo-only{display: block;}
}
@media all and (max-width:359px) {
  .feature-cont .feature-list .card03 .feature-text .card-tit br{display: none;}
  .feature-cont .feature-list .card03 .feature-vis{width: calc(100% + 10px); max-width: none; min-width: 230px; margin-left: -5px;}
  .feature-cont .feature-list .card03 .feature-vis .cont{padding: clamp(10px, 5.556vw, 20px);}
  .feature-cont .feature-list .card03 .process .step{padding: clamp(4px, 2.778vw, 10px) 16px;}
  .feature-cont .feature-list .card03 .process .step .icon{width: clamp(26px, 8.889vw, 32px);}
}
/* card04 */
.feature-cont .feature-list .card04 .feature-vis{width: 608px; padding-right: 58px;}
.feature-cont .feature-list .card04 .simple-list { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); gap: 8px; width: 100%; margin: 0 auto; }
.feature-cont .feature-list .card04 .simple-list .simple { position: relative; display: flex; flex-flow: row nowrap; align-items: center; gap: 14px; max-height: 100px; padding: 19px 16px; background: #fff; border-radius: 12px; box-shadow: 0 3px 6px rgba(205,205,214,0.2);}
.feature-cont .feature-list .card04 .simple-list .simple.simple01 {grid-column: span 2;}
.feature-cont .feature-list .card04 .simple-list .simple.simple05 {grid-column: span 2;}
.feature-cont .feature-list .card04 .simple-list .simple .text{line-height: 1.43;}
.feature-cont .feature-list .card04 .simple-list .simple .text strong{font-size: 16px; font-weight: 700;}
.feature-cont .feature-list .card04 .simple-list .simple .text p{margin-top: 3px; font-size: 13px; color: #666666; white-space: nowrap;}
.feature-cont .feature-list .card04 .simple-list .simple .icon{display: inline-block; width: 41px; height: auto; aspect-ratio: 1/1; border-radius: 10px; background-size: 100% 100%; background-repeat: no-repeat;}
.feature-cont .feature-list .card04 .simple-list .simple.simple01 .icon{background-image: url('../images/front/main/simple01.svg');}
.feature-cont .feature-list .card04 .simple-list .simple.simple02 .icon{background-image: url('../images/front/main/simple02.svg');}
.feature-cont .feature-list .card04 .simple-list .simple.simple03 .icon{background-image: url('../images/front/main/simple03.svg');}
.feature-cont .feature-list .card04 .simple-list .simple.simple04 .icon{background-image: url('../images/front/main/simple04.svg');}
.feature-cont .feature-list .card04 .simple-list .simple.simple05 .icon{background-image: url('../images/front/main/simple05.svg');}
@media screen and (max-width: 1440px) {
  .feature-cont .feature-list .card04 .feature-vis{ padding-right: clamp(40px, 3.472vw, 58px);}
}
@media screen and (max-width: 1260px) {
  .feature-cont .feature-list .card04 .feature-vis{width: clamp(520px, 48.254vw, 608px);}
  .feature-cont .feature-list .card04 .simple-list .simple{gap: clamp(10px, 1.111vw, 14px); padding: clamp(14px, 1.587vw, 19px) clamp(14px, 1.389vw, 16px);}
  .feature-cont .feature-list .card04 .simple-list .simple .text strong{font-size: clamp(15px, 1.19vw, 16px);}
  .feature-cont .feature-list .card04 .simple-list .simple .text p{font-size: clamp(12px, 1.111vw, 13px);}
  .feature-cont .feature-list .card04 .simple-list .simple .icon{width: clamp(37px , 3.254vw, 41px);}
}
@media screen and (max-width: 1024px) {
  .feature-cont .feature-list .card04 .feature-vis{width: 100%; max-width: 608px; margin: 0 auto; padding: 0;}
  .feature-cont .feature-list .card04 .simple-list .simple{gap: 14px; padding: clamp(16px, 1.855vw, 19px) 16px;}
  .feature-cont .feature-list .card04 .simple-list .simple .text strong{font-size: clamp(14px, 1.563vw, 16px);}
  .feature-cont .feature-list .card04 .simple-list .simple .text p{font-size: clamp(12px, 1.27vw, 13px);}
  .feature-cont .feature-list .card04 .simple-list .simple .icon{width: 41px; min-width: 41px;}
}
@media screen and (max-width: 600px) {
  .feature-cont .feature-list .card04 .simple-list{display: flex; flex-flow: column wrap;}
  .feature-cont .feature-list .card04 .simple-list .simple .text p br{display: none;}
}
@media screen and (max-width: 460px) {
  .feature-cont .feature-list .card04 .simple-list .simple{width: 100%;}
  .feature-cont .feature-list .card04 .simple-list .simple .text p{margin: 0; white-space: inherit; word-break: keep-all;}
  .feature-cont .feature-list .card04 .simple-list .simple .text p br{display: block;}
}
/*========== livedemo ==========*/
.livedemo{padding: 0;}
.livedemo .inner { position: relative; padding: 140px 30px 90px; border-radius: 0; transition: all 0.3s ease;  background: linear-gradient(to bottom, #2B2481, #7C97FF);  background-size: 100% 150%; background-position: 0% 0%;}
.livedemo .inner::after { content: ''; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 29.55%; border-radius: 0 0 40px 40px; background: linear-gradient(to bottom, transparent, #7B95FD);}
.livedemo .sec-title .label, .livedemo .inner .sec-title, .livedemo .sec-title .text{color: #fff;}
.livedemo .sec-title .text br.br, .livedemo .sec-title .text br.mo-only{display: none;}
.livedemo .livedemo-content{position: relative; max-width: 1520px; aspect-ratio: 1520/855;  margin: 0 auto; }
.livedemo .livedemo-content .livedemo-image{width: 100%; max-width: 1520px; height: auto; margin: 0 auto;}
.livedemo .livedemo-content .sec-btn{position: sticky; bottom: 30px; left: 0; right: 0; z-index: 1; margin-top: -30px; transition: bottom .3s;}
@media screen and (max-width: 1440px) {
  .livedemo .inner {padding: clamp(110px, 9.722vw, 140px) 30px clamp(70px, 6.25vw, 90px);}
  .livedemo .inner::after {border-radius: 0 0 clamp(20px, 2.778vw, 40px) clamp(20px, 2.778vw, 40px);}
}
@media screen and (max-width: 1024px) {
  .livedemo .inner {padding: clamp(80px, 12.5vw, 110px) clamp(16px, 2.93vw, 30px) clamp(50px, 6.836vw, 70px);}
  .livedemo .livedemo-content .sec-btn{display: none;}
}
@media screen and (max-width: 767px) {
  .livedemo .inner .sec-title{margin-bottom: 75px;}
  .livedemo .sec-title .text{ line-height: 1.375;}
  .livedemo .sec-title .text br.br{display: block;}
}
@media screen and (max-width: 440px) {
  .livedemo .sec-title .text br.mo-only{display: block;}
}

/*========== number ==========*/
.number {padding: calc(140px - 25px) 0 100px;}
.number .inner{padding: 0 30px;}
.number .num-list { display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-evenly; gap: 20px; width: 100%; max-width: 1520px; margin: 0 auto;}
.number .num-list:has(.num-item:nth-child(6)) { gap: 16px;}
.number .num-list .num-item { flex: 1; display: flex; flex-flow: column;align-items: flex-start; height: 300px; border-radius: 20px; padding: 34px 20px 36px 30px; transform: scale(1, 0); transform-origin: center;}
.number .num-list .num-item .top{margin-bottom: auto;}
.number .num-list .num-item i.icon { display: inline-block; width: 48px; height: auto; aspect-ratio: 1/1; margin: 0 0 6px; border-radius: 10px; background-size: 100% 100%; background-repeat: no-repeat; background-position: center center;  overflow: hidden;}
.number .num-list .num-item .data { display: flex; flex-flow: row nowrap; font-size: 36px; font-weight: 600; letter-spacing: -0.06em; }
.number .num-list .num-item .data strong { font-family: inherit; font-weight: inherit; letter-spacing: inherit;}
.number .num-list .num-item .title { margin-top: auto; font-size: 18px; font-weight: 600; line-height: 1.22; letter-spacing: -0.02em;}
.number .num-list .num-item .desc { display: inline-block; margin-top: 9px; font-size: 14px; font-weight: 500; color: var(--text-color-5); word-break: keep-all;}
.number .num-list .num-item.instagram { background-color: #F5F5F5; }
.number .num-list .num-item.instagram .icon { background-image: url('../images/front/main/num01.svg'); }
.number .num-list .num-item.views { background-color: var(--bg-color); }
.number .num-list .num-item.views .icon { background-image: url('../images/front/main/num02.svg'); }
.number .num-list .num-item.views .data{color: var(--point-color);}
.number .num-list .num-item.likes { background-color: #FFEBEB; }
.number .num-list .num-item.likes .icon { background-image: url('../images/front/main/num03.svg'); }
.number .num-list .num-item.likes .data{color: #EF4444;}
.number .num-list .num-item.brands { background-color: #FFF6E8; }
.number .num-list .num-item.brands .icon { background-image: url('../images/front/main/num04.svg'); }
.number .num-list .num-item.brands .data{color: #FF720A;}
.number .num-list .num-item.campaigns { background-color: #EAF7F6; }
.number .num-list .num-item.campaigns .icon { background-image: url('../images/front/main/num05.svg'); }
.number .num-list .num-item.campaigns .data{color: #09955F;}
.number .num-list .num-item.contents { background-color: #EFEBFF; }
.number .num-list .num-item.contents .icon { background-image: url('../images/front/main/num06.svg'); }
.number .num-list .num-item.contents .data{color: #6250BC;}
@media screen and (max-width: 1580px) {
  .number .num-list{gap: 1.25em; font-size: clamp(12px, 1.013vw, 16px);}
  .number .num-list:has(.num-item:nth-child(6)) { gap: 1em;}
  .number .num-list .num-item{height: clamp(270px, 18.987vw, 300px); padding: 2.125em 1.25em 2.25em 1.875em;}
  .number .num-list .num-item i.icon { width: 3em; }
  .number .num-list .num-item .data { font-size: clamp(30px, 2.278vw, 36px);}
  .number .num-list .num-item .title { font-size: clamp(16px, 1.139vw, 18px);}
}
@media screen and (max-width: 1440px) {
  .number {padding: calc(140px - 25px) 0 clamp(80px, 6.944vw, 100px);}
}
@media screen and (max-width: 1260px) {
  .number .num-list:has(.num-item:nth-child(6)) {flex-flow: row wrap; font-size: 16px;}
  .number .num-list:has(.num-item:nth-child(6)) .num-item{ flex: 0 0 auto; width: calc((100% - 32px) / 3); height: clamp(270px, 23.81vw, 300px);}
  .number .num-list:has(.num-item:nth-child(6)) .num-item i.icon { width: 40px; }
  .number .num-list:has(.num-item:nth-child(6)) .num-item .data { font-size: 36px; line-height: 1;}
  .number .num-list:has(.num-item:nth-child(6)) .num-item .title { font-size: 18px;}
}
@media screen and (max-width: 1024px) {
  .number {padding: calc(140px - 20px) 0 80px;}
  .number .inner{padding: 0 clamp(16px, 2.93vw, 30px);}
  .number .num-list { flex-flow: row wrap; gap: clamp(14px, 1.953vw, 20px);}
  .number .num-list .num-item{ flex: auto; width:  calc((100% - calc(clamp(14px, 1.953vw, 20px) * 2)) / 3); border-radius: clamp(16px, 1.953vw, 20px); }
  .number .num-list:has(.num-item:nth-child(6)) { gap: clamp(10px, 1.563vw, 16px);}
  .number .num-list:has(.num-item:nth-child(6)) .num-item{ width: calc((100% - calc(clamp(10px, 1.563vw, 16px) * 2)) / 3);}
  .number .num-list:has(.num-item:nth-child(6)) .num-item i.icon { width: clamp(34px, 3.906vw, 40px); }
  .number .num-list:has(.num-item:nth-child(6)) .num-item .data { font-size: clamp(30px, 3.516vw, 36px);}
  .number .num-list:has(.num-item:nth-child(6)) .num-item .title { font-size: clamp(16px, 1.758vw, 18px);}
}
@media screen and (max-width: 767px) {
  .number {padding: calc(120px - 20px) 0 80px;}
  .number .num-list .num-item .data, .number .num-list:has(.num-item:nth-child(6)) .num-item .data { font-size: clamp(26px, 3.911vw, 30px);}
  .number .num-list .num-item i.icon{ width: clamp(34px, 4.694vw, 36px); border-radius: 4px;}
  .number .num-list .num-item.instagram .icon { background-image: url('../images/front/main/num01-mo.svg'); }
  .number .num-list .num-item.views .icon { background-image: url('../images/front/main/num02-mo.svg'); }
  .number .num-list .num-item.likes .icon { background-image: url('../images/front/main/num03-mo.svg'); }
  .number .num-list .num-item.brands .icon { background-image: url('../images/front/main/num04-mo.svg'); }
  .number .num-list .num-item.campaigns .icon { background-image: url('../images/front/main/num05-mo.svg'); }
  .number .num-list .num-item.contents .icon { background-image: url('../images/front/main/num06-mo.svg'); }
}
@media screen and (max-width: 640px) {
  .number .num-list .num-item, .number .num-list:has(.num-item:nth-child(6)) .num-item{ width: calc((100% - 10px) / 2); height: clamp(230px, 42.188vw, 270px); padding: 30px clamp(20px, 4.688vw, 30px);}
  .number .num-list .num-item .top{display: flex; flex-flow: row nowrap; align-items: center; gap: 10px; margin-bottom: 0;}
  .number .num-list .num-item i.icon{margin-bottom: 0;}
}
@media screen and (max-width: 460px) {
  .number .num-list .num-item, .number .num-list:has(.num-item:nth-child(6)) .num-item{ flex: auto; width: 100%; height: clamp(165px, 45vw, 230px); padding: 30px;}
  .number .num-list .num-item .desc{margin-top: 6px;}
}
@media screen and (max-width: 359px) {
  .number .num-list .num-item{ padding: clamp(20px, 8.333vw, 30px);}
}

/*========== Partners ==========*/
.partners {padding: 40px 0 100px;}
.partners-slider {width: 100%; overflow: hidden;}
.partners-list{display: flex; flex-flow: column; gap: 40px;}
.partners-slider .partners-row { display: flex; gap: 50px; width: max-content;}
.partners-slider .partners-row figure {display: flex; justify-content: center; align-items: center; width: 210px; height: auto; aspect-ratio: 210 / 64; }
.partners-slider .partners-row figure img {object-fit: contain;}
@media screen and (max-width: 1440px) {
  .partners {padding: 40px 0 clamp(80px, 6.944vw, 100px);}
  .partners-list{gap: clamp(30px, 2.083vw, 40px);}
  .partners-slider .partners-row { gap: clamp(35px, 2.083vw, 50px);}
  .partners-slider .partners-row figure { width: clamp(160px, 12.5vw, 210px); }
}
@media screen and (max-width: 1024px) {
  .partners {padding: 40px 0 80px;}
  .partners-list{gap: clamp(24px, 2.93vw, 30px);}
  .partners-slider .partners-row { gap: clamp(20px, 3.418vw, 35px);}
  .partners-slider .partners-row figure { width: clamp(128px, 15.625vw, 160px); }
}

/*========== Promo ==========*/
.promo { padding: 40px 0 200px;}
.promo .inner{ padding: 0 30px;}
.promo .promo-content{display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; width:100%; max-width: 1520px; margin:0 auto;  padding: 40px 40px 40px 80px; border-radius: 20px; background-image: url('../images/front/main/promo-bg.jpg'); background-repeat: no-repeat; background-size: 120% 120%; overflow: hidden; animation: bgmove 10s infinite; will-change: background-position;}
@keyframes bgmove {
  0%, 100% { background-position: top left; }
  50% { background-position: bottom right; }
}
.promo .promo-content .promo-text{color: #fff;}
.promo .promo-content .promo-text .title { font-size: 34px; font-weight: 700; line-height: 1.12;}
.promo .promo-content .promo-text .title .br{display: none;}
.promo .promo-content .promo-text .text {margin-top: 16px; font-size: 20px; font-weight: 500;}
.promo .promo-content .promo-text .text .mo-only{display: none;}
.promo .promo-content .promo-actions { display: flex; gap: 10px;}
.promo .promo-content .promo-actions .btn { display: flex; flex-flow: column; justify-content: space-between; width: 277px; aspect-ratio: 277/174; padding: 20px 20px 30px 34px; background: #fff; border-radius: 16px; font-size: 20px; font-weight: 700;}
.promo .promo-content .promo-actions .btn .text{align-self: flex-start;}
.promo .promo-content .promo-actions .btn .icon{align-self: flex-end; display: inline-block; width: 40px; height: auto; aspect-ratio: 1/1; border-radius: 50%; background: url("../images/common/banner-arrow-btn-black.svg") 50% 50% no-repeat;}
@media (hover: hover){
  .promo .promo-content .promo-actions .btn:hover .icon{animation: diagonalMove 1.2s infinite ease-in-out;}
}
@media screen and (max-width: 1440px) {
  .promo { padding: 40px 0 clamp(120px, 13.889vw, 200px);}
  .promo .promo-content{ padding: clamp(30px, 2.778vw, 40px) clamp(30px, 2.778vw, 40px);}
  .promo .promo-content .promo-text .title { font-size: clamp(28px, 2.361vw, 34px); }
  .promo .promo-content .promo-text .text {font-size: clamp(18px, 1.389vw, 20px); }
  .promo .promo-content .promo-actions .btn { width: clamp(220px, 19.236vw, 277px); padding: clamp(16px, 1.389vw, 20px) clamp(16px, 1.389vw, 20px) clamp(24px, 2.083vw, 30px) clamp(28px, 2.361vw, 34px); font-size: clamp(18px, 1.389vw, 20px); }
  .promo .promo-content .promo-actions .btn .icon{width: 2.5em; font-size: clamp(14px, 1.111vw, 16px);}
}
@media screen and (max-width: 1080px) {
  .promo .promo-content .promo-text .title .br{display: block;}
}
@media screen and (max-width: 1024px) {
  .promo .inner{ padding: 0 clamp(16px, 2.93vw, 30px);}
  .promo .promo-content{ padding: 40px;}
  .promo .promo-content .promo-text .title { font-size: clamp(22px,3.32vw, 34px); }
  .promo .promo-content .promo-text .text {font-size: clamp(16px, 1.953vw, 20px); }
  .promo .promo-content .promo-actions{gap: clamp(10px, 2.93vw, 30px);}
  .promo .promo-content .promo-actions .btn { width: clamp(220px, 27.051vw, 277px); padding: clamp(16px, 1.953vw, 20px) clamp(16px, 1.953vw, 20px) clamp(24px, 2.93vw, 30px) clamp(28px,3.32vw, 34px); border-radius: clamp(10px, 1.563vw, 16px); font-size: clamp(16px, 1.953vw, 20px); }
  .promo .promo-content .promo-actions .btn .icon{width: 2.5em; font-size: clamp(14px, 1.563vw, 16px);}
  .promo .promo-content .promo-actions .btn:nth-child(1) {display: none;}
}
@media screen and (max-width: 767px) {
  .promo .promo-content{flex-flow: column wrap; align-items: flex-start; gap: 60px; padding: 40px clamp(25px, 5.215vw, 40px) clamp(30px, 5.215vw, 40px); background-image: url('../images/front/main/promo-bg-mo.jpg');}
  .promo .promo-content .promo-text .title .br{display: none;}
  .promo .promo-content .promo-actions{flex-flow: column wrap; gap: 10px; width: 100%; }
  .promo .promo-content .promo-actions .btn{flex-flow: row-reverse nowrap; align-items: center; width: 100%; aspect-ratio: auto; padding: 18px 24px 18px 20px;}
  .promo .promo-content .promo-actions .btn .text{align-self: inherit;}
  .promo .promo-content .promo-actions .btn .icon{align-self: inherit;}
}
@media screen and (max-width: 600px) {
  .promo .promo-content .promo-text .title .br{display: block;}
  .promo .promo-content .promo-text .text .mo-only{display: block;}
}

/*========== Floating Menu ==========*/
/* #container:has(.main) .floating-menu{ visibility: hidden; opacity: 0; bottom: 40px; right: 40px; } */
#container:has(.main) .floating-menu{bottom: 40px; right: 40px; }
@media screen and (max-width: 1024px) {
  #container:has(.main) .floating-menu{ bottom: clamp(20px, 3.906vw, 40px); right: clamp(20px, 3.906vw, 40px); }
}