@charset "utf-8";
@font-face {font-family: "Pretendard"; font-weight: 100; font-display: swap; src: url("/assets/css/font/Pretendard-Thin.otf") format("opentype"),}
@font-face {font-family: "Pretendard"; font-weight: 200; font-display: swap; src: url("/assets/css/font/Pretendard-ExtraLight.otf") format("opentype"),}
@font-face {font-family: "Pretendard"; font-weight: 300; font-display: swap; src: url("/assets/css/font/Pretendard-Light.otf") format("opentype"),}
@font-face {font-family: "Pretendard"; font-weight: 400; font-display: swap; src: url("/assets/css/font/Pretendard-Regular.otf") format("opentype"),}
@font-face {font-family: "Pretendard"; font-weight: 500; font-display: swap; src: url("/assets/css/font/Pretendard-Medium.otf") format("opentype"),}
@font-face {font-family: "Pretendard"; font-weight: 600; font-display: swap; src: url("/assets/css/font/Pretendard-SemiBold.otf") format("opentype"),}
@font-face {font-family: "Pretendard"; font-weight: 700; font-display: swap; src: url("/assets/css/font/Pretendard-Bold.otf") format("opentype"),}
@font-face {font-family: "Pretendard"; font-weight: 800; font-display: swap; src: url("/assets/css/font/Pretendard-ExtraBold.otf") format("opentype"),}
@font-face {font-family: "Pretendard"; font-weight: 900; font-display: swap; src: url("/assets/css/font/Pretendard-Black.otf") format("opentype"),}

/* ============================== [ 기본 리셋 ] ========================================================================================== */
* {margin: 0; padding: 0; box-sizing: border-box;}
li {list-style: none;}
a {text-decoration: none; color: inherit; cursor: pointer;}
html {line-height: 1; color: #111111; font-family: 'Pretendard'; font-weight: 400; background: #fff; height: 100%; font-size: 62.5%;}
html::-webkit-scrollbar {display: none;}
body {font-size: 1.6rem; font-family: 'Pretendard;'}
button {border: 0; font-size: 1.6rem; font-weight: 400; cursor: pointer;}
button *, a * {pointer-events: none;}
input {font-size: 1.6rem; font-weight: 400;}
h1, h2, h3, h4, h5, h6 {font-family: 'Pretendard'; margin: 0; line-height: 1;}
table {border-spacing: 0px;}
select::-ms-expand {display: none;}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
input[type='number'] {-moz-appearance: textfield;}
input:focus {outline:none;}
figure img {width: 100%; height: 100%; object-fit: contain; display: block;}

/* ============================== [ 공통 ] ========================================================================================== */
.page-wrap {min-height: 100vh; display: flex; flex-direction: column; width: 100%;}

.pc {display: block;}
.mobile {display: none;}

/* text color */
.txt-red {color: #F1132D;}

/* border */
.bd-right {border-right: 1px solid #EEE;}
.bd-left {border-left: 1px solid #EEE;}

/* button */
.btn-main {display: flex; align-items: center; justify-content: center; column-gap: 0.4rem; border-radius: 0.2rem; background-color: #F1132D; padding: 0.8rem 1.6rem 0.8rem 1.2rem;}
.btn-main figure {width: 1.6rem; height: 1.6rem;}
.btn-main span {color: #fff; font-size: 1.4rem; font-weight: 600; line-height: 150%; letter-spacing: -0.014px;}
.btn-main:disabled {background-color: #EEE;}
.btn-main:disabled span {color: #A9A9A9;}
.btn-main.btn-lg {padding: 1.2rem 2rem; font-size: 1.6rem; border-radius: 0.4rem; justify-content: center;}
.btn-main.btn-whole {padding: 1.6rem 2.4rem; width: 100%;}
.btn-main.btn-whole span {font-size: 1.6rem;}
.btn-main-line {padding: 0.8rem 1.6rem; border-radius: 0.2rem; border: 1px solid #F1132D; display: flex; align-items: center; justify-content: center; background-color: #fff;}
.btn-main-line span {color: #F1132D; font-size: 1.4rem; font-weight: 600; line-height: 150%; letter-spacing: -0.014px;}
.btn-category {background: transparent;}
.btn-category figure {width: 3.2rem; height: 3.2rem;}
.btn-normal {display: none; padding: 0.8rem 1rem; border-radius: 0.4rem; border: 0.5px solid #ddd; background-color: #fff;}
.btn-normal.show {display: flex; align-items: center; column-gap: 0.4rem;}
.btn-normal figure {width: 1.6rem; height: 1.6rem;}
.btn-normal span {font-size: 1.4rem; color: #111; font-weight: 500; line-height: normal; letter-spacing: -0.07px;}
.btn-gray {display: flex; align-items: center; justify-content: center; column-gap: 0.8rem; padding: 0.8rem 1.2rem; border-radius: 0.4rem; border: 1px solid #ddd; background-color: #f8f8f8;}
.btn-gray.no-border {border: none;}
.btn-gray.strong {background-color: #E4E4E4;}
.btn-gray figure {width: 1.6rem; height: 1.6rem;}
.btn-gray span {color: #111; font-size: 1.4rem; font-weight: 500; line-height: normal; letter-spacing: -0.07px;}
.btn-wh {padding: 1.1rem; border-radius: 0.4rem; border: 1px solid #ddd; background-color: #fff; display: flex; align-items: center; justify-content: center;}
.btn-wh figure {width: 2.4rem; height: 2.4rem;}
.btn-wh span {color: #222; font-size: 1.4rem; font-weight: 600; line-height: 150%; letter-spacing: -0.014px;}
.btn-wh-2 {background-color: #fff;}
.btn-wh-line {padding: 0.8rem 1.6rem; border-radius: 0.2rem; border: 1px solid #222; display: flex; align-items: center; justify-content: center; background-color: #fff;}
.btn-wh-line span {color: #222; font-size: 1.4rem; font-weight: 600; line-height: 150%; letter-spacing: -0.014px;}
.btn-more {padding: 0.8rem 1.6rem; width: 100%; background-color: #fff; border-radius: 0.2rem; border: 1px solid #ddd; color: #222; font-size: 1.4rem; font-weight: 600; line-height: 150%; letter-spacing: -0.014px;}
.btn-bk {padding: 0.8rem 1.6rem; display: flex; align-items: center; justify-content: center; column-gap: 0.4rem; border-radius: 0.2rem; background-color: #111; color: #eee; font-size: 1.4rem; font-weight: 600; line-height: 150%; letter-spacing: -0.014px;}
.btn-bk.btn-bk-2 {background-color: #333;}
.btn-bk figure {width: 1.6rem; height: 1.6rem;}
.btn-bk span {color: #eee; font-size: 1.4rem; font-weight: 600; line-height: 150%; letter-spacing: -0.014px;}
.btn-line {border-radius: 0.2rem; border: 1px solid #F1132D; padding: 0.8rem 1.6rem; display: flex; align-items: center; justify-content: center; color: #F1132D; font-size: 1.4rem; font-weight: 700; line-height: normal; letter-spacing: -0.014px; background-color: #fff;}
.btn-bookmark {background-color: transparent;}
.btn-bookmark figure {width: 2.4rem; height: 2.4rem;}

/* select */
.custom-select {position: relative;}
.custom-select .select-trigger {display: flex; align-items: center; padding: 0.4rem; cursor: pointer; transition: all 0.2s ease;}
.custom-select.active .select-trigger {border-color: #F5F5F5;}
.custom-select .select-text {color: #888; font-size: 1.4rem; font-weight: 400;}
.custom-select .select-text.active {color: #111;}
.custom-select .select-arrow {transition: transform 0.2s ease; display: flex; align-items: center;}
.custom-select.active .select-arrow {transform: rotate(180deg);}
.custom-select .select-options {position: absolute; top: 100%; right: 0; background: #fff; border-radius: 0.4rem; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12); z-index: 1002; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.2s ease; margin-top: 0.8rem; width: 12.6rem;}
.custom-select.active .select-options {opacity: 1; visibility: visible; transform: translateY(0);}
.custom-select .option {padding: 1.2rem 1.6rem; cursor: pointer; color: #222; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px; transition: background-color 0.2s ease;}
.custom-select .option:hover {background-color: #F5F5F5;}
.custom-select .option.active {background-color: #F5F5F5; color: #222; font-weight: 600;}
.custom-select .option:first-child {border-top-left-radius: 0.4rem; border-top-right-radius: 0.4rem;}
.custom-select .option:last-child {border-bottom-left-radius: 0.4rem; border-bottom-right-radius: 0.4rem;}

.box-select {position: relative; width: 100%; min-height: 4.8rem;}
.box-select .select-trigger {display: flex; align-items: center; justify-content: space-between; padding: 1.2rem; border-radius: 0.4rem; border: 1px solid #E8E8E8; background-color: #fff; cursor: pointer; transition: all 0.2s ease; min-height: 4.8rem;}
.box-select .select-text {color: #aaa; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}
.box-select .select-text.active {color: #111;}
.box-select .select-text.active.text-red {color: #F1132D;}
.box-select .select-arrow {transition: transform 0.2s ease; display: flex; align-items: center; width: 1.6rem; height: 1.6rem;}
.box-select.active .select-arrow {transform: rotate(180deg);}
.box-select .select-options {position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-radius: 0.8rem; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12); z-index: 1000; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; margin-top: 0.8rem; max-height: 20rem; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none;}
.box-select .select-options::-webkit-scrollbar {display: none;}
.box-select.active .select-options {opacity: 1; visibility: visible; transform: translateY(0);}
.box-select .option {padding: 1.2rem; cursor: pointer; color: #222; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px; transition: background-color 0.2s ease;}
.box-select .option:hover {background-color: #F5F5F5;}
.box-select .option.active {background-color: #F5F5F5; color: #222; font-weight: 600;}

.box-select.engine .select-options {padding: 2.4rem 1.6rem; width: 48rem;}
.box-select.engine .option-title {color: #111; font-size: 1.8rem; font-weight: 700; line-height: 130%; letter-spacing: -0.018px; text-align: center; margin-bottom: 0.8rem;}
.box-select.engine .option {color: #111; font-size: 1.8rem; font-weight: 700; line-height: 130%; letter-spacing: -0.018px;}

.box-select.brand .select-options {width: 48rem; padding: 2.4rem 1.6rem; display: flex; flex-direction: column; row-gap: 0.8rem; max-height: 48rem; }
.box-select.brand .option-title {color: #111; font-size: 1.8rem; font-weight: 700; line-height: 130%; letter-spacing: -0.018px; text-align: center; margin-bottom: 0.8rem;}
.box-select.brand .option {display: flex; align-items: center; column-gap: 0.8rem; background-color: #F8F8F8; border-radius: 1.2rem;}
.box-select.brand .option span {color: #111; font-size: 1.8rem; font-weight: 700; line-height: 130%; letter-spacing: -0.018px;}

/* radio button */
input[type="radio"].basic-radio {position: absolute; opacity: 0; width: 0; height: 0;}
input[type="radio"].basic-radio + label {display: flex; align-items: center; cursor: pointer; font-size: 1.4rem; color: #111; font-weight: 400; line-height: 150%; letter-spacing: -0.014px; position: relative; padding-left: 2.8rem;}
input[type="radio"].basic-radio + label::before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; background-image: url('/assets/image/mobile/icon/ic_radio_off.svg'); /* 선택 전 이미지 경로 */ background-size: contain; background-repeat: no-repeat; background-position: center; transition: all 0.2s ease;}
input[type="radio"].basic-radio:checked + label::before {background-image: url('/assets/image/mobile/icon/ic_radio_on.svg');}

input[type="radio"].box-radio {display: none;}
input[type="radio"].box-radio + label {position: relative; cursor: pointer; padding: 0.95rem 1.2rem; border-radius: 0.4rem; border: 1px solid #E8E8E8; background-color: #fff; color: #AAA; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px; transition: all 0.2s ease; user-select: none; text-align: center;}
input[type="radio"].box-radio:checked + label {border: 1px solid #F1132D; background-color: #FFE8E8; color: #F1132D; font-weight: 600;}

input[type="radio"].circle-radio {position: absolute; opacity: 0; width: 0; height: 0;}
input[type="radio"].circle-radio + label {display: flex; align-items: center; cursor: pointer; font-size: 1.6rem; color: #111; font-weight: 400; line-height: normal; letter-spacing: -0.016px; position: relative; padding-left: 2.8rem; padding-top: 0.2rem;}
input[type="radio"].circle-radio + label::before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2.4rem; height: 2.4rem; background-image: url('/assets/image/mobile/icon/ic_circle_g.svg'); /* 선택 전 이미지 경로 */ background-size: contain; background-repeat: no-repeat; background-position: center; transition: all 0.2s ease;}
input[type="radio"].circle-radio:checked + label::before {background-image: url('/assets/image/mobile/icon/ic_circle.svg');}

/* checkbox */
input[type="checkbox"].basic-chk {position: absolute; opacity: 0; width: 0; height: 0;}
input[type="checkbox"].basic-chk + label {display: flex; align-items: center; cursor: pointer; font-size: 1.4rem; color: #111; font-weight: 400; line-height: 150%; letter-spacing: -0.014px; position: relative; padding-left: 2.8rem;}
input[type="checkbox"].basic-chk + label::before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; background-image: url('/assets/image/mobile/icon/ic_radio_off.svg'); /* 선택 전 이미지 경로 */ background-size: contain; background-repeat: no-repeat; background-position: center; transition: all 0.2s ease;}
input[type="checkbox"].basic-chk:checked + label::before {background-image: url('/assets/image/mobile/icon/ic_radio_on.svg');}

input[type="checkbox"].simple-chk {position: absolute; opacity: 0; width: 0; height: 0;}
input[type="checkbox"].simple-chk + label {display: flex; align-items: center; cursor: pointer; font-size: 1.4rem; color: #888; font-weight: 400; line-height: 130%; letter-spacing: -0.014px; position: relative; padding-left: 2.6rem;}
input[type="checkbox"].simple-chk + label::before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2.4rem; height: 2.4rem; transition: all 0.2s ease;background-image: none;border: none;}
input[type="checkbox"].simple-chk + label::after {content: ''; position: absolute; left: 0.7rem; top: 45%; transform: translateY(-50%) rotate(45deg); width: 0.4rem; height: 0.8rem; border: solid #888888; border-width: 0 2px 2px 0; transition: all 0.2s ease;}
input[type="checkbox"].simple-chk:checked + label::after {border-color: #F1132D;}

input[type="checkbox"].block-chk {position: absolute; opacity: 0; width: 0; height: 0;}
input[type="checkbox"].block-chk + label {display: flex; align-items: center; cursor: pointer; font-size: 1.6rem; color: #111; font-weight: 400; line-height: normal; letter-spacing: -0.014px; position: relative; background-color: #F7F7F7; padding: 1.4rem 1.2rem 1.2rem 4rem; border-radius: 0.8rem;}
input[type="checkbox"].block-chk + label::before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; background-image: url('/assets/image/mobile/icon/ic_radio_off.svg'); /* 선택 전 이미지 경로 */ background-size: contain; background-repeat: no-repeat; background-position: center; transition: all 0.2s ease; padding-left: 2rem;}
input[type="checkbox"].block-chk:checked + label {background-color: #333333; color: #eee;}
input[type="checkbox"].block-chk:checked + label::before {background-image: url('/assets/image/mobile/icon/ic_radio_on.svg');}

.chk-list {margin-top: 1.2rem; display: flex; flex-direction: column; row-gap: 0.8rem; margin-bottom: 2.8rem;}
.chk-list li {display: flex; align-items: center; justify-content: space-between;}
.chk-list li a {width: 1.6rem; height: 1.6rem;}

/* input:text, number */
.basic-text {padding: 1.2rem; width: 100%; border-radius: 0.4rem; border: 1px solid #E8E8E8; font-family: 'Pretendard'; font-size: 1.4rem; min-height: 4.8rem; line-height: 150%; letter-spacing: -0.014px;}
.basic-text::placeholder {color: #989898; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}
.basic-text:disabled {border: 1px solid #E8E8E8; background-color: #F4F4F4; color: #aaa;}

.attach-text {color: #111;}
.attach-text:disabled {background-color: #fff; color: #111;}

/* textarea */
.basic-textarea {padding: 1.2rem; width: 100%; resize: none; border-radius: 0.4rem; border: 1px solid #E8E8E8; font-family: 'Pretendard'; font-size: 1.4rem; height: 50rem;}
.basic-textarea::placeholder {color: #aaa; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}

.reply-textarea {padding: 1.6rem; width: 100%; resize: none; border-radius: 0.8rem; background-color: #f8f8f8; border: none; font-family: 'Pretendard'; font-size: 1.6rem; height: 17.5rem;}
.reply-textarea::placeholder {color: #aaa; font-size: 1.6rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}
.reply-textarea.small {height: 11.3rem;}

/* popup */
.bg {display: none; background-color: rgba(0, 0, 0, 0.60); width: 100%; height: 100%; z-index: 1001; position: fixed; top: 0; left: 0;}
.modal {display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 61rem; z-index: 1001; background-color: #fff; padding: 2.4rem; border-radius: 1.6rem;}
.modal .inner {display: flex; flex-direction: column; row-gap: 2.4rem;}
.modal .modal-header {display: flex; align-items: center; justify-content: center;}
.modal .modal-header h5 {font-size: 2rem; color: #111; font-weight: 700; line-height: 130%; letter-spacing: -0.02px;}
.modal .modal-body > ul {display: flex; flex-wrap: wrap; column-gap: 1.6rem; row-gap: 1.2rem;}
.modal .modal-body > ul li {width: calc(50% - 1.6rem); position: relative;}
.modal .modal-body p {color: #111; font-size: 1.6rem; font-weight: 400; line-height: 150%; letter-spacing: -0.016px; text-align: center;}
.modal .modal-body p .find-id {color: #111; text-align: center; font-size: 1.6rem; font-weight: 700; line-height: 150%; letter-spacing: -0.016px;}
.modal .modal-body p .str {font-weight: 700;}
.modal .modal-body p .key {color: #F1132D;}
.modal .modal-body > a {margin: 0 auto; width: fit-content; color: #F1132D; font-size: 1.2rem; font-weight: 700; line-height: 150%; letter-spacing: -0.012px;}
.modal .modal-footer {display: flex; align-items: center; column-gap: 1rem;}
.modal .modal-footer button {width: calc(50% - 0.5rem);}
.modal .modal-footer button.wd-100 {width: 100%;}
.btn-modal {padding: 1.2rem 2rem; border-radius: 0.4rem;}
.btn-modal span {font-size: 1.6rem; font-weight: 600; letter-spacing: -0.016px; line-height: 150%;}
.btn-modal.btn-gray {background-color: #E4E4E4; border: none;}
.btn-modal.btn-gray span {color: #252525;}

/* 문의하기 모달 */
.modal-body {display: flex; flex-direction: column; row-gap: 1.6rem;}
.modal-body .inquiry-content {display: flex; flex-direction: column; row-gap: 1.6rem;}
.modal-body .modal-group {display: flex; flex-direction: column; row-gap: 0.8rem;}
.modal-body .modal-group .txt-group {display: flex; align-items: center; column-gap: 0.8rem;}
.modal-body .modal-group .basic-textarea {height: 20rem;}
.modal-body .modal-group .title {color: #111; font-size: 1.4rem; font-weight: 700; line-height: 150%; letter-spacing: -0.014px; position: relative; width: fit-content;}
.modal-body .modal-group .title.req:after {content: '*'; font-size: 1.4rem; color: #F1132D; font-weight: 700; line-height: 150%; letter-spacing: -0.014px; position: absolute; right: -0.6rem;}
.modal-body .modal-group .img-cnt {color: #F1132D; font-size: 1.4rem; font-weight: 700; line-height: 150%; letter-spacing: -0.014px;}
.modal-body .modal-group .img-cnt .cnt {position: relative;}
.modal-body .modal-group .img-cnt .cnt:after {content: '개';}
.modal-body .attach-content {display: flex; flex-direction: column; row-gap: 0.8rem;}
.modal-body .modal-group.attach {flex-direction: row; column-gap: 1.6rem;}
.modal-body .modal-group.attach .file-attach {padding: 2.4rem; border-radius: 1.2rem; border: 1px solid #E8E8E8; background-color: #F4F4F4;}
.attach-img-list {display: none; align-items: center; column-gap: 1.6rem;}
.attach-img-list.show {display: flex;}
.attach-img-list li {width: 7.1rem; height: 7.1rem; border-radius: 1.2rem; border: 1px solid #eee; position: relative; overflow: hidden;}
.attach-img-list li figure {width: 100%; height: 100%;}
.attach-img-list li figure img {object-fit: cover;}
.attach-img-list li .delete {width: 2.4rem; height: 2.4rem; position: absolute; top: 0; right: 0;}

/* 지도에서 찾기 모달 */
#mapModal {padding: 0;}
#mapModal .inner {row-gap: 0;}
#mapModal .modal-header {padding: 2.4rem 0;}
#mapModal .modal-body {position: relative; border-radius: 0 0 1.6rem 1.6rem; overflow: hidden; height: 56rem;}
#mapModal .modal-body .map-box figure {width: 100%; height: 100%;}
#mapModal .modal-body .map-box figure img {object-fit: cover;}
#mapModal .modal-body .map-box .btn-map {position: absolute; bottom: 19rem; right: 2rem; background-color: #fff; padding: 0.8rem; border-radius: 100%; border: 1px solid #ddd; box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.25);}
#mapModal .modal-body .map-box .btn-map figure {width: 2.4rem; height: 2.4rem;}
#mapModal .modal-map {border-radius: 1.6rem; background-color: #fff; overflow: hidden; position: absolute; bottom: 0; left: 0; width: 100%; padding: 2rem;}
.map-info {display: flex; flex-direction: column;}
.map-info .address-txt {color: #111; font-size: 1.6rem; font-weight: 600; line-height: 150%; letter-spacing: -0.016px;}
.map-info .address-jibeon {display: flex; align-items: center; column-gap: 0.8rem; margin-top: 0.8rem; margin-bottom: 1.2rem;}
.map-info .address-jibeon .jibeon {padding: 0.4rem 0.8rem; border-radius: 0.4rem; border: 1px solid #f0f9f0; background-color: #F3F3F3; color: #7b7b7b; font-size: 1.1rem; font-weight: 400; line-height: normal; letter-spacing: -0.055px;}
.map-info .address-jibeon .address-txt-2 {color: #111; font-size: 1.6rem; font-weight: 400; line-height: normal; letter-spacing: -0.014px;}
#mapModal .modal-map .btn-main {border-radius: 0.4rem;}

/* 지원하기 모달 */
.apply-title {display: flex; flex-direction: column; row-gap: 1.2rem; border-bottom: 1px solid #eee; padding-bottom: 2rem;}
.apply-title .category-box {display: flex; align-items: center; justify-content: space-between;}
.apply-title .category-box .txt {display: flex; align-items: center; column-gap: 0.6rem;}
.apply-title .category-box .txt .category {color: #7b7b7b; padding: 0.6rem 0.8rem 0.4rem 0.8rem; border-radius: 0.4rem; border: 1px solid #f0f0f0; background-color: #f3f3f3; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.08px;}
.apply-title .category-box .txt .category.speed {color: #eee; border: none; background-color: #F1132D;}
.apply-title .job-box {display: flex; flex-direction: column; row-gap: 0.8rem;}
.apply-title .job-box .company {color: #555; font-size: 1.4rem; font-weight: 700; line-height: normal; letter-spacing: -0.07px;}
.apply-title .job-box .title {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; align-self: stretch; overflow: hidden; color: #111; text-overflow: ellipsis; font-size: 1.6rem; font-weight: 400; line-height: normal; letter-spacing: -0.08px;}
.apply-title .job-box .salary {color: #111; font-size: 1.6rem; font-weight: 600; line-height: normal; letter-spacing: -0.08px;}
.apply-title .job-info {display: flex; align-items: center; column-gap: 0.4rem;}
.apply-title .job-info span {color: #888; font-size: 1.4rem; font-style: normal; font-weight: 400; line-height: 130%; letter-spacing: -0.07px;}
.apply-title .job-info span:after {content: '·'; padding-left: 0.4rem;}
.apply-title .job-info span:last-child:after {display: none;}
.apply-content {display: flex; flex-direction: column; row-gap: 1.2rem; border-bottom: 1px solid #eee; padding-bottom: 2rem;}
.apply-content .title {color: #111; font-size: 1.6rem; font-weight: 700; line-height: 130%; letter-spacing: -0.016px;}
.apply-attach {margin-top: 0.4rem; margin-bottom: 2rem;}
.apply-attach .modal-group .attach-txt {display: flex; align-items: center; justify-content: space-between;}
.apply-attach .modal-group .attach-txt .attach-file-name {color: #111; text-align: right; font-size: 1.4rem; font-weight: 400; line-height: 130%; letter-spacing: -0.014px;}
.apply-attach .modal-group .btn-gray {border-radius: 0.2rem; background-color: #f8f8f8; line-height: 150%; letter-spacing: -0.014px;}

/* 아이디 찾기 모달 */
.modal.find .inner {row-gap: 0;}
.modal.find .inner .modal-header {margin-bottom: 2.4rem;}
.modal.find .inner .modal-body {margin-bottom: 1.4rem;}

/* 이미지 뷰어 모달 */
.modal.image-viewer {background-color: transparent; padding: 0; border-radius: 0; max-height: 70vh; height: 100%;}
.modal.image-viewer .inner {height: 100%; display: flex; flex-direction: column; row-gap: 0.8rem; align-items: center; justify-content: flex-end;}
.modal.image-viewer .inner > div {width: 100%; display: flex; align-items: center; justify-content: flex-end;}
.modal.image-viewer .inner .btn-cancel {background-color: transparent; width: 2.4rem; height: 2.4rem;}
.modal.image-viewer .inner .btn-cancel figure {width: 2.4rem; height: 2.4rem;}
.modal.image-viewer .inner figure {width: 100%; height: 100%;}

/* 단위 표시 */
.price:after {content: '원';}
.point:after {content: 'P';}
.hits:before {content: '조회수';}
.comment:before {content: '댓글'; padding-right: 0.5rem;}
.like:before {content: '좋아요'; padding-right: 0.5rem;}
.progress-cnt:after {content:'개';}
.plus:before {content: '+'; padding-right: 0.7rem;}
.minus:before {content: '-'; padding-right: 0.7rem;}
.person:after {content: '명 지원';}
.deadline:before {content: '마감일';}

@media screen and (max-width: 880px) {
    .pc {display: none;}
    .mobile {display: block;}

    .btn-bk {font-size: 1.2rem; letter-spacing: -0.012px; padding: 0.4rem 1.2rem;}

    .select .select-options {position: fixed; top: auto; bottom: 0; right: 0; margin-top: 0; margin-bottom: 0; z-index: 1002; width: 100%; border-radius: 1.6rem 1.6rem 0 0; box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.12);}
    .select.box-select .select-options {max-height: 27rem;}
    .option {padding: 1.6rem 0; font-size: 1.6rem; color: #111; letter-spacing: -0.016px; text-align: center;}
    .option:first-child {border-top-left-radius: 1.6rem; border-top-right-radius: 1.6rem;}
    .option:last-child {border-bottom-left-radius: 0; border-bottom-right-radius: 0;}

    .modal {width: 30rem; padding: 2.4rem 1.6rem 1.6rem 1.6rem;}
    .modal .modal-body p {color: #111; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}
    .modal.image-viewer {width: 100%;}

    .box-select.brand .select-options {width: 100%; position: absolute; border-radius: 1.6rem; margin-top: 1rem; bottom: auto;}
    .box-select.brand .option-title {font-size: 1.6rem;}
    .box-select.brand .option span {font-size: 1.6rem;}

    .box-select.engine .select-options {width: 100%;}
}

/* ============================== [ header ] ========================================================================================== */
.header {width: 100%; background-color: #222222;}
.header.fixed {position: fixed !important; top: 0; left: 0; right: 0; z-index: 1000; background-color: #fff; color: #111; border-bottom: 1px solid #eee;}
.header .inner {display: flex; align-items: center; justify-content: space-between; max-width: 124rem; margin: 0 auto; padding: 2.4rem 0;}
.header .inner .gnb-menu {display: flex; align-items: center; column-gap: 1.6rem;}
.header .inner .gnb-menu h1 figure {width: 18.1rem; height: 2.1rem;}
.header .inner .gnb-menu .gnb {display: flex; align-items: center;}
.header .inner .gnb-menu .gnb li a {color: #fff; font-size: 1.8rem; font-weight: 600; padding: 0 1.3rem; display: inline-block;}
.header .inner .gnb-menu .gnb li.active a {color: #F1132D;}
.header .inner .user-menu .user-list {display: flex; align-items: center; column-gap: 0.8rem;}
.header .inner .user-menu .user-list li a {width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; position: relative;}
.header .inner .user-menu .user-list li a .badge {position: absolute; top: 1rem; right: 0; padding: 0 0.4rem; border-radius: 1rem; background-color: #F1132D; color: #fff; font-size: 1rem; font-weight: 500; line-height: 12px;}

.header.header-2 {background-color: #fff; border-bottom: 1px solid #eee;}
.header.header-2 .inner .gnb-menu .gnb li a {color: #222;}
.header.header-2 .inner .gnb-menu .gnb li.active a {color: #F1132D;}
.header-search-container {position: relative; padding: 1.2rem; background-color: #F3F3F3; border-radius: 0.8rem; margin-right: 0.4rem;}
.header-search-container:before {content:''; background: url('/assets/image/mobile/icon/ic_search_b.svg') no-repeat; position: absolute; top: 50%; transform: translateY(-50%); left: 1.2rem; width: 2.4rem; height: 2.4rem; z-index: 1;}
.header-search-container input[type="text"] {background-color: #F3F3F3; border: none; padding-left: 3.2rem; font-size: 1.4rem; width: 100%;}

.header.header-3 {background-color: #fff; border-bottom: 0.6rem solid #f7f7f7; position: relative; z-index: 1000;}
.header.header-3.no-border {border-bottom: none;}
.header.header-3.border-1 {border-bottom: none;}
.header.header-3.border-1.fixed {border-bottom: 0.1rem solid #eee;}
.header.header-3 .inner .gnb-menu .gnb li a {color: #222;}
.header.header-3 .inner .gnb-menu .gnb li.active a {color: #F1132D;}

/* 카테고리 메뉴 헤더 */
.category-menu {display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 124rem; margin: 0 auto; padding: 0.8rem 0; position: relative;}
.category-menu-wrapper {position: relative; flex: 1; overflow: hidden; display: flex; align-items: center; column-gap: 1rem; max-width: 112rem; justify-content: space-between;}
.category-menu-list::before,
.category-menu-list::after {content: ''; position: absolute; top: 0; width: 4rem; height: 100%; pointer-events: none; z-index: 1; transition: opacity 0.3s ease;}
.category-menu-list::before {left: 0; background: linear-gradient(to right, #fff, transparent); opacity: 0;}
.category-menu-list::after {right: 4rem; background: linear-gradient(to left, #fff, transparent); opacity: 1;}
.category-menu-list.show-left-fade::before {opacity: 1;}
.category-menu-list.hide-right-fade::after {opacity: 0;}
.category-menu-list {display: flex; align-items: center; overflow-x: scroll; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; cursor: grab; user-select: none; white-space: nowrap;}
.category-menu-list:active {cursor: grabbing;}
.category-menu-list::-webkit-scrollbar {display: none;}
.category-menu-list li {flex-shrink: 0; width: fit-content; height: fit-content;}
.category-menu-list li a {padding: 1.2rem 1.6rem; white-space: nowrap; display: inline-block; color: #999; font-size: 1.4rem; font-weight: 400; line-height: normal; letter-spacing: -0.07px;}
.category-menu-list li.active a {color: #111; font-weight: 700;}

.category-dropdown {position: absolute; top: 120%; right: 12rem; width: 36rem; background-color: #fff; border-radius: 0.8rem; box-shadow: 0 0 12px rgba(0, 0, 0, 0.12); z-index: 1000; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; overflow-y: auto; padding: 1.6rem 0 2.4rem 0;}
.category-dropdown.show {opacity: 1; visibility: visible; transform: translateY(0);}
.category-dropdown ul {display: flex; align-items: center; flex-wrap: wrap;}
.category-dropdown ul li {width: 50%;}
.category-dropdown ul li a {padding: 1.2rem 2rem; color: #999; font-size: 1.4rem; font-weight: 600; display: block; text-decoration: none; line-height: normal; letter-spacing: -0.07px;}
.category-dropdown ul li.active a {color: #111;}
#categoryMenuBtn {transition: transform 0.3s ease;}
#categoryMenuBtn.active {transform: rotate(180deg);}

.mobile-title-wrapper {display: none;}

@media screen and (max-width: 880px) {
    .header .inner {padding: 0.8rem 2rem; max-width: 100%; width: 100%;}
    .header .inner .gnb-menu h1 figure {width: 15.1rem; height: 1.7rem;}
    .header .inner .gnb-menu .gnb {display: none;}
    .header .inner .user-menu .user-list li:last-child {display: none;}
    .header.header-2 {display: none;}
    .header .btn-main {display: none;}
    .header.header-3 {position: fixed; top: 0; left: 0;}
    .header-3 .inner {display: none;}
    .header.header-3.mobile-no-border {border-bottom: none; position: relative;}
    .mobile-title-wrapper {display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 2rem;}
    .mobile-title-wrapper .mobile-title {display: flex; align-items: center; justify-content: space-between; column-gap: 0.8rem;}
    .mobile-title-wrapper .mobile-title figure {width: 2.4rem; height: 2.4rem;}
    .mobile-title-wrapper .mobile-title h2 {font-size: 2rem; color: #111; font-weight: 700; line-height: 130%; letter-spacing: -0.02px;}
    .mobile-title-wrapper .icon-box {display: flex; align-items: center; column-gap: 1.6rem;}
    .mobile-title-wrapper .icon-box a figure {width: 2.4rem; height: 2.4rem;}
    .category-menu {padding: 0 2rem; }
    .category-menu-list li a {padding: 1.2rem;}
    .category-menu-list li:first-child a {padding: 1.2rem 1.2rem 1.2rem 0;}
    .category-dropdown {top: 104%; right: 0; border-radius: 0 0 1.6rem 1.6rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); width: 100%;}
}

/* ============================== [ footer ] ========================================================================================== */
.footer {padding: 3.2rem 0; background-color: #f1f1f1; border-top: 1px solid #eee; margin-top: auto;}
.footer .inner {max-width: 124rem; width: 100%; margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-between;}
.footer .inner .company-box {display: flex; flex-direction: column; row-gap: 1.2rem;}
.footer .inner .company-box figure {width: 16.4rem; height: 1.9rem;}
.footer .inner .company-box .company-info p {color: #888; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.footer .inner .copyright-box {display: flex; flex-direction: column; align-items: flex-end;}
.footer .inner .copyright-box ul {display: flex; align-items: center; column-gap: 1.6rem;}
.footer .inner .copyright-box ul li {position: relative;}
.footer .inner .copyright-box ul li:first-child:after {content: '·'; position: absolute; top: 50%; transform: translateY(-50%); right: -1rem;}
.footer .inner .copyright-box ul li a {color: #555; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.footer .inner .copyright-box p {font-size: 1.2rem; color: #888; font-weight: 400; line-height: 150%; letter-spacing: -0.012px; text-align: right;}

@media screen and (max-width: 880px) {
    .footer {display: none;}
}

/* ============================== [ 모바일 전용 메뉴 ] ========================================================================================== */
.mobile-menu {display: none;}

@media screen and (max-width: 880px) { 
    .mobile-menu {display: block; position: fixed; bottom: 0; left: 0; width: 100%; background-color: #fff; z-index: 1001; border-top: 1px solid #F4F4F4;}
    .mobile-gnb {display: flex; align-items: center; justify-content: center;}
    .mobile-gnb li a {display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 0.2rem; padding: 1rem 0 0.8rem 0; width: 7.2rem;}
    .mobile-gnb li a figure {width: 2.4rem; height: 2.4rem;}
    .mobile-gnb li a span {color: #999; font-size: 1.1rem; font-weight: 400; line-height: normal; letter-spacing: -0.11px;}
    .mobile-gnb li a span.active {color: #222;}
}

/* ============================== [ 마이페이지 오픈 메뉴 mypage ] ========================================================================================== */
.mypage-menu {position: fixed; top: 0; right: -110%; width: 34rem; height: 100vh; z-index: 1000; transition: right 0.3s ease-in-out; display: flex; flex-direction: column; background: #FFF;}
.mypage-menu.open {right: 0;}
.mypage-menu-header {display: flex; justify-content: flex-start; flex-direction: column; align-items: flex-start; background-color: #222222;}
.mypage-menu-header h2 {color: #fff; font-size: 2.4rem; font-weight: 700; line-height: 130%; letter-spacing: -0.024px; padding: 1.25rem 2rem; width: 100%;}
.mypage-menu-header.fixed h2 {position: fixed; top: 0; left: 0; right: 0; z-index: 1000; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); background-color: #fff; color: #111;}
.close-btn {background: none; border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 2.4rem 2rem;}
.mypage-menu-info {display: flex; flex-direction: column; padding: 2rem; width: 100%;}
.mypage-menu-info .info-box {display: flex; align-items: center; justify-content: space-between;}
.mypage-menu-info .info-box .info-txt {display: flex; flex-direction: column; row-gap: 0.6rem;}
.mypage-menu-info .info-box .info-txt span {color: #fff; font-size: 2rem; font-weight: 600; line-height: 130%; letter-spacing: -0.02px;}
.mypage-menu-info .info-box .info-txt p {color: #888888; font-size: 1.4rem; font-weight: 400; line-height: 130%; letter-spacing: -0.014px;}
.mypage-menu-info .info-box a figure {width: 2.4rem; height: 2.4rem;}
.mypage-gnb-group {display: flex; flex-direction: column; padding: 2.4rem 0 0 0; /* flex: 1; */}
.mypage-gnb-group .title {padding-left: 2.1rem; padding-bottom: 0.8rem; font-size: 1.4rem; font-weight: 700; line-height: 130%; letter-spacing: -0.014px; color: #aaa;}
.mypage-gnb > li > a {color: #111; font-size: 1.8rem; font-weight: 600; display: block; padding: 1.6rem 2rem; display: flex; justify-content: space-between;}
.mypage-gnb > li.active > a {color: #F1132D;}
.mypage-gnb > li > a figure {width: 1.6rem; height: 1.6rem;}
.mypage-gnb > li .submenu {display: flex; flex-direction: column; max-height: 0; overflow: hidden; transition: max-height 0.3s ease;}
.mypage-gnb > li.active .submenu {max-height: 300px;}
.mypage-gnb > li .submenu li a {padding: 1.2rem 2rem 1.2rem 4rem; width: 100%; display: inline-block; color: #666; font-size: 1.6rem; font-weight: 400; line-height: 130%; letter-spacing: -0.016px;}
.mypage-gnb > li .submenu li.active a {color: #F1132D;}
.mypage-gnb > li .dropdown-toggle img {transition: transform 0.3s ease;}
.mypage-gnb > li.active .dropdown-toggle img {transform: rotate(180deg);}

@media screen and (max-width: 880px) { 
    .mypage-menu {width: 100%; right: 0; position: relative; height: 100%; padding-bottom: 5.8rem; justify-content: space-between;}
    .mypage-menu.no-mobile {display: none;}
    .mypage-menu-header .close-btn {display: none;}
    .mypage-menu-header h2 {padding: 1.5rem 2rem; font-size: 2rem;}
    .mypage-menu-info {row-gap: 1.6rem;}
    .mypage-menu-info .info-box .info-txt span {font-size: 1.8rem; color: #eee; letter-spacing: -0.018px;}
    .mypage-menu-info .info-box .info-txt p {font-size: 1.2rem; letter-spacing: -0.014px;}
    .mypage-menu .company-container {display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 0.8rem; padding: 2rem 2rem 1.6rem 2rem;}
    .mypage-menu .company-container .company-info {padding: 1.6rem; border-radius: 8px; background: #F7F7F7; width: 100%; display: flex; flex-direction: column; row-gap: 0.4rem;}
    .mypage-menu .company-container .company-info li {display: flex; align-items: center; column-gap: 1.7rem;}
    .mypage-menu .company-container .company-info li span {font-size: 1.2rem; font-weight: 400; line-height: 130%; letter-spacing: -0.012px;}
    .mypage-menu .company-container .company-info li .subject {color: #aaa; width: 11rem;}
    .mypage-menu .company-container .company-info li .txt {color: #777;}
    .mypage-menu .company-container .copyright-box {display: flex; flex-direction: column; row-gap: 0.4rem; text-align: center;}
    .mypage-menu .company-container .copyright-box .privacy-box {display: flex; align-items: center; justify-content: center;}
    .mypage-menu .company-container .copyright-box .privacy-box a {color: #777; text-align: center; font-size: 1.2rem; font-weight: 700; line-height: 150%; letter-spacing: -0.012px;}
    .mypage-menu .company-container .copyright-box .privacy-box a:first-child {padding-right: 1rem; position: relative;}
    .mypage-menu .company-container .copyright-box .privacy-box a:first-child:after {content: '•'; right: 0; position: absolute;}
    .mypage-menu .company-container .copyright-box p {color: #999; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}

    .mypage-menu .account-container {display: flex; align-items: center; column-gap: 1.2rem;}
    .mypage-menu .account-container .account-box {padding: 1.2rem 0.8rem 1.2rem 1.2rem; border-radius: 0.8rem; border: 1px solid #3F3F3F; background: #2F2F2F; width: 50%; display: flex; align-items: center; column-gap: 0.8rem; justify-content: space-between;}
    .mypage-menu .account-container .account-box .account-info {display: flex; flex-direction: column; row-gap: 0.4rem;}
    .mypage-menu .account-container .account-box .account-info .title {color: #888; font-size: 1.2rem; font-weight: 600; line-height: 130%; letter-spacing: -0.012px;}
    .mypage-menu .account-container .account-box .account-info .status {display: flex; align-items: center;}
    .mypage-menu .account-container .account-box .account-info .status figure {width: 1.6rem; height: 1.6rem;}
    .mypage-menu .account-container .account-box .account-info .status span {color: #EEE; font-size: 1.4rem; font-weight: 600; line-height: 130%; letter-spacing: -0.014px;}
    .mypage-menu .account-container .account-box > a figure {width: 1.6rem; height: 1.6rem;}
}

/* ============================== [ 메인 상단 ] ========================================================================================== */
.main-section {background-color: #222;}
.main-section .inner {max-width: 124rem; display: flex; flex-direction: column; margin: 0 auto; padding: 5rem 0;}
.main-section .inner h2 {color: #eee; font-size: 4.8rem; font-weight: 700; letter-spacing: -0.24px; text-align: center; width: 100%;}
.main-section .inner h2 .txt-red {color: #F1132D;}
.main-section .main-menu {margin-top: 2.4rem; margin-bottom: 3.5rem;}
.main-section .main-menu-list {display: flex; align-items: center; justify-content: center;}
.main-section .main-menu-list li {width: 14rem;}
.main-section .main-menu-list li a {width: 100%; display: flex; flex-direction: column; padding: 1.45rem 2.4rem; align-items: center; justify-content: center;}
.main-section .main-menu-list li:first-child a figure {width: 9.2rem; height: 9.2rem;}
.main-section .main-menu-list li:nth-child(2) a figure {width: 6.7rem; height: 9.2rem;}
.main-section .main-menu-list li:nth-child(3) a figure {width: 6.3rem; height: 9.2rem;}
.main-section .main-menu-list li:last-child a figure {width: 6rem; height: 9.2rem; margin-left: 2rem;}
.main-section .main-menu-list li a span {color: #eee; font-size: 1.6rem; font-weight: 400; line-height: normal; letter-spacing: -0.08px;}
.main-section .main-search-container {width: 82rem; margin: 0 auto; position: relative;}
.main-section .main-search-container input[type="text"].main-search {border-radius: 0.8rem; border: 1px solid #3f3f3f; background-color: #2f2f2f; padding: 2.4rem 2.4rem 2.4rem 6rem; width: 100%; color: #eee;}
.main-section .main-search-container input[type="text"].main-search::placeholder {color: #808080; font-size: 1.6rem; font-weight: 400; letter-spacing: -0.08px;}
.main-section .main-search-container figure {width: 2.4rem; height: 2.4rem; position: absolute; top: 50%; transform: translateY(-50%); left: 2.4rem;}
.main-section .main-sub-menu {display: flex; align-items: center; max-width: 124rem; justify-content: space-between; margin-top: 5.6rem; position: relative; column-gap: 2rem;}
.main-section .main-sub-menu.under-10 {justify-content: center;}
.main-section .main-sub-menu .arrow {border-radius: 100%; background-color: #e3e3e3; padding: 0.85rem 0.7rem 0.75rem 0.9rem; height: 3.2rem; width: 3.2rem;}
.main-section .main-sub-menu .arrow figure {width: 1.6rem; height: 1.6rem;}
.main-section .main-sub-list-wrapper {position: relative; flex: 1; overflow: hidden;}
.main-sub-list-wrapper::before,
.main-sub-list-wrapper::after {content: ''; position: absolute; top: 0; width: 3rem; height: 100%; pointer-events: none; z-index: 1; transition: opacity 0.3s ease;}
.main-sub-list-wrapper::before {left: 0; background: linear-gradient(to right, #222, transparent); opacity: 0;}
.main-sub-list-wrapper::after {right: 0; background: linear-gradient(to left, #222, transparent); opacity: 1;}
.main-sub-list-wrapper.show-left-fade::before {opacity: 1;}
.main-sub-list-wrapper.hide-right-fade::after {opacity: 0;}
.main-section .main-sub-list {display: flex; align-items: center; column-gap: 4rem; overflow-x: scroll; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; cursor: grab; user-select: none;}
.main-section .main-sub-list:active {cursor: grabbing;}
.main-section .main-sub-list::-webkit-scrollbar {display: none;}
.main-section .main-sub-list li a {display: flex; flex-direction: column; align-items: center; justify-content: space-between; row-gap: 0.2rem; height: 7.9rem;}
.main-section .main-sub-list li a div {width: 6.1rem; height: 6rem; display: flex;}
.main-section .main-sub-list li a.code div {padding: 1.65rem 0.35rem;}
.main-section .main-sub-list li a.car div {padding: 1.65rem 0.4rem 1.35rem 0.65rem;}
.main-section .main-sub-list li a.engine div {padding: 1.2rem 0.7rem 1.5rem 0.8rem;}
.main-section .main-sub-list li a.tire div {padding: 0.9rem 0.85rem 0.9rem 0.95rem;}
.main-section .main-sub-list li a span {color: #e3e3e3; font-size: 1.4rem; font-weight: 400; line-height: normal; letter-spacing: -0.07px;}

@media screen and (max-width: 880px) {
    .main-section .inner {max-width: 100%; width: 100%; padding: 0.6rem 0 2.6rem 0;}
    .main-section .inner h2 {display: none;}
    .main-section .main-menu {margin-top: 0; border-bottom: 2.4rem;}
    .main-section .main-menu-list {column-gap: 1.6rem;}
    .main-section .main-menu-list li {width: 6.8rem; height: 8.5rem;}
    .main-section .main-menu-list li a {padding: 0;}
    .main-section .main-menu-list li:first-child a figure {width: 4.8rem; height: 6.8rem;}
    .main-section .main-menu-list li:nth-child(2) a figure {width: 3.8rem; height: 6.8rem;}
    .main-section .main-menu-list li:nth-child(3) a figure {width: 3.6rem; height: 6.8rem;}
    .main-section .main-menu-list li:last-child a figure {width: 3.4rem; height: 6.8rem; margin-left: 1rem;}
    .main-section .main-menu-list li a span {font-size: 1.4rem;}
    .main-section .main-search-container {width: 100%; max-width: 55rem; padding: 0 2rem;}
    .main-section .main-search-container input[type="text"].main-search {padding: 1.2rem 1.2rem 1.2rem 4.4rem;}
    .main-section .main-search-container figure {left: 3.4rem;}
    .main-section .main-sub-menu {margin-top: 1.6rem; width: 100%;}
    .main-sub-list-wrapper::before {display: none;}
    .main-sub-list-wrapper.hide-right-fade::after {display: none;}
    .main-section .main-sub-menu .arrow {display: none;}
    .main-section .main-sub-list {flex-wrap: wrap; width: 100%; padding: 0 2rem; justify-content: center; row-gap: 2rem; column-gap: 1.2rem;}
    .main-section .main-sub-list li a {height: 100%;}
    .main-section .main-sub-list li a div {display: flex; align-items: center; justify-content: center; height: 4rem; width: 5.4rem;}
    .main-section .main-sub-list li a.code div figure {width: 3.8rem;}
    .main-section .main-sub-list li a.standard div figure {width: 3.1rem;}
    .main-section .main-sub-list li a.car div figure {width: 3.3rem;}
    .main-section .main-sub-list li a.engine div figure {width: 3rem;}
    .main-section .main-sub-list li a.tire div figure {width: 2.8rem;}
    .main-section .main-sub-list li a span {font-size: 1.2rem;}
}

/* ============================== [ 메인 컨텐츠영역 ] ========================================================================================== */
.content-section {max-width: 124rem; margin: 0 auto; display: flex; align-items: flex-start;}
.content-section .content-box {display: grid; grid-template-columns: 80rem 1fr; gap: 4rem 8rem; padding-top: 4rem; position: relative;}
.content-section .content-box:after {content: ''; width: 1px; height: 100%; background-color: #F3F3F3; position: absolute; top: 0; left: calc(80rem + 4rem);}
.banner-area {grid-column: 1; grid-row: 1; position: relative;}
.market {grid-column: 1; grid-row: 2;}
.sos {grid-column: 2; grid-row: 1 / 5; padding-bottom: 8rem;}
.job {grid-column: 1; grid-row: 3;}
.mySwiper .swiper-slide {width: 100%; border-radius: 1rem; overflow: hidden;}
.banner-area .swiper-pagination-custom {position: absolute; bottom: 1.6rem; left: auto; right: 1.6rem; z-index: 10; width: fit-content; background: rgba(68, 68, 68, 0.6); color: #fff; padding: 0.4rem 0.8rem; border-radius: 1rem; font-size: 1.2rem; font-weight: 400;}
.list-area {display: flex; flex-direction: column; row-gap: 1.6rem;}
.title-box {display: flex; align-items: flex-end; justify-content: space-between;}
.title-box .txt-title {display: flex; flex-direction: column; row-gap: 0.4rem;}
.title-box .txt-title .category {color: #F1132D; font-size: 1.6rem; font-weight: 700; line-height: normal; letter-spacing: -0.08px;}
.title-box .txt-title .title {color: #222; font-size: 2.4rem; font-weight: 700; line-height: normal; letter-spacing: -0.12px;}
.title-box .txt-title p {color: #888; font-size: 1.4rem; font-weight: 400; line-height: normal; letter-spacing: -0.07px;}
.title-box .more-area a {display: flex; align-items: center; column-gap: 0.2rem; height: 2rem;}
.title-box .more-area a span {color: #888; font-size: 1.4rem; font-weight: 400; line-height: normal; letter-spacing: -0.014px;}
.title-box .more-area a figure {width: 1.6rem; height: 1.6rem;}

/* 메인, 재능마켓(market_list.html)에서 같이 사용 중 */
.product-list {display: flex; flex-wrap: wrap; column-gap: 1.6rem; row-gap: 2.4rem;}
.product-list li {width: calc(34% - 1.6rem);}
.product-list li a {display: flex; flex-direction: column;}
.product-list li a figure {width: 100%; height: 19.2rem; border-radius: 0.4rem; overflow: hidden;}
.product-list li a figure img {object-fit: cover;}
.product-list li a .txt-box {padding: 0.8rem 0.2rem; display: flex; flex-direction: column; row-gap: 0.4rem;}
.product-list li a .txt-box .category {color: #F1132D; font-size: 1.2rem; font-weight: 600; line-height: normal; letter-spacing: -0.06px;}
.product-list li a .txt-box .subject {color: #111; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; align-self: stretch; text-overflow: ellipsis; font-size: 1.6rem; font-weight: 400; line-height: normal; letter-spacing: -0.08px;}
.product-list li a .txt-box .price-box {display: flex; align-items: center; column-gap: 0.4rem;}
.product-list li a .txt-box .price-box .percent {color: #FF0F2B; font-size: 1.6rem; font-weight: 600; line-height: normal; letter-spacing: -0.08px;}
.product-list li a .txt-box .price-box .price {color: #111; font-size: 1.6rem; font-weight: 600; line-height: normal; letter-spacing: -0.08px;}
.product-list li a .txt-box .price-box .price:after {font-size: 1.6rem; font-weight: 600; line-height: normal; letter-spacing: -0.08px;}
.product-list li a .txt-box .txt-info span {color: #888; font-size: 1.2rem; font-weight: 400; line-height: normal; letter-spacing: -0.06px;}
.product-list.style-2 li a figure {height: 17.8rem;}
.product-list.style-2 li a .txt-box {padding: 0.8rem 0.4rem;}
.product-list li a .txt-box .category-group {display: flex; align-items: center; column-gap: 0.4rem; margin-bottom: 0.4rem;}
.product-list li a .txt-box .category-group .emergency {padding: 0.4rem 0.8rem; border-radius: 0.4rem; background-color: #F1132D; color: #eee; font-size: 1.1rem; font-weight: 600; line-height: normal; letter-spacing: -0.055px;}
.product-list li a .txt-box .category-group .group {padding: 0.4rem 0.8rem; border-radius: 0.4rem; background-color: #E4E4E4; color: #252525; font-size: 1.1rem; font-weight: 600; line-height: normal; letter-spacing: -0.055px;}
.product-list li a .txt-box .company {color: #555; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; align-self: stretch; text-overflow: ellipsis; font-size: 1.2rem; font-weight: 600; line-height: normal; letter-spacing: -0.06px;}
.product-list.style-2 li a .txt-box .subject {font-weight: 600;}

.product-list li.stop-selling {position: relative;}
.product-list li.stop-selling a figure {position: relative;}
.product-list li.stop-selling a figure:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: lightgray; opacity: 0.5;}
.product-list li.stop-selling a figure:after {content: '판매중지'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; padding: 0.4rem 0.8rem; color: #eee; font-size: 1.6rem; font-weight: 400; line-height: normal; letter-spacing: -0.08px; border-radius: 0.4rem; background-color: #222;}
.product-list li.stop-selling a .txt-box .category {color: #999;}
.product-list li.stop-selling a .txt-box .subject {color: #999;}
.product-list li.stop-selling a .txt-box .price-box .percent {color: #999;}
.product-list li.stop-selling a .txt-box .price-box .price {color: #999;}
.product-list li.stop-selling a .txt-box .price-box .org-price {color: #999;}
.product-list li.stop-selling a .txt-box .txt-info span {color: #999;}

.main-txt-list {display: flex; flex-direction: column; row-gap: 1.6rem; width: 100%;}
.main-txt-list li a {padding: 2rem; display: flex; flex-direction: column; row-gap: 1.2rem; border-radius: 0.4rem; border: 1px solid #eee; background-color: #fff;}
.main-txt-list li a .subject-txt {display: flex; flex-direction: column; row-gap: 0.8rem;}
.main-txt-list li a .subject-txt .category {padding: 0.4rem 0.8rem; border-radius: 0.4rem; background-color: #F3F3F3; border: 1px solid #f0f0f0; width: fit-content; color: #7b7b7b; font-size: 1.2rem; font-weight: 400; line-height: normal; letter-spacing: -0.06px;}
.main-txt-list li a .subject-txt p {font-size: 1.6rem; font-weight: 700; color: #222; line-height: 140%; letter-spacing: -0.08px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; align-self: stretch; text-overflow: ellipsis;}
.main-txt-list li a .content-txt p {color: #666; text-overflow: ellipsis; font-size: 1.4rem; font-weight: 400; line-height: 140%; letter-spacing: -0.07px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; align-self: stretch; text-overflow: ellipsis;}

@media screen and (max-width: 880px) {
    .content-section {padding-bottom: 5.8rem;}
    .content-section .content-box {grid-template-columns: 1fr; width: 100%; display: flex; padding: 0; flex-direction: column; gap: 0;}
    .content-section .content-box:after {display: none;}
    .mySwiper .swiper-slide {border-radius: 0;}
    .banner-area .swiper-pagination-custom {bottom: 0.8rem; right: 0.8rem;}
    .list-area {padding-left: 2rem; padding-top: 3.2rem;}
    .list-area.market, .list-area.job {background-color: #F5F5F5; padding-bottom: 3.9rem;}
    .list-area.sos {padding-bottom: 3.2rem;}
    .title-box {padding-right: 2rem;}
    .title-box .txt-title .category {font-size: 1.4rem; margin-bottom: 0.4rem;}
    .title-box .txt-title .title {font-size: 2rem;}
    .title-box .more-area a span {font-size: 1.2rem;}
    .list-area {overflow: hidden;}
    .list-area .product-list {display: grid; grid-template-rows: repeat(2, 1fr); grid-auto-flow: row; grid-template-columns: repeat(3, 23.7rem); gap: 2.3rem 1.2rem; overflow-x: scroll; scrollbar-width: none; -ms-overflow-style: none; padding-right: 2rem;}
    .list-area .product-list::-webkit-scrollbar {display: none;}
    .list-area .product-list li {width: 23.7rem;}
    .main-txt-list {display: grid; grid-template-rows: repeat(2, 1fr); grid-auto-flow: row; grid-template-columns: repeat(5, 23.7rem); gap: 1.6rem 1.2rem; overflow-x: scroll; scrollbar-width: none; -ms-overflow-style: none; padding-right: 2rem;}
    .main-txt-list li a .subject-txt .category {font-size: 1.1rem;}

    .product-list li.stop-selling a figure:after {font-size: 1.1rem; letter-spacing: -0.055px;}
}

/* ============================== [ 알림 내역 - alarm.html ] ========================================================================================== */
.alarm-main {max-width: 124rem; margin: 0 auto; padding-top: 4.8rem; flex: 1; width: 100%;}
.alarm-main .title-container h2 {color: #222; font-size: 3.2rem; font-weight: 700; line-height: normal; letter-spacing: -0.16px;}
.alarm-main .title-container .mobile-title {display: none;}
.alarm-main .tab-container {display: flex; align-items: center; justify-content: space-between; margin-top: 3.2rem;}
.alarm-main .tab-container .tab-buttons {display: flex; align-items: center; column-gap: 1.2rem;}
.alarm-main .tab-container .tab-buttons .tab-btn {padding: 0.8rem 1.2rem; border: 1px solid #DDD; background-color: #fff; border-radius: 0.4rem; color: #111; font-size: 1.4rem; font-weight: 500; line-height: normal; letter-spacing: -0.07px;}
.alarm-main .tab-container .tab-buttons .tab-btn.active {border: 0.5px solid #A90619; background-color: #F1132D; color: #fff; font-weight: 700;}
.alarm-main .tab-container .all-read {padding: 0.6rem 0.4rem; background-color: #fff; color: #aaa; font-size: 1.4rem; font-weight: 500; line-height: normal; letter-spacing: -0.07px; text-decoration: underline;}
.alarm-main .tab-contents-wrapper {margin-top: 2.4rem; margin-bottom: 6rem;}
.alarm-main .tab-contents-wrapper .tab-contents .tab-content {opacity: 0; display: none;}
.alarm-main .tab-contents-wrapper .tab-contents .tab-content.active {opacity: 1;}
.alarm-main .alarm-list {display: flex; flex-direction: column; row-gap: 1.2rem;}
.alarm-main .alarm-list li {padding-top: 1.2rem;}
.alarm-main .alarm-list li a {display: flex; flex-direction: column; row-gap: 0.4rem;}
.alarm-main .alarm-list li a .alarm-type {display: flex; align-items: center; justify-content: space-between;}
.alarm-main .alarm-list li a .alarm-type .category {color: #585858; font-size: 1.4rem; font-weight: 700; line-height: 150%; letter-spacing: -0.014px; position: relative; width: fit-content; z-index: -1;}
.alarm-main .alarm-list li a.no-read .alarm-type .category:after {content:''; width: 0.4rem; height: 0.4rem; background-color: #F1132D; border-radius: 100%; position: absolute; top: 0; right: -0.8rem;}
.alarm-main .alarm-list li a .alarm-type .date {color: #aaa; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}
.alarm-main .alarm-list li a .alarm-content {color: #111; font-size: 1.6rem; font-weight: 700; line-height: 150%; letter-spacing: -0.016px;}
.alarm-main .content-container.empty {width: 100%; display: flex; align-items: center; justify-content: center; margin: 17.5rem 0;}
.alarm-main .content-container.empty .empty-box {display: flex; flex-direction: column; row-gap: 1.6rem; align-items: center; justify-content: center;}
.alarm-main .content-container.empty .empty-box figure {width: 13.6rem; height: 13.6rem;}
.alarm-main .content-container.empty .empty-box span {color: #999; font-size: 1.8rem; font-weight: 400; line-height: 130%; letter-spacing: -0.018px;}

@media screen and (max-width: 880px) {
    .alarm-main {padding-top: 0;}
    .alarm-main .title-container {position: fixed; top: 0; background-color: #fff; width: 100%;}
    .alarm-main .title-container > h2 {display: none;}
    .alarm-main .title-container .mobile-title {display: flex; align-items: center; column-gap: 0.8rem; padding: 1.5rem 2rem;}
    .alarm-main .title-container .mobile-title.fixed {border-bottom: 1px solid #eee;}
    .alarm-main .title-container .mobile-title figure {width: 2.4rem; height: 2.4rem;}
    .alarm-main .title-container .mobile-title h2 {font-size: 2rem; line-height: 130%; letter-spacing: -0.02px;}
    .alarm-main .tab-container {margin-top: 6.4rem; padding: 0 2rem;}
    .alarm-main .tab-container .tab-buttons .tab-btn {font-size: 1.3rem; letter-spacing: -0.065px;}
    .alarm-main .content-container.empty {margin: 0;}
    .alarm-main .content-container.empty .empty-box {margin: 10rem auto;}
    .alarm-main .content-container.empty .empty-box span {font-size: 1.6rem; letter-spacing: -0.016px;}
    .alarm-main .tab-contents-wrapper {margin-top: 1.6rem; padding: 0 2rem;}
    .alarm-main .alarm-list li {padding: 0.4rem 0;}
    .alarm-main .alarm-list li a .alarm-type .date {font-size: 1.2rem; letter-spacing: -0.012px;}
}

/* ============================== [ 서브 공통 ] ========================================================================================== */
.sub-main {max-width: 124rem; margin: 0 auto; padding: 4.8rem 0 10rem 0; flex: 1; width: 100%;}
.sub-main .title-container {display: flex; flex-direction: column; row-gap: 0.7rem;}
.sub-main .title-container.mobile {display: none;}
.sub-main .title-container h2 {font-size: 3.2rem; font-weight: 700; line-height: normal; letter-spacing: -0.16px; color: #222;}
.sub-main .title-container h2 .keyword {position: relative;}
.sub-main .title-container h2 .keyword:before {content: "'";}
.sub-main .title-container h2 .keyword:after {content: "'";}
.sub-main .title-container p {font-size: 1.6rem; color: #888; font-weight: 400; line-height: normal; letter-spacing: -0.08px;}
.sub-main .filter-wrapper {display: flex; align-items: center; justify-content: space-between; margin-top: 3.2rem; margin-bottom: 1.6rem; position: relative;}
.sub-main .filter-wrapper .filter-box {display: flex; align-items: center; column-gap: 1.2rem;}
.sub-main .filter-wrapper .filter-box .filter-list {display: flex; align-items: center; column-gap: 1.2rem;}
.sub-main .filter-wrapper .filter-box .filter-list li a {padding: 0.8rem 1.2rem; border-radius: 0.4rem; border: 1px solid #DDD; background-color: #fff; color: #111; font-size: 1.4rem; font-weight: 500; line-height: normal; letter-spacing: -0.07px; display: inline-block;}
.sub-main .filter-wrapper .filter-box .filter-list li.active a {border: 0.5px solid #A90619; background-color: #F1132D; color: #fff;}

.sub-main .sort-wrapper {display: flex; align-items: center; justify-content: space-between;}
.sub-main .sort-wrapper .list-count p {color: #888; font-size: 1.4rem; font-weight: 400; letter-spacing: -0.07px;}

.sub-main .title-container.add {display: flex; justify-content: space-between; align-items: center; flex-direction: row;}
.sub-main .title-container.add .title-txt-box {display: flex; flex-direction: column; row-gap: 0.7rem;}

.sub-main-2 {max-width: 124rem; margin: 0 auto; padding: 4.8rem 0 10rem 0; width: 100%;}
.sub-main-2 .title-container h2 {font-size: 3.2rem; font-weight: 700; line-height: normal; letter-spacing: -0.16px; color: #222;}
.sub-main-2 .sort-wrapper {display: flex; align-items: center; justify-content: space-between;}
.sub-main-2 .sort-wrapper .list-count p {color: #888; font-size: 1.4rem; font-weight: 400; letter-spacing: -0.07px;}
.sub-main-2 .filter-wrapper {display: flex; align-items: center; justify-content: space-between; margin-top: 3.2rem; margin-bottom: 1.6rem; position: relative;}
.sub-main-2 .filter-wrapper .filter-box {display: flex; align-items: center; column-gap: 1.2rem;}
.sub-main-2 .filter-wrapper .filter-box .filter-list {display: flex; align-items: center; column-gap: 1.2rem;}
.sub-main-2 .filter-wrapper .filter-box .filter-list li a {padding: 0.8rem 1.2rem; border-radius: 0.4rem; border: 1px solid #DDD; background-color: #fff; color: #111; font-size: 1.4rem; font-weight: 500; line-height: normal; letter-spacing: -0.07px; display: inline-block;}
.sub-main-2 .filter-wrapper .filter-box .filter-list li.active a {border: 0.5px solid #A90619; background-color: #F1132D; color: #fff;}

.sub-main-3 {background-color: #FAFAFA;}
.sub-main-3 .inner {max-width: 61rem; margin: 0 auto; padding: 4.8rem 0 13.9rem; display: flex; flex-direction: column; row-gap: 2.4rem;}
.sub-main-3 .inner .title-container.pc {display: flex; flex-direction: column; row-gap: 1.1rem;}
.sub-main-3 .inner .title-container.pc .category {color: #F1132D; font-size: 1.8rem; font-weight: 700; line-height: normal; letter-spacing: -0.09px;}
.sub-main-3 .inner .title-container.pc h2 {color: #111; font-size: 3rem; font-weight: 700; line-height: 130%; letter-spacing: -0.03px;}

.sub-main-4 {background-color: #FAFAFA;}
.sub-main-4 .inner {max-width: 82rem; margin: 0 auto; padding: 4.8rem 0 20rem; display: flex; flex-direction: column; row-gap: 2.4rem;}
.sub-main-4 .inner .title-container {display: flex; flex-direction: column; row-gap: 0.7rem;}
.sub-main-4 .inner .title-container h2 {color: #222; font-size: 3.2rem; font-weight: 700; line-height: normal; letter-spacing: -0.16px;}
.sub-main-4 .inner .title-container .exp-box {display: flex; align-items: center; justify-content: space-between; width: 100%;}
.sub-main-4 .inner .title-container .exp-box p {color: #888; font-size: 1.6rem; font-weight: 400; line-height: normal; letter-spacing: -0.08px;}
.sub-main-4 .inner .title-container .exp-box .btn-box {width: fit-content; display: flex; align-items: center; column-gap: 1rem;}
.sub-main-4 .inner .title-container .exp-box .btn-box .btn-wh {padding: 0.4rem 1.2rem; border-radius: 0.2rem; color: #888; font-size: 1.2rem; font-weight: 600; line-height: 150%; letter-spacing: -0.012px;}

.sub-main-5 .title-inner {max-width: 124rem; margin: 0 auto; padding-top: 4.8rem;}
.sub-main-5 .title-inner .title-container.mobile {display: none;}
.sub-main-5 .title-inner .title-container {display: flex; align-items: center; justify-content: space-between;}
.sub-main-5 .title-inner .title-container h2 {font-size: 3.2rem; font-weight: 700; line-height: normal; letter-spacing: -0.16px; color: #222;}
.sub-main-5 .title-inner .title-container h2 .keyword {position: relative;}
.sub-main-5 .title-inner .title-container h2 .keyword:before {content: "'";}
.sub-main-5 .title-inner .title-container h2 .keyword:after {content: "'";}
.sub-main-5 .filter-wrapper {display: flex; align-items: center; justify-content: space-between; position: relative; max-width: 124rem; width: 100%; margin: 0 auto; margin-top: 3.2rem;}
.sub-main-5 .filter-wrapper .filter-box {display: flex; align-items: center; column-gap: 1.2rem;}
.sub-main-5 .filter-wrapper .filter-box .filter-list {display: flex; align-items: center; column-gap: 1.2rem;}
.sub-main-5 .filter-wrapper .filter-box .filter-list li a {padding: 0.8rem 1.2rem; border-radius: 0.4rem; border: 1px solid #DDD; background-color: #fff; color: #111; font-size: 1.4rem; font-weight: 500; line-height: normal; letter-spacing: -0.07px; display: inline-block;}
.sub-main-5 .filter-wrapper .filter-box .filter-list li.active a {border: 0.5px solid #A90619; background-color: #F1132D; color: #fff;}
.sub-main-5 .sort-wrapper {display: flex; align-items: center; justify-content: space-between;}
.sub-main-5 .sort-wrapper .list-count p {color: #888; font-size: 1.4rem; font-weight: 400; letter-spacing: -0.07px;}

.sub-main-6 {display: flex; flex-direction: column;}

.filter-dropdown {position: absolute; top: 100%; left: 0; background-color: #fff; border-radius: 0.8rem; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12); z-index: 1002; display: none; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; margin-top: 1.6rem; width: 67.2rem;}
.filter-dropdown.show {opacity: 1; visibility: visible; transform: translateY(0); display: flex; row-gap: 2.4rem; flex-direction: column;}
.filter-dropdown .close-btn {display: none;}
.filter-dropdown .inner {display: flex; flex-direction: column; row-gap: 2.4rem;}
.filter-group {display: flex; flex-direction: column; row-gap: 1.2rem; padding: 0 2rem;}
.filter-group:first-child {padding-top: 2.4rem;}
.filter-group h4 {color: #111; font-size: 1.8rem; font-weight: 600; line-height: normal; letter-spacing: -0.09px;}
.filter-options {display: flex; align-items: center; flex-wrap: wrap; gap: 0.8rem;}
.filter-options label {position: relative; cursor: pointer;}
.filter-options input[type="checkbox"],
.filter-options input[type="radio"] {display: none;}
.filter-options label {padding: 0.8rem 1.2rem; border-radius: 0.4rem; border: 1px solid #DDD; background-color: #fff; color: #111; font-size: 1.3rem; font-weight: 500; line-height: normal; letter-spacing: -0.065px; transition: all 0.2s ease; user-select: none;}
.filter-options label:hover {border-color: #ccc;}
.filter-options input[type="checkbox"]:checked + label,
.filter-options input[type="radio"]:checked + label {border: 0.5px solid #A90619; background-color: #F1132D; color: #fff; font-weight: 600;}
.filter-group.location input[type="radio"] + label,
.filter-group.location input[type="checkbox"] + label {width: 7.2rem; padding: 0.8rem; text-align: center; justify-content: center; display: flex; align-items: center;}
.filter-group.experience input[type="checkbox"] + label,
.filter-group.experience input[type="radio"] + label {width: 7.2rem; padding: 0.8rem 0; text-align: center; justify-content: center; display: flex; align-items: center;}
.filter-group.salary input[type="checkbox"] + label,
.filter-group.salary input[type="radio"] + label {min-width: 10rem; padding: 0.8rem; text-align: center; justify-content: center; display: flex; align-items: center;}
.filter-btn-box {display: flex; align-items: center; column-gap: 1.2rem; padding: 2rem; border-top: 1px solid #eee;}
.filter-btn-box .btn-main {border-radius: 0.4rem; width: calc(100% - 10rem); justify-content: center;}
.filter-btn-box .btn-main span {font-size: 1.6rem;}
.filter-btn-box .btn-normal span {font-size: 1.6rem; line-height: 150%; letter-spacing: -0.016px;}

.btn-box {width: 100%;}

@media screen and (max-width: 880px) {
    .sub-main {padding: 2.4rem 2rem;}
    .sub-main.no-padding {padding: 0; padding-top: 10rem;}
    .sub-main.no-padding.no-header {padding: 0;}
    .sub-main.no-padding .title-container {padding: 2.4rem 2rem 0 2rem;}
    .sub-main.no-padding .title-container.pc {display: none;}
    .sub-main.no-padding .sort-wrapper {padding: 0 2rem;}
    .sub-main.no-padding .filter-wrapper {padding-left: 2rem;}
    .sub-main .title-container h2 {font-size: 2rem; letter-spacing: -0.1px;}
    .sub-main .title-container p {font-size: 1.4rem; letter-spacing: -0.07px;}
    .sub-main .filter-wrapper {overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 0.5rem; margin: 1.6rem 0;}
    .sub-main .filter-wrapper::-webkit-scrollbar {display: none;}
    .sub-main .filter-wrapper .filter-box {white-space: nowrap; flex-shrink: 0;}
    .sub-main .filter-wrapper .filter-box .filter-list {white-space: nowrap;}
    .sub-main .filter-wrapper .filter-box .filter-list li {flex-shrink: 0;}
    .sub-main .filter-wrapper .filter-box .btn-reset {flex-shrink: 0;}
    .sub-main .filter-wrapper .btn-gray {flex-shrink: 0; margin-left: 1.2rem;}
    
    .sub-main-2 .filter-wrapper {overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 0.5rem; margin: 1.6rem 0;}
    .sub-main-2 .filter-wrapper::-webkit-scrollbar {display: none;}
    .sub-main-2 .filter-wrapper .filter-box {white-space: nowrap; flex-shrink: 0;}
    .sub-main-2 .filter-wrapper .filter-box .filter-list {white-space: nowrap;}
    .sub-main-2 .filter-wrapper .filter-box .filter-list li {flex-shrink: 0;}
    .sub-main-2 .filter-wrapper .filter-box .btn-reset {flex-shrink: 0;}
    .sub-main-2 .filter-wrapper .btn-gray {flex-shrink: 0; margin-left: 1.2rem;}

    .sub-main-3 {background-color: #fff;}
    .sub-main-3 .inner {width: 100%; padding: 0; padding-bottom: 9rem; row-gap: 0;}
    .sub-main-3 .inner .title-container.pc {display: none;}

    .sub-main-4 .inner .title-container.pc {display: none;}
    .sub-main-4 .inner {padding: 0;}

    .sub-main-5 {padding: 0;}
    .sub-main-5 .title-inner {padding: 0;}
    .sub-main-5 .title-inner .title-container.pc {display: none;}
    .sub-main-5 .title-inner .title-container.mobile {display: block;}
    .sub-main-5 .title-inner .title-container.mobile .search-box {display: flex; align-items: center; column-gap: 0.8rem;}
    .sub-main-5 .title-inner .title-container.mobile .search-box a {width: 2.4rem; height: 2.4rem; padding: 0; column-gap: 0;}
    .sub-main-5 .title-inner .title-container.mobile .search-box a figure {width: 100%; height: 100%;}
    .sub-main-5 .title-inner .title-container.mobile .search-box .header-search-container {width: calc(100% - 2.4rem); margin-right: 0; margin: 0.4rem 0;}
    .sub-main-5 .title-inner .title-container.mobile .search-box .header-search-container .header-search {width: 100%;}
    .sub-main-5 .filter-wrapper {overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; margin: 1.6rem 0 0.8rem 0; padding-left: 2rem;}
    .sub-main-5 .filter-wrapper::-webkit-scrollbar {display: none;}
    .sub-main-5 .filter-wrapper .filter-box .filter-list {white-space: nowrap;}
    .sub-main-5 .filter-wrapper .filter-box .filter-list li {flex-shrink: 0;}
    .sub-main-5 .filter-wrapper .filter-box .btn-reset {flex-shrink: 0;}

    .sub-main-6 {margin-top: 10rem;}
    .sub-main-6.no-margin {margin-top: 0;}

    .filter-dropdown {position: fixed; width: 100%; top: auto; bottom: 0; max-height: 100svh; border-radius: 1.6rem 1.6rem 0 0;}
    .filter-dropdown .inner {overflow-y: scroll; width: 100%;}
    .filter-dropdown .close-btn {display: block; padding: 0; position: absolute; top: 2rem; right: 2rem;}

    .sub-main .title-container.add .btn-gray {display: none;}
}

/* ============================== [ 재능마켓 market_list.html ] ========================================================================================== */
/* 메인에 product-list 상속 받아서 사용 */
.market-container {padding: 0 0 3rem 0;}
.market-container .product-list {gap: 2.4rem 2rem; margin-top: 2rem;}
.market-container .product-list li {width: calc(25% - 1.5rem);}
.market-container .product-list li a .txt-box .price-box .org-price {color: #C9C9C9; font-size: 1.4rem; font-weight: 600; line-height: normal; letter-spacing: -0.07px; text-decoration: line-through;}

@media screen and (max-width: 880px) {
    .market-container {padding: 0 2rem 3rem 2rem;}
    .market-container .product-list {row-gap: 1.6rem;}
    .market-container .product-list li {width: 100%;}
    .market-container .product-list li a {flex-direction: row; column-gap: 1.2rem;}
    .market-container .product-list li a figure {width: 14rem; height: 10.5rem;}
    .market-container .product-list li a figure img {aspect-ratio: 4/3;}
    .market-container .product-list li a .txt-box {width: calc(100% - 15.2rem); padding: 0.4rem 0;}
    .market-container .product-list li a .txt-box .subject {-webkit-line-clamp: 2; font-size: 1.4rem;}
    .market-container .product-list li a .txt-box .txt-info span {font-size: 1.1rem;}
    .btn-location {display: none;}
}

/* ============================== [ 재능마켓_상세 market_detail.html ] ========================================================================================== */
.product-container {display: flex; align-items: stretch; column-gap: 8rem; max-width: 124rem; margin: 0 auto; margin-top: 4.8rem;}
.product-container .product-detail {width: calc(100% - 44rem); display: flex; flex-direction: column; justify-content: space-between;}
.product-container .product-detail .product-info {display: flex; flex-direction: column; column-gap: 0.8rem;}
.product-container .product-detail .product-info .category {color: #F1132D; font-size: 2rem; font-weight: 600; line-height: normal; letter-spacing: -0.1px;}
.product-container .product-detail .product-info h3 {color: #111; font-size: 3.2rem; font-weight: 700; line-height: 140%; letter-spacing: -0.16px;}
.product-container .product-detail .product-info p {color: #888; font-size: 1.6rem; font-weight: 400; line-height: 140%; letter-spacing: -0.08px;}
.product-container .product-detail .product-price {display: flex; align-items: center; column-gap: 0.4rem;}
.product-container .product-detail .product-price .percent {color: #F1132D; font-size: 3.2rem; font-weight: 700; line-height: normal; letter-spacing: -0.16px;}
.product-container .product-detail .product-price .price {position: relative; color: #111; font-size: 3.2rem; font-weight: 700; line-height: normal; letter-spacing: -0.16px;}
.product-container .product-detail .product-price .org-price {color: #C9C9C9; font-size: 3.2rem; font-weight: 500; line-height: normal; letter-spacing: -0.16px; text-decoration: line-through;}
.product-container .product-img-box {width: 36rem; height: 27rem; border-radius: 1.2rem; overflow: hidden;}
.product-container .product-img-box figure {width: 100%; height: 100%;}
.product-container .product-img-box figure img {object-fit: cover;}
.product-container .mobile {display: none;}

.section-tab {margin-top: 4rem; border-bottom: 1px solid #eee;}
.section-tab.fixed {position: fixed; top: 9rem; left: 0; right: 0; z-index: 1000; background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-top: 0;}
.section-tab .section-list {max-width: 124rem; display: flex; align-items: center; column-gap: 0.8rem; justify-content: flex-start; margin: 0 auto;}
.section-tab .section-list li {width: fit-content; height: fit-content;}
.section-tab .section-list li a {padding: 1.2rem 1.6rem; display: inline-block; color: #999; font-size: 1.6rem; font-weight: 400; line-height: 150%; letter-spacing: -0.016px;}
.section-tab .section-list li.active a {border-bottom: 2px solid #111; color: #111; font-weight: 700;}

.section-container {max-width: 124rem; margin: 0 auto; display: flex; align-items: flex-start; column-gap: 4rem;}
.section-container .info-area {width: calc(100% - 40rem); border-right: 1px solid #eee; padding-top: 4rem; display: flex; flex-direction: column; padding-bottom: 10rem;}

.info-section {display: flex; flex-direction: column;}
.info-section .txt-box {display: flex; flex-direction: column; row-gap: 2rem; padding-bottom: 2rem;}
.info-section .txt-box p {color: #444; font-size: 1.6rem; font-weight: 400; line-height: 150%; letter-spacing: -0.16px;}
.info-section .attach-box {margin-bottom: 4.2rem;}
.info-section .attach-box a {color: #5457ED; font-size: 1.6rem; font-weight: 400; line-height: 150%; text-decoration: underline;}
.info-section .img-box {display: flex; flex-direction: column; row-gap: 2.5rem;}
.info-section .img-box figure {width: 50rem; height: 100%;}

.section-container .price-info-area {width: 36rem; padding-top: 4rem; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; row-gap: 2.4rem;}
.price-info-area.sticky {position: fixed; top: 14rem; right: calc((100vw - 124rem) / 2); z-index: 999;}
.info-list {padding: 1.6rem; background-color: #f4f4f4; border-radius: 0.8rem; display: flex; flex-direction: column; row-gap: 1.2rem;}
.info-list li {display: flex; align-items: flex-start; column-gap: 3.2rem;}
.info-list li .subject {width: 10rem; color: #888; font-size: 1.4rem; font-weight: 400; line-height: 140%; letter-spacing: -0.014px;}
.info-list li .txt {width: calc(100% - 13.2rem); text-align: right; color: #111; font-size: 1.4rem; font-weight: 600; line-height: 140%; letter-spacing: -0.014px;}
.price-info-area .price-box {display: flex; flex-direction: column; row-gap: 1.6rem; width: 100%;}
.price-info-area .price-box .price-txt {display: flex; align-items: center; justify-content: flex-end; column-gap: 0.4rem; font-size: 2.4rem; line-height: normal; letter-spacing: -0.12px;}
.price-info-area .price-box .price-txt .percent {color: #F1132D; font-weight: 700;}
.price-info-area .price-box .price-txt .price {color: #111; font-weight: 700; position: relative;}
.price-info-area .price-box .price-txt .org-price {color: #C9C9C9; font-weight: 500; text-decoration: line-through;}
.fixed-btn-box {display: flex; align-items: stretch; column-gap: 1.2rem; width: 100%; justify-content: flex-start;}
.fixed-btn-box .btn-main.btn-lg {width: calc(100% - 12rem);}

.section {display: flex; flex-direction: column; row-gap: 2.4rem; padding-right: 4rem; padding-top: 8rem;}
.section .title-box {display: flex; align-items: center; justify-content: space-between;}
.section .title-box h4 {color: #111; font-size: 2rem; font-weight: 700; line-height: 130%; letter-spacing: -0.02px;}
.section .title-box h4 span:after {content:'건';}
.review-list {display: flex; flex-direction: column; row-gap: 3.2rem;}
.review-list li {display: flex; flex-direction: column; row-gap: 1.6rem;}
.review-list li .review-group {display: flex; flex-direction: column; row-gap: 0.6rem;}
.review-list li .review-group .user {color: #111; font-size: 1.4rem; font-weight: 700; line-height: 140%; letter-spacing: -0.014px;}
.review-list li .review-group .star-box {display: flex; align-items: center; justify-content: space-between;}
.review-list li .review-group .star-box .star-group {display: flex; align-items: center; column-gap: 0.8rem;}
.review-list li .review-group .star-box .star-group .star-value {color: #111; font-size: 1.4rem; font-weight: 600; line-height: normal; letter-spacing: -0.014px;}
.review-list li .review-group .star-box .star-img {display: flex; align-items: center;}
.review-list li .review-group .star-box .star-img figure {width: 1.6rem; height: 1.6rem;}
.review-list li .review-group .star-box .date {color: #aaa; font-size: 1.2rem; text-align: right; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.review-list li .review-group .review-content p {color: #111; font-size: 1.4rem; font-weight: 400; line-height: 140%; letter-spacing: -0.014px;}
.review-list li .review-block {display: flex; align-items: center; column-gap: 0.8rem;}
.review-list li .review-block a {color: #999; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px; position: relative; padding-right: 1rem;}
.review-list li .review-block a:first-child:after {content: '|'; position: absolute; right: 0;}

.inquiry-list {display: flex; flex-direction: column; row-gap: 1.6rem;}
.inquiry-list li {display: flex; flex-direction: column; row-gap: 0.8rem;}
.inquiry-list li .answer-status {display: flex; align-items: center; justify-content: space-between;}
.inquiry-list li .answer-status .answer-group {display: flex; align-items: center;}
.inquiry-list li .answer-status .answer-group .no-answer {padding: 0.4rem 0.8rem; border-radius: 0.4rem; background-color: #aaa; color: #fff; font-size: 1.2rem; font-weight: 600; line-height: normal; letter-spacing: -0.06px;}
.inquiry-list li .answer-status .answer-group .user {padding-left: 0.8rem; color: #111; font-size: 1.4rem; font-weight: 700; line-height: 140%; letter-spacing: -0.014px;}
.inquiry-list li .answer-status .answer-group .my-post {margin-left: 0.4rem; padding: 0.4rem 0.8rem; border-radius: 0.4rem; border: 1px solid #111; font-size: 1.2rem; font-weight: 600; line-height: normal; letter-spacing: -0.06px;}
.inquiry-list li .answer-status .answer-group .done-answer {padding: 0.4rem 0.8rem; border-radius: 0.4rem; background-color: #F1132D; color: #fff; font-size: 1.2rem; font-weight: 600; line-height: normal; letter-spacing: -0.06px;}
.inquiry-list li .answer-status .answer-group .lock {margin-left: 0.8rem; width: 1.6rem; height: 1.6rem;}
.inquiry-list li .answer-status .date {color: #aaa; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.inquiry-list li .inquiry-content {display: flex; flex-direction: column; row-gap: 1.6rem;}
.inquiry-list li .inquiry-content .inquiry-txt {cursor: pointer; display: flex; align-items: flex-start; column-gap: 0.8rem;}
.inquiry-list li .inquiry-content .inquiry-txt figure { transition: transform 0.3s ease; width: 2.4rem !important; height: 2.4rem !important; flex-shrink: 0; margin-top: 0.2rem;}
.inquiry-list li .inquiry-content .inquiry-txt p {color: #111; font-size: 1.4rem; font-weight: 400; line-height: 140%; letter-spacing: -0.014px; width: calc(100% - 3rem); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; align-self: stretch; text-overflow: ellipsis; margin: 0; width: 100%;}
.inquiry-list li .inquiry-content .answer-box {display: none; flex-direction: column; background-color: #F8F8F8; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease;}
.inquiry-list li .inquiry-content .answer-box p {color: #111; font-size: 1.4rem; font-weight: 400; line-height: 140%; letter-spacing: -0.014px;}
.inquiry-list li .inquiry-content .answer-box > a {color: #5457ED; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px; text-decoration: underline; margin-top: 0.7rem; margin-bottom: 1rem;}
.inquiry-list li .inquiry-content .answer-box .img-list {display: flex; align-items: center; column-gap: 1.2rem;}
.inquiry-list li .inquiry-content .answer-box .img-list li {width: 7.1rem; height: 7.1rem; border-radius: 0.2rem; border: 1px solid #eee; overflow: hidden;}
.inquiry-list li .inquiry-content .answer-box .img-list li figure {width: 100%; height: 100%;}
.edit-box {display: flex; align-items: center; column-gap: 0.8rem; margin: 1.2rem 0;}
.edit-box a {color: #999; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px; position: relative; padding-right: 1rem;}
.edit-box a:first-child:after {content: '|'; position: absolute; right: 0;}
.edit-box a:last-child {padding-right: 0;}
.inquiry-list li .inquiry-content .answer-box .answer-content {background-color: #fff; padding: 1.6rem; display: flex; flex-direction: column; row-gap: 0.8rem;}
.inquiry-list li .inquiry-content .answer-box .answer-content .answer-status .done-answer {padding: 0.4rem 0.8rem; border-radius: 0.4rem; background-color: #F1132D; color: #fff; font-size: 1.2rem; font-weight: 600; line-height: normal; letter-spacing: -0.06px;}
.inquiry-list li .inquiry-content .answer-box .answer-content .answer-status p {color: #555;}
.inquiry-list li .inquiry-content .inquiry-txt.expanded figure {transform: rotate(180deg);}
.inquiry-list li .inquiry-content .inquiry-txt .p-wrapper {overflow: hidden; transition: max-height 0.3s ease; flex: 1;}

.notice-box p {color: #555; font-size: 1.6rem; font-weight: 400; line-height: 150%; letter-spacing: -0.016px;}

@media screen and (max-width: 880px) {
    .product-container {max-width: 100%; margin-top: 0; flex-direction: column;}
    .product-container .product-img-box {border-radius: 0; width: 100%; order: 1;margin-top:60px;}
    .product-container .product-detail {width: 100%; padding: 2rem; row-gap: 0.8rem; order: 2;}
    .product-container .product-detail .product-info {row-gap: 0.8rem;}
    .product-container .product-detail .product-info .category {font-size: 1.4rem;}
    .product-container .product-detail .product-info h3 {font-size: 2.2rem; letter-spacing: -0.11px;}
    .product-container .product-detail .product-price .percent {font-size: 2rem;}
    .product-container .product-detail .product-price .price {font-size: 2rem;}
    .product-container .product-detail .product-price .org-price {font-size: 2rem;}
    .product-container .mobile {display: block; order: 3; padding: 1.2rem 2rem 0 2rem;}

    .section-tab {margin-top: 2rem; width: 100%;}
    .section-tab.fixed {top: 5rem;}
    .section-tab .section-list {width: 100%; padding: 0 2rem; column-gap: 0;}
    .section-tab .section-list li a {padding: 1.2rem; font-size: 1.4rem; letter-spacing: -0.014px;}

    .section-container .info-area {width: 100%; padding-top: 2.2rem; border-right: none; row-gap: 2.4rem;}
    .info-section {padding: 0 2rem 2.4rem 2rem; border-bottom: 0.6rem solid #f7f7f7;}
    .info-section .img-box figure {width: 100%;}
    .section-container .price-info-area {display: none;}

    .section {padding-right: 0; padding: 0 2rem; border-bottom: 0.6rem solid #f7f7f7; padding-bottom: 2.4rem;}
    .section:last-child {border-bottom: none;}
    .section .title-box {padding-right: 0;}
    .section .title-box h4 {font-size: 1.8rem;}
    
    .review-list {row-gap: 1.6rem;}
    .review-list li {padding-bottom: 1.6rem; border-bottom: 1px solid #eee;}
    .review-list li:last-child {padding-bottom: 0; border-bottom: none;}
    .review-list li .review-group {row-gap: 0.4rem;}

    .section.inquiry {padding-left: 0; padding-right: 0;}
    .section.inquiry .title-box {padding: 0 2rem;}
    .inquiry-list li > .answer-status {padding: 0 2rem;}
    .inquiry-list li .inquiry-content .inquiry-txt {padding: 0 2rem;}
    .inquiry-list li .inquiry-content .inquiry-txt p {-webkit-line-clamp: 3;}
    .section.inquiry .btn-box {padding: 0 2rem;}

    .fixed-btn-box {position: fixed; bottom: 0; left: 0; background-color: #fff; z-index: 999; padding: 1.6rem 2rem;}
}

/* ============================== [ 재능마켓_상세(구매) market_purchase.html ] ========================================================================================== */
/* 재능마켓_상세 market_detail.html 상속 받아 사용 */
.product-container.purchase .price-box {display: flex; flex-direction: column; row-gap: 0.8rem;}
.product-container.purchase .price-box p {color: #888; font-size: 1.6rem; font-weight: 400; line-height: 140%; letter-spacing: -0.08px;}

.purchase-container {border-top: 0.6rem solid #f7f7f7; margin-top: 4.8rem;}
.purchase-container .inner {max-width: 124rem; margin: 0 auto; display: flex; align-items: flex-start;}
.purchase-info {width: calc(100% - 40rem); padding: 4rem 23rem 10rem 0; display: flex; flex-direction: column;}
.purchase-info .point-box {display: flex; flex-direction: column;}
.purchase-info .point-box .my-point {display: flex; align-items: center; justify-content: space-between;}
.purchase-info .point-box .my-point .point-txt {display: flex; align-items: center; column-gap: 0.4rem;}
.purchase-info .point-box .my-point .point-txt figure {width: 2.4rem; height: 2.4rem;}
.purchase-info .point-box .my-point .point-txt span {color: #111; font-size: 2rem; font-weight: 700; line-height: 130%; letter-spacing: -0.02px;}
.purchase-info .point-box .my-point .my-point-txt p {color: #444; font-size: 2rem; font-weight: 400; line-height: 140%; letter-spacing: -0.02px; position: relative;}
.purchase-info .point-box .my-point .my-point-txt span {color: #F1132D; font-size: 2rem; font-weight: 700; line-height: 140%; letter-spacing: -0.02px;}
.purchase-info .point-box .my-point .my-point-txt span:after {color: #444; font-weight: 400;}
.purchase-info .point-box .use-point {display: flex; align-items: center; column-gap: 2rem; margin-top: 1.6rem;}
.purchase-info .point-box .use-point .point-input-box {display: flex; align-items: center; justify-content: space-between; position: relative; padding: 1.2rem; border-radius: 0.44rem; border: 1px solid #E8E8E8; width: calc(100% - 10.5rem);}
.purchase-info .point-box .use-point .point-input-box span {color: #111; font-size: 1.4rem; font-weight: 500; line-height: 150%; letter-spacing: -0.014px;}
.purchase-info .point-box .use-point .point-input-box input[type="text"] {border: none; text-align: right; padding-right: 2.4rem; color: #F1132D; font-size: 1.4rem; font-weight: 700; line-height: 150%; letter-spacing: -0.014px;}
.purchase-info .point-box .use-point .point-input-box a {position: absolute; top: 50%; transform: translateY(-50%); right: 1.2rem; width: 2.4rem; height: 2.4rem;}
.purchase-info .point-box .use-point .btn-main {border-radius: 0.4rem; width: 8.5rem; height: 5rem;}
.purchase-info .payment-box {margin-top: 4.8rem; display: flex; flex-direction: column;}
.purchase-info .payment-box h4 {color: #111; font-size: 2rem; font-weight: 700; line-height: 130%; letter-spacing: -0.02px; margin-bottom: 1.6rem;}
.purchase-info .payment-box .payment-info-list {width: 100%; display: flex; flex-direction: column; margin-bottom: 1.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid #EEE; row-gap: 1.2rem;}
.purchase-info .payment-box .payment-info-list li {display: flex; align-items: center; justify-content: space-between;}
.purchase-info .payment-box .payment-info-list li span {font-size: 1.4rem; font-weight: 400; line-height: 130%; letter-spacing: -0.014px; position: relative; color: #555;}
.purchase-info .payment-box .payment-info-list li span.subject {color: #888; text-align: left; padding-left: 1.6rem;}
.purchase-info .payment-box .payment-info-list li span.subject:before {content: ''; background: url('/assets/image/mobile/icon/ic_depth.svg') no-repeat; width: 1.6rem; height: 1.6rem; position: absolute; top: 0; left: 0;}
.purchase-info .payment-box .payment-info-list li span.price {color: #555;}
.purchase-info .payment-box .payment-info-list li span.point {color: #555;}
.purchase-info .payment-box .total-price-box {display: flex; align-items: center; justify-content: space-between;}
.purchase-info .payment-box .total-price-box span {color: #111; font-size: 1.8rem; font-weight: 600; line-height: 130%; letter-spacing: -0.018px; position: relative;}
.purchase-info .payment-box .total-price-box span.total-price:after {content: '원';}
.purchase-info .payment-box .total-price-box span.total-point:after {content: 'P';}
.purchase-info .payment-box .btn-box {display: flex; align-items: center; column-gap: 1.2rem;}
.purchase-info .payment-box .btn-box button {width: 50%;}
.purchase-info .payment-box .btn-box button.btn-wh {padding: 1.2rem 2rem;}
.purchase-info .payment-box .btn-box button.btn-wh span {color: #222; font-size: 1.6rem; font-weight: 600; line-height: 150%; letter-spacing: -0.016px;}

.payment-agreement {padding: 4rem 0 0 4rem; width: 40rem; display: flex; flex-direction: column;}
.payment-agreement p {color: #888; font-size: 1.4rem; font-weight: 400; line-height: 130%; letter-spacing: -0.014px; margin-bottom: 4.8rem; text-align: center;}

@media screen and (max-width: 880px) {
    .product-container.purchase {align-items: flex-start; flex-direction: row; column-gap: 1.2rem; padding: 1.6rem 2rem; margin-top: 6rem;}
    .product-container.purchase .product-img-box {width: 14rem; border-radius: 0.4rem; height: 10.5rem;}
    .product-container.purchase .product-detail {row-gap: 0.6rem; width: calc(100% - 14rem); padding: 0.4rem 0;}
    .product-container.purchase .product-info {row-gap: 0.6rem;}
    .product-container.purchase .product-info .category {font-size: 1.2rem; letter-spacing: -0.06px;}
    .product-container.purchase .product-detail .product-info h3 {font-size: 1.4rem; font-weight: 400; line-height: normal; letter-spacing: -0.07px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;  align-self: stretch; overflow: hidden; text-overflow: ellipsis;}
    .product-container.purchase .price-box {row-gap: 0.4rem;}
    .product-container.purchase .product-detail .product-price span {font-size: 1.6rem;}
    .product-container.purchase .price-box p {font-size: 1.1rem; letter-spacing: -0.055px; line-height: normal;}

    .purchase-container {margin-top: 0;}
    .purchase-container .inner {width: 100%; flex-direction: column; max-width: 100%;}
    .purchase-info {width: 100%; padding: 0;}
    .purchase-info .point-box {border-bottom: 0.6rem solid #f7f7f7; padding: 2rem;}
    .purchase-info .point-box .my-point .point-txt figure {width: 1.6rem; height: 1.6rem;}
    .purchase-info .point-box .my-point .point-txt span {font-size: 1.6rem; line-height: normal;}
    .purchase-info .point-box .my-point .my-point-txt span {font-size: 1.6rem;}
    .purchase-info .point-box .my-point .my-point-txt p {font-size: 1.6rem;}
    .purchase-info .point-box .use-point {column-gap: 0.8rem;}
    .purchase-info .point-box .use-point .point-input-box {width: calc(100% - 9rem);}
    .purchase-info .point-box .use-point .btn-main {width: 8.3rem; height: 5rem;}
    .purchase-info .point-box .use-point .point-input-box input[type="text"] {width: 50%;}
    .purchase-info .payment-box {margin-top: 2rem; border-bottom: 0.6rem solid #f7f7f7; padding: 0 2rem 2rem 2rem;}
    .purchase-info .payment-box h4 {font-size: 1.6rem;}
    .purchase-info .payment-box .total-price-box span {font-size: 1.6rem;}
    .purchase-info .payment-box .btn-box button {width: 100%;}
    .payment-agreement {padding: 2rem 2rem 2rem 2rem; width: 100%;}
    .payment-agreement p {margin-bottom: 0;}
    .fixed-btn-box.border {border-top: 1px solid #EEE;}
}

/* ============================== [ 재능마켓_결제완료 market_purchase_finish.html ] ========================================================================================== */
.purchase-finish-box {display: flex; flex-direction: column; max-width: 124rem; margin: 16rem auto 27rem; align-items: center; width: 100%;}
.purchase-finish-box > figure {width: 6.6rem; height: 6.6rem;}
.purchase-finish-box .finish-txt-box {display: flex; flex-direction: column; row-gap: 0.8rem; align-items: center; margin-top: 2.4rem;}
.purchase-finish-box .finish-txt-box h6 {color: #111; font-size: 3rem; font-weight: 700; line-height: 130%; letter-spacing: -0.03px;}
.purchase-finish-box .finish-txt-box p {color: #888; font-size: 1.6rem; font-weight: 400; line-height: 130%; letter-spacing: -0.016px;}
.purchase-finish-box .btn-box {margin-top: 3.8rem; display: flex; align-items: center; justify-content: center; column-gap: 1.2rem;}
.purchase-finish-box .btn-box a {width: 20rem;}
.purchase-finish-box .btn-box a.btn-main {padding: 1.1rem 2rem; width: 40rem;}
.purchase-finish-box .btn-box a.mobile {display: none;}

@media screen and (max-width: 880px) {
    .purchase-finish-box {margin: 14rem 0;}
    .purchase-finish-box .finish-txt-box h6 {font-size: 2.2rem;}
    .purchase-finish-box .btn-box {padding: 0 2rem;}
    .purchase-finish-box .btn-box a {border-radius: 0.2rem;}
    .purchase-finish-box .btn-box a.btn-main {width: 20rem;}
    .purchase-finish-box .btn-box a.mobile {display: flex;}
}

/* ============================== [ 재능마켓_등록 market_register.html ] ========================================================================================== */
/* register.html 로 되어있는 곳에서 모두 같이 사용 */
.register-container {padding: 4rem; background-color: #fff; border: 1px solid #eee; display: flex; flex-direction: column; row-gap: 2.4rem;}
.register-group {display: flex; flex-direction: column; row-gap: 0.8rem;}
.register-group h6 {color: #111; font-size: 1.8rem; font-weight: 700; line-height: 130%; letter-spacing: -0.018px;}
.register-group > p {color: #888; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.register-group .txt-group p {color: #555; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}
.register-group .subject {color: #111; font-size: 1.4rem; font-weight: 700; line-height: 150%; letter-spacing: -0.014px; position: relative; width: fit-content;}
.register-group .subject.req:after {content: '*'; font-size: 1.4rem; color: #F1132D; font-weight: 700; line-height: 150%; letter-spacing: -0.014px; position: absolute; right: -0.6rem;}

.register-group .point-box {display: flex; align-items: center; justify-content: space-between; background-color: #333; border-radius: 0.8rem; padding: 1.6rem;}
.register-group .point-box .txt {display: flex; align-items: center; column-gap: 0.4rem;}
.register-group .point-box .txt figure {width: 1.6rem; height: 1.6rem;}
.register-group .point-box .txt span {color: #eee; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}
.register-group .point-box .point-txt .point {color: #eee; font-size: 2rem; font-weight: 700; line-height: 130%; letter-spacing: -0.02px;}
.register-group .point-box .point-txt .point:after {font-weight: 400; padding-left: 0.4rem;}

.register-group .btn-main {border-radius: 0.4rem;}
.register-group .btn-main:disabled {background-color: #eee;}
.register-group .btn-main:disabled span {color: #a9a9a9;}

.register-group .title {color: #111; font-size: 1.8rem; font-weight: 700; line-height: 130%; letter-spacing: -0.018px;}

.register-group .info-box {display: flex; flex-direction: column; row-gap: 0.8rem; border-radius: 8px; background: #F7F7F7; padding: 1.6rem; margin-top: 12rem; width: 100%;}
.register-group .info-box p {color: #555; font-size: 1.4rem; font-weight: 700; line-height: 150%; letter-spacing: -0.014px;}
.register-group .info-box ul li {color: #555; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.register-group .info-box ul li:first-child {font-weight: 600;}

.bank-area, .receipt-box, .personal-box, .company-box, .company-receipt {display: none; flex-direction: column; row-gap: 2.4rem;}
.bank-area.show, .receipt-box.show, .personal-box.show, .company-box.show, .company-receipt.show {display: flex;}
.register-group .bank-info-box {border-radius: 0.4rem; border: 1px solid #EEE; background: #F7F7F7; padding: 1.6rem;}
.register-group .bank-info-box ul {display: flex; flex-direction: column; row-gap: 0.8rem;}
.register-group .bank-info-box ul li {display: flex; align-items: center;}
.register-group .bank-info-box ul li .b-subject {width: 9.2rem; color: #888; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}
.register-group .bank-info-box ul li .account-txt {display: flex; align-items: center; column-gap: 1.6rem;}
.register-group .bank-info-box ul li .account-txt .btn-bk {border-radius: 0.2rem; background: #333; padding: 0.4rem 1.2rem; color: #eee; font-size: 1.2rem; font-weight: 600; line-height: 150%; letter-spacing: -0.012px;}
.register-group .bank-info-box ul li .b-value {color: #111; font-size: 1.4rem; font-weight: 700; line-height: 150%; letter-spacing: -0.014px;}

.subject-box {display: flex; align-items: center; justify-content: space-between;}
.subject-box .etc {color: #888; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.subject-box .etc span {font-weight: 700;}

.option-group {display: flex; column-gap: 1.2rem;}
.option-group input[type="radio"].box-radio + label {width: 50%;}
.option-group .input-box {position: relative; width: 100%;}
.option-group .input-box .basic-text {padding: 1.2rem 2.4rem 1.2rem 1.2rem;}
.option-group .input-box.attach .basic-text {padding: 1.2rem 6rem 1.2rem 1.2rem;}
.option-group .input-box .unit {position: absolute; top: 50%; transform: translateY(-50%); right: 1.2rem; color: #F1132D; font-size: 1.2rem; font-weight: 700; line-height: 150%; letter-spacing: -0.012px;}
.option-group .input-box .btn-attach {position: absolute; top: 50%; transform: translateY(-50%); right: 1.2rem; border-radius: 0.2rem; padding: 0.4rem 1.2rem; width: fit-content;}
.option-group .input-box .btn-attach span {font-size: 1.2rem; letter-spacing: -0.012px;}
.option-group .input-box .time {position: absolute; top: 50%; transform: translateY(-50%); right: 7rem; color: #F1132D; font-size: 1.2rem; font-weight: 700; line-height: 150%; letter-spacing: -0.012px;}
.option-group .basic-textarea {height: 35rem;}
.option-group .btn-line {width: 50%;}

.option-group .file-attach {padding: 2rem; border-radius: 1.2rem; border: 1px solid #E8E8E8; background-color: #F4F4F4; width: 7.1rem; height: 7.1rem;}

.option-group .point-input-box {display: flex; align-items: center; justify-content: flex-end; position: relative; padding: 1.2rem; border-radius: 0.44rem; border: 1px solid #E8E8E8; width: 100%;}
.option-group .point-input-box input[type="text"],
.option-group .point-input-box input[type="number"] {border: none; text-align: right; padding-right: 2.4rem; color: #F1132D; font-size: 1.4rem; font-weight: 700; line-height: 150%; letter-spacing: -0.014px; width: 100%;}
.option-group .point-input-box a {position: absolute; top: 50%; transform: translateY(-50%); right: 1.2rem; width: 2.4rem; height: 2.4rem;}

.option-group.validate {display: flex; flex-direction: column; row-gap: 0.8rem;}
.option-group.validate .validate-txt {display: none; width: 100%; text-align: right; color: #F1132D; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.option-group.validate .validate-txt.show {display: block;}

.option-group.ticket {display: flex; justify-content: space-between; align-items: center;}
.option-group.ticket .ticket-name {display: flex; align-items: center; column-gap: 0.4rem;}
.option-group.ticket .ticket-name figure {width: 2rem; height: 2rem;}
.option-group.ticket .ticket-name span {color: #111; font-size: 1.6rem; font-weight: 400; line-height: normal; letter-spacing: -0.016px;}
.option-group.ticket .price {color: #222; text-align: right; font-size: 2.4rem; font-weight: 700; line-height: 140%; letter-spacing: -0.12px;}
.register-group.fixed-btn-box.ticket {row-gap: 2rem;}

@media screen and (max-width: 880px) {
    .register-container {border: none; width: 100%; padding: 7.2rem 2rem 1.2rem 2rem; row-gap: 1.6rem;}
    .register-container.no-padding {padding: 1.2rem 0;}
    .register-container.no-padding .status-container {margin: 0 2rem;}
    .register-container.no-padding .register-group {padding: 0 2rem;}
    .register-container.no-padding .register-group.border {border-bottom: 6px solid #F7F7F7; padding-bottom: 1.6rem;}
    .register-container.no-padding .register-group.fixed-btn-box {padding: 2rem;}
    .register-group .info-box {margin-top: 5rem;}
}

/* ============================== [ 정비지식인_리스트 knowhow_list.html ] ========================================================================================== */
.qna-container {padding: 3.2rem 0 5rem 0;}
.qna-list {display: flex; flex-wrap: wrap; gap: 2rem; align-items: stretch;}
.qna-list li {width: calc(50% - 1rem); border-radius: 0.4rem; border: 1px solid #eee; background-color: #fff;}
.qna-list li > a {padding: 2.4rem 2rem; display: flex; flex-direction: column; row-gap: 2.4rem; justify-content: space-between; height: 100%;}
.qna-list li > a .qna-info-box {display: flex; flex-direction: column; row-gap: 1.6rem;}
.qna-list li > a .qna-info-box .q-title-box {display: flex; align-items: center; justify-content: space-between; column-gap: 1.2rem;}
.qna-list li > a .qna-info-box .q-title-box .q-title {display: flex; flex-direction: column; row-gap: 1.2rem; width: calc(100% - 4.8rem);}
.qna-list li > a .qna-info-box .q-title-box .q-title .category {padding: 0.4rem 0.8rem; border-radius: 0.4rem; border: 1px solid #f0f0f0; background-color: #F3F3F3; color: #7b7b7b; font-size: 1.1rem; font-weight: 400; line-height: normal; letter-spacing: -0.055px; width: fit-content;}
.qna-list li > a .qna-info-box .q-title-box .q-title .title {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; align-self: stretch; overflow: hidden; color: #222; text-overflow: ellipsis; font-size: 2rem; font-weight: 700; line-height: 140%; letter-spacing: -0.1px; position: relative;}
.qna-list li > a .qna-info-box .q-title-box .q-title .title:before {content: 'Q.'; color: #F1132D; padding-right: 0.5rem;}
.qna-list li > a .qna-info-box .q-title-box .car-logo {border-radius: 0.8rem; border: 1px solid #eee; width: 4.8rem; height: 4.8rem; display: flex; align-items: center; justify-content: center;}
.qna-list li > a .qna-info-box .q-content-box p {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; align-self: stretch; overflow: hidden; color: #444; text-overflow: ellipsis; font-size: 1.6rem; font-weight: 400; line-height: 140%; letter-spacing: -0.08px;}
.qna-list li > a .btn-box {display: flex; flex-direction: column; row-gap: 2.4rem;}
.qna-list li > a .btn-box .q-info {display: flex; align-items: center; justify-content: space-between;}
.qna-list li > a .btn-box .q-info .q-info-subject {display: flex; align-items: center;}
.qna-list li > a .btn-box .q-info .q-info-subject .user {color: #111; font-size: 1.4rem; font-weight: 700; line-height: 140%; letter-spacing: -0.014px;}
.qna-list li > a .btn-box .q-info .q-info-subject .location {color: #111; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px; padding-left: 0.4rem;}
.qna-list li > a .btn-box .q-info .q-info-subject .hits {color: #999; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px; padding-left: 0.8rem;}
.qna-list li > a .btn-box .q-info .q-info-subject .hits:before {padding-right: 0.5rem;}
.qna-list li > a .btn-box .q-info .q-info-date .date {color: #999; text-align: right; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.qna-list li > a .btn-box .btn-qna {width: 100%; padding: 0.8rem 1.6rem; border-radius: 0.2rem; border: 1px solid #ddd; background: #f5f5f5; color: #222; font-size: 1.4rem; font-weight: 500; line-height: 150%; letter-spacing: -0.14px;}
.qna-list li > a .btn-box .btn-qna:disabled {background-color: #eee; color: #A9A9A9;}
.qna-list li > a .btn-box .btn-qna.btn-yet {background-color: #eee; color: #A9A9A9; border: none;}
.qna-list li > a .btn-box .btn-qna.btn-done {background-color: #222; color: #eee;}
.qna-list li > a .btn-box .btn-qna.btn-red-line {display: flex; align-items: center; justify-content: center; border: 1px solid #F1132D; background-color: #fff; color: #F1132D;}

@media screen and (max-width: 880px) {
    .qna-container {padding: 0.8rem 0 0 0;}
    .qna-list {gap: 0;}
    .qna-list li {width: 100%; border: none; border-bottom: 6px solid #f7f7f7;}
    .qna-list li:last-child {border-bottom: none;}
    .qna-list li > a .qna-info-box .q-title-box {align-items: flex-start;}
    .qna-list li > a .qna-info-box .q-title-box .q-title .title {font-size: 1.6rem; letter-spacing: -0.08px;}
}

/* ============================== [ 정비지식인_상세 knowhow_detail.html ] ========================================================================================== */
.detail-container {background-color: #ffff; border: 1px solid #eee; display: flex; flex-direction: column;}
.detail-container .question-box {padding: 4rem; display: flex; flex-direction: column; row-gap: 1.2rem; border-bottom: 1px solid #EEE;}
.detail-container .question-box .q-info {display: flex; align-items: center; justify-content: space-between;}
.detail-container .question-box .q-info .q-info-subject {display: flex; align-items: center;}
.detail-container .question-box .q-info .q-info-subject .user {color: #111; font-size: 1.4rem; font-weight: 700; line-height: 140%; letter-spacing: -0.014px;}
.detail-container .question-box .q-info .q-info-subject .location {color: #111; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px; padding-left: 0.4rem;}
.detail-container .question-box .q-info .q-info-subject .hits {color: #999; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px; position: relative; padding-left: 0.8rem;}
.detail-container .question-box .q-info .q-info-subject .hits:before {padding-right: 0.5rem;}
.detail-container .question-box .q-info .q-info-date .date {color: #999; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.detail-container .question-box .q-title-box {display: flex; align-items: flex-start; justify-content: space-between; column-gap: 1.6rem;}
.detail-container .question-box .q-title-box .q-title {display: flex; flex-direction: column; row-gap: 1.2rem; width: calc(100% - 4.8rem);}
.detail-container .question-box .q-title-box .q-title .category {padding: 0.4rem 0.8rem; border-radius: 0.4rem; border: 1px solid #f0f0f0; background-color: #f3f3f3; color: #7b7b7b; font-size: 1.1rem; font-weight: 400; line-height: normal; letter-spacing: -0.055px; width: fit-content;}
.detail-container .question-box .q-title-box .q-title .title {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; align-self: stretch; overflow: hidden; text-overflow: ellipsis; color: #222; font-size: 2.4rem; font-weight: 700; line-height: 140%; letter-spacing: -0.12px; position: relative;}
.detail-container .question-box .q-title-box .q-title .title:before {content: 'Q.'; color: #F1132D; padding-right: 0.5rem;}
.detail-container .question-box .q-title-box .car-logo {border-radius: 0.8rem; border: 1px solid #eee; width: 4.8rem; height: 4.8rem; display: flex; align-items: center; justify-content: center;}
.detail-container .question-box .q-title-box .car-logo figure {width: 100%; height: 100%;}
.detail-container .question-box .q-content-box {width: 100%;}
.detail-container .question-box .q-content-box p {color: #444; font-size: 1.6rem; font-weight: 400; line-height: 140%; letter-spacing: -0.08px;}
.detail-container .question-box .attach-box a {color: #5457ED; font-size: 1.6rem; font-weight: 400; line-height: 150%; letter-spacing: -0.016px; text-decoration: underline;}
.detail-container .question-box .image-box {width: 100%;}
.detail-container .question-box .image-box figure {width: 100%; height: 100%;}
.detail-container .question-box .answer-box {display: flex; flex-direction: column;}
.detail-container .question-box .answer-box .btn-bk {margin-top: 2rem;}
.detail-container .answer-content {display: none; flex-direction: column; border-bottom: 1px solid #eee; padding: 4rem 4rem 3.2rem 4rem;}
.detail-container .answer-content.show {display: flex;}
.detail-container .answer-content .a-title {color: #111; font-size: 2rem; font-weight: 700; line-height: normal; letter-spacing: -0.1px; margin-bottom: 1.6rem;}
.detail-container .answer-content .a-box {margin-top: 2.4rem; display: flex; flex-direction: column; row-gap: 1.2rem;}
.detail-container .answer-content .a-box .a-group {display: flex; flex-direction: column; row-gap: 0.8rem;}
.detail-container .answer-content .a-box .a-group .subject {color: #111; font-size: 1.4rem; font-weight: 700; line-height: 150%; letter-spacing: -0.014px; position: relative; width: fit-content;}
.detail-container .answer-content .a-box .a-group .subject.req:after {content: '*'; color: #F1132D;}
.detail-container .answer-content .a-box .a-group .file-attach {border-radius: 1.2rem; border: 1px solid #e8e8e8; background-color: #f4f4f4; padding: 2rem; display: flex; align-items: center; justify-content: center; width: 7.1rem; height: 7.1rem;}
.detail-container .answer-content .a-box .a-group .file-attach figure {width: 3.2rem; height: 3.2rem;}
.detail-container .answer-content .a-box .a-group .basic-textarea {height: 17.5rem;}
.detail-container .answer-content .btn-box {margin-top: 3.2rem; width: 100%;}
.detail-container .answer-content .btn-box .btn-main {padding: 1.2rem 2rem;}
.detail-container .answer-container .title-box {padding: 4rem 4rem 1.6rem 4rem;}
.detail-container .answer-container .title-box .subject {color: #111; font-size: 2rem; font-weight: 700; line-height: normal; letter-spacing: -0.1px;}
.detail-container .answer-container .answer-list {display: flex; flex-direction: column;}
.detail-container .answer-container .answer-list li {padding: 3.2rem 4rem; display: flex; flex-direction: column; row-gap: 1.2rem; border-bottom: 1px solid #f3f3f3;}
.detail-container .answer-container .answer-list li .user-container {display: flex; align-items: center; justify-content: space-between;}
.detail-container .answer-container .answer-list li .user-container .user-info-box {display: flex; align-items: center; column-gap: 1.2rem;}
.detail-container .answer-container .answer-list li .user-container .user-info-box .user {color: #111; font-size: 1.6rem; font-weight: 700; line-height: 140%; letter-spacing: -0.016px;}
.detail-container .answer-container .answer-list li .user-container .user-info-box .date {color: #999; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.detail-container .answer-container .answer-list li .user-container .btn-line {border-radius: 0.4rem; padding: 0.8rem 1.2rem; column-gap: 0.4rem;}
.detail-container .answer-container .answer-list li .user-container .btn-line figure {width: 1.2rem; height: 1.2rem;}
.detail-container .answer-container .answer-list li .user-container .btn-line span {font-size: 1.2rem; letter-spacing: -0.012px;}
.detail-container .answer-container .answer-list li .a-content p {color: #444; font-size: 1.6rem; font-weight: 400; line-height: 140%; letter-spacing: -0.08px;}
.detail-container .answer-container .answer-list li .a-content .attach-box a {color: #5457ED; font-size: 1.6rem; font-weight: 400; line-height: 150%; text-decoration: underline;}
.detail-container .answer-container .answer-list li .a-content figure {width: 100%; height: 100%; margin-top: 1.2rem;}
.detail-container .answer-container .answer-list li.choose {background-color: #F7F7F7;}
.detail-container .answer-container .answer-list li.choose .choose-answer {display: flex; align-items: center; justify-content: center; width: fit-content; padding: 0.4rem 0.8rem 0.4rem 0.4rem; border-radius: 0.4rem; background-color: #F1132D;}
.detail-container .answer-container .answer-list li.choose .choose-answer figure {width: 1.6rem; height: 1.6rem;}
.detail-container .answer-container .answer-list li.choose .choose-answer span {color: #eee; font-size: 1.1rem; font-weight: 600; line-height: normal; letter-spacing: -0.055px;}

.mobile-more-list {opacity: 0; visibility: hidden; transition: all 0.2s ease; background-color: #fff; position: fixed; top: auto; bottom: 0; right: 0; margin-top: 0; margin-bottom: 0; z-index: 1003; width: 100%; border-radius: 1.6rem 1.6rem 0 0; box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12);}
.mobile-more-list.show {opacity: 1; visibility: visible; transform: translateY(0);}
.mobile-more-list li {width: 100%;}
.mobile-more-list li a {display: inline-block; width: 100%; text-align: center; padding: 1.2rem 1.6rem; cursor: pointer; color: #222; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px; transition: background-color 0.2s ease;}

@media screen and (max-width: 880px) {
    .category-menu.detail {display: none;}
    .detail-container {border: none;}
    .detail-container .question-box {padding: 2rem; border-bottom: 6px solid #eee;}
    .detail-container .question-box .q-info {margin-bottom: 1.2rem;}
    .detail-container .question-box .q-title-box .q-title .title {font-size: 1.6rem;}
    .detail-container .question-box .answer-box .btn-bk {margin-top: 0.8rem; padding: 1.2rem 2rem; font-size: 1.6rem;}
    .detail-container .answer-container .title-box {padding: 2rem;}
    .detail-container .answer-container .title-box .subject {font-size: 1.8rem;}
    .detail-container .answer-container .answer-list li {padding: 2rem; row-gap: 0.8rem;}
    .detail-container .answer-container .answer-list li:last-child {border-bottom: none;}

    .detail-container .answer-content {padding: 2rem 2rem 10rem 2rem;}
    .detail-container .answer-content .a-box {margin-top: 0;}
    .detail-container .answer-content .a-box .a-group .basic-textarea {height: 17.5rem;}
}

/* ============================== [ 정비SOS sos_list.html ] ========================================================================================== */
/* knowhow_list.html 상속 받아 사용 */
/* sos_detail.html 에서도 동일하게 사용 중 */
.category-box {display: flex; align-items: center; column-gap: 0.8rem;}
.category-box .point-box {display: flex; align-items: center; column-gap: 0.4rem; padding: 0.4rem 0.8rem; border-radius: 0.4rem; border: 1px solid #F1132D;}
.category-box .point-box figure {width: 1.2rem; height: 1.2rem;}
.category-box .point-box .point {color: #F1132D; font-size: 1.1rem; line-height: normal; font-weight: 600; letter-spacing: -0.01px;}

/* ============================== [ 구인구직_리스트 job_list.html ] ========================================================================================== */
.job-container {margin-top: 1.6rem;}
.job-list {display: flex; align-items: stretch; gap: 2rem; flex-wrap: wrap;}
.job-list li {width: calc(50% - 1rem);}
.job-list li a {display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; row-gap: 1.2rem; padding: 2rem; border-radius: 0.4rem; border: 1px solid #eee;}
.job-list li a .category-box {display: flex; align-items: center; column-gap: 0.6rem;}
.job-list li a .category-box .category {padding: 0.4rem 0.8rem; border-radius: 0.4rem; border: 1px solid #f0f0f0; background-color: #f3f3f3; color: #7b7b7b; font-size: 1.1rem; font-weight: 600; line-height: normal; letter-spacing: -0.055px;}
.job-list li a .category-box .category.speed {color: #eee; background-color: #F1132D; border: none;}
.job-list li a .job-box {display: flex; flex-direction: column; row-gap: 1.2rem;}
.job-list li a .job-box .company {color: #555; font-size: 1.4rem; font-weight: 700; line-height: normal; letter-spacing: -0.07px;}
.job-list li a .job-box .title {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; align-self: stretch; overflow: hidden; color: #111; text-overflow: ellipsis; font-size: 2rem; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.1px;}
.job-list li a .job-box .salary {color: #111; font-size: 1.6rem; font-style: normal; font-weight: 700; line-height: normal; letter-spacing: -0.08px;}
.job-list li a .job-info {display: flex; align-items: center; column-gap: 0.4rem;}
.job-list li a .job-info span {color: #888; font-size: 1.4rem; font-style: normal; font-weight: 400; line-height: 130%; letter-spacing: -0.07px;}
.job-list li a .job-info span:after {content: '·'; padding-left: 0.4rem;}
.job-list li a .job-info span:last-child:after {display: none;}

@media screen and (max-width: 880px) {
    .job-container {margin-top: 0; padding-bottom: 6rem;}
    .job-list {gap: 0;}
    .job-list li {width: 100%;}
    .job-list li a {border: none; border-bottom: 1px solid #EEE;}
    .job-list li:last-child a {border: none;}
    .job-list li a .job-box .title {font-size: 1.6rem;}
    .job-list li a .job-info span {font-size: 1.2rem;}
}

/* ============================== [ 구인구직_상세 job_detail.html ] ========================================================================================== */
/* market_detail.html 상속 받아 사용 */
.product-container.job .product-img-box {position: relative;}
.product-container.job .product-detail .product-info {row-gap: 0.8rem;}
.product-container.job .product-detail .product-info .category-box .category {padding: 0.4rem 0.8rem; border-radius: 0.4rem; border: 1px solid #f0f0f0; background-color: #f3f3f3; color: #7b7b7b; font-size: 1.6rem; font-weight: 600; line-height: normal; letter-spacing: -0.08px;}
.product-container.job .product-detail .product-info .category-box .category.speed {background-color: #F1132D; color: #fff; border: none;}
.product-container.job .product-detail .product-info .company {color: #555; font-size: 2rem; font-weight: 700; line-height: 140%; letter-spacing: -0.1px;}
.section-tab .job-inner {display: flex; align-items: center; justify-content: space-between; max-width: 124rem; margin: 0 auto;}
.section-tab .job-inner .section-list {width: fit-content; margin: 0;}
.section-tab .job-inner .btn-box {width: fit-content; display: flex; align-items: center; column-gap: 1rem;}
.section-tab .job-inner .btn-box .btn-wh {padding: 0.4rem 1.2rem; border-radius: 0.2rem; color: #888; font-size: 1.2rem; font-weight: 600; line-height: 150%; letter-spacing: -0.012px;}
.section-container .price-info-area .info-list {width: 100%;}
.price-info-area .price-box.job button {width: 50%;}

@media screen and (max-width: 880px) {
    .fixed-btn-box.job button {width: 50% !important;}
    .section-tab .job-inner .btn-box {display: none;}
    .section-tab .job-inner .section-list {width: 100%;}
    .section-tab .job-inner .section-list li {width: 50%;}
    .section-tab .job-inner .section-list li a {width: 100%; text-align: center;}

    .product-container .product-img-box .icon-box {position: fixed; top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1.6rem 2rem; z-index: 2;}
    .product-container .product-img-box .icon-box.scroll {background-color: #fff;}
    .product-container .product-img-box > figure {position: relative;}
    .product-container .product-img-box > figure::before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 60%); pointer-events: none; z-index: 1;}

    .product-container.job .product-detail .product-info .category-box .category {font-size: 1.4rem;}
    .product-container.job .product-detail .product-info .company {font-size: 1.4rem;}
    .product-container.job .mobile {padding: 0.4rem 2rem 0 2rem;}
}

/* ============================== [ 검색결과 search.html ] ========================================================================================== */
/* 기 작성된 코드 상속 받아 사용 */
.category-menu-container {border-bottom: 1px solid #f7f7f7;}
.sub-main-5 .category-menu-wrapper {width: 100%; max-width: 100%;}
.sub-main-5 .category-dropdown {right: 0;}
.tab-contents-inner {max-width: 124rem; margin: 1.6rem auto 14rem; width: 100%;}
.tab-contents-inner .qna-container {padding: 1.6rem 0 5rem 0;}
.empty-box {display: flex; flex-direction: column; row-gap: 1.6rem; align-items: center; justify-content: center; margin: 20rem auto;}
.empty-box figure {width: 13.6rem; height: 13.6rem;}
.empty-box span {color: #999; text-align: center; font-size: 1.6rem; font-weight: 400; line-height: 130%; letter-spacing: -0.016px;}

@media screen and (max-width: 880px) {
    .search .market-container {padding: 0;}
    .section-tab.search {overflow-x: auto; overflow-y: hidden; padding: 0 2rem; scrollbar-width: none;  -ms-overflow-style: none; margin-top: 0; position: fixed; top: 4.9rem; background-color: #fff; z-index: 1000;}
    .tab-contents-wrapper.search {margin-top: 10rem;}
    .tab-contents-wrapper.search .tab-contents-inner {margin: 0;}
    .tab-contents-wrapper.search .tab-contents-inner .market-container .product-list {margin-top: 0.8rem;}
    .section-tab.search::-webkit-scrollbar {display: none;}
    .section-tab.search .section-list {display: flex; white-space: nowrap; min-width: max-content; padding: 0;}
    .section-tab.search .section-list li {flex-shrink: 0; white-space: nowrap;}
    .section-tab.search .section-list li a {padding: 1.2rem 1rem; display: inline-block; white-space: nowrap;}

    .category-menu-container {border-bottom: 6px solid #f7f7f7;}
    .search-fixed {position: fixed; top: 9.7rem; background-color: #fff; width: 100%; z-index: 1000;}
    .tab-contents-inner {width: 100%; padding: 0 2rem; padding-bottom: 7rem;}
    .tab-contents-inner.no-padding {padding: 0; margin: 0; margin-bottom: 6rem;}
    .tab-contents-inner.no-padding .sort-wrapper {padding: 0 2rem;}
    .tab-contents-inner .qna-container {padding: 0 0 5rem 0;}
}

/* ============================== [ 커뮤니티_리스트 community_list.html ] ========================================================================================== */
.community-container {margin-top: 1.6rem;}
.community-list {display: flex; flex-direction: column;}
.community-list li a {padding: 2.4rem 0.8rem; border-bottom: 1px solid #eee; background-color: #fff; display: flex; align-items: center; justify-content: space-between; column-gap: 1.6rem;}
.community-list li a .community-title-box {display: flex; flex-direction: column; row-gap: 1.2rem;}
.community-list li a .community-title-box .title {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; align-self: stretch; overflow: hidden; color: #222; text-overflow: ellipsis; font-size: 2rem; font-weight: 700; line-height: 140%; letter-spacing: -0.1px;}
.community-list li a .community-title-box .user-box {display: flex; align-items: center; column-gap: 0.8rem;}
.community-list li a .community-title-box .user-box .user {color: #111; font-size: 1.6rem; font-weight: 700; line-height: normal;  letter-spacing: -0.016px;}
.community-list li a .community-title-box .user-box .hits {color: #999; text-align: right; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px; position: relative;}
.community-list li a .community-title-box .user-box .date {color: #999; text-align: right; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}
.community-list li a .comment-box {padding: 1.6rem 1.2rem; display: flex; flex-direction: column; row-gap: 0.4rem; justify-content: center; align-items: center; background-color: #f5f5f5; border-radius: 0.4rem;}
.community-list li a .comment-box .comment-cnt {color: #333; font-size: 1.4rem; font-weight: 600; line-height: normal; letter-spacing: -0.07px;}
.community-list li a .comment-box .subject {color: #888; font-size: 1.2rem; font-weight: 400; line-height: normal; letter-spacing: -0.06px;}

@media screen and (max-width: 880px) {
    .community-container {margin-top: 0; padding-bottom: 5.6rem;}
    .community-list li a {padding: 2rem;}
    .community-list li a .community-title-box {width: calc(100% - 5rem);}
    .community-list li a .community-title-box .title {font-size: 1.6rem;}
    .community-list li a .community-title-box .user-box .user {font-size: 1.4rem;}
    .community-list li a .community-title-box .user-box .hits {font-size: 1.2rem;}
    .community-list li a .community-title-box .user-box .date {font-size: 1.2rem;}
    .community-list li a .comment-box {width: 5rem;}
}

/* ============================== [ 커뮤니티_상세 community_list.html ] ========================================================================================== */
.community-box {padding: 4rem; display: flex; flex-direction: column; row-gap: 1.2rem; border-bottom: 1px solid #EEE;}
.community-box .title {color: #222; font-size: 2.4rem; font-weight: 700; line-height: 140%; letter-spacing: -0.12px;}
.community-box .c-info {display: flex; align-items: center; justify-content: space-between;}
.community-box .c-info .c-info-subject {display: flex; align-items: center; column-gap: 0.8rem;}
.community-box .c-info .c-info-subject .user {color: #111; font-size: 1.4rem; font-weight: 700; line-height: 140%; letter-spacing: -0.014px;}
.community-box .c-info .c-info-subject .hits {color: #999; text-align: right; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.community-box .c-info .c-info-date .date {color: #999; text-align: right; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.community-box p {color: #444; font-size: 1.6rem; font-weight: 400; line-height: 140%; letter-spacing: -0.08px;}
.community-box .attach-box a {color: #5457ED; font-size: 1.6rem; font-weight: 400; line-height: 150%; text-decoration: underline;}
.community-box figure {width: 100%;}
.comment-status-box {padding: 1.6rem 4rem; display: flex; align-items: center; column-gap: 2.4rem; border-bottom: 1px solid #EEE;}
.comment-status-box .comment-box {display: flex; align-items: center; column-gap: 0.4rem;}
.comment-status-box .comment-box figure {width: 2.4rem; height: 2.4rem;}
.comment-status-box .comment-box span {color: #111; font-size: 1.6rem; font-weight: 600; line-height: normal; letter-spacing: -0.08px;}
.comment-list {display: flex; flex-direction: column;}
.comment-list > li {border-bottom: 1px solid #F3F3F3; padding-bottom: 1.2rem;}
.comment-list > li .comment-area {display: flex; flex-direction: column; row-gap: 1.2rem; padding: 2rem 4rem 0.8rem 4rem;}
.comment-list > li .comment-area.new {padding-top: 0.8rem;}
.comment-list > li .comment-content {display: flex; flex-direction: column; row-gap: 0.8rem;}
.comment-list > li .comment-area.new .comment-content {padding-left: 2rem;}
.comment-list > li .comment-content p {color: #444; font-size: 1.6rem; font-weight: 400; line-height: 140%; letter-spacing: -0.08px;}
.comment-list > li .comment-content .attach-box a {color: #5457ED; font-size: 1.6rem; font-weight: 400; line-height: 150%; text-decoration: underline;}
.comment-list > li .user-info {display: flex; align-items: center; justify-content: space-between;}
.comment-list > li .user-info .user-txt {display: flex; align-items: center; column-gap: 1.2rem;}
.comment-list > li .user-info .user-txt .user {color: #111; font-size: 1.6rem; font-weight: 700; line-height: 140%; letter-spacing: -0.016px;}
.comment-list > li .user-info .user-txt .date {color: #999; text-align: right; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.comment-list > li .user-info .icon-box {position: relative;}
.comment-list > li .user-info .icon-box .more-list {position: absolute; top: 100%; right: 0; background: #fff; border-radius: 0.4rem; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12); z-index: 1000; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.2s ease; margin-top: 0.8rem; width: 12.6rem;}
.comment-list > li .user-info .icon-box .more-list.show {opacity: 1; visibility: visible; transform: translateY(0);}
.comment-list > li .user-info .icon-box .more-list li {width: 100%;}
.comment-list > li .user-info .icon-box .more-list li a {display: inline-block; width: 100%; text-align: center; padding: 1.2rem 1.6rem; cursor: pointer; color: #222; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px; transition: background-color 0.2s ease;}
.comment-list > li .img-list {display: flex; align-items: center; column-gap: 0.8rem;}
.comment-list > li .img-list li {width: 7.1rem; height: 5.3rem; border-radius: 0.4rem; overflow: hidden;}
.comment-list > li .img-list li figure {width: 100%; height: 100%;}
.comment-list > li .img-list li figure img {object-fit: cover;}
.comment-list > li .reply-box {display: flex; align-items: flex-start; flex-direction: column; column-gap: 1.6rem;}
.comment-list > li .comment-area.new .reply-box .reply-write-box {padding-left: 2rem;}
.comment-list > li .reply-box .reply-write-box {display: flex; align-items: center; column-gap: 1.6rem;}
.comment-list > li .reply-box .reply-write-box a {color: #999; text-align: right; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}
.comment-list > li .reply-box .reply-write-box .like-box {display: flex; align-items: center;}
.comment-list > li .reply-box .reply-write-box .like-box a figure {width: 2.4rem; height: 2.4rem;}
.comment-list > li .reply-box .reply-write-box .like-box .like-cnt {color: #999; text-align: right; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}
.comment-list > li .reply-box .reply-write-box .like-box .like-cnt.thumbs {color: #F1132D;}

.mobile-reply-box {display: none;}
.mobile-reply-box {padding: 2rem; border-top: 1px solid #eee;}
.mobile-reply-box a {padding: 1.2rem; display: flex; align-items: center; column-gap: 0.8rem; border-radius: 0.8rem; background-color: #f8f8f8;}
.mobile-reply-box a figure {width: 2.4rem; height: 2.4rem;}
.mobile-reply-box a span {color: #999; font-size: 1.6rem; font-weight: 400; line-height: normal; letter-spacing: -0.08px;}

.reply-bottom {padding: 2.4rem 4rem 3.2rem 4rem;}
.reply-input-area {display: flex; flex-direction: column; row-gap: 1.2rem; width: 100%;}
.reply-input-area .reply-input-box {position: relative;}
.reply-input-area .reply-input-box .txt-cnt {position: absolute; right: 1.6rem; bottom: 1.6rem; display: flex; align-items: center;}
.reply-input-area .reply-input-box .txt-cnt span {color: #AAA; font-size: 1.2rem; font-weight: 400; line-height: normal; letter-spacing: -0.012px;}
.reply-input-area .reply-btn-box {display: flex; align-items: flex-start; justify-content: space-between;}
.reply-input-area .reply-btn-box .attach-group {display: flex; flex-direction: column; width: calc(100% - 8.4rem);}
.reply-input-area .reply-btn-box .attach-group .attach-btn-box {display: flex; align-items: center; column-gap: 0.8rem;}
.reply-input-area .reply-btn-box .attach-group .attach-btn-box .attach-name {color: #555; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; align-self: stretch; text-overflow: ellipsis; height: fit-content; padding-top: 0.4rem;}
.reply-input-area .reply-btn-box .attach-group .attach-img-list {column-gap: 0.8rem; margin-top: 1.2rem;}
.reply-input-area .reply-btn-box .attach-group .attach-img-list li {width: 7.1rem; height: 7.1rem; border-radius: 1.2rem; border: 1px solid #eee; position: relative;}
.reply-input-area .reply-btn-box .btn-group {display: flex; align-items: center; column-gap: 0.8rem; width: 8.4rem;}
.reply-input-area .reply-btn-box .btn-group button {padding: 0.4rem 0.8rem; border-radius: 0.2rem;}
.reply-input-area .reply-btn-box .btn-group button span {font-size: 1.2rem; font-weight: 600; line-height: 150%; letter-spacing: -0.012px;}
.reply-input-area .reply-btn-box .btn-group .btn-gray {background-color: #e4e4e4;}
.reply-input-area .reply-btn-box .btn-group .btn-gray span {color: #252525;}

.org-reply {display: none; margin-top: 1.6rem;}
.org-reply.show {display: flex;}

.comment-bottom-box {display: flex; align-items: center; justify-content: space-between; padding: 1.6rem 2rem; border-top: 1px solid #eee; background-color: #f9f9f9;}
.comment-bottom-box > a {display: flex; align-items: center;}
.comment-bottom-box > a figure {width: 2.4rem; height: 2.4rem;}
.comment-bottom-box > a span {color: #111; font-size: 1.4rem; font-weight: 600; line-height: normal; letter-spacing: -0.07px; padding-top: 0.2rem;}
.comment-bottom-box .status-box {display: flex; align-items: center; column-gap: 1.6rem;}
.comment-bottom-box .status-box .status {display: flex; align-items: center;}
.comment-bottom-box .status-box .status figure {width: 2.4rem; height: 2.4rem;}
.comment-bottom-box .status-box .status span {color: #111; font-size: 1.6rem; font-weight: 600; line-height: normal; letter-spacing: -0.08px; padding-top: 0.25rem;}

@media screen and (max-width: 880px) {
    .community-box {padding: 0 2rem 2.4rem 2rem; border-bottom: 6px solid #f7f7f7; margin-top: 6rem;}
    .community-box .title {margin-top: 1.2rem; font-size: 1.6rem;}
    .community-box .c-info {justify-content: flex-start; column-gap: 0.8rem;}
    .community-box .attach-box a {font-size: 1.4rem;}
    .comment-status-box {padding: 1.6rem 2rem;}
    .comment-status-box .comment-box.pc {display: none;}
    .comment-status-box .comment-box a.mobile {display: inline-block;}
    .comment-status-box .comment-box a.mobile figure {width: 1.6rem; height: 1.6rem;}
    .comment-list > li .comment-area {padding: 2rem 2rem 0.8rem 2rem;}
    .comment-list > li .user-info .icon-box {position: static;}
    .comment-list > li .user-info .icon-box .more-list {position: fixed;  width: 100%;  top: auto;  bottom: 0; left: 0; right: 0; border-radius: 1.6rem 1.6rem 0 0; margin-top: 0; transform: translateY(100%); transition: all 0.3s ease;}

    .reply-bottom {display: none;}
    .mobile-reply-box {display: block;}
    .comment-area.new .org-reply.show {padding-left: 2rem;}
}

/* ============================== [ 로그인 h_login.html ] ========================================================================================== */
.register-container .logo {width: 31.2rem; margin: 0 auto; margin-top: 7.2rem; margin-bottom: 5.6rem;}
.register-container .input-group {display: flex; flex-direction: column; row-gap: 1.2rem;}
.register-container .register-group.row {flex-direction: row; justify-content: space-between;}
.register-container .register-group .txt-a {padding: 0.4rem 1.2rem; color: #222; font-size: 1.4rem; font-weight: 600; line-height: 150%; letter-spacing: -0.014px;}
.register-container .sns-group {display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 5.6rem; margin-bottom: 7.2rem; row-gap: 1.2rem;}
.register-container .sns-group span {color: #AAA; text-align: center; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}
.register-container .sns-group .btn-bookmark figure {width: 4.8rem; height: 4.8rem;}

@media screen and (max-width: 880px) {
    .register-container .logo {width: 22rem; margin: 4.3rem auto;}
    .register-container .sns-group {margin-top: 1.6rem;}
}

/* ============================== [ 회원가입 h_join.html ] ========================================================================================== */
.register-group .chk-list {row-gap: 1.6rem; margin-bottom: 0;}
.register-group .chk-list li {padding-left: 1.2rem;}
.register-group .chk-list li input[type="checkbox"].simple-chk + label {padding-left: 3.4rem;}

/* ============================== [ 아이디/비밀번호 찾기 h_find_id_password.html ] ========================================================================================== */
.find-container {background-color: #fff; border: 1px solid #eee; display: flex; flex-direction: column;}
.find-container .section-tab {margin-top: 0;}
.find-container .section-tab .section-list {width: 100%; max-width: 100%;}
.find-container .section-tab .section-list li {width: 50%;}
.find-container .section-tab .section-list li a {width: 100%; text-align: center;}
.find-container .tab-contents-wrapper {padding: 3.2rem 4rem 4rem 4rem;}
.find-container .find-box {display: flex; flex-direction: column; row-gap: 2.4rem;}

@media screen and (max-width: 880px) {
    .find-container {border: none; margin-top: 5rem;}
    .find-container .tab-contents-wrapper {padding: 2rem;}
}

/* ============================== [ 프로필 h_profile.html ] ========================================================================================== */
.profile-container {padding: 3.2rem 2.4rem; border-radius: 0.8rem; background-color: #222; width: 100%; margin-top: 3.2rem; display: flex; flex-direction: column; row-gap: 2.4rem;}
.profile-container .user-box {display: flex; align-items: center; justify-content: space-between;}
.profile-container .user-box h3 {color: #EEE; font-size: 2.4rem; font-weight: 600; line-height: 130%; letter-spacing: -0.024px;}
.profile-container .user-box a {display: flex; align-items: center; column-gap: 0.4rem;}
.profile-container .user-box a span {color: #BBB; font-size: 1.6rem; font-weight: 400; line-height: normal; letter-spacing: -0.016px; padding-top: 0.2rem;}
.profile-container .user-box a figure {width: 2.4rem; height: 2.4rem;}
.profile-container .explain-box {padding: 2.4rem 2rem; display: flex; flex-direction: column; row-gap: 1.6rem; border-radius: 0.8rem; background-color: #2F2F2F;}
.profile-container .explain-box .txt-box {display: flex; flex-direction: column; row-gap: 0.8rem;}
.profile-container .explain-box .txt-box .welcome {color: #F1132D; font-size: 1.2rem; font-weight: 600; line-height: 130%; letter-spacing: -0.012px;}
.profile-container .explain-box .txt-box p {color: #BBB; font-size: 1.6rem; font-weight: 400; line-height: 130%; letter-spacing: -0.016px;}
.profile-container .explain-box .img-list {display: flex; align-items: center; column-gap: 1.2rem; flex-wrap: wrap; row-gap: 1.2rem;}
.profile-container .explain-box .img-list li {width: 8rem; height: 8rem; border-radius: 0.4rem; overflow: hidden;}
.profile-container .explain-box .img-list li figure {width: 100%; height: 100%;}
.profile-container .explain-box .img-list li figure img {object-fit: cover;}
.profile-container .activity-box .activity-list {padding: 1.2rem; display: flex; align-items: center; column-gap: 3.2rem;}
.profile-container .activity-box .activity-list li {width: 25%; position: relative;}
.profile-container .activity-box .activity-list li:after {content:''; width: 1px; height: 2.4rem; background-color: #2f2f2f; position: absolute; right: -1.6rem; top: 50%; transform: translateY(-50%);}
.profile-container .activity-box .activity-list li:last-child:after {display: none;}
.profile-container .activity-box .activity-list li a {display: flex; flex-direction: column; row-gap: 0.8rem;}
.profile-container .activity-box .activity-list li a .status-cnt {color: #EEE; text-align: center; font-size: 2rem; font-weight: 600; line-height: 110%; letter-spacing: -0.02px;}
.profile-container .activity-box .activity-list li a .subject {color: #888; text-align: center; font-size: 1.4rem; font-weight: 400; line-height: 110%; letter-spacing: -0.014px;}
.profile-container .sub-title.mobile {display: none;}
.progress-container {margin-top: 3.2rem; display: flex; flex-direction: column; row-gap: 1.6rem;}
.progress-container .title {color: #AAA; font-size: 1.8rem; font-weight: 700; line-height: 130%; letter-spacing: -0.018px; padding-left: 2rem;}
.progress-container .progress-list {display: flex; flex-direction: column;}
.progress-container .progress-list li a {display: flex; justify-content: space-between; padding: 2.4rem 2rem;}
.progress-container .progress-list li a .subject {color: #111; font-size: 1.8rem; font-weight: 600; line-height: 130%; letter-spacing: -0.018px;}
.progress-container .progress-list li a .progress-box {display: flex; align-items: center; column-gap: 0.8rem;}
.progress-container .progress-list li a .progress-box .progress-cnt {color: #F1132D; font-size: 1.6rem; font-weight: 600; line-height: normal; padding-top: 0.2rem; letter-spacing: -0.016px;}
.progress-container .progress-list li a .progress-box figure {width: 1.6rem; height: 1.6rem;}

@media screen and (max-width: 880px) {
    .sub-main .title-container.add.no-mobile {display: none;}
    .profile-container {margin-top: 0; border-radius: 0; row-gap: 0; padding-top: 0;}
    .profile-container .user-box {padding: 1.6rem 0;}
    .profile-container .user-box a span {display: none;}
    .profile-container .sub-title.mobile {display: block; padding: 1.6rem 0;}
    .profile-container .sub-title.mobile a {display: flex; align-items: center; justify-content: space-between;}
    .profile-container .sub-title.mobile a .subject {display: flex; align-items: center; column-gap: 0.8rem;}
    .profile-container .sub-title.mobile a .subject figure {width: 2.4rem; height: 2.4rem;}
    .profile-container .sub-title.mobile a .subject h2 {color: #EEE; font-size: 2rem; font-weight: 700; line-height: 130%; letter-spacing: -0.02px;}
    .profile-container .sub-title.mobile a .icon-box {display: flex; align-items: center; column-gap: 1.6rem;}
    .profile-container .sub-title.mobile a .icon-box button figure {width: 2.4rem; height: 2.4rem;}
    .profile-container .explain-box {padding: 2rem 1.2rem 1.2rem 1.2rem;}
    .profile-container .explain-box .txt-box p {font-size: 1.4rem; letter-spacing: -0.014px;}
    .profile-container .explain-box .img-list li {width: 6.3rem; height: 6.3rem;}
    .profile-container .activity-box .activity-list {padding: 0.8rem 1.2rem 1.2rem 1.2rem; margin-top: 1.6rem;}
    .profile-container .activity-box .activity-list li a .status-cnt {font-size: 1.8rem;}
    .profile-container .activity-box .activity-list li a .subject {font-size: 1.1rem;}
    .progress-container {margin-top: 2.4rem; row-gap: 0;}
    .progress-container .title {font-size: 1.2rem;}
    .progress-container .progress-list li a {padding: 1.6rem 2rem;}
    .progress-container .progress-list li a .subject {font-size: 1.6rem;}
}

/* ============================== [ 정기이용권 h_regular_ticket.html ] ========================================================================================== */
.sub-container {display: flex; flex-direction: column; row-gap: 3.2rem; margin-top: 3.2rem;}
.status-container {display: flex; align-items: center; justify-content: space-between; padding: 3.2rem 2.4rem; border-radius: 0.8rem; border: 1px solid #3f3f3f; background-color: #2f2f2f;}
.status-container .status-box {display: flex; flex-direction: column; row-gap: 0.8rem;}
.status-container .status-box .subject {color: #888; font-size: 1.6rem; font-weight: 600; line-height: 130%; letter-spacing: -0.016px;}
.status-container .status-box .status-txt {display: flex; align-items: center; column-gap: 0.4rem;}
.status-container .status-box .status-txt figure {width: 2.4rem; height: 2.4rem;}
.status-container .status-box .status-txt .status {color: #EEE; font-size: 2.4rem; font-weight: 600; line-height: 130%; letter-spacing: -0.024px;}
.status-container > a {display: flex; align-items: center;}
.status-container > a span {color: #BBB; font-size: 1.6rem; font-weight: 400; line-height: 130%; letter-spacing: -0.016px;}
.status-container > a figure {width: 2.4rem; height: 2.4rem;}

.history-container {display: flex; flex-direction: column;}
.history-container .title {color: #111; font-size: 1.8rem; font-weight: 700; line-height: 130%; letter-spacing: -0.018px;}
.history-container .empty {margin: 18rem auto;}
.history-container .empty span {color: #999; text-align: center; font-size: 1.8rem; font-weight: 400; line-height: 130%; letter-spacing: -0.018px;}

.history-container .history-list {display: flex; flex-direction: column;}
.history-container .history-list li {padding: 2.4rem 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee;}
.history-container .history-list.point-list li:last-child {border-bottom: none;}
.history-container .history-list li .duration-box {display: flex; flex-direction: column; row-gap: 0.8rem;}
.history-container .history-list li .duration-box .category {padding: 0.4rem 0.8rem; border-radius: 0.4rem; border: 1px solid #f0f0f0; background-color: #f3f3f3; color: #7B7B7B; width: fit-content; font-size: 1.4rem; font-weight: 400; line-height: normal; letter-spacing: -0.07px;}
.history-container .history-list li .duration-box .category.earn {background-color: #555; border: 1px solid #444; color: #eee;}
.history-container .history-list li .duration-box .category.handle {background-color: #F1132D; color: #eee; border: none;}
.history-container .history-list li .duration-box .category.done {background-color: #fff; color: #F1132D; border: 1px solid #F1132D;}
.history-container .history-list li .duration-box .duration-txt {color: #111; font-size: 2rem; font-weight: 400; line-height: 140%; letter-spacing: -0.1px;}
.history-container .history-list li .duration-box .point-txt {color: #111; font-size: 2rem; font-weight: 700; line-height: 140%; letter-spacing: -0.1px;}
.history-container .history-list li .payment-box {display: flex; flex-direction: column; row-gap: 0.8rem;}
.history-container .history-list li .payment-box .pay-date {color: #999; text-align: right; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}
.history-container .history-list li .payment-box .price {color: #222; text-align: right; font-size: 2rem; font-weight: 700; line-height: 140%; letter-spacing: -0.1px;}
.history-container .history-list li .payment-box .point {color: #222; text-align: right; font-size: 2rem; font-weight: 700; line-height: 140%; letter-spacing: -0.1px;}

.history-container .section-tab {margin-top: 0;}
.history-container .fixed-btn-box {margin-top: 4rem; display: flex; align-items: center; justify-content: center;}
.history-container .fixed-btn-box button {width: 61rem;}

@media screen and (max-width: 880px) {
    .sub-main-2 {padding: 0;}
    .regular .sub-container {margin-top: 6rem;}
    .sub-container {margin-top: 1.2rem; row-gap: 2.4rem;}
    .sub-container.no-padding {padding: 0; margin-top: 0;}
    .sub-container.no-padding .status-container {margin: 0 2rem;}
    .status-container {padding: 2rem 1.6rem; margin: 0 2rem;}
    .sub-main-3 .status-container {margin: 0;}
    .status-container .status-box {row-gap: 0.4rem;}
    .status-container .status-box .subject {font-size: 1.2rem;}
    .status-container .status-box .status-txt figure {width: 1.6rem; height: 1.6rem;}
    .status-container .status-box .status-txt .status {font-size: 1.8rem;}
    .status-container > a span {font-size: 1.2rem;}
    .status-container > a figure {width: 1.6rem; height: 1.6rem;}
    .history-container .empty span {font-size: 1.4rem;}
    .history-container > .title {padding: 0 2rem;}
    .history-container .history-list li {padding: 1.6rem 2rem;}
    .history-container .history-list li .duration-box .category {font-size: 1.1rem; letter-spacing: -0.055px;}
    .history-container .history-list li .duration-box .duration-txt {font-size: 1.6rem; letter-spacing: -0.08px;}
    .history-container .history-list li .duration-box .point-txt {font-size: 1.6rem; letter-spacing: -0.08px;}
    .history-container .history-list li .payment-box .pay-date {font-size: 1.2rem; letter-spacing: -0.012px;}
    .history-container .history-list li .payment-box .price {font-size: 1.6rem; letter-spacing: -0.08px;}
    .history-container .history-list li .payment-box .point {font-size: 1.6rem; letter-spacing: -0.08px;}

    .sub-container.no-padding .history-container .history-list {padding: 0 2rem;}
    .sub-container.no-padding .history-container .history-list.point-list {padding: 0;}
    
    .history-container .section-tab .section-list li {width: 33%;}
    .history-container .section-tab .section-list li a {width: 100%; text-align: center;}
}

/* ============================== [ 정기이용권 구매 + 포인트 충전 / h_regular_ticket_purchase.html + h_point_purchase.html ] ========================================================================================== */

@media screen and (max-width: 880px) {
    .option-group.ticket .price {font-size: 1.8rem;}
    input[type="radio"].circle-radio + label::before {width: 2rem; height: 2rem;}
    .register-container.regular {margin-top: 6rem;}
    .sub-container.point-container {margin-top: 6rem; padding-bottom: 9rem;}
}

/* ============================== [ 내 등록 재능 - h_my_market.html ] ========================================================================================== */
.sub-main-2.mymenu {display: flex; align-items: stretch; padding: 0;}
.sub-main-2.mymenu .left-box {width: 24rem; padding-top: 4.8rem; padding-bottom: 4.8rem; border-right: 1px solid #eee;}
.sub-main-2.mymenu .left-box .top-title {color: #F1132D; font-size: 1.8rem; font-weight: 700; line-height: normal; letter-spacing: -0.09px;}
.sub-main-2.mymenu .left-box .mypage-gnb-group .title {padding-left: 0;}
.sub-main-2.mymenu .left-box .mypage-gnb > li > a {padding: 1.6rem 2rem 1.6rem 0;}
.sub-main-2.mymenu .left-box .mypage-gnb-group.dropdown-menu .mypage-gnb > li.active > a {color: #111;}
.sub-main-2.mymenu .left-box .mypage-gnb > li .submenu li a {padding: 1.2rem 2rem;}
.sub-main-2.mymenu .right-box {width: calc(100% - 24rem); padding-top: 4.8rem; padding-bottom: 10rem;}
.sub-main-2.mymenu .right-box .title-container.pc {display: flex; align-items: center; justify-content: space-between; padding-left: 4rem;}
.sub-main-2.mymenu .right-box .title-container.pc .btn-box {display: flex; align-items: center; column-gap: 1.6rem; width: fit-content;}
.sub-main-2.mymenu .right-box .section-tab {padding-left: 4rem;}
/* .sub-main-2.mymenu .right-box .tab-contents-wrapper {padding-left: 4rem;} */
.sub-main-2.mymenu .right-box .sort-wrapper {padding-top: 2.4rem; padding-left: 4rem;}
.sub-main-2.mymenu .right-box .market-container {padding: 0; padding-left: 4rem;}
.sub-main-2.mymenu .right-box .market-container .product-list {margin-top: 1.6rem;}
.sub-main-2.mymenu .right-box .market-container .product-list li {width: calc(33.34% - 1.5rem);}

.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner {display: flex; flex-direction: column;}
.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner figure {width: 100%; height: 19.2rem; border-radius: 0.4rem; overflow: hidden;}
.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner figure img {object-fit: cover;}
.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner .txt-box {padding: 0.8rem 0.2rem 0 0.2rem; display: flex; flex-direction: column; row-gap: 0.4rem;}
.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner .txt-box .category {color: #F1132D; font-size: 1.2rem; font-weight: 600; line-height: normal; letter-spacing: -0.06px;}
.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner .txt-box .subject {color: #111; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; align-self: stretch; text-overflow: ellipsis; font-size: 1.6rem; font-weight: 400; line-height: normal; letter-spacing: -0.08px;}
.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner .txt-box .price-box {display: flex; align-items: center; column-gap: 0.4rem;}
.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner .txt-box .price-box .percent {color: #FF0F2B; font-size: 1.6rem; font-weight: 600; line-height: normal; letter-spacing: -0.08px;}
.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner .txt-box .price-box .price {color: #111; font-size: 1.6rem; font-weight: 600; line-height: normal; letter-spacing: -0.08px;}
.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner .txt-box .price-box .price:after {font-size: 1.6rem; font-weight: 600; line-height: normal; letter-spacing: -0.08px;}

.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .sell-box {display: flex; align-items: center; justify-content: space-between;}
.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .sell-box .date {color: #888; font-size: 1.2rem; font-weight: 400; line-height: normal; letter-spacing: -0.06px;}
.sell-status {padding: 0.4rem 0.8rem; border-radius: 0.4rem; font-size: 1.1rem; font-weight: 400; line-height: normal; letter-spacing: -0.055px;}
.sell-status.order-done {background-color: #3577DA; color: #eee;}
.sell-status.deal-done {background-color: #555; color: #eee;}
.sell-status.order-cancel {background-color: #F3F3F3; color: #7B7B7B;}
.sell-status.request-cancel {background-color: #F3F3F3; color: #555; border: 1px solid #555;}
.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .sell-box .sell-id {color: #888; font-size: 1.2rem; font-weight: 600; line-height: normal; letter-spacing: -0.06px;}
.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .sell-box a {display: flex; align-items: center; flex-direction: row;}
.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .sell-box a span {color: #888; font-size: 1.2rem; font-weight: 600; line-height: normal; letter-spacing: -0.06px;}
.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .sell-box a figure {width: 1.2rem; height: 1.2rem;}

.sell-container {display: flex; align-items: stretch; column-gap: 0.8rem;}
.sell-container button {flex: 1; padding: 0.8rem 1.6rem; border-radius: 0.2rem;}
.sell-container button.btn-gray {border: none; background-color: #E4E4E4;}
.sell-container button.btn-gray span {color: #252525; font-weight: 600; line-height: 150%;}

.my-question-list {display: flex; flex-direction: column;}
.my-question-list > li {padding: 1.6rem 0; display: flex; flex-direction: column; row-gap: 0.8rem; border-bottom: 1px solid #eee; padding-left: 4rem;}
.my-question-list > li:last-child {border-bottom: none;}
.my-question-list > li .title-box {padding: 2rem 0; display: flex; align-items: center; justify-content: space-between;}
.my-question-list > li .title-box h6 {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; color: #111; text-overflow: ellipsis; font-size: 1.8rem; font-weight: 700; line-height: 130%; letter-spacing: -0.018px;}
.my-question-list > li .title-box a figure {width: 1.6rem; height: 1.6rem;}
.my-question-list > li .answer-container .answer-box {display: flex; align-items: center; justify-content: space-between; column-gap: 4rem;}
.my-question-list > li .answer-container .answer-status {width: calc(100% - 9rem); padding-bottom: 2.4rem; display: flex; flex-direction: column; row-gap: 0.8rem;}
.my-question-list > li .answer-container .answer-box .answer-btn {width: 9rem;}
.my-question-list > li .answer-container .status-box {display: flex; align-items: center; justify-content: space-between;}
.user-status {display: flex; align-items: center; column-gap: 0.8rem;}
.user-status .status {padding: 0.4rem 0.8rem; border-radius: 0.4rem; background-color: #aaa; color: #FFF; font-size: 1.2rem; font-weight: 600; line-height: normal; letter-spacing: -0.06px;}
.user-status .status.done {background-color: #F1132D;}
.user-status .user {color: #111; font-size: 1.4rem; font-weight: 700; line-height: 140%; letter-spacing: -0.014px;}
.my-question-list > li .answer-container .status-box .date {color: #AAA; text-align: right; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.my-question-list > li .answer-container .answer-status .q-content {display: flex; align-items: flex-start; justify-content: space-between; column-gap: 0.8rem; cursor: pointer;}
.my-question-list > li .answer-container .answer-status .q-content .p-wrapper {width: calc(100% - 2.4rem);}
.my-question-list > li .answer-container .answer-status .q-content .p-wrapper p {color: #111; font-size: 1.4rem; font-weight: 400; line-height: 140%; letter-spacing: -0.014px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis;}
.my-question-list > li .answer-container .answer-status .q-content a {width: 2.4rem; height: 2.4rem;}
.my-question-list > li .answer-container .answer-status .q-content a figure {width: 100%; height: 100%;}
.my-question-list > li .answer-container .answer-btn button {padding: 0.8rem 1.6rem;}
.my-question-list > li .answer-container .answer-done-box {display: none; padding: 2rem; background-color: #F8F8F8;}
.my-question-list > li .answer-container .answer-done-box p {color: #111; font-size: 1.4rem; font-weight: 400; line-height: 140%; letter-spacing: -0.014px;}
.my-question-list > li .answer-container .answer-done-box .img-box ul {display: flex; align-items: center; column-gap: 0.6rem; margin-top: 1.2rem;}
.my-question-list > li .answer-container .answer-done-box .img-box ul li {width: 7.1rem; height: 7.1rem; border-radius: 0.2rem; border: 1px solid #eee;}
.my-question-list > li .answer-container .answer-done-box .img-box ul li figure {width: 100%; height: 100%;}
.my-question-list > li .answer-container .answer-done-box .img-box ul li figure img {object-fit: cover;}
.my-question-list > li .answer-container .answer-done-txt {padding: 1.6rem; display: flex; flex-direction: column; row-gap: 0.8rem; background-color: #fff;}
.my-question-list > li .answer-container .answer-done-txt p {color: #555; font-size: 1.4rem; font-weight: 400; line-height: 140%; letter-spacing: -0.014px;}

/* 모달 */
.question-group {display: flex; flex-direction: column; row-gap: 2.4rem; padding: 1.8rem 2rem; background-color: #f7f7f7;}
.question-group .question-title-box {display: flex; flex-direction: column; row-gap: 0.8rem;}
.question-group .question-title-box .question-user {display: flex; align-items: center; justify-content: space-between;}
.question-group .question-title-box .question-user .date {color: #AAA; text-align: right; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.question-group .question-title-box p {text-align: left; color: #111; font-size: 1.4rem; font-weight: 400; line-height: 140%; letter-spacing: -0.014px;}
.question-group .img-box ul {display: flex; align-items: center; column-gap: 0.8rem;}
.question-group .img-box ul li {width: 7.1rem; height: 7.1rem; border-radius: 0.2rem; border: 1px solid #eee;}
.question-group .img-box ul li figure {width: 100%; height: 100%;}
.question-group .img-box ul li figure img {object-fit: cover;}

@media screen and (max-width: 880px) {
    .sub-main-2.mymenu .left-box {display: none;}
    .sub-main-2.mymenu .right-box .title-container.pc {display: none;}
    .sub-main-2.mymenu .right-box .title-container.mobile .icon-box {display: flex; align-items: center; column-gap: 1.6rem;}
    .sub-main-2.mymenu .right-box {width: 100%; padding-left: 0; border-left: 0; padding-top: 0; padding-bottom: 2rem;}

    .sub-main-2.mymenu .right-box .section-tab {padding-left: 0;}
    .sub-main-2.mymenu .right-box .sort-wrapper {padding: 1.6rem 2rem; padding-bottom: 0;}
    .sub-main-2.mymenu .right-box .market-container {padding: 0 2rem;}
    /* .sub-main-2.mymenu .right-box .tab-contents-wrapper {padding: 0 2rem;} */
    .sub-main-2.mymenu .right-box .market-container .product-list {flex-direction: column; margin-top: 0.8rem;}
    .sub-main-2.mymenu .right-box .market-container .product-list li {width: 100%;}
    .sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner {flex-direction: row; column-gap: 1.2rem;}
    .sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner figure {width: 14rem; height: 10.5rem;}
    .sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner figure img {aspect-ratio: 4/3;}
    .sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner .txt-box {width: calc(100% - 15.2rem); padding: 0.4rem 0;}
    .sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner .txt-box .subject {-webkit-line-clamp: 2; font-size: 1.4rem;}
    .sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner .txt-box .txt-info span {font-size: 1.1rem;}

    .sell-container button {padding: 0.8rem 1.6rem;}
    .sell-container button.btn-wh-line {height: 3.7rem;}

    .my-question-list li {padding: 0; border-bottom: 0.6rem solid #F7F7F7;}
    .my-question-list li .title-box {border-bottom: 1px solid #eee; padding: 2rem;}
    .my-question-list li .title-box h6 {font-size: 1.4rem; letter-spacing: -0.014px;}
    .my-question-list li .answer-container .answer-box {padding: 1.6rem 2rem; flex-direction: column;}
    .my-question-list li .answer-container .answer-status {width: 100%;}
    .my-question-list li .answer-container .answer-btn {width: 100% !important;}
    .my-question-list li .answer-container .answer-btn button {width: 100%; border-radius: 0.2rem;}
}

/* ============================== [ 등록재능관리 - h_my_market_setting.html ] ========================================================================================== */
.sub-main-2.mymenu .right-box .market-container .product-list li {display: flex; flex-direction: column; row-gap: 0.8rem;}
.setting-container {display: flex; align-items: center; column-gap: 0.8rem;}
.setting-container .box-select {width: calc(33.33% - 0.5rem); min-height: auto;}
.setting-container .box-select .select-trigger {padding: 0.8rem 1.2rem; min-height: auto;}
.setting-container button {width: calc(33.33% - 0.5rem);}
.market-container .btn-box button {width: 100%; margin-top: 3.6rem;}

@media screen and (max-width: 880px) {
    .sub-main-2.mymenu .right-box .section-tab.setting {display: none;}
    .sub-main-2.mymenu .right-box .sort-wrapper.setting {display: none;}
    .setting-container button {padding: 0.8rem 1.6rem;}
}

/* ============================== [ 판매상세 - h_my_market_sell_detail.html ] ========================================================================================== */
/* 재능 구매 페이지 상속 */
.product-container.sell {margin-top: 1.6rem; position: relative;}
.product-container.sell .product-detail .product-info {row-gap: 0.8rem;}
.product-container .product-detail .product-info .sell-box {display: flex; align-items: center; justify-content: space-between; color: #888; font-size: 1.4rem; font-weight: 400; line-height: normal; letter-spacing: -0.07px;}
.purchase-container.sell .payment-agreement {padding-bottom: 8rem;}
.purchase-container.sell .payment-agreement ul {margin-bottom: 2.4rem;}

@media screen and (max-width: 880px) {
    .product-container.sell {margin-top: 6.8rem;}
    .purchase-container.sell .payment-agreement {display: none;}
    .purchase-container.sell .payment-box {border-bottom: none;}
    .mobile.sell .info-list {margin: 0 2rem; margin-bottom: 2rem;}
    .product-container.sell .product-detail .product-info .sell-box {position: absolute; top: -0.8rem; left: 0; width: 100%; padding: 0 2rem;}
}

/* ============================== [ 내 등록 정비지식인 - h_my_knowhow_q.html ] ========================================================================================== */
.sub-main-2.mymenu .qna-container {padding-left: 4rem;}

@media screen and (max-width: 880px) {
    .sub-main-2.mymenu .qna-container {padding: 0;}
}

/* ============================== [ 관심재능 - h_my_favorite_market.html ] ========================================================================================== */
.sub-main-2.mymenu .sub-container {margin-top: 0.8rem;}
.sub-main-2.mymenu .category-menu-container {padding-left: 4rem; border-bottom: none;}
.sub-main-2.mymenu .category-menu-container.job {padding-left: 3rem;}
.sub-main-2.mymenu .category-dropdown {right: 0;}
.sub-main-2.mymenu .filter-wrapper {margin-top: 1.2rem; padding-left: 4rem; margin-bottom: 0;}
.sub-main-2.mymenu .filter-dropdown {left: 4rem;}
.sub-main-2.mymenu .right-box .market-container .product-list li {position: relative;}
.sub-main-2.mymenu .right-box .market-container .product-list li .btn-bookmark {position: absolute; right: 2rem; top: 52%;}

@media screen and (max-width: 880px) {
    .sub-main-2.mymenu .category-menu-container {padding-left: 0; border-bottom: 0.6rem solid #F7F7F7;}
    .sub-main-2.mymenu .filter-wrapper {padding-left: 2rem;}
    .sub-main-2.mymenu .right-box .market-container .product-list li .btn-bookmark {right: auto; left: 10.4rem; top: 7.3rem;}
}

/* ============================== [ 구매내역 - h_my_purchase.html ] ========================================================================================== */
@media screen and (max-width: 880px) {
    #cancelModal textarea {height: 11rem;}
    .sub-main-2.mymenu .sub-container.m-margin {margin-top: 6rem;}
}

/* ============================== [ 내 리뷰 - h_my_review.html ] ========================================================================================== */
/* review-list 상속받아 사용 */
.review-list.myreview li {row-gap: 2rem; padding-left: 4rem; border-bottom: 1px solid #eee; padding-bottom: 2rem;}
.review-list.myreview li:last-child {border-bottom: none;}
.review-list.myreview li .review-title {display: flex; align-items: center; justify-content: space-between; column-gap: 1.2rem;}
.review-list.myreview li .review-title h6 {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; font-size: 1.8rem; color: #111; font-weight: 700; line-height: 130%; letter-spacing: -0.018px;}

@media screen and (max-width: 880px) {
    .review-list.myreview li {padding: 0; border-bottom: none;}
    .review-list.myreview li .review-title {padding: 2rem; border-bottom: 1px solid #eee; border-top: 6px solid #eee;}
    .review-list.myreview li:first-child .review-title {border-top: none;}
    .review-list.myreview li .review-group {padding: 0 2rem 1.6rem 2rem;}
    .review-list.myreview li .review-title h6 {font-size: 1.4rem; width: calc(100% - 6.2rem);}
    .review-list.myreview li .review-title .edit-box {width: 6.2rem; margin: 0;}
}

/* ============================== [ 내 구매내역 상세 - h_my_purchase_detail.html ] ========================================================================================== */
.sell-user-box {margin-bottom: 2rem; padding: 1.6rem; display: flex; align-items: center; justify-content: space-between; background-color: #DFECFF; border-radius: 0.8rem;}
.sell-user-box > span {color: #111; font-size: 1.4rem; font-weight: 400; line-height: 140%; letter-spacing: -0.014px;}
.sell-user-box .sell-user-tel {display: flex; align-items: center; column-gap: 0.8rem;}
.sell-user-box .sell-user-tel figure {width: 1.6rem; height: 1.6rem;}
.sell-user-box .sell-user-tel span {color: #111; font-size: 1.4rem; font-weight: 600; line-height: 140%; letter-spacing: -0.014px;}
.sell .fixed-btn-box button {flex: 1;}

/* 리뷰 작성 모달 */
.review-box {display: flex; flex-direction: column; row-gap: 1.6rem; align-items: center; justify-content: center;}
.review-box .txt-box {display: flex; flex-direction: column; row-gap: 0.8rem;}
.review-box .txt-box p {color: #111; text-align: center; font-size: 2rem; font-weight: 700; line-height: normal; letter-spacing: -0.1px;}
.review-box .txt-box p.sub {color: #888; font-size: 1.6rem; font-weight: 400; letter-spacing: -0.08px;}
.review-box .review-star-box {display: flex; align-items: center; column-gap: 0.4rem;}
.review-box .review-star-box button figure {width: 3.2rem; height: 3.2rem;}

@media screen and (max-width: 880px) {
    .purchase-container {padding-bottom: 10rem;}
    .sell-user-box {margin: 0 2rem 1.2rem 2rem;}
}

/* ============================== [ 내 등록 게시물 - h_my_community.html ] ========================================================================================== */
.sub-main-2.mymenu .community-list li a {padding: 2.4rem 0 2.4rem 4rem;}
.sub-main-2.mymenu .community-list li:last-child a {border-bottom: none;}

@media screen and (max-width: 880px) {
    .sub-main-2.mymenu .community-list li a {padding: 2rem;}
}

/* ============================== [ 공지사항 - h_notice.html ] ========================================================================================== */
.sub-main-2.mymenu .community-list.notice li a {padding: 2rem 4rem;}
.sub-main-2.mymenu .community-list.notice li a:last-child {border-bottom: 1px solid #eee;}
.sub-main-2.mymenu .community-list.notice li a .community-title-box {row-gap: 0.8rem;}
.sub-main-2.mymenu .community-list.notice li a .community-title-box .title {font-size: 1.8rem;}

@media screen and (max-width: 880px) {
    .sub-main-2.mymenu .community-list.notice li a {padding: 2rem;}
    .sub-main-2.mymenu .community-list.notice li a .community-title-box {width: 100%;}
    .sub-main-2.mymenu .community-list.notice li a .community-title-box .title {font-size: 1.6rem;}
}

/* ============================== [ Q&A - h_qna.html ] ========================================================================================== */
.sub-main-2.mymenu .community-list.notice li a .user-box .answer-status {border-radius: 0.4rem; background-color: #aaa; padding: 0.4rem 0.8rem; color: #fff; font-size: 1.2rem; font-weight: 600; line-height: normal; letter-spacing: -0.06px;}
.sub-main-2.mymenu .community-list.notice li a .user-box .answer-status.done {background-color: #F1132D;}

/* ============================== [ 공지사항_상세 - h_notice_detail.html ] ========================================================================================== */
.notice-container {display: flex; flex-direction: column;}
.notice-container .notice-title {display: flex; flex-direction: column; row-gap: 0.8rem; padding: 2rem 4rem; border-bottom: 1px solid #eee;}
.notice-container .notice-title .title {color: #222; font-size: 2.4rem; font-weight: 700; line-height: 140%; letter-spacing: -0.12px;}
.notice-container .notice-title .user-box {display: flex; align-items: center; column-gap: 0.8rem;}
.notice-container .notice-title .user-box span {color: #999; text-align: right; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}
.notice-container .notice-title .user-box span.hits:before {padding-right: 0.5rem;}
.notice-container .notice-content {display: flex; flex-direction: column; padding: 5.3rem 0 5.3rem 4rem; row-gap: 1rem;}
.notice-container .notice-content p {color: #222; font-size: 1.6rem; font-weight: 400; line-height: 150%; letter-spacing: -0.016px;}
.notice-container .notice-content figure {width: 32rem; height: 100%;}
.notice-container .notice-content .attach-box a {color: #5457ED; font-size: 1.6rem; font-weight: 400; line-height: 150%; text-decoration: underline;}

@media screen and (max-width: 880px) {
    .notice-container .notice-title {padding: 2rem; border-bottom: none;}
    .notice-container .notice-title .title {font-size: 1.6rem;}
    .notice-container .notice-title .user-box span {font-size: 1.2rem;}
    .notice-container .notice-content {padding: 2rem; padding-top: 0; row-gap: 1.6rem;}
    .notice-container .notice-content p {font-size: 1.6rem;}
    .notice-container .notice-content figure {width: 100%; height: 100%;}
    .notice-container .notice-content .attach-box a {font-size: 1.4rem;}
}

/* ============================== [ Q&A 상세 - h_qna_detail.html ] ========================================================================================== */
.notice-container .notice-title .user-box span.answer-status {padding: 0.4rem 0.8rem; background-color: #aaa; border-radius: 0.4rem; color: #fff; font-size: 1.2rem; font-weight: 600;}
.notice-container .notice-title .user-box span.answer-status.done {background-color: #F1132D;}
.notice-container .notice-content.qna {padding: 3.2rem 0 3.2rem 4rem;}
.notice-container .qna-answer {border-top: 0.6rem solid #F7F7F7;}

@media screen and (max-width: 880px) {
    .notice-container .notice-content.qna {padding: 0 2rem 2rem 2rem;}
}

/* ============================== [ 내 등록 구인구직 - h_my_job.html ] ========================================================================================== */
/* job_list.html 상속받아 사용 */
.sub-main-2.mymenu .job-container {padding-left: 4rem;}
.job-list li.end a {background-color: #F8F8F8;}
.job-list li a .category-box .category.end {color: #eee; background-color: #222;}
.job-list li.end a .job-box span {color: #999;}

.applicant-list {display: flex; flex-direction: column;}
.applicant-list > li {padding: 2.4rem 2rem 2.4rem 4rem; display: flex; flex-direction: column; row-gap: 1.2rem; border-bottom: 1px solid #eee;}
.applicant-list > li:last-child {border-bottom: none;}
.applicant-list > li .applicant-title {display: flex; align-items: center; justify-content: space-between;}
.applicant-list > li .applicant-title .title-txt {display: flex; flex-direction: column; row-gap: 0.4rem;}
.applicant-list > li .applicant-title .title-txt h6 {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; align-self: stretch; overflow: hidden; color: #111; text-overflow: ellipsis; font-size: 2rem; font-weight: 600; line-height: normal; letter-spacing: -0.1px;}
.applicant-list > li.done .applicant-title .title-txt h6 {color: #999;}
.applicant-list > li .applicant-title .title-txt .applicant-cnt {display: flex; align-items: center; column-gap: 0.8rem;}
.applicant-list > li.done .applicant-title .title-txt .applicant-cnt span {color: #999;}
.applicant-list > li .applicant-title .title-txt .applicant-cnt .person {color: #F1132D; font-size: 1.4rem; font-weight: 700; line-height: 130%; letter-spacing: -0.07px;}
.applicant-list > li .applicant-title .title-txt .applicant-cnt .deadline {color: #888; font-size: 1.2rem; font-weight: 400; line-height: 130%; letter-spacing: -0.06px;}
.applicant-list > li .applicant-title .employment-status span {padding: 0.4rem 1.2rem; border-radius: 0.2rem; font-size: 1.2rem; font-weight: 500; line-height: 150%; letter-spacing: -0.012px;}
.applicant-list > li .applicant-title .employment-status span.end {color: #222; border: 1px solid #ddd; background-color: #f5f5f5;}
.applicant-list > li .applicant-title .employment-status span.done {color: #eee; border: none; background-color: #333;}
.applicant-list > li .applicant-container {display: none;}
.applicant-list > li .applicant-container.show {display: block;}
.applicant-list > li .person-list {display: flex; gap: 1.2rem; flex-wrap: wrap;}
.applicant-list > li .person-list li {width: calc(50% - 0.6rem); padding: 1.6rem; border-radius: 0.8rem; background-color: #f4f4f4; display: flex; flex-direction: column; row-gap: 1.2rem;}
.applicant-list > li .person-list li .row {display: flex; align-items: center; justify-content: space-between;}
.applicant-list > li .person-list li .row span {font-size: 1.4rem; line-height: 140%; letter-spacing: -0.014px;}
.applicant-list > li .person-list li .row span.subject {color: #888; font-weight: 400;}
.applicant-list > li .person-list li .row span.p-value {color: #111; font-weight: 600;}
.applicant-list > li .person-list li .btn-wh {padding: 0.4rem 1.2rem;}
.applicant-list > li .person-list li .btn-wh span {font-size: 1.2rem; letter-spacing: -0.012px; font-weight: 500;}
.applicant-list > li > .btn-wh {padding: 0.8rem 1.6rem; column-gap: 0.4rem;}
.applicant-list > li > .btn-wh span {padding-top: 0.2rem;}
.applicant-list > li > .btn-wh figure {width: 1.6rem; height: 1.6rem;}

@media screen and (max-width: 880px) {
    .sub-main-2.mymenu .job-container {padding-left: 0;}
    .sub-main-2.mymenu .section-tab .section-list li a {padding: 1.2rem 0.6rem;}

    .applicant-list > li {padding: 2rem;}
    .applicant-list > li .applicant-title {column-gap: 2rem;}
    .applicant-list > li .applicant-title .title-txt {width: calc(100% - 7.3rem);}
    .applicant-list > li .applicant-title .title-txt h6 {font-size: 1.6rem; font-weight: 400;}
    .applicant-list > li .applicant-title .employment-status {width: 8rem;}

    .applicant-list > li .person-list li {width: 100%;}
}

/* ============================== [ 관심 구인구직 - h_my_favorite_job.html ] ========================================================================================== */
.job-list li {position: relative;}
.job-list li > .btn-bookmark {position: absolute; top: 2rem; right: 2rem;}

/* ============================== [ 제휴 문의 - h_partnership.html ] ========================================================================================== */
.inquiry-section.partnership {padding: 0 0 0 4rem; margin-top: 4rem;}
.inquiry-section.partnership .attach-content {padding-bottom: 7rem;}
.inquiry-section.partnership .fixed-btn-box {justify-content: center;}
.inquiry-section.partnership .fixed-btn-box button {flex: none; max-width: 48rem; width: 100%;}

@media screen and (max-width: 880px) {
    .inquiry-section.partnership {padding: 0 2rem; margin-top: 0;}
}

/* ============================== [ 이용 약관 - terms_of_use.html ] ========================================================================================== */
.terms-container {display: flex; flex-direction: column; padding: 4.4rem 0 5.2rem 0;}
.terms-container p {color: #585858; font-size: 1.6rem; font-weight: 400; line-height: 150%; letter-spacing: -0.016px;}

@media screen and (max-width: 880px) {
    .terms-container {padding-top: 5.6rem;}
    .terms-container p.bold.mobile {color: #222; font-size: 1.8rem; font-weight: 700; line-height: 130%; letter-spacing: -0.018px;}
    .terms-container p {font-size: 1.4rem; letter-spacing: -0.014px; color: #555;}
}

/* ============================== [ 조회서비스_고장코드 - service_fault_code.html ] ========================================================================================== */
/* + 자동차 규격조회 같이 사용 */
.category-menu.service .category-menu-wrapper {width: 100%; max-width: 124rem;}
.category-menu.service .category-dropdown {right: 0;}
.fault-search-container {background-color: #FAFAFA;}
.fault-search-container .inner {padding: 4rem 0; max-width: 124rem; width: 100%; margin: 0 auto; display: flex; flex-direction: column; row-gap: 2.4rem;}
.fault-search-container .inner .title-txt {display: flex; flex-direction: column; row-gap: 0.7rem;}
.fault-search-container .inner .title-txt h2 {color: #222; font-size: 3.2rem; font-weight: 700; line-height: normal; letter-spacing: -0.16px;}
.fault-search-container .inner .title-txt p {color: #888; font-size: 1.6rem; font-weight: 400; line-height: normal; letter-spacing: -0.08px;}
.fault-search-container .inner .title-txt p .bold {font-weight: 700;}
.fault-search-container .inner .fault-search-box {width: 100%; padding: 3.2rem; background-color: #fff; border-radius: 1.2rem; border: 1px solid #eee; display: flex; flex-direction: column; row-gap: 1.6rem;}
.fault-search-container .inner .fault-search-box h3 {color: #111; font-size: 1.8rem; font-weight: 700; line-height: 130%; letter-spacing: -0.018px;}
.fault-search-container .inner .fault-search-box .fault-search-input {display: flex; align-items: stretch; position: relative;}
.fault-search-container .inner .fault-search-box .fault-search-input .input-box {position: relative; width: 75%; margin-right: 1.6rem;}
.fault-search-container .inner .fault-search-box .fault-search-input .input-box:before {content:''; background: url('/assets/image/mobile/icon/ic_search_b.svg') no-repeat; position: absolute; top: 50%; transform: translateY(-50%); left: 1.2rem; width: 2.4rem; height: 2.4rem; z-index: 1;}
.fault-search-container .inner .fault-search-box .fault-search-input .fault-search {padding: 1.6rem 1.6rem 1.6rem 4.8rem; border-radius: 0.4rem; border: 1px solid #e8e8e8; background-color: #fff; width: 100%; height: 5.9rem;}
.fault-search-container .inner .fault-search-box .fault-search-input .btn-box {display: flex; align-items: center; width: 25%;}
.fault-search-container .inner .fault-search-box .fault-search-input .btn-box .btn-main {width: 20rem; margin-right: 1.2rem; height: 5.9rem;}
.fault-search-container .inner .fault-search-box .fault-search-input .btn-box .btn-wh {column-gap: 0.4rem; width: 10rem; height: 5.9rem;}
.fault-search-container .inner .fault-search-box .fault-search-input .btn-box .btn-wh figure {width: 1.6rem; height: 1.6rem;}
.brand-container {display: flex; flex-direction: column; row-gap: 2.4rem; max-width: 124rem; margin: 0 auto; padding: 5.6rem 0; align-items: flex-start; width: 100%;}
.brand-container > h3 {color: #111; font-size: 1.8rem; font-weight: 700; line-height: 130%; letter-spacing: -0.018px;}
.brand-container .title-box {display: flex; flex-direction: column; row-gap: 0.7rem; align-items: flex-start;}
.brand-container .title-box h3 {color: #222; font-size: 3.2rem; font-weight: 700; line-height: normal; letter-spacing: -0.16px;}
.brand-container .title-box p {color: #888; font-size: 1.6rem; font-weight: 400; line-height: normal; letter-spacing: -0.08px;}
.brand-container .title-box p .bold {font-weight: 700;}
.brand-container .brand-list {display: flex; flex-direction: column; row-gap: 1.2rem; width: 100%;}
.brand-container .brand-list .brand-group {display: flex; flex-direction: column;}
.brand-container .brand-list .brand-title-box {padding: 1.6rem 2rem; display: flex; align-items: center; justify-content: space-between; width: 100%; border-radius: 1.2rem; background-color: #f8f8f8; cursor: pointer;}
.brand-container .brand-list .brand-title-box .brand-name {display: flex; align-items: center; column-gap: 1.6rem;}
.brand-logo {width: 4rem; height: 4rem; padding: 0.6rem; background-color: #fff; border-radius: 100%; border: 1px solid #eee; display: flex; align-items: center; justify-content: center;}
.brand-logo.no-bg {padding: 0;}
.brand-logo.no-icon figure {width: 2.4rem; height: 100%;}
.brand-logo figure {width: 100%; height: 100%;}
.brand-container .brand-list .brand-title-box .brand-name span {color: #111; font-size: 1.8rem; font-weight: 700; line-height: 130%; letter-spacing: -0.018px;}
.brand-container .brand-list .brand-title-box .brand-num span {padding: 0.4rem 0.8rem; background-color: #333; border-radius: 0.4rem; color: #EEE; font-size: 1.4rem; font-weight: 600; line-height: normal; letter-spacing: -0.07px;}
.brand-container .brand-list .brand-detail-box {display: none; border-radius: 0.8rem; border: 1px solid #eee; background-color: #fff; margin-top: 1.2rem; cursor: pointer;}
.brand-container .brand-list .brand-detail-box .title-box {padding: 1.6rem 2rem 0 2rem;}
.brand-container .brand-list .brand-detail-box .title {color: #F1132D; font-size: 1.2rem; font-weight: 700; line-height: 130%; letter-spacing: -0.012px;}
.brand-container .brand-list .brand-detail-box .brand-detail-list > li {display: flex; flex-direction: column;}
.brand-container .brand-list .brand-detail-box .brand-detail-list > li .model-box {padding: 1.6rem 2rem; border-bottom: 1px solid #eee;}
.brand-container .brand-list .brand-detail-box .brand-detail-list > li .model-box .model-num {color: #222; font-size: 1.4rem; font-weight: 400; line-height: 130%; letter-spacing: -0.014px;}
.brand-container .brand-list .brand-detail-box .brand-detail-list > li:last-child .model-box {border-bottom: none;}
.brand-container .brand-list .brand-detail-box .brand-detail-list > li .type-box {display: none; flex-direction: column; row-gap: 1.2rem; padding: 1.6rem 2rem; border-bottom: 1px solid #eee;}
.brand-container .brand-list .brand-detail-box .brand-detail-list > li .type-box .type-list {display: flex; flex-direction: column; row-gap: 0.4rem;}
.brand-container .brand-list .brand-detail-box .brand-detail-list > li .type-box .type-list li {padding: 1.2rem; border-radius: 0.4rem; background-color: #F8F8F8;}
.brand-container .brand-list .brand-detail-box .brand-detail-list > li .type-box .type-list li .type-num {color: #111; font-size: 1.2rem; font-weight: 600; line-height: 130%;  letter-spacing: -0.012px;}

@media screen and (max-width: 880px) {
    .fault-search-container .inner {padding: 2.4rem 2rem; row-gap: 1.6rem;}
    .fault-search-container .inner .title-txt h2 {font-size: 2rem;}
    .fault-search-container .inner .title-txt p {font-size: 1.4rem;}
    .fault-search-container .inner .fault-search-box {padding: 2rem 1.6rem; row-gap: 1.2rem;}
    .fault-search-container .inner .fault-search-box .fault-search-input {flex-direction: column;}
    .fault-search-container .inner .fault-search-box .fault-search-input .input-box {width: 100%;}
    .fault-search-container .inner .fault-search-box .fault-search-input .btn-box {width: 100%; margin-top: 1.2rem;}
    .fault-search-container .inner .fault-search-box .fault-search-input .btn-box .btn-wh {order: 1; margin-right: 1.2rem; height: 3.7rem;}
    .fault-search-container .inner .fault-search-box .fault-search-input .btn-box .btn-main {order: 2; margin-right: 0; height: 3.7rem;}
    .brand-container {padding: 2.4rem 2rem; padding-bottom: 10rem;}
    .brand-container .title-box h3 {font-size: 2rem;}
    .brand-container .title-box p {font-size: 1.4rem;}
}

/* ============================== [ 조회서비스_고장코드_검색완료 - service_fault_code_result.html ] ========================================================================================== */
.search-result-box {display: flex; flex-direction: column; max-width: 124rem; margin: 0 auto; padding: 5.6rem 0; width: 100%;}
.search-result-box .result-title {display: flex; flex-direction: column; row-gap: 0.8rem; align-items: center; justify-content: center;}
.search-result-box .result-title .sub {color: #F1132D; text-align: center; font-size: 1.4rem; font-weight: 700; line-height: 130%; letter-spacing: -0.014px;}
.search-result-box .result-title .title {color: #111; text-align: center; font-size: 5.6rem; font-weight: 700; line-height: normal; letter-spacing: -0.056px;}
.search-result-box .result-title .icon-box {display: flex; align-items: center; column-gap: 2.4rem;}
.search-result-box .result-title .icon-box figure {width: 1.6rem; height: 1.6rem;}
.search-result-box .result-title .result-txt {color: #111; text-align: center; font-size: 2rem; font-weight: 700; line-height: 150%; letter-spacing: -0.02px;}
.search-result-box .result-title .sub-txt {color: #555; text-align: center; font-size: 1.6rem; font-weight: 400; line-height: 150%; letter-spacing: -0.016px;}
.search-result-box .section-tab {margin-top: 2.4rem; width: 100%;}
.search-result-box .section-tab .section-list li {width: 50%;}
.search-result-box .section-tab .section-list li a {width: 100%; text-align: center;}
.search-result-box .tab-contents-wrapper {margin-top: 4rem;}
.search-result-box .tab-content p {color: #000; font-size: 1.4rem; font-weight: 400; line-height: 140%; letter-spacing: -0.014px;}
.search-result-box .tab-content p .bold {font-weight: 700;}

.no-result-search {display: flex; align-items: center; justify-content: center; flex-direction: column; row-gap: 3.2rem; padding: 20rem 0;}
.no-result-search figure {width: 13.6rem; height: 13.6rem;}
.no-result-search span {color: #999; text-align: center; font-size: 1.8rem; font-weight: 400; line-height: 130%; letter-spacing: -0.018px;}

@media screen and (max-width: 880px) {
    .search-result-box {padding: 3.2rem 0 10rem 0;}
    .search-result-box .result-title {padding: 0 2rem;}
    .search-result-box .result-title .sub {font-size: 1.2rem;}
    .search-result-box .result-title .title {font-size: 4rem;}
    .search-result-box .result-title .result-txt {font-size: 1.6rem;}
    .search-result-box .result-title .sub-txt {font-size: 1.4rem;}
    .search-result-box .section-tab {margin-top: 0;}
    .search-result-box .tab-contents-wrapper {margin-top: 0; padding: 2rem;}

    .no-result-search {row-gap: 1.8rem; padding: 8rem 0 14rem;}
    .no-result-search figure {width: 8rem; height: 8rem;}
    .no-result-search span {font-size: 1.4rem;}
}

/* ============================== [ 조회서비스_고장코드_브랜드선택 - service_fault_code_list.html ] ========================================================================================== */
.code-container {max-width: 124rem; width: 100%; margin: 0 auto; padding: 4.6rem 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; row-gap: 3.2rem;}
.code-container .title-box {display: flex; flex-direction: column; row-gap: 0.7rem; align-items: flex-start;}
.code-container .title-box h3 {color: #222; font-size: 3.2rem; font-weight: 700; line-height: normal; letter-spacing: -0.16px;}
.code-container .title-box p {color: #888; font-size: 1.6rem; font-weight: 400; line-height: normal; letter-spacing: -0.08px;}
.code-container .title-box p .bold {font-weight: 700;}
.code-list {width: 100%; border: 1px solid #eee;}
.code-list thead tr th {border-bottom: 0.3rem solid #333; padding: 1.6rem; color: #111; font-size: 1.4rem; font-weight: 700; line-height: normal; letter-spacing: -0.07px;}
.code-list thead tr th:first-child,
.code-list tbody tr td:first-child {width: 9rem; text-align: center;}
.code-list tbody tr td {padding: 1.6rem; color: #111; font-size: 1.4rem; font-weight: 400; line-height: normal; letter-spacing: -0.07px;}
.code-list tbody tr:nth-child(even) td {background-color: #F8F8F8;}

@media screen and (max-width: 880px) {
    .category-menu.hide {display: none;}
    .code-container {padding: 1.2rem 2rem 10rem 2rem; row-gap: 2.4rem;}
    .code-container .title-box h3 {font-size: 2rem;}
    .code-container .title-box p {font-size: 1.4rem;}
    .code-list {overflow-x: auto; overflow-y: visible; white-space: nowrap; width: 100%; display: block; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;}
    .code-list table, .code-list thead, .code-list tbody, .code-list tr {display: table; width: auto; min-width: 600px;}
    .code-list thead tr th:last-child {width: auto; min-width: 26rem; text-align: left;}
    .code-list tbody tr td {padding: 1.6rem; color: #111; font-size: 1.4rem; font-weight: 400; line-height: normal; letter-spacing: -0.07px;white-space: nowrap;}
    .code-list tbody tr td:last-child {white-space: normal; word-break: break-word; min-width: 30rem; max-width: 40rem;}
    .code-list::-webkit-scrollbar {display: none;}
}

/* ============================== [ 자동차 정보 조회 - service_car_search.html ] ========================================================================================== */
.car-search-container {max-width: 124rem; margin: 0 auto; padding: 5rem 0 23rem 0;}


/* ============================== [ 엔진넘버 조회 - service_engine_search.html ] ========================================================================================== */
.engine-search-container {max-width: 124rem; margin: 0 auto; padding: 2.4rem 0 5rem 0; width: 100%;}
.engine-search-container .search-result ul {display: flex; flex-direction: column;}
.engine-search-container .search-result ul li {padding: 1.6rem; display: flex; flex-direction: column; row-gap: 0.8rem; border-bottom: 1px solid #EEE;}
.engine-search-container .search-result ul li:last-child {border-bottom: none;}
.engine-search-container .search-result ul li .title {color: #F1132D; font-size: 1.4rem; font-weight: 700; line-height: 130%; letter-spacing: -0.014px;}
.engine-search-container .search-result ul li .result {color: #222; font-size: 1.6rem; font-weight: 400; line-height: 130%; letter-spacing: -0.016px;}

@media screen and (max-width: 880px) {
    .engine-search-container {padding-top: 0;}
}

/* ============================== [ 모바일 전용 페이지 공통 ] ========================================================================================== */
.mobile-main {max-width: 124rem; margin: 0 auto;}
.mobile-main.before {height: 100vh;}
.mobile-main .title-container {display: flex; align-items: center; justify-content: space-between;}
.mobile-main .title-container a {display: flex; align-items: center; padding: 1.5rem 2rem; column-gap: 0.8rem;}
.mobile-main .title-container a h2{font-size: 2rem; color: #111; font-weight: 700; line-height: 130%; letter-spacing: -0.02px;}
.mobile-main .title-container a h2 .cnt {position: relative;}
.mobile-main .title-container a h2 .cnt:after {content: '건';}
.mobile-main .title-container a figure {width: 2.4rem; height: 2.4rem;}
.mobile-main .title-container button {margin-right: 2rem;}
.mobile-section {padding: 0 2rem; padding-top: 7.2rem;}

@media screen and (max-width: 880px) {
    .mobile-main {width: 100%;}
    .mobile-main .title-container {position: fixed; top: 0; background-color: #fff; width: 100%; z-index: 1000;}
    .mobile-main .title-container.fixed {border-bottom: 1px solid #eee; width: 100%;}
    .mobile.title-container {display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; position: fixed; top: 0; background-color: #fff; width: 100%; z-index: 1000;}
    .mobile.title-container.fixed {border-bottom: 1px solid #eee;}
    .mobile.title-container.fixed.search {border-bottom: none;}
    .mobile.title-container.type-2 {display: block;}
    .mobile.title-container.type-2 > a {display: flex; align-items: center; justify-content: space-between;}
    .mobile.title-container.type-2 > a .inner {display: flex; align-items: center; column-gap: 0.8rem;}
    .mobile.title-container > a {display: flex; align-items: center; padding: 1.5rem 0; column-gap: 0.8rem;}
    .mobile.title-container > a h2 {font-size: 2rem; color: #111; font-weight: 700; line-height: 130%; letter-spacing: -0.02px;}
    .mobile.title-container > a figure {width: 2.4rem; height: 2.4rem;}
    .mobile.title-container .icon-box a span {color: #F1132D; font-size: 1.6rem; font-weight: 700; line-height: normal; letter-spacing: -0.08px;}
}

/* ============================== [ 모바일용 문의하기 - m_inquiry_write.html ] ========================================================================================== */
.inquiry-section {margin-top: 7.2rem; display: flex; flex-direction: column; padding: 0 2rem; row-gap: 1.6rem;}
.inquiry-section .inquiry-content {display: flex; flex-direction: column; row-gap: 1.6rem;}
.inquiry-section .inquiry-group {display: flex; flex-direction: column; row-gap: 0.8rem;}
.inquiry-section .inquiry-group .txt-group {display: flex; align-items: center; column-gap: 0.8rem;}
.inquiry-section .inquiry-group .title {color: #111; font-size: 1.4rem; font-weight: 700; line-height: 150%; letter-spacing: -0.014px; position: relative; width: fit-content;}
.inquiry-section .inquiry-group .title.req:after {content: '*'; font-size: 1.4rem; color: #F1132D; font-weight: 700; line-height: 150%; letter-spacing: -0.014px; position: absolute; right: -0.6rem;}
.inquiry-section .inquiry-group .basic-textarea {height: 32rem;}
.inquiry-section .inquiry-group.answer .basic-textarea {height: 22.7rem;}
.inquiry-section .inquiry-group .img-cnt {color: #F1132D; font-size: 1.4rem; font-weight: 700; line-height: 150%; letter-spacing: -0.014px;}
.inquiry-section .inquiry-group .img-cnt .cnt {position: relative;}
.inquiry-section .inquiry-group .img-cnt .cnt:after {content: '개';}
.inquiry-section .attach-content {display: flex; flex-direction: column; row-gap: 0.8rem; padding-bottom: 10rem;}
.inquiry-section .inquiry-group.attach {flex-direction: row; column-gap: 1.6rem;}
.inquiry-section .inquiry-group.attach .file-attach {padding: 2rem; border-radius: 1.2rem; border: 1px solid #E8E8E8; background-color: #F4F4F4;}

/* ============================== [ 모바일용 문의리스트 - m_inquiry_list.html ] ========================================================================================== */
.inquiry-section.inquiry-2 {padding: 0; padding-bottom: 2rem;}

/* ============================== [ 모바일용 지도에서 찾기 - m_map.html ] ========================================================================================== */
.mobile-section.map {padding: 0;}
.mobile-section.map .map-box {position: relative; height: 100vh;}
.mobile-section.map .map-box .btn-map {position: absolute; bottom: 24rem; right: 2rem; background-color: #fff; padding: 0.8rem; border-radius: 100%; border: 1px solid #ddd; box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.25);}
.mobile-section.map .map-box .btn-map figure {width: 2.4rem; height: 2.4rem;}
.mobile-section.map .map-box figure {width: 100%; height: 100%;}
.mobile-section.map .map-box figure img {object-fit: cover;}
.mobile-section.map .map-info-box {position: absolute; bottom: 0; background-color: #fff; width: 100%; padding: 2rem; border-radius: 1.6rem 1.6rem 0 0;}
@media screen and (max-width: 880px) {
    .mobile-section.map .map-box .btn-map {bottom: 18rem;}
}


/* ============================== [ 모바일용 지원하기 - m_apply_write.html ] ========================================================================================== */
/* 기존 지원하기 모달에서 상속받아 사용 */
.apply-section {display: flex; flex-direction: column; margin-top: 5.6rem;}
.apply-section .apply-title {padding: 2rem;}
.apply-section .apply-content {padding: 2rem;}
.apply-section .apply-attach {padding: 2rem;}
.apply-section .apply-group {display: flex; flex-direction: column; row-gap: 0.8rem;}
.apply-section .apply-content .title {width: fit-content; position: relative; font-size: 1.4rem; line-height: 150%; letter-spacing: -0.014px;}
.apply-section .apply-content .title.req:after {content: '*'; font-size: 1.4rem; color: #F1132D; font-weight: 700; line-height: 150%; letter-spacing: -0.014px; position: absolute; right: -0.6rem;}
.apply-attach .apply-group .attach-txt {display: flex; align-items: center; justify-content: space-between;}
.apply-attach .apply-group .attach-txt .title {color: #111; font-size: 1.6rem; font-weight: 700; line-height: 130%; letter-spacing: -0.016px;}
.apply-attach .apply-group .attach-txt .attach-file-name {color: #111; text-align: right; font-size: 1.4rem; font-weight: 400; line-height: 130%; letter-spacing: -0.014px;}

@media screen and (max-width: 880px) {
    .apply-title {border-bottom: 6px solid #f7f7f7; padding-bottom: 1.7rem;}
    .apply-title .category-box .txt .category {font-size: 1.1rem;}
    .apply-title .job-info span {font-size: 1.2rem;}
    .apply-content {border-bottom: 6px solid #f7f7f7;}
    .apply-attach {margin-bottom: 10rem;}
}

/* ============================== [ 모바일용 커뮤니티_상세_댓글 - m_community_reply.html ] ========================================================================================== */
.reply-section {margin-top: 5.6rem;}
.reply-section > .reply-input-area {padding: 2rem; border-top: 1px solid #eee; border-bottom: 6px solid #f7f7f7; row-gap: 0.8rem;}
.reply-section > .reply-input-area .reply-textarea {height: 11.3rem;}

.reply-section .more-list {position: absolute; top: 100%; right: 0; background: #fff; border-radius: 0.4rem; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12); z-index: 1005; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.2s ease; margin-top: 0.8rem; width: 12.6rem;}
.reply-section .more-list.show {opacity: 1; visibility: visible; transform: translateY(0);}
.reply-section .more-list li {width: 100%;}
.reply-section .more-list li a {display: inline-block; width: 100%; text-align: center; padding: 1.2rem 1.6rem; cursor: pointer; color: #222; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px; transition: background-color 0.2s ease;}

@media screen and (max-width: 880px) {
    .reply-section .more-list {position: fixed; width: 100%; top: auto; bottom: 0; left: 0; right: 0; border-radius: 1.6rem 1.6rem 0 0; margin-top: 0; transform: translateY(100%); transition: all 0.3s ease; z-index: 1003;}
}

/* ============================== [ 모바일용 검색 - m_search.html ] ========================================================================================== */
.search-category {display: flex; flex-direction: column; row-gap: 2.4rem; padding: 2.4rem 2rem 2rem 2rem;}
.search-category .category-box {display: flex; flex-direction: column; row-gap: 1.6rem; align-items: flex-start; justify-content: flex-start;}
.search-category .category-box h6 {color: #111; text-align: center; font-size: 1.8rem; font-weight: 600; line-height: normal; letter-spacing: -0.09px;}

/* ============================== [ 모바일용 리뷰 - m_review_write.html ] ========================================================================================== */
.mobile-main .product-container.purchase {padding: 0 2rem 2rem 2rem; border-bottom: 6px solid #F7F7F7;}
.mobile-main .review-box {padding: 3.2rem 2rem;}
.mobile-main .inquiry-content.review {padding: 0 2rem 10rem 2rem;}
.mobile-main .inquiry-content.review textarea {height: 22.7rem;}

/* ============================== [ 반응형 공백을 메우기 위한 부분 ] ========================================================================================== */
@media screen and (max-width: 1300px) and (min-width: 881px) {
    .header .inner {padding: 2.4rem 2rem;}
    .header.header-2 .inner {column-gap: 1.2rem;}
    .footer {padding: 3.2rem 2rem;}

    /* index.html */
    .main-section .main-sub-menu {padding: 0 2rem;}
    .content-section {padding: 0 2rem;}
    .content-section .content-box {display: flex; width: 100%; flex-direction: column;}
    .content-section .content-box:after {display: none;}
    .content-section .content-box > div {width: 100%; height: 100%;}
    .product-list li {width: calc(33.33% - 1.1rem);}
    .sos {padding-bottom: 0;}
    .job {padding-bottom: 8rem;}

    /* alarm.html */
    .alarm-main {padding: 4.8rem 2rem;}

    /* market_list.html + 공통 */
    .category-menu {padding: 0.8rem 2rem; column-gap: 1.6rem;}
    .sub-main .title-container {padding: 0 2rem;}
    .sub-main .filter-wrapper {padding: 0 2rem;}
    .sub-main .sort-wrapper {padding: 0 2rem;}
    .market-container {padding: 0 2rem 3rem 2rem;}

    .product-container {padding: 0 2rem;}
    .section-tab {padding: 0 2rem;}
    .section-container .info-area {padding-left: 2rem;}
    .section-container .price-info-area {padding-right: 2rem;}

    /* market_purchase.html */
    .purchase-info {padding-left: 2rem;}
    .payment-agreement {padding-right: 2rem;}

    /* sos_list.html */
    .qna-container {padding: 3.2rem 2rem 5rem 2rem;}

    /* job_list.html */
    .job-container {padding: 0 2rem;}

    /* search.html */
    .sub-main-5 .title-inner {padding: 4.8rem 2rem 0 2rem;}
    .sub-main-5 .filter-wrapper {padding: 0 2rem;}
    .sub-main-5 .sort-wrapper {padding: 0 2rem;}
    .tab-contents-inner .qna-container {padding: 1.6rem 2rem 5rem 2rem;}
    .community-list li a {padding: 2.4rem 2rem;}

    /* 회원가입 + 내 기본정보 h_join.html + h_my_account.html */
    .find-container .section-tab {padding: 0;}

    /* h_regular_ticket.html */
    .sub-main-2.regular .title-container {padding: 0 2rem;}
    .status-container {margin: 0 2rem;}
    .history-container > .title {padding: 0 2rem;}
    .history-container .history-list li {padding: 2.4rem 2rem;}

    .sub-main-3 .status-container {margin: 0;}

    /* 내등록재능 h_my_market.html */
    .sub-main-2.mymenu .left-box {padding-left: 2rem;}
    .sub-main-2.mymenu .right-box {padding-right: 2rem;}

    /* 내등록 SOS */
    .sub-main-2.mymenu .qna-container {padding: 0 2rem 5rem 2rem;}

    /* 관심 구인구직 */
    .sub-main-2.mymenu .category-menu-container.job {padding-left: 0.2rem; padding-bottom: 0;}
    
    /* 조회서비스 */
    .fault-search-container .inner {padding: 4rem 2rem;}
    .brand-container {padding: 5.6rem 2rem;}
    .search-result-box .tab-contents-wrapper {padding: 0 2rem;}
}

@media screen and (max-width: 1147px) and (min-width: 881px) {
    html {font-size: calc(100vw * 7.6 / 880);}
}

@media screen and (max-width: 325px) {
    html {font-size: calc(100vw * 9.2 / 325);}
}