@charset "utf-8";
/* Info
 ========================================================================== */
/** 
    * 1. Writer: Sunhyeong Kim., Hyerin Lim (Weaverloft Corp.) 
    * 2. Production Date: 2025-09
    * 3. Client: Auto-seed
 */

/*========== 구독 플랜 ==========*/
.subscription .subscription-info{padding: 0 30px;}
#sub.subscription .sub-visual { width: 100%; margin-bottom: 56px; padding: 68px 0 0; background: #fff;}
#sub.subscription .sub-visual .page-tag {min-width: 194px; line-height: 43px; font-size: 20px; padding: 0 30px; border: 2px solid var(--border-color-d);}
.subscription .subscription-info .inner { width: 100%; max-width: 1100px; margin: 0 auto; }
.subscription .subscription-info .plan-box-area { display: flex; gap: 30px; align-items: stretch;}
.subscription .subscription-info .plan-box { width: 100%; max-width: 800px; margin: 0 auto; padding: 50px 30px 46px 40px; border-radius: 20px; background: linear-gradient(135deg, #E5E9FF, #F4F5FA);}
.subscription .subscription-info .plan-box .tit { display: flex; align-items:center; margin-bottom: 24px; font-size: 32px; font-weight: 700; line-height: 1; color: var(--text-color-2);}
.subscription .subscription-info .plan-box .tit span {max-width: 74px; margin-left: 10px; padding: 6px 11px; font-size: 14px; line-height: 16px; font-weight: 700; color: #fff; border-radius: 16px; background-color: var(--red-color); letter-spacing: 0;}
.subscription .subscription-info .plan-box .sub-tit { margin-bottom: 28px; font-size: 18px; font-weight: 400; line-height: 1.5556; color: var(--text-color-5); word-break:keep-all;}
.subscription .subscription-info .plan-box .price { display: flex; align-items: flex-end; gap: 6px; line-height: 1;}
.subscription .subscription-info .plan-box .price span { font-size: 20px; font-weight: 600; color: var(--text-color-5);}
.subscription .subscription-info .plan-box .price span em { margin-right: 2px; font-size: 42px; font-weight: 600; color: var(--point-color); }
.subscription .subscription-info .plan-box .price small { font-size: 16px; font-weight: 500; color: var(--text-color-8); transform: translateY(-4px);}
.subscription .subscription-info .plan-box .divi-line { width: 100%; margin: 32px 0 30px; border: none; height: 1px; background: repeating-linear-gradient(to right, #9999CB 0px, #9999CB 4px, transparent 4px, transparent 8px);}
.subscription .subscription-info .plan-box .service p { margin-bottom: 20px; font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--text-color-2); letter-spacing: 0;}
.subscription .subscription-info .plan-box .service .list{display: flex; flex-flow: row nowrap; align-items: flex-start; gap: 40px;}
.subscription .subscription-info .plan-box .service li { padding-left: 26px; font-size: 18px; font-weight: 500; line-height: 1.38; color: var(--text-color-5); letter-spacing: 0; background-image: url('../images/common/icon-check-circle-7D8DE3.svg'); background-size: 20px auto; background-repeat: no-repeat; background-position: top 1px left; word-break: keep-all;}
.subscription .subscription-info .plan-box .service li:not(:last-of-type) { margin-bottom: 16px;}
.subscription .subscription-info .plan-box .service li span { width: 100%; margin-top: 8px; padding-left: 15px; position: relative; font-weight: 400;}
.subscription .subscription-info .plan-box .service li span::before { content:''; position: absolute; top: 9px; left: 0; display: block; width: 4px; min-width: 4px; height: auto; aspect-ratio: 1/1; border-radius: 50%; background-color: var(--text-color-5);}
.subscription .subscription-info .btn-wrap { margin-top: 40px;}
.subscription .subscription-info .btn-wrap .basic-btn.main-btn{min-width: 260px !important;}
.subscription .subscription-info .plan-table-area { margin: 120px 0 160px;}
.subscription .subscription-info .plan-table-area .flex-box-ui {align-items: flex-end; margin-bottom: 21px;}
.subscription .subscription-info .plan-table-area .flex-box-ui h3 { font-size: 24px; font-weight: 700; color: var(--text-color-2);}
.subscription .subscription-info .plan-table-area .flex-box-ui h3 br.mo-only{display: none;}
.subscription .subscription-info .plan-table-area .flex-box-ui .right-box { color: var(--text-color-8); font-size: 16px; font-weight: 500;}
.subscription .subscription-info .plan-table-area .table-wrap{border: 1px solid var(--border-color-d); border-radius: 16px; overflow: hidden;}
.subscription .subscription-info .plan-table-area table { width: 100%; }
.subscription .subscription-info .plan-table-area table th { width: 25%; padding: 18px 20px; border-right: 1px solid var(--border-color-d); border-bottom: 1px solid var(--border-color-d); font-size: 16px; font-weight: 600; color: var(--text-color-8); line-height: 1;}
.subscription .subscription-info .plan-table-area table th:last-child { border-right: none;}
.subscription .subscription-info .plan-table-area table th .badge { margin-left: 8px; font-size: 14px; font-weight: 600; line-height: 16px; color: var(--point-color); padding: 5px 12px; border-radius: 14px; background-color: var(--sky-blue); }
.subscription .subscription-info .plan-table-area table tbody tr.mo-only { display: none; }
.subscription .subscription-info .plan-table-area table tbody td { padding: 22px 22px 24px 20px; border-right: 1px solid var(--border-color-d);}
.subscription .subscription-info .plan-table-area table tbody tr td:last-child { border-right: none;}
.subscription .subscription-info .plan-table-area table tbody tr td:first-child { padding-left: 8px; padding-right: 8px; text-align: center; vertical-align: middle; font-size: 24px; font-weight: 700; color: var(--text-color-2); border-left: none; word-break: keep-all !important;}
.subscription .subscription-info .plan-table-area table tbody td .price-list { display: flex; justify-content: space-between; align-items: center; line-height: 21px;}
.subscription .subscription-info .plan-table-area table tbody td .price-list:last-of-type { margin-top: 12px;}
.subscription .subscription-info .plan-table-area table tbody td .price-list .type { font-size: 16px; font-weight: 500; color: var(--text-color-8);}
.subscription .subscription-info .plan-table-area table tbody td .price-list .amount span { font-size: 18px; font-weight: 600; color: var(--text-color-2); }
.subscription .subscription-info .plan-table-area table tbody td .price-list .amount span small { font-size: 14px; font-weight: inherit;}
.subscription .subscription-info .plan-table-area table tbody td .price-list .amount .sale-per { margin-right: 3px; font-size: 18px; font-weight: 700; color: var(--red-color); }
@media screen and (max-width: 1160px) {
    .subscription .subscription-info .plan-table-area table thead th:first-child { width: 20%;}
}
@media screen and (max-width: 1024px) {
    #sub.subscription .sub-visual { margin: clamp(16px, 2.539vw, 26px) auto 0; margin-bottom: clamp(40px, 5.469vw, 56px); padding: clamp(50px, 6.641vw, 68px) 0 0;}
    #sub.subscription .sub-visual .page-tag {min-width: 146px; line-height: clamp(30px, 4.199vw, 43px); font-size: clamp(16px, 1.953vw, 20px); padding: 0 1.5em;}
    .subscription .subscription-info { padding: 0 clamp(16px, 2.93vw, 30px);}
    .subscription .sub-visual.subscription-info .visual-tit h2 { margin-top: clamp(16px, 2.734vw, 28px); font-size: clamp(28px, 3.125vw, 32px);}
    .subscription .subscription-info .plan-box-area {gap: clamp(16px, 2.93vw, 30px);}
    .subscription .subscription-info .plan-box { padding: clamp(30px, 4.883vw, 50px) clamp(16px, 2.93vw, 30px) clamp(30px, 4.883vw, 46px) clamp(16px, 3.906vw, 40px); border-radius: clamp(16px, 1.953vw, 20px);}
    .subscription .subscription-info .plan-box .tit { margin-bottom: clamp(21px, 2.344vw, 24px); font-size: clamp(24px, 3.125vw, 32px);}
    .subscription .subscription-info .plan-box .tit span { margin-left: clamp(6px, 0.977vw, 10px); padding: 0.4286em 0.7857em; font-size: clamp(12px, 1.367vw, 14px); line-height: 1.14; border-radius: clamp(12px, 1.563vw, 16px); }
    .subscription .subscription-info .plan-box .sub-tit { margin-bottom: clamp(20px, 2.734vw, 28px); font-size: clamp(16px, 1.758vw, 18px); }
    .subscription .subscription-info .plan-box .price { gap: clamp(3px, 0.586vw, 6px);}
    .subscription .subscription-info .plan-box .price span { font-size: clamp(18px, 1.953vw, 20px);}
    .subscription .subscription-info .plan-box .price span em { font-size: clamp(30px, 4.102vw, 42px);}
    .subscription .subscription-info .plan-box .price small { font-size: clamp(14px, 1.563vw, 16px);transform: translateY(-0.25em);}
    .subscription .subscription-info .plan-box .divi-line { margin: clamp(16px, 3.125vw, 32px) 0 clamp(16px, 2.93vw, 30px);}
    .subscription .subscription-info .plan-box .service p { margin-bottom: clamp(18px, 1.953vw, 20px); font-size: clamp(18px, 1.953vw, 20px);}
    .subscription .subscription-info .plan-box .service .list{gap: clamp(20px, 3.906vw, 40px);}
    .subscription .subscription-info .plan-box .service .list ul:first-child{min-width: 228px;}
    .subscription .subscription-info .plan-box .service li { padding-left: clamp(21px, 2.539vw, 26px); font-size: clamp(15px, 1.758vw, 18px); line-height: 1.16; background-size: clamp(16px, 1.953vw, 20px) auto;     background-position: top left; word-break: keep-all;}
    .subscription .subscription-info .plan-box .service li:not(:last-of-type) { margin-bottom: clamp(14px, 1.563vw, 16px);}
    .subscription .subscription-info .plan-box .service li span {margin-top: clamp(8px, 1.172vw, 12px); padding-left: clamp(10px, 1.465vw, 15px);}
    .subscription .subscription-info .plan-box .service li span::before { top: 0.5em;}
    .subscription .subscription-info .btn-wrap .basic-btn.main-btn{ min-width: clamp(200px, 25.391vw, 260px) !important; font-size: clamp(16px, 1.758vw, 18px); line-height: clamp(50px, 5.273vw, 54px);}
    .subscription .subscription-info .plan-table-area { margin: clamp(80px, 11.719vw, 120px) 0 clamp(100px, 15.625vw, 160px);}
    .subscription .subscription-info .plan-table-area .flex-box-ui {margin-bottom: clamp(18px, 2.051vw, 21px);}
    .subscription .subscription-info .plan-table-area .flex-box-ui h3 { font-size: clamp(20px, 2.344vw, 24px);}
    .subscription .subscription-info .plan-table-area .flex-box-ui .right-box { font-size: clamp(14px, 1.563vw, 16px);}
    .subscription .subscription-info .plan-table-area .table-wrap{border-radius: clamp(8px, 1.563vw, 16px);}
    .subscription .subscription-info .plan-table-area table th {padding: clamp(13px, 1.758vw, 18px) clamp(16px, 1.953vw, 20px) clamp(14px, 1.758vw, 18px); font-size: clamp(14px, 1.563vw, 16px); }
    .subscription .subscription-info .plan-table-area table thead th:first-child { width: 18%;}
    .subscription .subscription-info .plan-table-area table th .badge { margin-left: 0.5714em; padding: 0.3571em 0.8571em; font-size: clamp(12px, 1.367vw, 14px); line-height: 1; }
    .subscription .subscription-info .plan-table-area table tbody td { padding: clamp(18px, 2.148vw, 22px) clamp(12px, 2.148vw, 22px) clamp(18px, 2.344vw, 24px) clamp(14px, 1.953vw, 20px); }
    .subscription .subscription-info .plan-table-area table tbody tr td:first-child { font-size: clamp(20px, 2.344vw, 24px); }
    .subscription .subscription-info .plan-table-area table tbody td .price-list { line-height: 1.3125em;}
    .subscription .subscription-info .plan-table-area table tbody td .price-list:last-of-type { margin-top: clamp(10px, 1.172vw, 12px);}
    .subscription .subscription-info .plan-table-area table tbody td .price-list .type { font-size: clamp(14px, 1.563vw, 16px); }
    .subscription .subscription-info .plan-table-area table tbody td .price-list .amount span { font-size: clamp(16px, 1.758vw, 18px); }
    .subscription .subscription-info .plan-table-area table tbody td .price-list .amount span small { font-size: clamp(12px, 1.367vw, 14px);}
    .subscription .subscription-info .plan-table-area table tbody td .price-list .amount .sale-per { margin-right: 3px; font-size: clamp(16px, 1.758vw, 18px); }
}
@media screen and (max-width: 850px) {
    .subscription .subscription-info .plan-box .sub-tit br{display: none;}
    .subscription .subscription-info .plan-table-area table thead th:first-child { width: 15%;}
}
@media screen and (max-width: 767px) {
    .subscription .sub-visual.subscription-info { padding: clamp(20px, 4.883vw, 50px) 0 0;}
    .subscription .subscription-info .plan-box-area {flex-flow: column wrap;}
    .subscription .subscription-info .plan-box {width: 100%; padding: clamp(28px,4.954vw, 38px) clamp(16px, 3.911vw, 30px) clamp(28px,4.954vw, 38px) clamp(16px, 3.911vw, 30px); border-radius: clamp(16px, 2.608vw, 20px);}
    .subscription .subscription-info .plan-box .service li span::before { width: 3px; min-width: 3px;}
    .subscription .subscription-info .btn-wrap{margin-top: clamp(30px, 3.906vw, 40px);}
    .subscription .subscription-info .plan-table-area .flex-box-ui{margin-bottom: 30px;}
    .subscription .subscription-info .plan-table-area .flex-box-ui h3{font-size: clamp(18px, 2.608vw, 20px);}
    .subscription .subscription-info .plan-table-area .flex-box-ui .right-box{font-size: clamp(12px, 1.825vw, 14px);}

    .subscription .subscription-info .plan-table-area table thead{display: none;}
    .subscription .subscription-info .plan-table-area table tbody{display: grid; grid-template-columns: auto 1fr; gap: 0;}
    .subscription .subscription-info .plan-table-area table tbody tr,
    .subscription .subscription-info .plan-table-area table tbody tr.mo-only { display: flex; flex-flow: column wrap; align-items: stretch; gap: 0;}
    .subscription .subscription-info .plan-table-area table tbody tr.mo-only{width: clamp(94px, 26.076vw, 200px);}
    .subscription .subscription-info .plan-table-area table th{width: 100%;}
    .subscription .subscription-info .plan-table-area table tbody tr.mo-only th{border-bottom: 1px solid var(--border-color-d); border-right: 1px solid var(--border-color-d);}
    .subscription .subscription-info .plan-table-area table tbody tr.mo-only.premium th{ background-color: var(--bg-color);}
    .subscription .subscription-info .plan-table-area table tbody tr.mo-only.premium th:not(:first-child){color: var(--point-color);}
    .subscription .subscription-info .plan-table-area table tbody tr.mo-only.premium th:last-child{border-bottom: none;}
    .subscription .subscription-info .plan-table-area table tbody tr.plan-basic td, .subscription .subscription-info .plan-table-area table tbody tr:last-child td{border: none; border-bottom: 1px solid var(--border-color-d);}
    .subscription .subscription-info .plan-table-area table th{font-size: clamp(15px, 2.086vw, 16px); line-height: 1;}
    .subscription .subscription-info .plan-table-area table tbody tr th,
    .subscription .subscription-info .plan-table-area table tbody tr td{display: flex; flex-flow: column wrap; align-items: center; justify-content: center; height: 90px; padding: 0 clamp(13px, 2.608vw, 20px); }
    .subscription .subscription-info .plan-table-area table tbody tr th:first-child,
    .subscription .subscription-info .plan-table-area table tbody tr td:first-child{height: 51px;}
    .subscription .subscription-info .plan-table-area table tbody tr td:first-child{font-size: clamp(18px, 2.608vw, 20px);}
    .subscription .subscription-info .plan-table-area table th .badge{margin: 4px 0 0; padding: 4px 11px; white-space: nowrap;}
    .subscription .subscription-info .plan-table-area table tbody tr.mo-only.premium th .badge{background-color: var(--point-color); color: #fff;}
    .subscription .subscription-info .plan-table-area table tbody td .price-list{width: 100%;}
    .subscription .subscription-info .plan-table-area table tbody td .price-list .type{font-size: 15px;}
    .subscription .subscription-info .plan-table-area table tbody td .price-list .amount span { font-size: 18px; }
    .subscription .subscription-info .plan-table-area table tbody td .price-list .amount span small { font-size: 14px;}
    .subscription .subscription-info .plan-table-area table tbody td .price-list .amount .sale-per { margin-right: 3px; font-size: 18px; }
}
@media screen and (max-width: 590px) {
    .subscription .subscription-info .plan-box .service .list{flex-flow: column wrap;}
    .subscription .subscription-info .plan-box .service .list ul:first-child{min-width: auto;}
}
@media screen and (max-width: 430px) {
    .subscription .subscription-info .plan-table-area .flex-box-ui h3 br.mo-only{display: block;}
}
@media screen and (max-width: 359px) {
    .subscription .subscription-info .plan-box .price{flex-flow: row wrap; gap: 7px 3px;}
    .subscription .subscription-info .plan-table-area .table-wrap{width: 100%; overflow-x: auto;}
    .subscription .subscription-info .plan-table-area table{min-width: 290px;}
    .subscription .subscription-info .plan-table-area table tbody tr th, .subscription .subscription-info .plan-table-area table tbody tr td{padding: 0 6px;}
    .subscription .subscription-info .plan-table-area table tbody tr.mo-only{width: 85px;}
}

/*========== 서비스 소개 ==========*/
.intro{--inner-padding-rl: 30px;}
.intro .inner{ width:100%; max-width: 1260px; margin:0 auto; padding: 0 var(--inner-padding-rl);}
.intro .mo-only{display: none;}
.intro .mo-only2{display: none;}
/* sec-title */
.intro .inner .sec-title{ text-align: center; margin-bottom: 54px;}
.intro .inner .sec-title .title { font-size: 36px; font-weight: 700; line-height: 1.55; word-break: keep-all;}
.intro .inner .sec-title .text {margin-top: 40px; font-size: 20px; color: var(--text-color-5); line-height: 1.5; letter-spacing: -0.025em; word-break: keep-all;}
/* tab-menu */
.intro .tab-menu {justify-content: center; align-items: center; width: 100%; margin-bottom: 60px; border: none;}
.intro .tab-menu .tab-buttons { display: flex; justify-content: center; align-items: center; gap: 8px; }
.intro .tab-menu .tab-buttons .tab-button { flex-shrink: 0; padding: 9px 24px; border-radius: 60px; border: 1px solid var(--border-color-d); background: transparent; font-size: 16px; font-weight: 600; white-space: nowrap; color: #fff; cursor: pointer; transition: background 0.3s ease, padding 0.3s ease;}
@media (hover: hover) {
	.intro .tab-menu .tab-buttons .tab-button:hover { background: rgba(255, 255, 255, 0.3);}
}
.intro .tab-menu .tab-buttons .tab-button.active { background: #fff; color: var(--point-color); font-weight: 600;}
.intro .tab-contents { position: relative;}
.intro .tab-contents .tab-content { display: none; opacity: 0; animation: fadeOut 0.5s ease;}
.intro .tab-contents .tab-content.active { display: block; opacity: 1; animation: fadeIn 0.5s ease;}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(16px);}
    to { opacity: 1; transform: translateY(0);}
}
@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0);}
    to { opacity: 0; transform: translateY(16px);}
}
/* anchor-tab-menu */
.intro .anchor-tab-menu {position: sticky; top: 80px; z-index: 100; width: 100%; margin-bottom: 70px; transition: all 0.4s;}
#container:has(.header.nav-up) .intro .anchor-tab-menu{top: 0; transition: all 0.4s;}
.intro .anchor-tab-menu .anchor-tab-buttons { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 20px 0; background: #fff; }
.intro .anchor-tab-menu .anchor-tab-buttons .anchor-tab-button { flex-shrink: 0; padding: 9px 24px; border-radius: 60px; border: 1px solid var(--border-color-d); background: transparent; font-size: 16px; font-weight: 600; white-space: nowrap; color: var(--text-color-8); cursor: pointer; transition: background 0.3s ease, padding 0.3s ease;}
@media (hover: hover) {
    .intro .anchor-tab-menu .anchor-tab-buttons .anchor-tab-button:hover { background: rgba(255, 255, 255, 0.3);}
}
.intro .anchor-tab-menu .anchor-tab-buttons .anchor-tab-button.active { border: 1px solid var(--point-color-2); background: rgba(64, 92, 204, 0.1); color: var(--point-color); font-weight: 600;}
@media screen and (max-width: 1440px) {
    .intro .inner .sec-title .title { font-size: clamp(30px, 2.500vw, 36px); }
    .intro .inner .sec-title .text { font-size: clamp(18px, 1.389vw, 20px);}
}
@media screen and (max-width: 1024px) {
    .intro{--inner-padding-rl: clamp(16px, 2.93vw, 30px);}
    /* sec-title */
    .intro .inner .sec-title{ margin-bottom: clamp(40px, 5.273vw, 54px);}
    .intro .inner .sec-title .title { font-size: clamp(22px, 2.930vw, 30px); line-height: 1.36; }
    .intro .inner .sec-title .text { margin-top: clamp(28px, 3.906vw, 40px); font-size: clamp(16px, 1.758vw, 18px); line-height: 1.375;}
    /* tab-menu */
    .intro .tab-menu { margin-bottom: clamp(40px, 5.859vw, 60px);}
    .intro .tab-menu .tab-buttons { gap: clamp(6px, 0.781vw, 8px);}
    .intro .tab-menu .tab-buttons .tab-button { padding: 9px clamp(20px, 2.344vw, 24px); font-size: clamp(15px, 1.563vw, 16px); }
    /* anchor-tab-menu */
    .intro .anchor-tab-menu {top: 64px; margin-bottom: clamp(50px, 6.836vw, 70px); }
    .intro .anchor-tab-menu .anchor-tab-buttons { gap: clamp(6px, 0.781vw, 8px); padding: clamp(10px, 1.953vw, 20px) 0; background: #fff; }
    .intro .anchor-tab-menu .anchor-tab-buttons .anchor-tab-button {padding: 9px clamp(20px, 2.344vw, 24px); font-size: clamp(15px, 1.563vw, 16px); }
}
@media screen and (max-width: 880px) {
    /* anchor-tab-menu */
    .intro .anchor-tab-menu .anchor-tab-buttons {justify-content: flex-start; padding: 8px 20px; overflow-x: auto; }
    .intro .anchor-tab-menu .anchor-tab-buttons::-webkit-scrollbar {display: none;}
}
@media screen and (max-width: 767px) {
    /* tab-menu */
    .intro .tab-menu .tab-buttons {justify-content: flex-start; padding: 8px 20px; overflow-x: auto; }
    .intro .tab-menu .tab-buttons::-webkit-scrollbar {display: none;}
    .intro .pc-only{display: none;}
    .intro .mo-only{display: block;}
}
@media screen and (max-width:540px) {
    .intro .mo-only2{display: block;}
}

/*===== visual =====*/
.intro .visual-sec {position: relative; display: flex; justify-content: center; align-items: center;}
.intro .visual-sec .visual{position: relative; width: 100%;}
.intro .visual-sec .visual .image-wrap{width: 100%; aspect-ratio: 1860/949; min-height: 900px; overflow: hidden;}
.intro .visual-sec .visual .image-wrap .img { width: 100%; height: 100%; animation: visual-image 12s 0s infinite; }
.intro .visual-sec .visual .image-wrap .img img{ width: 100%; height: 100%; object-fit: cover;}
.intro .visual-sec .circle-wrap { position: absolute; top: 0; bottom: 30px; left: 0; right: 0; width: 738px; height: auto; aspect-ratio: 1/1; margin: auto;}
.intro .visual-sec .circle-wrap > .circle { position: absolute; width: 100%; height: 100%; fill: none; stroke: var(--border-color-d); stroke-width: 3;}
.intro .visual-sec .circle-wrap > .mover { width: 20px; height: auto; aspect-ratio: 1/1; background: #fff; border-radius: 50%; will-change: offset-distance; animation: move 12s linear infinite; offset-path: circle(49.8% at 50% 50%); offset-distance: 0%; offset-rotate: 0deg;}
.intro .visual-sec .visual .icon{position: absolute; width: 70px; height: auto; aspect-ratio: 1/1;}
.intro .visual-sec .visual .icon.insta{top: 100px; left: 48px;}
.intro .visual-sec .visual .icon.tiktok{bottom: 64px; right: 84px;}
@keyframes move { 
    from { offset-distance: 100%;} 
    to { offset-distance: 0%;}
}
@keyframes visual-image {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.intro .visual-sec .text-wrap{position: absolute; z-index: 10; margin-bottom: 95px; text-align: center;}
.intro .visual-sec .text-wrap .label { display: inline-block; min-width: 205px; margin-bottom: 48px; padding: 10px 24px; border-radius: 30px; background: #fff; font-size: 24px; font-weight: 700; line-height: 1.125; letter-spacing: -0.02em; color: var(--point-color); }
.intro .visual-sec .text-wrap .tit{font-size: 46px; font-weight: 700; color: #fff;}
.intro .visual-sec .text-wrap .tit .img-wrap{display: block; width: 610px; margin: 0 auto 8px;}
.intro .visual-sec .text-wrap .tit .img-wrap img{width: 100%; margin: 0 auto;}
.intro .visual-sec .text-wrap .txt{margin-top: 30px; font-size: 22px; font-weight: 500; color: rgba(255, 255, 255, 0.8); line-height: 1.63;}
@media (min-aspect-ratio: 1860/980) {
    .intro .visual-sec .visual .image-wrap { aspect-ratio: auto; height: calc(100vh - 130px); min-height: auto; overflow: hidden; }
}
@media screen and (max-width: 1680px) and (max-height: 1020px)  {
    .intro .visual-sec .visual .image-wrap { aspect-ratio: auto; height: calc(100vh - 130px); min-height: auto; overflow: hidden; }
}
@media screen and (min-width: 1024px) and (max-height: 840px) {
    .intro .visual-sec .visual .image-wrap {min-height: auto;}
}
@media screen and (max-width: 1680px) {
    .intro .visual-sec .circle-wrap { bottom: 30px; width: 46.125em; font-size: clamp(14px, 0.952vw, 16px);}
    .intro .visual-sec .circle-wrap > .mover { width: 1.25em; font-size: clamp(14px, 0.952vw, 16px);}
    .intro .visual-sec .visual .icon{ width: 4.375em; font-size: clamp(14px, 0.952vw, 16px);}
    .intro .visual-sec .visual .icon.insta{top: 6.25em; left: 3em;}
    .intro .visual-sec .visual .icon.tiktok{bottom: 4em; right: 5.25em;}
    .intro .visual-sec .text-wrap{ margin-bottom: clamp(70px, 5.655vw, 95px);}
    .intro .visual-sec .text-wrap .label { min-width: 8.5417em; margin-bottom: 2em; padding: 0.4167em 1em; font-size: clamp(21px, 1.429vw, 24px); }
    .intro .visual-sec .text-wrap .tit{font-size: clamp(40px, 2.738vw, 46px);}
    .intro .visual-sec .text-wrap .tit .img-wrap{ width: 38.125em; margin: 0 auto 0.5em; font-size: clamp(14px, 0.952vw, 16px);}
    .intro .visual-sec .text-wrap .txt{ font-size: clamp(20px, 1.31vw, 22px); }
}
@media screen and (max-width: 1024px) and (max-height: 840px) {
    .intro .visual-sec .visual .image-wrap {min-height: auto;}
}
@media screen and (max-width: 1024px) {
    .intro .visual-sec .visual .image-wrap { aspect-ratio: 328/645; max-height: calc(100vh - 110px); min-height: auto; border-radius: clamp(24px, 3.32vw, 34px); }

    .intro .visual-sec .circle-wrap { bottom: 12%; width: 40.375em; font-size: clamp(13px, 1.563vw, 16px);}
    .intro .visual-sec .circle-wrap > .mover { width: 1.125em; font-size: clamp(13px, 1.563vw, 16px);}
    .intro .visual-sec .visual .icon{ width: 3.8125em; font-size: clamp(13px, 1.563vw, 16px);}
    .intro .visual-sec .visual .icon.insta{top: 5.4688em; left: 2.625em;}
    .intro .visual-sec .visual .icon.tiktok{bottom: 3.5em; right: 4.5938em;}
    .intro .visual-sec .text-wrap{ margin-bottom: 22%}
    .intro .visual-sec .text-wrap .label { min-width: 144px; margin-bottom: clamp(30px, 4.102vw, 42px); padding: clamp(8px, 0.879vw, 9px) clamp(20px, 2.051vw, 21px); font-size: clamp(16px, 2.051vw, 21px); }
    .intro .visual-sec .text-wrap .tit{font-size: clamp(33px, 3.906vw, 40px); line-height: 1.23;}
    .intro .visual-sec .text-wrap .tit .img-wrap{ width: clamp(480px, 52.148vw, 534px); margin: 0 auto 7px; }
    .intro .visual-sec .text-wrap .txt{ font-size: clamp(15px, 1.953vw, 20px); line-height: 1.46;}
}
@media screen and (max-width: 767px) {
    .intro .visual-sec .circle-wrap{display: none;}
    .intro .visual-sec .text-wrap{ top: clamp(65px, 20.86vw, 160px); margin-bottom: 0}
    .intro .visual-sec .text-wrap .tit{font-size: clamp(26px, 4.302vw, 33px);}
    .intro .visual-sec .text-wrap .tit .img-wrap{ width: clamp(204px, 39.113vw, 300px); margin: 0 auto 16px; }
}
@media screen and (max-width:540px) {
    .intro .visual-sec .text-wrap{ top: 65px; width: 100%; padding: 0 20px; word-break: keep-all;}
}
@media screen and (max-width:300px) {
    .intro .visual-sec .text-wrap{ top: 7%;}
}

/*===== important =====*/
.important{padding: calc(140px - 30px - 6px) 0 calc(140px - 30px);}
.important{--card-gap: 16px;}
.intro .important .inner .sec-title .title .br{display: none;}
.import-cont .import-list{position: relative;}
.import-cont .import-list .card{position: sticky; top: 100px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; gap: var(--card-gap); width: 100%; height: 540px; margin-bottom: 30px; padding: 0 70px 0 80px; border-radius: 40px; background-color: var(--bg-color); overflow: hidden;}
.import-cont .import-list .card:last-child{margin: 0;}
.import-cont .import-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;}
.import-cont .import-list .card.show-after::after{opacity: 1; transition: opacity 1s;}
.import-cont .import-list .card *{ letter-spacing: -0.025em;}
.import-cont .import-text{ margin-bottom: 4px;}
.import-cont .import-text .num { position: relative; display: inline-block; overflow: hidden; width: 90px; padding: 9px 14px; border: 1px solid var(--text-color-2); border-radius: 20px; font-size: 16px; font-weight: 700; line-height: 1.063; text-align: center; transition: color 0.3s}
.import-cont .import-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;}
.import-cont .import-text .num.active { color: #fff;}
.import-cont .import-text .num.active::before { width: calc(100% + 2px);}
.import-cont .import-text .card-tit {margin: 12px 0 32px; font-size: 32px; font-weight: 400; font-weight: 700; line-height: 1; word-break: keep-all;}
.import-cont .import-text .card-txt { font-size: 16px; line-height: 1.5; word-break: keep-all;}
.import-cont .import-text .card-txt strong{font-weight: 700;}
.import-cont .import-text .br{display: none;}
@media screen and (max-width: 1440px) {
    .important{padding: clamp(74px, 7.222vw, 104px) 0 calc(140px - 25px);}
}
@media screen and (max-width: 1260px) {
    .import-cont .import-list .card{height: clamp(500px, 42.857vw, 540px); padding: 0 clamp(57px, 5.556vw, 70px);}
    .import-cont .import-text .num { width: 5.625em; padding: 0.625em 0.875em; font-size: clamp(14px, 1.27vw, 16px);}
    .import-cont .import-text .card-tit {margin: 0.375em 0 1em; font-size: clamp(29px, 2.54vw, 32px);}
}
@media screen and (max-width: 1024px) {
    .important{padding: clamp(60px, 7.227vw, 74px) 0 calc(clamp(80px, 13.672vw, 140px) - 20px);}
    .import-cont .import-list .card{top: 70px; flex-flow: column wrap; align-items: flex-start; gap: clamp(20px, 3.418vw, 35px); height: auto; margin-bottom: clamp(20px, 2.93vw, 30px); padding: clamp(50px, 6.836vw, 70px) clamp(20px, 5.566vw, 57px) clamp(40px, 4.883vw, 50px); border-radius: clamp(20px, 3.906vw, 40px);}
    .import-cont .import-text{width: 100%; margin: 0; padding: 0 10px; }
    .import-cont .import-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; }
    .import-cont .import-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;}
    .import-cont .import-text .card-txt br{display: none;}
    .import-cont .import-vis{width: 100%;}
}
@media screen and (max-width: 767px) {
    .import-cont .import-text .num{line-height: 1.25;}
}
@media screen and (max-width: 430px) {
    .intro .important .inner .sec-title .title .br{display: block;}
}
@media screen and (max-width:359px) {
    .import-cont .import-list .card{padding: 50px clamp(16px, 5.571vw, 20px) 40px;}
    .import-cont .import-text{padding: 0; }
    .import-cont .import-text .card-txt{font-size: clamp(14px, 4.457vw, 16px);}
}
/* card 01 */
.import-cont .card01 .import-text{width: calc(100% - var(--card-gap) - 579px); padding-bottom: 120px;}
.import-cont .card01 .import-vis{width: 579px;}
.import-cont .card01 .import-desc{position: absolute; left: 80px; bottom: 124px; display: flex; flex-flow: row nowrap; align-items: baseline; gap: 14px; width: fit-content; padding: 15px 13px 15px 18px; border-radius: 4px; background: #fff; font-size: 12px; font-weight: 500; color: var(--text-color-8); line-height: 1.5;}
.import-cont .card01 .import-desc span {font-weight: 600; white-space: nowrap;}
@media screen and (max-width: 1260px) {
    .import-cont .card01 .import-text{width: calc(100% - var(--card-gap) - 45.873vw);  padding-bottom: clamp(90px, 9.524vw, 120px);}
    .import-cont .card01 .import-vis{width: 45.873vw;}
    .import-cont .card01 .import-text .card-txt br{ display: none;}
    .import-cont .card01 .import-text .card-txt .br{ display: block;}
    .import-cont .card01 .import-desc{left: clamp(57px, 5.556vw, 70px); bottom: clamp(100px, 9.841vw, 124px); gap: clamp(12px, 1.111vw, 14px); padding: clamp(13px, 1.19vw, 15px) clamp(11px, 1.032vw, 13px) clamp(13px, 1.19vw, 15px) clamp(15px, 1.429vw, 18px); }
}
@media screen and (max-width: 1024px) {
    .import-cont .card01 .import-text{width: 100%; padding-bottom: 0;}
    .import-cont .card01 .import-desc{position: static; order: 3; flex-flow: row wrap; gap: 0 clamp(6px, 1.172vw, 12px); width: 100%; padding: 16px 19px;}
    .import-cont .card01 .import-vis{width: 100%; max-width: 700px; margin: 0 auto;}
}
@media screen and (max-width:359px) {
    .import-cont .card01 .import-desc{padding: 14px 10px;}
}
/* card 02 */
.import-cont .card02 .import-vis .tit{margin-bottom: 18px; font-size: 16px; font-weight: 600; color: var(--text-color-5);}
.import-cont .card02 .platform-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 20px;}
.import-cont .card02 .platform-list .platform { display: flex; flex-direction: column; gap: 30px; width: 300px; padding: 28px 22px 28px 28px; background: #fff; border-radius: 12px;}
.import-cont .card02 .platform-list .platform .header { display: flex; align-items: center; gap: 6px;}
.import-cont .card02 .platform-list .platform .header .icon { width: 24px; height: auto; aspect-ratio: 1/1;}
.import-cont .card02 .platform-list .platform .header .name { font-size: 22px; font-weight: 700; line-height: 1; white-space: nowrap;}
.import-cont .card02 .platform-list .platform .stat-content { display: flex; flex-direction: column; align-items: flex-end; gap: 10px;}
.import-cont .card02 .platform-list .platform .stat-content .growth-rate { position: relative; font-size: 44px; font-weight: 700; color: #8055FF; line-height: 1;}
.import-cont .card02 .platform-list .platform .stat-content .growth-rate i{font-size: 28px; font-weight: 800;}
.import-cont .card02 .platform-list .platform .stat-content .growth-rate::before { content: ''; display: inline-block; width: 30px; height: auto; aspect-ratio: 30/38; margin-right: 4px; background-image: url('../images/front/sub/service/growth01.svg'); background-size: cover; vertical-align: top; transform: translateY(3px); }
.import-cont .card02 .platform-list .platform .details { display: flex; align-items: center; flex-flow: row nowrap; gap: 8px;}
.import-cont .card02 .platform-list .platform .details .stat-text { font-size: 16px; font-weight: 500; line-height: 1;}
.import-cont .card02 .platform-list .platform .details .badge { display: inline-block; min-width: 49px; padding: 3px 4px; border-radius: 2px; background-color: #8358FF; font-size: 14px; font-weight: 600; color: #fff; line-height: 1;}
.import-cont .card02 .platform-list .platform:nth-last-child(-n+2){ background: #E9EBF5;}
.import-cont .card02 .platform-list .platform:nth-last-child(-n+2) .stat-content .growth-rate {color: var(--point-color);}
.import-cont .card02 .platform-list .platform:nth-last-child(-n+2) .stat-content .growth-rate::before {background-image: url('../images/front/sub/service/growth02.svg');}
.import-cont .card02 .platform-list .platform:nth-last-child(-n+2) .details .badge {background-color: var(--point-color);}
@media screen and (max-width: 1260px) {
    .import-cont .card02 .platform-list { gap: clamp(10px, 0.952vw, 12px) clamp(16px, 1.587vw, 20px);}
    .import-cont .card02 .platform-list .platform { gap: clamp(16px, 2.381vw, 30px); width: clamp(260px, 23.81vw, 300px); padding: clamp(20px, 2.222vw, 28px) clamp(20px, 1.746vw, 22px) clamp(20px, 2.222vw, 28px) clamp(20px, 2.222vw, 28px); }
    .import-cont .card02 .platform-list .platform .header .icon { width: clamp(21px, 1.905vw, 24px);}
    .import-cont .card02 .platform-list .platform .header .name { font-size: clamp(20px, 1.746vw, 22px);}
    .import-cont .card02 .platform-list .platform .stat-content .growth-rate { font-size: clamp(38px, 3.492vw, 44px);}
    .import-cont .card02 .platform-list .platform .stat-content .growth-rate i{font-size: clamp(23px, 2.222vw, 28px); }
    .import-cont .card02 .platform-list .platform .stat-content .growth-rate::before {  width: clamp(25px, 2.381vw, 30px); }
}
@media screen and (max-width: 1070px) {
    .import-cont .card02 .import-text .card-txt br{ display: none;}
}
@media screen and (max-width: 1024px) {
    .import-cont .card02 .import-vis .tit{margin-bottom: clamp(10px, 1.758vw, 18px); font-size: clamp(14px, 1.563vw, 16px);}
    .import-cont .card02 .platform-list{gap: 10px clamp(16px, 1.953vw, 20px);}
    .import-cont .card02 .platform-list .platform {gap: clamp(10px, 1.563vw, 16px); width: 100%;}
    .import-cont .card02 .platform-list .platform .header { gap: clamp(4px, 0.586vw, 6px);}
    .import-cont .card02 .platform-list .platform .header .icon { width: clamp(16px, 2.051vw, 21px);}
    .import-cont .card02 .platform-list .platform .header .name { font-size: clamp(16px, 1.953vw, 20px);}
    .import-cont .card02 .platform-list .platform .stat-content .growth-rate { font-size: clamp(30px, 3.711vw, 38px);}
    .import-cont .card02 .platform-list .platform .stat-content .growth-rate i{font-size: clamp(16px, 2.246vw, 23px); }
    .import-cont .card02 .platform-list .platform .stat-content .growth-rate::before {  width: clamp(21px, 2.441vw, 25px); }
}
@media screen and (max-width: 560px) {
    .import-cont .card02 .platform-list{ grid-template-columns: repeat(1, 1fr);}
    .import-cont .card02 .platform-list .platform{padding: 20px clamp(20px, 5.172vw, 30px);}
}
/* card 03 */
.import-cont .card03 .import-text .desc{display: flex; flex-flow: column wrap; gap: 8px; width: 291px; margin-top: 40px;}
.import-cont .card03 .import-text .desc li{ display: flex; flex-flow: row nowrap; align-items: center; gap: 16px; width: 100%; padding: 17px 20px 17px 28px; border-radius: 4px; background: #fff; font-size: 16px; font-weight: 500; color: var(--text-color-5); line-height: 1.3125;}
.import-cont .card03 .import-text .desc li img{width: 50px; height: auto; aspect-ratio: 1/1;}
.import-cont .card03 .chart-list {display: flex; flex-flow: row nowrap; align-items: stretch; gap: 30px; margin-bottom: 4px;}
.import-cont .card03 .chart-list .chart .tit{margin-bottom: 18px; font-size: 16px; font-weight: 600; color: var(--text-color-5);}
.import-cont .card03 .chart-list .chart01{width: 357px;}
.import-cont .card03 .chart-list .chart02{width: 267px;}
.import-cont .card03 .chart-list .chart02 .bubble-img{display: none;}
.import-cont .card03 .chart-list .chart02 .bubble-chart { position: relative; width: 100%; height: auto; aspect-ratio: 267/370; padding: 30px; border-radius: 12px; background: #E9EBF5; }
.import-cont .card03 .chart-list .chart02 .bubble { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; height: auto; aspect-ratio: 1/1; padding-top: 2px; border-radius: 50%; font-size: 16px; color: #fff; line-height: 1; transition: transform 0.3s ease;}
@media (hover: hover) {
    .import-cont .card03 .chart-list .chart02 .bubble:hover { transform: scale(1.05);}
}
.import-cont .card03 .chart-list .chart02 .bubble .name { margin-bottom: 4px; font-weight: 600;}
.import-cont .card03 .chart-list .chart02 .bubble.tiktok { top: 58px; left: 30px; z-index: 4; width: 126px; background: #4C6EF7;}
.import-cont .card03 .chart-list .chart02 .bubble.instagram { top: 135px; right: 29px; z-index: 3; width: 102px; background: #9672FF;}
.import-cont .card03 .chart-list .chart02 .bubble.facebook { bottom: 86px; left: 48px; z-index: 2; width: 100px; background: #AFB5D6; }
.import-cont .card03 .chart-list .chart02 .bubble.youtube { bottom: 57px; right: 52px; z-index: 1; width: 76px; background: #fff; color: #BBBBC4; }
@media screen and (max-width: 1260px) {
    .import-cont .card03 .import-text .card-txt strong br{display: none;}
    .import-cont .card03 .import-text .desc{ width: clamp(280px, 23.095vw, 291px);}
    .import-cont .card03 .import-text .desc li{ padding: 17px 20px 17px clamp(18px, 2.222vw, 28px); font-size: clamp(14px, 1.27vw, 16px); }
    .import-cont .card03 .chart-list{gap: clamp(20px,  2.381vw, 30px);}
    .import-cont .card03 .chart-list .chart01{width: clamp(290px, 28.333vw, 357px);}
    .import-cont .card03 .chart-list .chart02{width: clamp(220px, 21.19vw, 267px);}
    .import-cont .card03 .chart-list .chart02 .bubble-chart { padding: clamp(20px, 2.381vw, 30px);}
    .import-cont .card03 .chart-list .chart02 .bubble { font-size: clamp(13px, 1.27vw, 16px);}
    .import-cont .card03 .chart-list .chart02 .bubble .name,
    .import-cont .card03 .chart-list .chart02 .bubble .time{ font-size: clamp(14px, 1.27vw, 16px);}
    .import-cont .card03 .chart-list .chart02 .bubble.tiktok { top: 3.625em; left: 1.875em; width: 7.875em; }
    .import-cont .card03 .chart-list .chart02 .bubble.instagram { top: 8.4375em; right: 1.8125em; width: 6.375em; }
    .import-cont .card03 .chart-list .chart02 .bubble.facebook { bottom: 5.375em; left: 3em; width: 6.25em; }
    .import-cont .card03 .chart-list .chart02 .bubble.youtube { bottom: 3.5625em; right: 3.25em; width: 4.75em; }
}
@media screen and (max-width: 1024px) {
    .import-cont .card03 .import-text .desc{flex-flow: row nowrap; width: calc(100% + 20px); max-width: 600px; margin-top: clamp(30px, 3.906vw, 40px); margin-left: -10px;}
    .import-cont .card03 .chart-list{justify-content: space-around; gap: clamp(20px, 2.93vw, 30px); margin-bottom: 0;}
    .import-cont .card03 .chart-list .chart .tit{margin-bottom: clamp(10px, 1.758vw, 18px); font-size: clamp(14px, 1.563vw, 16px);}
    .import-cont .card03 .chart-list .chart01{width: 53%; max-width: 420px;}
    .import-cont .card03 .chart-list .chart02{width: 43%; max-width: 310px;}
    .import-cont .card03 .chart-list .chart02 .bubble { font-size: 16px;}
    .import-cont .card03 .chart-list .chart02 .bubble .name,
    .import-cont .card03 .chart-list .chart02 .bubble .time{ font-size: clamp(14px, 1.758vw, 18px);}
    .import-cont .card03 .chart-list .chart02 .bubble.tiktok { top: 4.1875em; left: 2.1875em; width: 9.125em; min-width: 89px;}
    .import-cont .card03 .chart-list .chart02 .bubble.instagram { top: 9.8125em; right: 2.125em;width: 7.375em; min-width: 74px; }
    .import-cont .card03 .chart-list .chart02 .bubble.facebook { bottom: 6.25em; left: 3.5em; width: 7.25em; min-width: 73px; }
    .import-cont .card03 .chart-list .chart02 .bubble.youtube { bottom: 4.125em; right: 3.75em; width: 5.5625em; min-width: 56px; }
}
@media screen and (max-width:869px) {
    .import-cont .card03 .chart-list .chart02 .bubble-chart{aspect-ratio: 310/400;}
    .import-cont .card03 .chart-list .chart02 .bubble { font-size: clamp(10px, 1.841vw, 16px);}
    .import-cont .card03 .chart-list .chart02 .bubble.tiktok { top: 3.25em;}
    .import-cont .card03 .chart-list .chart02 .bubble.instagram { top: 8.75em;}
    .import-cont .card03 .chart-list .chart02 .bubble.facebook { bottom: 5.375em;}
    .import-cont .card03 .chart-list .chart02 .bubble.youtube { bottom: 3.375em; }
}
@media screen and (max-width: 767px) {
    .import-cont .card03 .chart-list{justify-content: space-between; gap: 20px;}
    .import-cont .card03 .chart-list .chart02 .bubble .name,
    .import-cont .card03 .chart-list .chart02 .bubble .time{ font-size: clamp(12px, 1.825vw, 14px);}
    .import-cont .card03 .chart-list .chart02 .bubble .name { margin-bottom: 2px; }
}
@media screen and (max-width: 580px) {
    .import-cont .card03 .import-text .desc{flex-flow: column wrap;}
}
@media screen and (max-width: 560px) {
    .import-cont .card03 .chart-list{flex-flow: column wrap;}
    .import-cont .card03 .chart-list .chart01{width: 100%; max-width: none;}
    .import-cont .card03 .chart-list .chart02{width: 100%; max-width: none;}
    .import-cont .card03 .chart-list .chart02 .bubble-chart{min-height: 195px; aspect-ratio: 288/195;}
    .import-cont .card03 .chart-list .chart02 .bubble { font-size: 16px;}
    .import-cont .card03 .chart-list .chart02 .bubble .name,
    .import-cont .card03 .chart-list .chart02 .bubble .time{ font-size: clamp(12px, 3.214vw, 18px);}
    .import-cont .card03 .chart-list .chart02 .bubble.tiktok { top: 10.17%; left: 20.438%; width: clamp(89px, 25.714vw, 144px); }
    .import-cont .card03 .chart-list .chart02 .bubble.instagram { top: 23.195%; right: 23.45%; width: clamp(74px, 21.429vw, 120px); }
    .import-cont .card03 .chart-list .chart02 .bubble.facebook { bottom: 10.17%; left: 34.42%; width: clamp(73px, 21.071vw, 118px); }
    .import-cont .card03 .chart-list .chart02 .bubble.youtube { bottom: 10.04%; right: 20.438%; width: clamp(56px, 16.071vw, 90px); }
}
@media screen and (max-width: 360px) {
    .import-cont .card03 .chart-list .chart02 .bubble-chart{display: none;}
    .import-cont .card03 .chart-list .chart02 .bubble-img{display: flex; justify-content: center; align-items: center; width: 100%; min-height: 195px; aspect-ratio: 288/195; padding: 20px; border-radius: 12px; background: #E9EBF5; }
    .import-cont .card03 .chart-list .chart02 .bubble-img img{width: 68%; min-width: 170px;}
}

/*===== difficulty =====*/
.difficulty{padding: 0;}
.difficulty .difficulty-wrap { position: relative; max-width: none; padding: 134px 0 200px; border-radius: 0; transition: all 0.3s ease; background: linear-gradient(to bottom, #2B2481, #7C97FF);  background-size: 100% 100%; background-position: 0% 0%;}
.intro .difficulty .sec-title, .intro .difficulty .sec-title .text{color: #fff;}
.intro .difficulty .sec-title .br, .intro .difficulty .sec-title .br2{display: none;}
.difficulty .tab-content{ width: 100%; height: auto; min-height: 680px; aspect-ratio: 1200 / 680; border-radius: 48px; background-color: #fff; --padding-left: 70px;}
.difficulty .tab-content .inner{padding: 0;}
.difficulty .tab-content .header{padding: 44px 72px 52px;}
.difficulty .tab-content .header .label{display: flex; flex-flow: row nowrap; align-items: center; gap: 18px; font-size: 16px; font-weight: 700; line-height: 1; color: var(--point-color); white-space: nowrap;}
.difficulty .tab-content .header .label::after{content: ''; display: inline-block; width: 100%; height: 1px; background-color: var(--point-color);}
.difficulty .tab-content .text-wrap{padding: 0 var(--padding-left);}
.difficulty .tab-content .text-wrap .tit {margin-bottom: 26px; font-size: 32px; font-weight: 700; line-height: 1.1875; word-break: keep-all;}
.difficulty .tab-content .text-wrap .tit strong{font-weight: inherit; color: var(--point-color);}
.difficulty .tab-content .text-wrap .txt{font-size: 16px; color: var(--text-color-5); line-height: 1.625;}
.difficulty .tab-content .text-wrap .txt strong{font-weight: 700;}
@media screen and (max-width: 1440px) {
    .difficulty .tab-content{ --padding-left: clamp(50px, 4.861vw, 70px);}
    .difficulty .tab-content .header{padding: 44px clamp(50px, 5vw, 72px) 52px;}
}
@media screen and (max-width: 1024px) {
    .intro .difficulty .sec-title{ margin-bottom: clamp(28px, 5.273vw, 54px);}
    .intro .difficulty .sec-title .title { font-size: clamp(24px, 2.930vw, 30px); line-height: 1.416; }
    .intro .difficulty .sec-title .text { margin-top: clamp(24px, 3.906vw, 40px); }
    .difficulty .difficulty-wrap{ padding: clamp(78px, 13.086vw, 134px) 0 clamp(180px, 19.531vw, 200px); }
    .intro .difficulty-content > .inner{padding: 0 clamp(20px, 2.93vw, 30px);}
    .difficulty .tab-content{ --padding-left: clamp(20px, 4.883vw, 50px); border-radius: clamp(20px, 4.688vw, 48px);}
    .difficulty .tab-content .header{padding: 46px clamp(20px, 4.883vw, 50px) clamp(42px, 5.078vw, 52px);}
    .difficulty .tab-content .header .label{gap: clamp(6px, 1.758vw, 18px); font-size: clamp(12px, 1.563vw, 16px); }
    .difficulty .tab-content .text-wrap .tit {margin-bottom: clamp(17px, 2.539vw, 26px); font-size: clamp(20px, 3.125vw, 32px); line-height: 1.2;}
}
@media screen and (max-width: 680px) {
    .intro .difficulty .sec-title .text .br{display: block;}
}
@media screen and (max-width: 640px) {
    .difficulty .tab-content{aspect-ratio: auto;}
}
@media screen and (max-width: 480px) {
    .intro .difficulty .sec-title .title .br{display: block;}
}
@media screen and (max-width: 440px) {
    .intro .difficulty .sec-title .text br{display: none;}
    .intro .difficulty .sec-title .text .br2{display: block;}
}
@media screen and (max-width: 359px) {
    .intro .difficulty .sec-title .text .br2{display: none;}
}
/* pain01 */
.difficulty .pain01{overflow: hidden;}
.difficulty .pain01 .inner{display: flex; flex-direction: column; height: 100%;}
.difficulty .pain01 .pain-cont { margin-top: auto; padding: 0 var(--padding-left); }
.difficulty .pain01 .pain-cont .search-list { display: flex; flex-flow: row wrap; justify-content: center; gap: 10px; margin-bottom: 22px;}
.difficulty .pain01 .pain-cont .search-list li { width: 340px; background: var(--bg-color); padding: 22px 6px; border-radius: 14px; font-size: 16px; font-weight: 600; line-height: 1.875; color: var(--point-color); text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease;}
@media (hover: hover) {
    .difficulty .pain01 .pain-cont .search-list li:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(91, 111, 216, 0.15);}
}
.difficulty .pain01 .pain-cont .connector { position: relative; width: 1px; height: 47px; margin: 0 auto calc(30px + 7px); background: #7D8DE3; }
.difficulty .pain01 .pain-cont .connector::after { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 7px; height: auto; aspect-ratio: 1/1; border-radius: 50%; background: #7D8DE3; box-shadow: 0 0 8px #96ABFF;}
.difficulty .pain01 .pain-cont .brand-logo { position: relative; width: calc(100% + var(--padding-left) + var(--padding-left)); max-width: 782px; margin: 0 auto;}
.difficulty .pain01 .pain-cont .brand-logo .logo { position: absolute; top: 0; left: 0; right: 0; width: 156px; margin: 44px auto;}
.difficulty .pain01 .pain-cont .info { position: absolute; bottom: -68px; left: 0; right: 0; display: flex; flex-flow: row nowrap; align-items: flex-start; justify-content: center; gap: 30px; font-size: 12px; line-height: 1.5; color: #fff; opacity: 0.6; word-break: keep-all;}
.difficulty .pain01 .pain-cont .label { font-weight: 600; white-space: nowrap;}
@media screen and (max-width: 1440px) {
    .difficulty .pain01 .pain-cont .search-list li { width: clamp(248px, 25.154vw, 340px);}
}
@media screen and (max-width: 1280px) {
    .difficulty .pain01 .pain-cont .search-list li { padding: clamp(16px, 1.719vw, 22px) 6px; font-size: clamp(14px, 1.25vw, 16px); line-height: 2;}
}
@media screen and (max-width: 1024px) {
    .difficulty .pain01 .pain-cont .search-list { margin-bottom: clamp(10px, 2.148vw, 22px);}
    .difficulty .pain01 .pain-cont .connector { margin: 0 auto calc(clamp(20px, 2.93vw, 30px) + 7px); }
    .difficulty .pain01 .pain-cont .info{gap: clamp(12px, 2.93vw, 30px);}
}
@media screen and (max-width: 965px) {
    .difficulty .pain01 .pain-cont .brand-logo{ max-width: none; margin-left: calc(var(--padding-left) * -1);}
}
@media screen and (max-width: 640px) {
    .difficulty .pain01 .pain-cont {padding-top: 30px;}
    .difficulty .pain01 .pain-cont .search-list{flex-flow: column wrap; align-items: center;}
    .difficulty .pain01 .pain-cont .search-list li { width: 100%; max-width: 400px; font-size: clamp(13px, 2.188vw, 14px); }
    .difficulty .pain01 .pain-cont .brand-logo .logo{width: clamp(128px, 24.375vw, 156px); margin: clamp(30px, 6.567vw, 44px) auto;}
}
@media screen and (max-width: 622px) {
    .difficulty .pain01 .pain-cont .info{bottom: -84px;}
}
@media screen and (max-width: 608px) {
    .difficulty .pain01 .pain-cont .info{bottom: -104px;}
}
@media screen and (max-width: 462px) {
    .difficulty .pain01 .pain-cont .info{bottom: -138px; flex-flow: column wrap;}
}
@media screen and (max-width: 385px) {
    .difficulty .pain01 .pain-cont .info{bottom: -155px;}
}
@media screen and (max-width: 430px) {
    .difficulty .pain01 .text-wrap .txt br{display: none;}
}
@media screen and (max-width: 315px) {
    .difficulty .pain01 .pain-cont .info{ width: calc(100% + 10px); margin-left: -5px;}
}
@media screen and (max-width: 305px) {
    .difficulty .pain01 .pain-cont .info{bottom: -165px;}
}
/* pain02 */
.difficulty .pain02 .inner{display: flex; flex-direction: column; height: 100%;}
.difficulty .pain02 .pain-cont{display: flex; flex-flow: column wrap; align-content: flex-end; align-items: stretch; gap: 20px; margin-top: auto; padding: 0 var(--padding-left) 50px;}
.difficulty .pain02 .pain-cont > div {width: 700px;}
.difficulty .pain02 .pain-cont > div > .tit{margin-bottom: 12px; font-size: 14px; font-weight: 600; color: var(--text-color-8); line-height: 1;}
.difficulty .pain02 .pain-cont > div ul { border-radius: 15px;}
.difficulty .pain02 .pain-cont > div ul li:not(:last-child)::after { content: ''; position: absolute; right: -20px; top: 50%; z-index: 1; transform: translateY(-50%); display: inline-block; width: 38px; height: auto; aspect-ratio: 37/12.75; background-image: url('../images/front/sub/service/pain02-arrow.svg'); background-size: 100% auto;}
.difficulty .pain02 .pain-cont .time-require ul {display: flex; flex-flow: row nowrap; align-items: stretch; background-color: var(--bg-color);}
.difficulty .pain02 .pain-cont .time-require li { position: relative; display: flex; flex-flow: column wrap; justify-content: center; align-items: center; text-align: center;}
.difficulty .pain02 .pain-cont .time-require li:nth-child(2n-1){flex: 1;}
.difficulty .pain02 .pain-cont .time-require li .icon { width: 32px; height: auto; aspect-ratio: 1/1; }
.difficulty .pain02 .pain-cont .time-require li .txt { margin-top: 8px; font-size: 16px; font-weight: 600; line-height: 1.25;}
.difficulty .pain02 .pain-cont .time-require li:first-child{border-right: 2px solid #fff;}
.difficulty .pain02 .pain-cont .time-require li:last-child{border-left: 2px solid #fff;}
.difficulty .pain02 .pain-cont .time-require li:nth-child(2){flex: 3; border-right: 2px solid #fff; border-left: 2px solid #fff;}
.difficulty .pain02 .pain-cont .time-require li .formula {width: 100%; padding: 24px 16px 12px; }
.difficulty .pain02 .pain-cont .time-require li .formula .text { font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--point-color); word-break: keep-all;}
.difficulty .pain02 .pain-cont .time-require li .formula .text i{margin: 0 3px; font-size: 14px; font-weight: 500; color: var(--text-color-8);}
.difficulty .pain02 .pain-cont .time-require li .formula .text .br{display: none;}
.difficulty .pain02 .pain-cont .time-require li .formula .result {display: inline-block; margin: 6px 0 16px; padding: 6px 7px; border-radius: 3px; background: var(--point-color); font-size: 22px; font-weight: 700; color: #fff; line-height: 1;}
.difficulty .pain02 .pain-cont .time-require li .formula .note { font-size: 12px; font-weight: 500; color: var(--text-color-8); word-break: keep-all;}
.difficulty .pain02 .pain-cont .campaign ul {display: flex; flex-flow: row nowrap; align-items: stretch; background-color: var(--bg-color);}
.difficulty .pain02 .pain-cont .campaign li{ position: relative; display: flex; flex-flow: column wrap; flex: 1; height: 154px; padding: 18px 20px 20px;}
.difficulty .pain02 .pain-cont .campaign li:first-child{border-right: 2px solid #fff;}
.difficulty .pain02 .pain-cont .campaign li:last-child{border-left: 2px solid #fff;}
.difficulty .pain02 .pain-cont .campaign li:nth-child(2),
.difficulty .pain02 .pain-cont .campaign li:nth-child(3),
.difficulty .pain02 .pain-cont .campaign li:nth-child(4){ border-right: 2px solid #fff; border-left: 2px solid #fff; }
.difficulty .pain02 .pain-cont .campaign li .step { font-size: 12px; font-weight: 700; color: var(--point-color); line-height: 1;}
.difficulty .pain02 .pain-cont .campaign li .name {margin-top: 5px; font-size: 16px; font-weight: 600;white-space: nowrap;}
.difficulty .pain02 .pain-cont .campaign li .icon{width: 50px; height: auto; aspect-ratio: 1/1; margin-top: auto; margin-left: auto;}
@media screen and (max-width: 1024px) {
    .difficulty .pain02 .pain-cont{ padding: 0 var(--padding-left) clamp(30px, 4.883vw, 50px);}
    .difficulty .pain02 .pain-cont > div{width: 100%;}
    .difficulty .pain02 .pain-cont > div ul{border-radius: clamp(13px, 1.465vw, 15px);}
    .difficulty .pain02 .pain-cont > div ul li:not(:last-child)::after { right: -1.25em; width: 2.375em; font-size: clamp(12px, 1.563vw, 16px);}
    .difficulty .pain02 .pain-cont .time-require li .txt{font-size: clamp(14px, 1.563vw, 16px);}
    .difficulty .pain02 .pain-cont .time-require li .formula{padding: 24px clamp(8px, 1.563vw, 16px) 12px;}
    .difficulty .pain02 .pain-cont .time-require li .formula .text{font-size: clamp(14px, 1.563vw, 16px);}
    .difficulty .pain02 .pain-cont .time-require li .formula .result{ padding: 0.2727em 0.3182em; font-size: clamp(18px, 2.148vw, 22px); }
    .difficulty .pain02 .pain-cont .campaign li{ height: clamp(130px, 15.039vw, 154px); padding: 18px clamp(10px, 1.953vw, 20px) clamp(10px, 1.953vw, 20px);}
    .difficulty .pain02 .pain-cont .campaign li .name{font-size: clamp(14px, 1.563vw, 16px);}
    .difficulty .pain02 .pain-cont .campaign li .icon{width: clamp(40px, 4.883vw, 50px);}
}
@media screen and (max-width: 640px) {
    .difficulty .pain02 .pain-cont{gap: 30px; padding-top: 38px;}
    .difficulty .pain02 .pain-cont > div ul li:not(:last-child)::after{width: 24px;}
    .difficulty .pain02 .pain-cont .time-require ul li:not(:last-child)::after{top: initial; left: 0; right: 0; bottom: -5px; margin: 0 auto; transform: rotate(90deg);}
    .difficulty .pain02 .pain-cont .time-require ul{flex-flow: column wrap;}
    .difficulty .pain02 .pain-cont .time-require li{flex-flow: row nowrap; gap: 10px; padding: 20px 16px;}
    .difficulty .pain02 .pain-cont .time-require li:first-child{border: none;}
    .difficulty .pain02 .pain-cont .time-require li:nth-child(2){flex: none; padding: 24px 16px 16px; border: none; border-top: 2px solid #fff; border-bottom: 2px solid #fff;}
    .difficulty .pain02 .pain-cont .time-require li:nth-child(2n-1){flex: none;}
    .difficulty .pain02 .pain-cont .time-require li .txt{margin: 0; font-size: 16px;}
    .difficulty .pain02 .pain-cont .time-require li .txt br{display: none; word-break: keep-all;}
    .difficulty .pain02 .pain-cont .time-require li .formula{padding: 0;}
    .difficulty .pain02 .pain-cont .time-require li .formula .result{margin: 12px auto 20px; padding: 4px 7px; line-height: 1.167;}
    .difficulty .pain02 .pain-cont .time-require li .formula .note br{display: none;}
    .difficulty .pain02 .pain-cont .campaign ul{flex-flow: row wrap;}
    .difficulty .pain02 .pain-cont .campaign ul li:nth-child(2n)::after{display: none;}
    .difficulty .pain02 .pain-cont .campaign li{flex: auto; width: 50%; padding: 20px 12px 10px 16px; border: none;}
    .difficulty .pain02 .pain-cont .campaign li:nth-child(2), 
    .difficulty .pain02 .pain-cont .campaign li:nth-child(3), 
    .difficulty .pain02 .pain-cont .campaign li:nth-child(4){border: none;}
    .difficulty .pain02 .pain-cont .campaign li:nth-child(-n+4){border-bottom: 2px solid #fff;}
    .difficulty .pain02 .pain-cont .campaign li:nth-child(3){border-right: 2px solid #fff;}
    .difficulty .pain02 .pain-cont .campaign li:last-child{justify-content: center; height: 88px; padding: 20px 12px 20px 16px; border: none;}
    .difficulty .pain02 .pain-cont .campaign li:nth-child(2n){padding-left: 10px;}
    .difficulty .pain02 .pain-cont .campaign li .name{margin-top: 4px; font-size: 16px;}
    .difficulty .pain02 .pain-cont .campaign li .icon{width: 50px;}
    .difficulty .pain02 .pain-cont .campaign li:last-child .icon{margin-top: 0;}
}
@media screen and (max-width: 570px) {
    .difficulty .pain02 .text-wrap .txt br{display: none;}
}
@media screen and (max-width: 430px) {
    .difficulty .pain02 .pain-cont .time-require li .formula .text .br{display: block;}
}
/* pain03 */
.difficulty .pain03 .inner{display: flex; flex-direction: column; height: 100%;}
.difficulty .pain03 .pain-cont{margin-top: auto; padding: 0 62px 60px var(--padding-left);}
.difficulty .pain03 .management-list { display: flex; flex-flow: row nowrap; justify-content: space-between;}
.difficulty .pain03 .management-list li { display: flex; flex-flow: column wrap; width: 255px; height: auto; min-height: 280px; aspect-ratio: 255/280; padding: 30px; background: var(--bg-color); border-radius: 15px;}
.difficulty .pain03 .management-list li .icon { width: 60px; height: auto; aspect-ratio: 1/1;}
.difficulty .pain03 .management-list li .txt-wrap{ width: 100%; margin-top: auto;}
.difficulty .pain03 .management-list li .tit {display: inline-block; margin: 0 0 14px; font-size: 20px; font-weight: 600; line-height: 1.3; white-space: nowrap;}
.difficulty .pain03 .management-list li .desc { font-size: 16px; color: var(--text-color-5); line-height: 1.375; word-break: keep-all;}
@media screen and (max-width: 1440px) {
    .difficulty .pain03 .pain-cont{padding: 0 clamp(50px, 4.306vw, 62px) 60px var(--padding-left);}
    .difficulty .pain03 .management-list li{width: calc(100% / 4 - 10px); padding: clamp(20px, 2.083vw, 30px);}
}
@media screen and (max-width: 1260px) {
    .difficulty .pain03 .management-list{flex-flow: row wrap; gap: 10px;}
    .difficulty .pain03 .management-list li{flex-flow: row nowrap; align-items: center; gap: clamp(20px, 2.381vw, 30px); width: calc(50% - 5px); min-height: 138px; aspect-ratio: 508 / 138;}
    .difficulty .pain03 .management-list li .txt-wrap{margin-top: 0;}
    .difficulty .pain03 .management-list li .tit{line-height: 1;}
    .difficulty .pain03 .management-list li .desc br{display: none;}
}
@media screen and (max-width: 1024px) {
    .difficulty .pain03 .pain-cont{padding: 0 var(--padding-left) clamp(46px, 5.859vw, 60px);}
    .difficulty .pain03 .management-list li { border-radius: clamp(10px, 1.465vw, 15px);}
    .difficulty .pain03 .management-list li .icon{width: clamp(42px, 5.859vw, 60px); min-width: clamp(42px, 5.859vw, 60px);}
    .difficulty .pain03 .management-list li .tit{ margin: 0 0 clamp(10px, 1.367vw, 14px); font-size: clamp(18px, 1.953vw, 20px);}
    .difficulty .pain03 .management-list li .desc{font-size: clamp(15px, 1.563vw, 16px); line-height: 1.46;}
}
@media screen and (max-width: 767px) {
    .difficulty .pain03 .management-list li{flex-flow: column; min-height: auto; aspect-ratio: auto;}
    .difficulty .pain03 .management-list li .icon{margin-right: auto;}
}
@media screen and (max-width: 686px) {
    .difficulty .pain03 .text-wrap .txt br{display: none;}
}
@media screen and (max-width: 640px) {
    .difficulty .pain03 .pain-cont{padding-top: 40px;}
    .difficulty .pain03 .management-list li{width: 100%;}
}
@media screen and (max-width: 359px) {
    .difficulty .pain03 .management-list li {padding: clamp(10px, 5.571vw, 20px);}
    .difficulty .pain03 .management-list li .tit{white-space: inherit; word-break: keep-all; line-height: 1.25;}
}
/* pain04 */
.difficulty .pain04 .inner{display: flex; flex-direction: column; height: 100%;}
.difficulty .pain04 .pain-cont{display: flex; flex-flow: column wrap; align-content: flex-end; margin-top: auto; padding: 0 62px 60px var(--padding-left);}
.difficulty .pain04 .analysis-list { display: flex; flex-flow: row wrap; gap: 12px; width: 692px;}
.difficulty .pain04 .analysis-list li { width: calc(50% - 6px); height: auto; aspect-ratio: 340/180; padding: 30px 30px 16px; background: var(--bg-color); border-radius: 15px;}
.difficulty .pain04 .analysis-list li:nth-child(n+2):nth-child(-n+3){background-color: #EFEBFF;}
.difficulty .pain04 .analysis-list li .icon { width: 28px; height: auto; aspect-ratio: 1/1; background-image: url('../images/front/sub/service/pain04.svg'); background-size: cover;}
.difficulty .pain04 .analysis-list li .tit {display: inline-block; margin: 15px 0 9px; font-size: 20px; font-weight: 600; line-height: 1.3; word-break: keep-all;}
.difficulty .pain04 .analysis-list li .desc { font-size: 16px; color: var(--text-color-5); line-height: 1.375;}
@media screen and (max-width: 1440px) {
    .difficulty .pain04 .pain-cont{ padding: 0 clamp(50px, 4.306vw, 62px) 60px var(--padding-left);}
}
@media screen and (max-width: 1024px) {
    .difficulty .pain04 .pain-cont{ padding: 0 var(--padding-left) clamp(56px, 5.859vw, 60px);}
    .difficulty .pain04 .analysis-list { gap: clamp(10px, 1.172vw, 12px); width: 100%; max-width: 692px;}
    .difficulty .pain04 .analysis-list li { width: calc(50% - calc(clamp(10px, 1.172vw, 12px) / 2)); padding: clamp(20px, 2.93vw, 30px) clamp(20px, 2.93vw, 30px) 16px; border-radius: clamp(10px, 1.465vw, 15px);}
    .difficulty .pain04 .analysis-list li .tit { margin: clamp(12px, 1.465vw, 15px) 0 9px; font-size: clamp(18px, 1.953vw, 20px);}
    .difficulty .pain04 .analysis-list li .desc { font-size: clamp(15px, 1.563vw, 16px); line-height: 1.46;}
}
@media screen and (max-width: 740px) {
    .difficulty .pain04 .analysis-list li:nth-child(3) .desc br{display: none;}
}
@media screen and (max-width: 640px) {
    .difficulty .pain04 .pain-cont{padding-top: 90px;}
    .difficulty .pain04 .analysis-list li{width: 100%; aspect-ratio: auto;}
    .difficulty .pain04 .analysis-list li .desc br{display: none;}
}
@media screen and (max-width: 520px) {
    .difficulty .pain04 .text-wrap .txt br{display: none;}
}
@media screen and (max-width: 500px) {
    .difficulty .pain04 .analysis-list li .desc br{display: block;}
    .difficulty .pain04 .analysis-list li:nth-child(3) .desc br{display: block;}
}
@media screen and (max-width: 400px) {
    .difficulty .pain04 .analysis-list li:nth-child(3) .desc br{display: none;}
}
@media screen and (max-width: 359px) {
    .difficulty .pain04 .analysis-list li .desc br{display: none;}
}

/*===== solve =====*/
.solve{margin-top: 20px; padding: 0;}
.solve .solve-wrap { position: relative; max-height: 560px; padding: 208px var(--inner-padding-rl) 114px; border-radius: 0; transition: all 0.3s ease; background: url('../images/front/sub/service/solve-bg.jpg') center center; background-size: cover; color: #fff; overflow: hidden;}
.solve .solve-wrap::after { content: ''; display: block; position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; height: 29.55%; border-radius: 0 0 40px 40px; background: linear-gradient(to bottom, transparent, #000);}
.solve .visual { position: absolute; top: 90px; left: 0; right: 0; z-index: 1; width: 100%; max-width: 1060px; margin: 0 auto;}
.solve .visual img { width: 100%; height: auto; animation: rotateStep 8s infinite;}
@keyframes rotateStep {
    0% { transform: rotate(0deg);}
    12.5% { transform: rotate(0deg);}
    25% { transform: rotate(90deg);}
    37.5% { transform: rotate(90deg);}
    50% { transform: rotate(180deg);}
    62.5% { transform: rotate(180deg);}
    75% { transform: rotate(270deg);}
    87.5% { transform: rotate(270deg);}
    100% { transform: rotate(360deg);}
}
.solve .text-wrap { position: relative; z-index: 3; text-align: center;}
.solve .text-wrap .tit { font-size: 36px; font-weight: 700; margin-bottom: 30px; line-height: 1; letter-spacing: 0;}
.solve .text-wrap .txt { margin-bottom: 67px; font-size: 24px; font-weight: 500; line-height: 1.5; letter-spacing: 0; word-break: keep-all;}
.solve .text-wrap .logo { width: 245px; height: auto; margin: 0 auto;}
@media screen and (max-width: 1024px) {
    .solve{margin-top: 40px;}
    .solve .solve-wrap {min-height: 380px; padding: clamp(164px, 20.313vw, 208px) var(--inner-padding-rl) clamp(50px, 11.133vw, 114px);}
    .solve .solve-wrap::after { border-radius: 0 0 20px 20px;}
    .solve .visual { top: clamp(75px, 8.789vw, 90px); }
    .solve .text-wrap .tit { font-size: clamp(24px, 3.516vw, 36px); margin-bottom: clamp(20px, 2.93vw, 30px); }
    .solve .text-wrap .txt { margin-bottom: clamp(28px, 6.543vw, 67px); font-size: clamp(18px, 2.344vw, 24px); line-height: 1.44;}
    .solve .text-wrap .logo { width: clamp(120px, 23.926vw, 245px);}
}
@media screen and (max-width: 767px) {
    .solve .solve-wrap { background: url('../images/front/sub/service/solve-bg-mo.jpg') center center; background-size: 100% auto; }
    .solve .visual { width: 120%; min-width: 466px; max-width: 735px; left: 50%; transform: translateX(-50%); }
}

/*===== core =====*/
.core{position: relative; padding: calc(140px - 30px - 6px) 0 160px;}
.intro .core .inner .sec-title{margin-bottom: 34px;}
.core .core-list{display: flex; flex-direction: column; gap: 160px;}
.core .core-cont { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: stretch; gap: 30px;}
.core .core-cont.reverse{flex-flow: row-reverse nowrap;}
.core .core-cont.center{flex-flow: column wrap; gap: 56px; text-align: center;}
.core .core-cont .core-image{ width: 620px; height: auto; aspect-ratio: 620/560; border-radius: 16px; overflow: hidden;}
.core .core-cont .core-image img{width: 100%; height: 100%; object-fit: cover;}
.core .core-cont.center .core-image{width: 100%; aspect-ratio: 12/6;}
.core .core-cont .core-text{display: flex; flex-direction: column;}
.core .core-cont.center .core-text{align-items: center; width: 100%;}
.core .core-cont .core-text .num { position: relative; display: inline-block; overflow: hidden; width: 90px; padding: 9px 14px; border: 1px solid var(--text-color-2); border-radius: 20px; font-size: 16px; font-weight: 700; line-height: 1.063; text-align: center; transition: color 0.3s}
.core .core-cont .core-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;}
.core .core-cont .core-text .num.active { color: #fff;}
.core .core-cont .core-text .num.active::before { width: calc(100% + 2px);}
.core .core-cont .core-text .title {margin: 18px 0 24px; font-size: 32px; font-weight: 400; font-weight: 700; line-height: 1; word-break: keep-all;}
.core .core-cont .core-text .text { font-size: 20px; line-height: 1.5; word-break: keep-all;}
.core .core-cont .detail-list { width: 500px; margin-top: 56px; border-top: 1px solid var(--text-color-2);}
.core .core-cont .detail-item { border-bottom: 1px solid var(--border-color-d); padding: 22px 4px 20px 20px; word-break: keep-all; }
.core .core-cont .detail-item .tit {display: flex; flex-flow: row nowrap; align-items: flex-start; gap: 4px; font-size: 20px; font-weight: 700; line-height: 1.2;}
.core .core-cont .detail-item .tit::before{display: inline-block; content: ''; width: 24px; height: auto; aspect-ratio: 1/1; background-image: url('../images/front/sub/service/icon-chk.svg'); background-position: left center; background-size: 100% 100%; background-repeat: no-repeat; }
.core .core-cont .detail-item .txt { margin-top: 6px; font-size: 18px; color: var(--text-color-5); line-height: 1.44;}
.core .core-cont .detail-item .txt .desc{display: block; margin-top: 4px; font-size: 14px;}
.core .core-cont .detail-item .dec { display: flex; flex-flow: row wrap; margin-top: 14px; }
.core .core-cont .detail-item .dec li { position: relative; padding-left: 12px; font-size: 16px; font-weight: 500; color: var(--text-color-5); line-height: 1.625;}
.core .core-cont .detail-item .dec li::before { content: ''; position: absolute; top: 10px; left: 0; display: inline-block; width: 4px; height: auto; aspect-ratio: 1/1; border-radius: 50%; background-color: var(--text-color-5);}
.core .core-cont.core01 .detail-item:first-child .dec {gap: 2px 38px;}
@media screen and (max-width: 1440px) {
    .core{padding: clamp(74px, 7.222vw, 104px) 0 160px;}
    .core .core-list{gap: clamp(120px, 11.111vw, 160px);}
}
@media screen and (max-width: 1260px) {
    .core .core-cont .core-image{ width: 49.206vw; }
    .core .core-cont:not(.core02, .core04) .core-image img{object-position: right;}
    .core .core-cont .core-text{ width: calc(100% - 49.206vw - 30px);}
    .core .core-cont .core-text .num { width: 5.625em; padding: 0.625em 0.875em; font-size: clamp(14px, 1.27vw, 16px);}
    .core .core-cont .core-text .title {margin: 0.5625em 0 0.75em; font-size: clamp(29px, 2.54vw, 32px);}
    .core .core-cont .core-text .text { font-size: clamp(18px, 1.587vw, 20px);}
    .core .core-cont .detail-list{width: 100%; max-width: 500px; margin-top: clamp(40px, 4.444vw, 56px);}
}
@media screen and (max-width: 1024px) {
    .core{padding: clamp(60px, 7.227vw, 74px) 0 calc(clamp(120px, 15.625vw, 160px));}
    .intro .core .inner .sec-title{margin-bottom: clamp(19px, 3.32vw, 34px);}
    .core .core-list{gap: clamp(80px, 11.719vw, 120px);}
    .core .core-cont{flex-flow: column wrap; gap: 36px;}
    .core .core-cont.reverse{flex-flow: column wrap;}
    .core .core-cont.center{ gap: clamp(34px, 5.469vw, 56px); text-align: left;}
    .core .core-cont.center .core-image{aspect-ratio: 41/37;}
    .core .core-cont .core-image{width: 100%; border-radius: clamp(10px, 1.563vw, 16px); }
    .core .core-cont .core-text{width: 100%;}
    .core .core-cont.center .core-text{align-items: flex-start;}
    .core .core-cont .core-text .num {width: clamp(61px, 7.617vw, 78px); min-height: 25px; padding: clamp(5px, 0.879vw, 9px) 0.8571em; font-size: clamp(12px, 1.367vw, 14px); line-height: 1; }
    .core .core-cont .core-text .title {margin: 16px 0 clamp(18px, 2.148vw, 22px); font-size: clamp(20px, 2.832vw, 29px); line-height: 1.3;}
    .core .core-cont .core-text .text { font-size: clamp(16px, 1.758vw, 18px);}
    .core .core-cont .detail-list {display: flex; flex-flow: row wrap; max-width: none;}
    .core .core-cont .detail-item { width: 50%; padding: clamp(20px, 2.148vw, 22px) 4px 20px clamp(18px, 1.953vw, 20px);}
    .core .core-cont .detail-item:nth-child(1){border-right: 1px solid var(--border-color-d);}
    .core .core-cont .detail-item:nth-child(3){width: 100%;}
    .core .core-cont.core02 .detail-item:nth-child(1){width: 45%;}
    .core .core-cont.core02 .detail-item:nth-child(2){width: 55%;}
    .core .core-cont.core03 .detail-item:nth-child(1){width: 52%;}
    .core .core-cont.core03 .detail-item:nth-child(2){width: 48%;}
    .core .core-cont .detail-item .tit { gap: 3px; font-size: clamp(18px, 1.953vw, 20px); }
    .core .core-cont .detail-item .txt { font-size: clamp(16px, 1.758vw, 18px); }
    .core .core-cont .detail-item .txt .desc{ font-size: clamp(12px, 1.367vw, 14px);}
    .core .core-cont .detail-item .dec li { font-size: clamp(14px, 1.563vw, 16px); line-height: 1.43;}
    .core .core-cont .detail-item .dec li::before{top: 0.625em;}
}
@media screen and (max-width: 767px) {
    .core .core-cont .detail-item { width: 100%; }
    .core .core-cont .detail-item:nth-child(1){border-right: none;}
    .core .core-cont .detail-item:nth-child(3){width: 100%;}
    .core .core-cont.core02 .detail-item:nth-child(1){width: 100%;}
    .core .core-cont.core02 .detail-item:nth-child(2){width: 100%;}
    .core .core-cont.core03 .detail-item:nth-child(1){width: 100%;}
    .core .core-cont.core03 .detail-item:nth-child(2){width: 100%;}
}
@media screen and (max-width: 380px) {
    .core .core-cont .core-text .text .br{display: none;}
}