.container {width: min(100% - 4rem, 1100px); margin-inline: auto;}
.intro {padding: 50px 0; text-align: center;}
h1 {margin: 0; font-size: 2.5rem; line-height: 1.35; text-align: center; color: #111;}
.intro > p, .feature > p {margin: 10px 0 0;color: #555555;font-size: 1.35rem;font-family: pre_M;}
.service-groups {margin-top: 6.5rem; text-align: left;}
.service-row {display: flex; padding: .8rem; border-radius: 13px; margin: 0 0 14px 0;}
.call-row {background: #F9F8FE; border: 1px solid #E2DCFF;}
.manage-row {background: #F5F9FC; border: 1px solid #DCEDFF;}
.customer-row {background: #F7FCF5; border: 1px solid #DCFFDC;}
.plus-row {background: #FCFAF5; border: 1px solid #FFEFD3;}
.category {display: grid; grid-template-columns: 3.8rem auto; grid-template-rows: 2.2rem auto; width: 230px; padding: 1.35rem 1.6rem; background: #fff; border-radius: 13px;}
.call-row .category {background: #EDEAFF; border: 1px solid #E2DCFF;}
.manage-row .category {background: #E8F5FF; border: 1px solid #BDEAF1;}
.customer-row .category {background: #E8FFEC; border: 1px solid #BDF1CA;}
.plus-row .category {background: #FFF2E2; border: 1px solid #FFD6C6;}
.call-row .category strong {color: #4A2CFF;}
.manage-row .category strong {color: #28AEEA;}
.customer-row .category strong {color: #06BF31;}
.plus-row .category strong {color: #FB9E1D;}
.category img {grid-row: span 2; width: 2.6rem; height: 3.2rem; margin-right: 1rem;}
.category strong {font-size: 1.3rem;}
.category span {color: #2c2c2c; font-size: .95rem;}
.service-list {display: grid; flex: 1; grid-template-columns: repeat(5, 1fr); gap: .7rem; margin-left: .8rem;}
.customer-row .service-list {grid-template-columns: repeat(4, 1fr);}
.service-list div {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; background: #fff; border-radius: 13px; color: #555; font-size: 1rem; text-align: center;}
.call-row .service-list div {border: 1px solid #E2DCFF;}
.manage-row .service-list div {border: 1px solid #DCF1FF;}
.customer-row .service-list div {border: 1px solid #c4f1df;}
.plus-row .service-list div {border: 1px solid #FFDDDC;}
.service-list img {height: 2.4rem; margin: 0 0 6px 0;}
.feature {padding-bottom: 12rem;}
.feature .eyebrow {display: block; margin-bottom: 1.2rem; font-size: 1.35rem; font-weight: 700;}
.phone .eyebrow {color: #4a2cff;}
.manage .eyebrow {color: #14aee9;}
.customer .eyebrow {color: #16bf4a;}
.plus .eyebrow {color: #ff8a00;}
h2 {margin: 0;font-size: 2.35rem;line-height: 1.3;color: #222;}
.feature {
  scroll-margin-top: 100px;
}
.feature nav {display: flex;margin-top: 60px;border-bottom: 1px solid #ddd;overflow-x: auto;}
.feature button {flex: 0 0 auto;border: 0;border-bottom: 3px solid transparent;background: transparent;color: #777;font-size: 1.05rem;cursor: pointer;padding: 13px 20px;}
button.active {font-family: 'pre_SB';}
.phone button.active {color: #4a2cff; border-color: #4a2cff; }
.manage button.active {color: #14aee9; border-color: #14aee9;}
.customer button.active {color: #16bf4a; border-color: #16bf4a;}
.plus button.active {color: #ff8a00; border-color: #ff8a00;}
.feature-image {display: block;width: 100%;margin-top: 20px;border-radius: 1.6rem;}
.feature ul {margin: 2.2rem 0 0; padding-left: 2rem;}
.feature li {padding-left: .2rem;margin: 10px 0;font-size: 1.1rem;position:relative}
.feature li::before {content:'';display:block;position:absolute;width: 6px;height: 6px;background: #545454;top: 9px;left: -17px;}
.feature li b {margin-right: 10px;color: #333;}
.feature li span {color: #777;font-size: 1.1rem;}
/* 태블릿 */
@media (max-width: 1024px) {
    h2 {font-size: 2.15rem;}
    .container {width: calc(100% - 40px);}
    .intro {padding: 100px 0 120px;}
    .service-groups {margin-top: 60px;}
    .category {width: 210px; padding: 18px 20px; grid-template-columns: 3.4rem auto;}
    .category img {width: 2.4rem; height: 3rem;}
    .category strong {font-size: 1.15rem;}
    .category span {font-size: .85rem;}
    .service-list {gap: 8px; margin-left: 8px;}
    .service-list div {font-size: .9rem;}
    #sub #content .service-list img {height: 1.5rem !important;}
}

/* 모바일 */
@media (max-width: 768px) {
    .container {width: calc(100% - 32px);}
    .intro {padding: 70px 0 80px;}
    h1 {font-size: 2rem;}
    h2 {font-size: 1.75rem;}
    .intro > p {margin-top: 16px;font-size: 1.15rem;line-height: 1.6;}
    .intro > p br {display: none;}
    .intro > p, .feature > p {font-size: 1.25rem; margin: 10px 0 0 0;}
    .feature {padding-bottom: 110px;}
    .feature nav {margin-top: 40px;}
    .service-groups {margin-top: 45px;}
    .service-row {display: block; padding: 8px; margin-bottom: 12px; overflow: hidden;}
    .category {display: flex; align-items: center; width: 100%; padding: 14px 16px; box-sizing: border-box;}
    .category img {width: 2.4rem; height: 2.4rem; margin-right: 12px;}
    .category strong {font-size: 1.1rem; white-space: nowrap;}
    .category span {margin-left: 14px; font-size: .85rem; line-height: 1.4;}
    .category span br {display: none;}
    .service-list {display: flex;gap: 8px;margin: 8px 0 0;overflow-x: auto;scrollbar-width: none;}
    .service-list::-webkit-scrollbar {display: none;}
    .service-list div {flex: auto;min-height: 90px;padding: 12px 8px;box-sizing: border-box;font-size: .85rem;}
    #sub #content.service-list img {height: 2.1rem !important;object-fit: contain;margin-bottom: 5px;}
    .feature-image {border-radius: 10px;}
    .feature button {font-size: 1.05rem;}
    .feature li {font-size: 1rem; }
    .feature li span {font-size: 1rem;}
    .feature li b {margin-right: 10px; display: block; margin-bottom: 4px;}
}
@media (max-width: 640px) {
    html {font-size: 55%;}
    .intro {padding: 30px 0}
    .intro > p, .feature > p {font-size: 1.5rem;}
    .service-row {padding: .5rem;}
    .category {padding: 1rem .7rem; grid-template-columns: 3rem auto;}
    .category span {display: none;}
    .service-list {gap: .4rem; margin-left: .5rem;}
    .service-list div {font-size: 1.3rem;}
    #sub #content .service-list img {height: 3rem !important;}
    .feature {padding-bottom: 8rem;}
    .feature nav {margin-top: 3.5rem;}
    .feature li {line-height: 1.55; font-size: 14px;}
    .feature li b, .feature li span {display: block;}
    .feature li span {font-size: 14px;}
    .category strong { font-size: 1.5rem;}
    .feature button {font-size: 1.6rem; padding: 0 10px;}
}
/* 작은 모바일 */
@media (max-width: 480px) {
    .container {width: calc(100% - 24px);}
    h1 {font-size: 1.75rem;}
    h2 {font-size: 2.05rem;}
    .intro > p {font-size: 1.35rem;}
    .service-groups {margin-top: 35px;}
    .category {padding: 12px 14px;}
    .category img {width: 2.2rem; height: 2.2rem; margin-right: 10px;}
    .category strong {font-size: 1.5rem;}
    .category span {display: none;}
    .service-list div {flex-basis: 95px;min-height: 82px;font-size: 1.2rem;}
    .service-list img {width: 2rem; height: 2rem;}
}