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

/* 이용방법 */
#sub:has(.manual-sec):not(.rwd) {min-width: 1025px;}
#sub:has(.manual-sec) .sub-visual{padding: 60px 30px 70px;}
#sub:has(.manual-sec) .sub-visual .visual-tit .page-tag{min-width: 178px; border: 2px solid var(--border-color-d); font-size: 20px; line-height: 43px;}
#sub:has(.manual-sec) .sub-visual .visual-tit h2{line-height: 1.25;}
.manual-sec { display: flex; gap: 60px; width: 100%; max-width: calc(1520px + 60px); margin: 80px auto 160px; padding: 0 30px; }
.manual-sec .mo-only{display: none;}
.manual-sec .mgb30 { margin-bottom: 30px;}
.manual-sec .mgb60 { margin-bottom: 60px;}
.manual-sec .navi-area { width: 300px; padding-right: 20px; border-right: 1px solid var(--border-color-d);}
.manual-sec .navi-area .mo-menu-list{display: none;}
.manual-sec .navi-area .menu-list { position: sticky; top: 100px; left: 0; transition: all 0.4s;}
#container:has(.nav-up) .manual-sec .navi-area .menu-list { top: 40px;}
.manual-sec .navi-area .menu-wrap > a { display: block; padding: 16px 30px 16px 18px; border-radius: 4px; background-color: #fff; background-image: url('../images/front/sub/manual/icon-navi-arrow-down.svg'); background-position: right 10px center; background-repeat: no-repeat; background-size: 20px 20px; font-size: 18px;}
.manual-sec .navi-area .menu-wrap > a span { font-size: inherit; font-weight: 500; color: var(--text-color-2);}
.manual-sec .navi-area .menu-wrap .sub-menu { display: none; padding: 20px;}
.manual-sec .navi-area .menu-wrap .sub-menu li { position: relative; padding-left: 12px; font-size: 16px; font-weight: 500; color: var(--text-color-5); line-height: 1.1875; cursor: pointer;}
.manual-sec .navi-area .menu-wrap .sub-menu li::before { content:''; position: absolute; top: 0.4375em; left: 0; display: block; width: 4px; height: 4px; border-radius: 50%; background-color: var(--text-color-5);}
.manual-sec .navi-area .menu-wrap .sub-menu li + li { margin-top: 16px;}
.manual-sec .navi-area .menu-wrap.on > a { background-color: var(--bg-color); background-image: url('../images/front/sub/manual/icon-navi-arrow-up.svg');}
.manual-sec .navi-area .menu-wrap.on > a span { color: var(--point-color); font-weight: 600;}
.manual-sec .navi-area .menu-wrap.on .sub-menu { display: block;}
.manual-sec .cont-area { width: calc(100% - 300px - 60px);}
.manual-sec .cont-area .top-banner { display: flex; align-items: center; width: 100%; height: 280px; margin-bottom: 50px; padding: 0 50px; border-radius: 15px; overflow: hidden; background-image: url('../images/front/sub/manual/top-banner.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover;}
.manual-sec .cont-area .top-banner .tit-wrap > span { position: relative; display: block; font-size: 16px; font-weight: 700; color: var(--point-color); margin-bottom: 15px; padding-left: 28px;}
.manual-sec .cont-area .top-banner .tit-wrap > span::before { content:''; position: absolute; left: 0; top: 50%; margin-top: -1px; display: block; width: 18px; height: 2px; background-color: var(--point-color);}
.manual-sec .cont-area .top-banner .tit-wrap h3 { font-size: 36px; font-weight: 700; color: var(--text-color-2); line-height: 1; letter-spacing: 0;}
.manual-sec .cont-area .bottom-banner{display: none;}
.manual-sec .cont-area .menu { word-break:keep-all; }
.manual-sec .cont-area .menu + .menu { margin-top: 90px;}
.manual-sec .cont-area .menu .sub-tit { font-size: 30px; font-weight: 700; color: var(--text-color-2); margin-bottom: 30px;}
.manual-sec .cont-area .manual-cont > p,
.manual-sec .cont-area .menu .cont { font-size: 18px; font-weight: 400; color: var(--text-color-5); line-height: 1.667;}
.manual-sec .cont-area .menu .cont em { font-weight: 700;}
.manual-sec .cont-area .menu .cont a { font-weight: 600; color: var(--point-color); text-decoration: underline;}
.manual-sec .cont-area .menu .cont .img-screen { width: 100%; height: auto; margin-bottom: 30px; border-radius: 10px; overflow: hidden;}
.manual-sec .cont-area .menu .list-type li { position: relative; padding-left: 12px;}
.manual-sec .cont-area .menu .list-type li::before { content:''; position: absolute; top: 0.6667em; left: 0; width: 4px; height: 4px; border-radius: 50%; background-color: var(--text-color-5); }
.manual-sec .cont-area .menu .list-type li + li { margin-top: 15px;}
.manual-sec .cont-area .menu .list-type li em { font-weight: 600; }
.manual-sec .cont-area .menu .box-type { display: flex; gap: 27px; width: 100%; border-radius: 10px; padding: 25px 40px;}
.manual-sec .cont-area .menu .box-type .left-wrap { display: flex; align-items: flex-start; gap: 7px; font-size: 20px; font-weight: 700;}
.manual-sec .cont-area .menu .box-type .left-wrap::before { content:''; display: block; width: 30px; height: auto; aspect-ratio: 1/1; background-position: center; background-repeat: no-repeat; background-size: contain;}
.manual-sec .cont-area .menu .box-type .right-wrap > p { font-weight: 500;}
.manual-sec .cont-area .menu .box-type.tip { background-color: var(--bg-color);}
.manual-sec .cont-area .menu .box-type.tip .left-wrap { color: var(--point-color);}
.manual-sec .cont-area .menu .box-type.tip .left-wrap::before { background-image: url('../images/front/sub/manual/icon-tip.svg');}
.manual-sec .cont-area .menu .box-type.caution { background-color: #FFEBEB;}
.manual-sec .cont-area .menu .box-type.caution .left-wrap { color: var(--red-color);}
.manual-sec .cont-area .menu .box-type.caution .left-wrap::before { background-image: url('../images/common/icon-caution.svg');}
.manual-sec .cont-area .menu .box-type.horizon { gap: 12px; flex-direction: column;}
.manual-sec .cont-area .menu .box-type.horizon .right-wrap { padding-left: 37px;}
.manual-sec .cont-area .menu .cont .order-wrap:not(:last-of-type) { margin-bottom: 60px;}
.manual-sec .cont-area .menu .cont .order-wrap h4 { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; color: var(--text-color-5); margin-bottom: 20px; line-height: 1.2;}
.manual-sec .cont-area .menu .cont .order-wrap h4 i { width: 24px; height: auto; aspect-ratio: 1 / 1; border-radius: 50%; font-size: 16px; color: #fff; font-weight: 600; line-height: 24px; background-color: var(--text-color-5); text-align: center;}
.manual-sec .cont-area .menu dl { display: grid; grid-template-columns: 190px 1fr; gap: 0; margin: 40px 0; padding: 0; border-top: 2px solid #333;}
.manual-sec .cont-area .menu dt,
.manual-sec .cont-area .menu dd { padding: 28px 0px 28px 30px; margin: 0; border-bottom: 1px solid var(--border-color-d);}
.manual-sec .cont-area .menu dd { padding: 28px 28px 28px 60px;}
.manual-sec .cont-area .menu dt { color: var(--text-color-2); font-weight: 700;}
.manual-sec .cont-area .menu .order-wrap .box-type { margin-top: 40px;}
/* manual02 */
.manual-sec.manual02 .cont-area .menu dl { grid-template-columns: 100px 1fr;}
.manual-sec.manual02 .menu04 .plan-wrap { display: flex; border-top: 2px solid #333; border-bottom: 1px solid var(--border-color-d);}
.manual-sec.manual02 .menu04 .plan-box { display: flex; column-gap: 23px; flex: 1; padding: 28px 30px 30px; line-height: 1.6;}
.manual-sec.manual02 .menu04 .plan-box h5 { color: var(--text-color-2); font-weight: 600; }
.manual-sec.manual02 .menu04 .plan-box:first-of-type { position: relative;}
/* .manual-sec.manual02 .menu04 .plan-box:first-of-type::after { content:''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 60px; background-color: var(--border-color-d); } */
/* manual04 */
.manual-sec.manual04 .menu01 { margin-top: 90px;}
.manual-sec.manual04 .menu01 .box-type { margin-top: 40px;}
.manual-sec.manual04 .cont-area .menu02 .box-type + .box-type { margin-top: 16px;}
/* manual05 */
.manual-sec.manual05 .menu01 { margin-top: 90px;}
/* manual07 */
.manual-sec.manual07 .menu01 { margin-top: 90px;}
/* manual08 */
.manual-sec.manual08 .menu01 { margin-top: 90px;}
@media screen and (max-width: 1600px) {
    .manual-sec {gap: clamp(40px, 3.75vw, 60px); margin: clamp(52px, 5vw, 80px) auto clamp(140px, 10vw, 160px);}
    .manual-sec .navi-area{width: clamp(280px, 18.75vw, 300px);}
    .manual-sec .cont-area { width: calc(100% - clamp(280px, 18.75vw, 300px) - clamp(20px, 3.75vw, 60px));}
}
@media screen and (max-width: 1280px) {
    #sub:has(.manual-sec) .sub-visual .visual-tit .page-tag{min-width: clamp(170px, 13.906vw, 178px);  font-size: clamp(18px, 1.563vw, 20px); line-height: clamp(40px, 3.359vw, 43px);}
    #sub:has(.manual-sec) .sub-visual .visual-tit h2{font-size: clamp(30px, 2.5vw, 32px)}
    .manual-sec .navi-area{width: clamp(260px, 21.875vw, 280px);}
    .manual-sec .cont-area { width: calc(100% - clamp(260px, 21.875vw, 280px) - clamp(20px, 3.75vw, 60px));}
    .manual-sec .navi-area .menu-wrap > a { padding: 0.8889em 1.6667em 0.8889em 1em; font-size: clamp(17px, 1.406vw, 18px);}
    .manual-sec .navi-area .menu-wrap .sub-menu { padding: clamp(18px, 1.563vw, 20px);}
    .manual-sec .navi-area .menu-wrap .sub-menu li { padding-left: 0.75em; font-size: clamp(15px, 1.25vw, 16px); }
    .manual-sec .navi-area .menu-wrap .sub-menu li + li { margin-top: 1em;}
    .manual-sec .cont-area .top-banner { height: clamp(260px, 21.875vw, 280px); margin-bottom: clamp(40px, 3.906vw, 50px); padding: 0 clamp(40px, 3.906vw, 50px);}
    .manual-sec .cont-area .top-banner .tit-wrap h3 { font-size: clamp(32px, 2.813vw, 36px);}
    .manual-sec .cont-area .menu + .menu { margin-top: clamp(80px, 7.031vw, 90px);}
    .manual-sec .cont-area .menu .sub-tit { font-size: clamp(26px, 2.344vw, 30px); margin-bottom: 1em;}
    .manual-sec .cont-area .manual-cont > p,
    .manual-sec .cont-area .menu .cont { font-size: clamp(16px, 1.406vw, 18px);}
    .manual-sec .cont-area .menu .cont .img-screen { margin-bottom: clamp(24px, 2.344vw, 30px);}
    .manual-sec .cont-area .menu .list-type li { padding-left: 0.6667em;}
    .manual-sec .cont-area .menu .list-type li + li { margin-top: clamp(13px, 1.172vw, 15px);}
    .manual-sec .cont-area .menu .box-type { gap: clamp(22px, 2.109vw, 27px); padding: clamp(22px, 1.953vw, 25px) clamp(30px, 3.125vw, 40px);}
    .manual-sec .cont-area .menu .box-type .left-wrap { font-size: clamp(18px, 1.563vw, 20px);}
    .manual-sec .cont-area .menu .box-type .left-wrap::before {width: clamp(27px, 2.344vw, 30px); }
    .manual-sec .cont-area .menu .cont .order-wrap:not(:last-of-type) { margin-bottom: clamp(40px, 4.688vw, 60px);}
    .manual-sec .cont-area .menu .cont .order-wrap h4 { gap: 0.6em; font-size: clamp(18px, 1.563vw, 20px); margin-bottom: 1em; }
    .manual-sec .cont-area .menu .cont .order-wrap h4 i { width: clamp(22px, 1.875vw, 24px); font-size: clamp(15px, 1.25vw, 16px); line-height: clamp(22px, 1.875vw, 24px);}
    .manual-sec .cont-area .menu dl{grid-template-columns: clamp(170px, 14.844vw, 190px) 1fr; margin: clamp(30px, 3.125vw, 40px) 0;}
    .manual-sec .cont-area .menu dt{padding: clamp(18px, 2.734vw, 28px) 0px clamp(18px, 2.734vw, 28px) clamp(18px, 2.93vw, 30px); }
    .manual-sec .cont-area .menu dd { padding: clamp(18px, 2.734vw, 28px) clamp(18px, 2.734vw, 28px) clamp(18px, 2.734vw, 28px) clamp(24px, 5.859vw, 60px);}
    .manual-sec .cont-area .menu .order-wrap .box-type { margin-top: clamp(30px, 3.125vw, 40px);}
    /* manual02 */
    .manual-sec.manual02 .cont-area .menu dl { grid-template-columns: 100px 1fr;}
    .manual-sec.manual02 .menu04 .plan-box { padding: clamp(22px, 2.188vw, 28px) clamp(25px, 2.344vw, 30px) clamp(22px, 2.344vw, 30px); }
}
@media screen and (max-width: 1060px) {
    .manual-sec.manual02 .menu04 .plan-box { flex-direction: column; row-gap: 12px; } 
}
@media screen and (max-width: 1024px) {
    #sub.rwd:has(.manual-sec) .sub-visual{padding: clamp(50px, 5.859vw, 60px) clamp(16px, 2.93vw, 30px) clamp(64px, 6.836vw, 70px);}
    #sub.rwd:has(.manual-sec) .sub-visual .visual-tit .page-tag{min-width: clamp(134px, 16.602vw, 170px); font-size: clamp(16px, 1.758vw, 18px); line-height: clamp(30px, 3.906vw, 40px);}
    #sub.rwd:has(.manual-sec) .sub-visual .visual-tit h2{font-size: clamp(24px, 2.93vw, 30px); line-height: 1.41;}
    #sub.rwd .manual-sec {flex-flow: column wrap; margin: clamp(20px, 5.078vw, 52px) auto clamp(120px, 13.672vw, 140px); padding: 0 clamp(16px, 2.93vw, 30px);}
    #sub.rwd .manual-sec .pc-only{display: none;}
    #sub.rwd .manual-sec .mo-only{display: inline-block;}
    #sub.rwd .manual-sec .navi-area{width: 100%; padding: 0; border: none;}
    #sub.rwd .manual-sec .navi-area .menu-list{display: none;}
    #sub.rwd .manual-sec .navi-area .mo-menu-list{display: block;}
    #sub.rwd .manual-sec .navi-area .mo-menu-list.custom-select-box li .select-value::before{display: none;}
    #sub.rwd .manual-sec .cont-area{width: 100%;}
    #sub.rwd .manual-sec .cont-area .top-banner{ height: auto; aspect-ratio: auto; margin-bottom: clamp(30px, 3.906vw, 40px); padding: 0; background: none;}
    #sub.rwd .manual-sec .cont-area .top-banner .tit-wrap > span{margin-bottom: clamp(9px, 1.465vw, 15px); font-size: clamp(14px, 1.563vw, 16px);}
    #sub.rwd .manual-sec .cont-area .top-banner .tit-wrap h3{font-size: clamp(28px, 3.125vw, 32px);}
    #sub.rwd .manual-sec .cont-area .bottom-banner{display: flex; align-items: center; width: 100%; height: auto; min-height: 110px; aspect-ratio: 656/220; margin-top: clamp(40px, 5.859vw, 60px); padding: 0 clamp(20px, 3.906vw, 40px); border-radius: clamp(10px, 1.465vw, 15px); background-image: url('../images/front/sub/manual/bottom-banner.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; overflow: hidden;}
    #sub.rwd .manual-sec .cont-area .bottom-banner h3 {font-size: clamp(16px, 2.93vw, 30px); font-weight: 700; line-height: 1.4375; word-break: keep-all;}
    #sub.rwd .manual-sec .cont-area .bottom-banner h3 span{display: block; font-weight: 500;}
    #sub.rwd .manual-sec .cont-area .menu + .menu { margin-top: clamp(60px, 7.813vw, 80px);}
    #sub.rwd .manual-sec .cont-area .menu .sub-tit{font-size: clamp(20px, 2.539vw, 26px);}
    #sub.rwd .manual-sec .cont-area .menu .cont .img-screen { max-width: 640px; margin: 0 auto clamp(20px, 2.344vw, 24px);}
    #sub.rwd .manual-sec .cont-area .menu .cont .order-wrap h4 span.mo-only{margin-left: -0.4em;}
    #sub.rwd .manual-sec .cont-area .menu dl{grid-template-columns: clamp(150px, 16.602vw, 170px) 1fr; }
    #sub.rwd .manual-sec .cont-area .menu .box-type { gap: clamp(8px, 2.148vw, 22px); padding: 22px clamp(20px, 2.93vw, 30px);}
}
@media screen and (max-width: 767px) {
    #sub.rwd .manual-sec .cont-area .top-banner{ aspect-ratio: auto; padding: 0; background: none;}
    #sub.rwd .manual-sec .cont-area .menu dl { grid-template-columns: 1fr;}
    #sub.rwd .manual-sec .cont-area .menu dt { padding: 18px 0 4px; border-bottom: none;}
    #sub.rwd .manual-sec .cont-area .menu dd { padding: 0 0 16px;}
    #sub.rwd .manual-sec .cont-area .menu .box-type{flex-flow: column wrap;}
    /* manual02 */
    #sub.rwd .manual-sec.manual02 .menu04 .plan-wrap{flex-flow: column wrap;}
    #sub.rwd .manual-sec.manual02 .menu04 .plan-box { padding: 22px 0; }
    #sub.rwd .manual-sec.manual02 .menu04 .plan-box:first-of-type{border-bottom: 1px solid var(--border-color-d);}
    #sub.rwd .manual-sec.manual02 .menu04 .plan-box:first-of-type::after{display: none;}
}
@media screen and (max-width: 359px) {
    #sub.rwd:has(.manual-sec) .sub-visual{padding: 50px 10px 64px;}
}