@charset "UTF-8";

/* 초기화 및 초기 세팅 */
:root {

    /* 버튼 및 인풋 폼 높이 세팅 */

    --hd_height: 10.8rem;

    --hd_height_m: 5.6rem;

    --height_sm: 3.5rem;

    --height_md: 4.0rem;

    --height: 4.4rem;

    --height_lg: 4.8rem;

    --ic_date: url("data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 1V3H15V1H17V3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H7V1H9ZM20 11H4V19H20V11ZM7 5H4V9H20V5H17V7H15V5H9V7H7V5Z"></path></svg>");

    --ic_time: url("data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM13 12H17V14H11V7H13V12Z"></path></svg>");
}

div::-webkit-scrollbar {

    width: 0.6rem;

    height: 0.6rem;

}

div::-webkit-scrollbar-thumb {

    background-color: #ddd;

    border-radius: 10rem;

}

html {
    font-size: 10px;
}

body {
    margin: 0 auto;
    padding: 0;
}

fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
html,
img {
    margin: 0;
    padding: 0;
    border: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

dd,
dl,
dt,
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

legend {
    position: absolute;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    text-indent: -9999em;
    overflow: hidden;
}

button,
img,
input,
label,
select {
    vertical-align: middle;
}

button,
input {
    margin: 0;
    padding: 0;
}

input[type="submit"] {
    cursor: auto;
}

button {
    cursor: auto;
}

select {
    margin: 0;
}

p {
    margin: 0;
    padding: 0;
    word-break: keep-all;
}

hr {
    display: none;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

.un_reboot_a {
    color: var(--main);
    text-decoration: underline;
}

*,
:after,
:before {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    word-break: keep-all;

}

img {
    max-width: 100%;
    display: inline-block;
    height: auto;
}

.container-fluid {
    max-width: 2560px;
}

.mobile_wr {

    border-left: 1px solid #F2F2F2;

    border-right: 1px solid #F2F2F2;

    box-sizing: content-box;

}

/*메인*/

.curs_pointer {
    cursor: pointer;
}

/*서브*/

.sub_tit {
    position: relative;
}

.over_hidden {
    overflow: hidden;
}

.text_dynamic {
    white-space: pre-line;
}

.text-gray {
    color: var(--gray-900);
}

.text-gray2 {
    color: var(--gray-700);
}

.text-gray3 {
    color: var(--gray-500);
}

.text-black {
    color: #000;
}

.dot_list li {

    list-style: none;

    margin-bottom: 1.0rem;

    display: flex;

}

.dot_list li:before {

    content: "·";

    vertical-align: middle;

    margin-right: 0.5rem;

}

.dot_list li:last-child {
    margin-bottom: 0;
}

.dot_list.fs_10 li {
    margin-bottom: 0.3rem;
}

.line_h1 {
    line-height: 1.0em;
}

.line_h1_1 {
    line-height: 1.1em;
}

.line_h1_2 {
    line-height: 1.2em;
}

.line_h1_3 {
    line-height: 1.3em;
}

.line_h1_4 {
    line-height: 1.4em;
}

.line_h1_5 {
    line-height: 1.5em;
}

.line_h1_6 {
    line-height: 1.6em;
}

.line_h1_7 {
    line-height: 1.7em;
}

.line_h1_8 {
    line-height: 1.8em;
}

.line_h1_9 {
    line-height: 1.9em;
}

.line_h2 {
    line-height: 2.0em;
}

/*폰트커스텀 기본사이즈 10px*/

.tit_h1 {
    font-size: 6.0rem;
    font-weight: 800;
    color: #000;
    line-height: 140%;
}

.tit_h2 {
    font-size: 4.0rem;
    font-weight: 800;
    color: #000;
    line-height: 140%;
}

.tit_h3 {
    font-size: 3.0rem;
    font-weight: 700;
    color: #000;
    line-height: 140%;
}

.tit_h4 {
    font-size: 2.3rem;
    font-weight: 600;
    color: #000;
}

.tit_h5 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #000;
}

.tit_h6 {
    font-size: 2.0rem;
    font-weight: 400;
    color: var(--gray-900);
}

.body {
    font-size: 1.8rem;
    font-weight: 300;
}

.fs_8 {
    font-size: 0.8rem;
}

.fs_9 {
    font-size: 0.9rem;
}

.fs_10 {
    font-size: 1.0rem;
}

.fs_11 {
    font-size: 1.1rem !important;
}

.fs_12 {
    font-size: 1.2rem !important;
}

.fs_13 {
    font-size: 1.3rem !important;
}

.fs_14 {
    font-size: 1.4rem !important;
}

.fs_15 {
    font-size: 1.5rem !important;
}

.fs_16 {
    font-size: 1.6rem !important;
}

.fs_17 {
    font-size: 1.7rem !important;
}

.fs_18 {
    font-size: 1.8rem !important;
}

.fs_19 {
    font-size: 1.9rem !important;
}

.fs_20 {
    font-size: 2.0rem !important;
}

.fs_21 {
    font-size: 2.1rem !important;
}

.fs_22 {
    font-size: 2.2rem;
}

.fs_23 {
    font-size: 2.3rem;
}

.fs_24 {
    font-size: 2.4rem;
}

.fs_25 {
    font-size: 2.5rem;
}

.fs_26 {
    font-size: 2.6rem;
}

.fs_27 {
    font-size: 2.7rem;
}

.fs_28 {
    font-size: 2.8rem;
}

.fs_29 {
    font-size: 2.9rem;
}

.fs_30 {
    font-size: 3.0rem;
}

.fs_31 {
    font-size: 3.1rem;
}

.fs_32 {
    font-size: 3.2rem;
}

.fs_33 {
    font-size: 3.3rem;
}

.fs_34 {
    font-size: 3.4rem;
}

.fs_35 {
    font-size: 3.5rem;
}

.fs_36 {
    font-size: 3.6rem;
}

.fs_37 {
    font-size: 3.7rem;
}

.fs_38 {
    font-size: 3.8rem;
}

.fs_39 {
    font-size: 3.9rem;
}

.fs_40 {
    font-size: 4.0rem;
}

.fs_41 {
    font-size: 4.1rem;
}

.fs_42 {
    font-size: 4.2rem;
}

.fs_43 {
    font-size: 4.3rem;
}

.fs_44 {
    font-size: 4.4rem;
}

.fs_45 {
    font-size: 4.5rem;
}

.fs_46 {
    font-size: 4.6rem;
}

.fs_47 {
    font-size: 4.7rem;
}

.fs_48 {
    font-size: 4.8rem;
}

.fs_49 {
    font-size: 4.9rem;
}

.fs_50 {
    font-size: 5.0rem;
}

.fs_51 {
    font-size: 5.1rem;
}

.fs_52 {
    font-size: 5.2rem;
}

.fw_100 {
    font-weight: 100;
}

.fw_200 {
    font-weight: 200;
}

.fw_300 {
    font-weight: 300;
}

.fw_400 {
    font-weight: 400;
}

.fw_500 {
    font-weight: 500;
}

.fw_600 {
    font-weight: 600;
}

.fw_700 {
    font-weight: 700;
}

.fw_800 {
    font-weight: 800;
}

.fw_900 {
    font-weight: 900;
}

.wh_pre {
    white-space: pre-line;
}

.wh_nowrap {
    white-space: nowrap;
}

.break_all {
    word-break: break-all;
}

/*글자 줄임말/자르기*/

.line_text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    word-break: break-all;
}

.line1_text {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.line2_text {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.line3_text {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

/* 폼 사각형 */

.sq_guide {
    display: flex;
    flex-wrap: wrap;
}

.sq_guide li {

    width: 70px;

    height: 40px;

    border-radius: 0.5rem;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.4rem;

    margin: 0.5rem;

}

/* 스크롤바 none */

.scroll_bar_none {
    -ms-overflow-style: none;
}

.scroll_bar_none::-webkit-scrollbar {
    display: none;
}

/*테이블 반응형때*/

.touch_scroll {
    overflow-x: auto;
    overflow-y: hidden;
}

/* 버튼 */

.btn {
    height: var(--height);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    font-size: 1.7rem;
    font-weight: 500;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.btn-sm {
    height: var(--height_sm);
    border-radius: 0.6rem;
    font-size: 1.4rem;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    font-weight: 400;
}

.btn-md {
    height: var(--height_md);
    border-radius: 0.6rem;
    font-weight: 400;
}

.btn-lg {
    height: var(--height_lg);
    border-radius: 5rem;
    font-weight: 400;
    font-size: 1.8rem;
}

.btn-link {
    height: auto;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 0;
    background: transparent;
    flex-shrink: 0;
}

.btn-icon {
    height: auto;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 0;
    background: transparent;
    flex-shrink: 0;
}

.btn-icon img {
    flex-shrink: 0;
}

.btn-primary2 {
    background: var(--primary-light);
    border-color: var(--primary-light);
    color: #fff;
}

.btn-primary2:focus,
.btn-primary2:hover {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
}

.btn-primary3 {
    background: #FF8D69;
    border-color: #FF8D69;
    color: #fff;
}

.btn-primary2:focus,
.btn-primary3:hover {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
}

.btn-light-primary {
    background: #FFF1ED;
    border-color: #FFF1ED;
    color: var(--primary);
}

.btn-light-primary:focus,
.btn-light-primary:hover {
    color: var(--primary);
}

.btn.disabled,
.btn:disabled {

    opacity: 1;

    color: #fff;

    background: var(--gray-100);

    border-color: var(--gray-100);

}

.btn-outline-light:not(:disabled):not(.disabled).active,
.show > .btn-outline-light.dropdown-toggle {

    color: #fff;

    background-color: var(--primary);

    border-color: var(--primary);

}

.btn-group-toggle .btn {
    margin-right: 0.6rem;
}

.btn-group-toggle .btn input[type=checkbox],
.btn-group-toggle .btn input[type=radio],
.btn-group-toggle .btn-group .btn input[type=checkbox],
.btn-group-toggle .btn-group .btn input[type=radio] {

    position: absolute;

    clip: rect(0, 0, 0, 0);

    pointer-events: none;

}

/* 인풋 자동완성 초기화 */

input:-webkit-autofill,
input:-webkit-autofill:active,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover {

    -webkit-text-fill-color: var(--text);

    -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;

    box-shadow: 0 0 0 1000px var(--bg) inset;

    transition: background-color 5000s ease-in-out 0s;

}

input:autofill,
input:autofill:active,
input:autofill:focus,
input:autofill:hover {

    -webkit-text-fill-color: var(--text);

    -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;

    box-shadow: 0 0 0 1000px var(--bg) inset;

    transition: background-color 5000s ease-in-out 0s;

}

/* 입력 인풋 */

.form-control {
    height: var(--height);
}

.form-control-sm {
    height: var(--height_sm);
    border-radius: 0.8rem;
}

.form-control-md {
    height: var(--height_md);
    border-radius: 0.6rem;
}

.form-control-lg {
    height: var(--height_lg);
}

.form-control-auto {
    height: auto;
}

input.form-control {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}

.ip_wr .ip_tit {
    margin-bottom: 0.8rem;
}

.ip_wr .ip_tit h5 {

    font-size: 1.4rem;

    font-weight: 600;

    display: inline-block;

    position: relative;

    color: #000;

}

.ip_wr .ip_tit.required h5::after {

    content: "";

    position: absolute;

    background: var(--primary);

    width: 0.3rem;

    height: 0.3rem;

    border-radius: 50%;

    top: 0;

    right: -0.5rem;

}

/* form-text */

.form-text {

    display: none;

    margin-top: 0.7rem;

    margin-left: 1.5rem;

    font-size: 1.2rem;

    color: #000;

}

.ip_valid .ip_valid {
    display: flex;
    color: #59C48F;
}

.ip_invalid .ip_invalid {
    display: flex;
    color: var(--primary);
}

/*.form-row*/

.form-row {
    margin-left: -0.4rem;
    margin-right: -0.4rem;
}

.form-row > .col,
.form-row > [class*=col-] {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

/* textarea 높이 */

textarea.form-control {
    min-height: 20rem;
    padding: 1.0rem 1.5rem;
    line-height: 2.6rem;
}

.form-control textarea {
    min-height: 14rem;
    padding: 0;
    line-height: 2.6rem;
    border: 0;
    width: 100%;
}

.form-control textarea:focus {

    color: var(--text);

    background-color: var(--bg);

    border-color: var(--gray);

    outline: 0;

    box-shadow: 0 0 0 0 var(--border);

}

.form-control textarea::placeholder {

    color: var(--input_placeholder);

    opacity: 1;

}

.form-control textarea:disabled,
.form-control textarea[readonly] {

    background-color: var(--input_disabled);

    opacity: 1;

}

/* 셀렉트 박스 */

.custom-select {

    background: url(../img/flow_down.svg)no-repeat center right 1.5rem;

    background-size: 1.3rem;

    padding-left: 1.5rem;

    padding-right: 1.5rem;

    font-size: 1.7rem;

    font-weight: 500;

    color: #000;

    height: 4.4rem;

}

.custom-select_st2 {

    display: inline-flex;

    padding-left: 1.5rem;

    padding-right: 1.5rem;

    background: url(../img/arrow_down_g_20.png)no-repeat center right;

    background-size: 0.6rem;

    font-size: 1.7rem;

    font-weight: 500;

    color: #000;

    border-color: var(--gray-200);
}

/* 날짜 선택 */

input.form-control[type="date"],
input.form-control[type="time"] {
    position: relative;
}

input.form-control[type="date"]::-webkit-calendar-picker-indicator,
input.form-control[type="time"]::-webkit-calendar-picker-indicator {

    -webkit-appearance: none;

    background: none;

    width: 100%;
    height: 100%;
    cursor: pointer;

    position: absolute;
    left: 0;
    top: 0;

}

input.form-control[type="date"]::before,
input.form-control[type="time"]::before {

    content: '';
    display: block;
    width: 2.4rem;
    height: 2.4rem;
    position: absolute;
    top: 50%;

    transform: translateY(-50%);
    right: 1.6rem;
    background: var(--gray);
    cursor: pointer;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;

}

input.form-control[type="time"]::before {

    -webkit-mask: var(--ic_time);
    mask: var(--ic_time);

}

input.form-control[type="date"]::before {

    -webkit-mask: var(--ic_date);
    mask: var(--ic_date);

}

/*패스워드*/

.form-password {
    position: relative;
}

.form-password .form-control {
    padding-right: 3.0rem;
}

.form-password img {
    width: 3.0rem;
    height: 3.0rem;
    position: absolute;
    right: 1.5rem;
    top: 50%;
    margin-top: -1.5rem;
    cursor: pointer;
}

.form_time_wr {
    position: relative;
}

.form_time_wr .form-control {
    padding-right: 5.0rem;
}

.form_time_wr .form_time {
    color: var(--primary);
    font-size: 1.4rem;
    position: absolute;
    right: 1.6rem;
    top: 50%;
    transform: translateY(-50%);
}

/* 체크박스*/

.checks_wr {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -1rem;
}

.checks_wr .checks {
    margin-right: 3rem;
    margin-bottom: 1rem;
}

.checks label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.checks label.chk_right {
    flex-flow: row-reverse;
    justify-content: flex-end;
}

.checks input {
    display: none;
}

.checks .ic_box {

    display: inline-block;

    width: 2.4rem;

    height: 2.4rem;

    background-image: url("../img/check01_off.png");

    background-position: center;

    background-size: auto 100%;

    background-repeat: no-repeat;

    text-align: center;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right: 0.8rem;

    flex-shrink: 0;

}

.checks input:checked + .ic_box {
    background-image: url("../img/check01_on.png");
}

.chk_right .ic_box {
    margin-right: 0;
    margin-left: 0.5rem;
}

.checks input:checked ~ .chk_p {}

.chk_p {
    padding-top: 0.1rem;
}

.checks.primary_checks .ic_box {
    background-color: #eae9f0;
    border-radius: 50%;
    background-image: none;
}

.checks.primary_checks input:checked + .ic_box {
    background-image: url("../img/check01_on.png");
}

.radios_wr {
    display: flex;
    flex-wrap: wrap;
}

.radios_wr .radios {
    margin-right: 2rem;
    margin-bottom: 1rem;
}

.radios label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.radios label.chk_right {
    flex-flow: row-reverse;
    justify-content: flex-end;
}

.radios input {
    display: none;
}

.radios .ic_box {
    display: inline-flex;
    flex-shrink: 0;
    position: relative;
    width: 1.4rem;
    height: 1.4rem;
    text-align: center;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
    border-radius: 2.0rem;
    border: 1px solid #7A7C85;
}

.radios input:checked + .ic_box {
    border-color: var(--primary);
}

.radios input:checked + .ic_box:after {

    content: '';

    display: block;

    width: 1.2rem;

    height: 1.2rem;

    border-radius: 50%;

    background-color: var(--primary);

    border: 0.24rem solid #fff;

}

/* 이미지 업로드 */

.image_upload {
    display: inline-block;
    position: relative;
    margin-right: 1.0rem;
}

.upload_box {

    width: 8rem;

    border: 1px solid var(--border);

    overflow: hidden;

    cursor: pointer;

    background: url("../img/btn_add_img.png") no-repeat center 2.0rem / 2.6rem;

    border-radius: 1.0rem;

    position: relative;

}

.upload_box .max_img {

    position: absolute;

    bottom: 1.2rem;

    width: 100%;

    left: 0;

    font-size: 1.3rem;

    text-align: center;

    color: #999;

    font-weight: 500;

}

.image_upload.on .upload_box {
    background: none;
}

.upload_del {

    position: absolute;

    top: 0.5rem;

    right: 0.5rem;

    width: 2.4rem;

    height: 2.4rem !important;

    border-radius: 50%;

    background-color: transparent;

    padding: 0 !important;

    display: none;

}

.upload_del img {
    width: 100%;
}

.image_upload.on .upload_del {
    display: flex;
}

/* 페이지네이션 */

.pagination {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagination li {
    height: 100%;
}

.pagination a {

    color: var(--gray-400);

    font-weight: 500;

    width: 4.6rem;
    height: 4.6rem;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

}

.pagination a.on {

    background-color: var(--gray-700);
    color: #fff;

}

.pagination a.arrow {
    background-color: var(--gray-50);
    color: #626C79;
}

.pagination a.arrow {
    margin: 0;
}

.pagination a.arrow.disabled img {
    opacity: 0.3;
}

.pagination .pg_arrow {
    border-radius: 5rem;
    background-color: var(--gray-50);
    margin-right: 0.8rem;
}

/* 페이저 */

.pager {

    background: #ffffff;

    border-radius: 15rem;

    display: flex;

    justify-content: center;

    align-items: center;

    width: 170px;

    height: 45px;

    margin: 3rem auto 0;

    border: 1px solid var(--border);

}

/* 테이블 */

.table_01 {
    width: 100%;
    border-collapse: collapse;
    border-bottom: 1px solid #e3e3e3;
    border-top: 1px #eee solid;
    line-height: 140%;
}

.table_01 th {

    border-bottom: 1px solid #eee;

    color: #1C1C1E;

    font-weight: 500;

    padding: 0.7rem 1.2rem;

    background: #F8F8F8;

    vertical-align: top;

}

.table_01 td {
    border-bottom: 1px solid #eee;
    padding: 0.7rem 1.2rem;
    color: #1C1C1E;
}

/* 테이블 슬래쉬 */

/* .table_01 th.slash {

    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="100%" x2="100%" y2="0" stroke="rgb(77,77,77)" /></svg>");
    background-repeat: no-repeat;

}

.table_01 th.backslash {

    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="100%" y2="100%" stroke="rgb(77,77,77)" /></svg>");
    background-repeat: no-repeat;

} */

.table_01 th.backslash,
.table_01 th.slash {
    text-align: left;
}

.backslash div,
.slash div {
    text-align: right;
}

/*테이블 반응형때*/

.table_scroll {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 !important;
}

/* 이미지 크롭 */

.rect {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.rect:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.rect img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.rect2 {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.rect2:after {
    content: "";
    display: block;
    padding-bottom: 41.795%;
}

.rect2 img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.rect3 {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: block;
}

.rect3::after {
    content: '';
    display: block;
    padding-bottom: calc(120/500*100%);
}

.rect3 > img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast;
}

/*기본모달*/

body {
    padding-right: 0 !important;
}

body.modal-open {
    overflow: auto;
}

body.modal-open[style] {
    padding-right: 0 !important;
}

.modal {
    padding-right: 0 !important;
}

.modal-sm {
    max-width: 36rem;
    margin: 1.75rem auto;
    padding: 0 1.6rem;
}

.modal-md {
    max-width: 48rem;
    margin: 1.75rem auto;
    padding: 0 1.6rem;
    max-height: calc(100% - 3.5rem);
    min-height: calc(100% - 3.5rem);
}

.modal-default {
    max-width: 62rem;
    margin: 1.75rem auto;
    padding: 0 1.6rem;
}

.modal {
    overflow-y: auto;
}

.modal .modal-header {
    align-items: center;
    border-bottom: 0;
    padding: 2.0rem 2rem 1.5rem;
    justify-content: space-between;
}

.modal .modal-header .modal-title {
    font-weight: 700;
    font-size: 1.8rem;
    flex: 1 1 auto;
}

.modal .modal-header .close {
    text-shadow: none;
    opacity: 1;
    width: 2.4rem;
    padding: 0;
    margin: 0;
}

.modal .modal-content {
    border: 0;
    border-radius: 2.0rem;
}

.modal .modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 2rem 0 3.0rem;
    margin: 0 2rem;
    border-top: 1px solid var(--border);
}

.modal .modal-footer > * {
    margin: 0;
}

.modal .modal-footer {
    padding: 0 2.0rem 3.0rem;
    border: 0;
    display: block;
}

.modal .modal-footer .form-row {
    margin-right: -0.4rem;
    margin-left: -0.4rem;
}

.modal-sm .modal-footer {
    padding: 0 2.0rem 2.0rem;
}

.modal-md .modal-footer {
    padding: 0 2.0rem 2.0rem;
}

.modal .modal-sm .modal-header {
    padding-bottom: 1.0rem;
}

.modal .modal-sm .modal-body {
    border: 0;
    padding-top: 0;
}

/* 토스트팝업 */

.toast {

    color: #fff;

    border-radius: 0.6rem;

    font-size: 1.5rem;

    font-weight: 500;

    padding: 0.5rem 1rem;

}

/* toast */

.toast {

    position: fixed;

    top: 2.2rem;

    left: 50%;

    transform: translateX(-50%);

    padding: 0 1.4rem;

    box-shadow: none;

    font-weight: 300;

    width: 100%;

    max-width: 400px;

    z-index: 9999;

    border: 0;

    background: transparent;

}

.toast-body {

    padding: 1.3rem 2rem;

    background-color: rgba(0, 0, 0, 0.8);

    color: var(--white);

    font-size: 1.4rem;

    font-weight: 500;

    border-radius: 0.6rem;

    text-align: center;

}

.toast-body p {

    display: flex;

    align-items: center;

    line-height: 1.3;

    justify-content: center;

}

.toast-body p i {

    margin-right: 0.6rem;

}

/* 뱃지 */

.badge {

    padding: 0.8rem 1.5rem;

    border-radius: 0;

    font-weight: 500;

    font-size: 1.5rem;

}

.badge-primary2 {
    background-color: #2273D1;
    color: #fff;
}

.badge-primary3 {
    background-color: #FFEAE5;
    color: var(--primary);
}

.badge-gray {
    background-color: #F0F0FA;
    color: #555A8D;
}

.badge-gray2 {
    background-color: #F2F2F2;
    color: #958080;
}

.badge-disabled {
    color: #999;
    background: #ddd;
}

.badge-sm {
    font-size: 1.0rem;
    line-height: 1.6rem;
    padding: 0 0.4rem;
    border-radius: 0.1rem;
}

.badge-sm2 {
    font-size: 1.0rem;
    line-height: 1.9rem;
    padding: 0 0.5rem;
    border-radius: 0.4rem;
}

.badge-md {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.6rem;
    padding: 0.9rem 1.6rem;
    border-radius: 0.6rem;
}

/*터치*/

.touch_scroll {
    overflow-x: auto;
    overflow-y: hidden;
}

/* List Style */

.list_style_1 li {
    display: flex;
    padding-bottom: 0.3rem;
    line-height: 1.4;
}

.list_style_1 li > span {
    display: inline-block;
    width: 9.5rem;
    padding-right: 0.5rem;
    color: #999;
    flex-shrink: 0;
}

.list_style_2 li {
    display: flex;
    padding-bottom: 0.8rem;
}

.list_style_2 li:before {
    content: '-';
    display: inline-block;
    margin-right: 1.0rem;
}

/*탭*/

/*nav-tabs*/

.nav-tabs {

    background: #F5F6F8;

    border-radius: 0.8rem;

    padding: 0.8rem;

    border: 0;

    flex-wrap: nowrap;

}

.nav-tabs .nav-link {

    height: 4.4rem;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.5rem;

    color: #999;

    border: 0;

    margin-bottom: 0;

    padding-left: 0.2rem;

    padding-right: 0.2rem;

    border-radius: 0.8rem;

    font-weight: 600;

}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {

    color: #495057;

    background: #fff;

    color: #000;

    box-shadow: 0 0.3rem 0.6rem rgba(0,0,0,0.06);

}

/*nav-pills*/

.nav-pills {

    margin-left: -0.4rem;

    margin-right: -0.4rem;

    flex-wrap: nowrap;

}

.nav-pills .col {

    padding-left: 0.4rem;

    padding-right: 0.4rem;

}

.nav-pills .nav-link {

    background: none;

    border: 0;

    border-radius: 1rem;

    background: #AAB1B7;

    color: #fff;

}

/*nav_tab_line*/

.nav_tab_line {

    width: 100%;

    margin: 0;

    background-color: #fff;

}

.nav_tab_line {

    border: unset;

}

.nav_tab_line .nav-item {

    text-align: center;

    background-color: #fff;

    -ms-flex-preferred-size: 0;

    flex-basis: 0;

    -ms-flex-positive: 1;

    flex-grow: 1;

    max-width: 100%;

    width: 100%;

}

.nav_tab_line .nav-link {

    border: 1px solid white;

    color: #CBCFD3;

    height: 4.8rem;

    padding: 1rem;

    width: 100%;

    font-size: 1.6rem;

    font-weight: 600;

    background: transparent;

}

.nav_tab_line .nav-item.show .nav-link,
.nav_tab_line .nav-link.active {

    border-bottom: 2px solid var(--primary);

    color: var(--primary);

}

/*커스텀 스위치*/

.custom-switch {

    padding: 0;

    width: 4.9rem;

    height: 3.3rem;

}

.custom-switch .custom-control-label::after {

    width: 2.6rem;

    height: 2.6rem;

    background-color: #fff;

    border-radius: 3rem;

    top: 0.3rem;

    left: 0.3rem;

}

.custom-control-label::after {

    position: absolute;

    top: 0.3rem;

    display: block;

    width: 1rem;

    height: 1rem;

    content: "";

    cursor: pointer;

}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {

    background-color: #fff;

    left: 1.2rem;

}

.custom-control-input:checked ~ .custom-control-label::before {

    color: #fff;

    border-color: var(--primary);

    background-color: var(--primary);

}

.custom-control-label::before {

    background-color: #EBEBEB;

    border: 0;

    top: 0;

    cursor: pointer;

}

.custom-switch .custom-control-label::before {

    left: 0;

    width: 4.9rem;

    height: 3.2rem;

    border-radius: 2rem;

}

/*d_flex*/

.d_flex_center_between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/*마진*/

.mt_1 {
    margin-top: 0.1rem;
}

.mt_6 {
    margin-top: 0.6rem;
}

.mt_07 {
    margin-top: 0.7rem;
}

.mt_8 {
    margin-top: 0.8rem;
}

.mt_12 {
    margin-top: 1.2rem;
}

.mt_14 {
    margin-top: 1.4rem;
}

.mt_16 {
    margin-top: 1.6rem;
}

.mt_17 {
    margin-top: 1.7rem;
}

.mt_18 {
    margin-top: 1.8rem;
}

.mt_20 {
    margin-top: 2.0rem;
}

.mt_22 {
    margin-top: 2.2rem;
}

.mt_24 {
    margin-top: 2.4rem;
}

.mt_25 {
    margin-top: 2.5rem;
}

.mt_27 {
    margin-top: 2.7rem;
}

.mt_28 {
    margin-top: 2.8rem;
}

.mt_33 {
    margin-top: 3.3rem;
}

.mt_35 {
    margin-top: 3.5rem;
}

.mt_36 {
    margin-top: 3.6rem;
}

.mt_40 {
    margin-top: 4.0rem;
}

.mt_44 {
    margin-top: 4.4rem;
}

.mt_45 {
    margin-top: 4.5rem;
}

.mt_48 {
    margin-top: 4.8rem;
}

.mt_53 {
    margin-top: 5.3rem;
}

.mt_60 {
    margin-top: 6.0rem;
}

.mt_70 {
    margin-top: 7.0rem;
}

.mt_80 {
    margin-top: 8.0rem;
}

.mb_3 {
    margin-bottom: 0.3rem;
}

.mb_4 {
    margin-bottom: 0.4rem;
}

.mb_6 {
    margin-bottom: 0.6rem;
}

.mb_7 {
    margin-bottom: 0.7rem;
}

.mb_07 {
    margin-bottom: 0.7rem;
}

.mb_8 {
    margin-bottom: 0.8rem;
}

.mb_9 {
    margin-bottom: 0.9rem;
}

.mb_12 {
    margin-bottom: 1.2rem;
}

.mb_14 {
    margin-bottom: 1.4rem;
}

.mb_16 {
    margin-bottom: 1.6rem;
}

.mb_18 {
    margin-bottom: 1.8rem;
}

.mb_20 {
    margin-bottom: 2.0rem;
}

.mb_21 {
    margin-bottom: 2.1rem;
}

.mb_22 {
    margin-bottom: 2.2rem;
}

.mb_24 {
    margin-bottom: 2.4rem;
}

.mb_25 {
    margin-bottom: 2.5rem;
}

.mb_27 {
    margin-bottom: 2.7rem;
}

.mb_28 {
    margin-bottom: 2.8rem;
}

.mb_35 {
    margin-bottom: 3.5rem;
}

.mb_36 {
    margin-bottom: 3.6rem;
}

.mb_40 {
    margin-bottom: 4.0rem;
}

.mb_42 {
    margin-bottom: 4.2rem;
}

.mb_45 {
    margin-bottom: 4.5rem;
}

.mb_48 {
    margin-bottom: 4.8rem;
}

.mb_50 {
    margin-bottom: 5.0rem;
}

.mb_60 {
    margin-bottom: 6.0rem;
}

.mb_70 {
    margin-bottom: 7.0rem;
}

.mr_4 {
    margin-right: 0.4rem;
}

.mr_6 {
    margin-right: 0.6rem;
}

.mr_8 {
    margin-right: 0.8rem;
}

.mr_12 {
    margin-right: 1.2rem;
}

.mr_16 {
    margin-right: 1.6rem;
}

.mr_20 {
    margin-right: 2.0rem;
}

.mr_24 {
    margin-right: 2.4rem;
}

.mr_n10 {
    margin-right: -1.0rem;
}

.mr_n20 {
    margin-right: -2.0rem;
}

.ml_6 {
    margin-left: 0.6rem;
}

.ml_8 {
    margin-left: 0.8rem;
}

.ml_16 {
    margin-left: 1.6rem;
}

.ml_24 {
    margin-left: 2.4rem;
}

.my_4 {
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
}

.my_20 {
    margin-top: 2.0rem;
    margin-bottom: 2.0rem;
}

.my_40 {
    margin-top: 4.0rem;
    margin-bottom: 4.0rem;
}

.mx_3 {
    margin-left: 0.3rem;
    margin-right: 0.3rem;
}

.mx_8 {
    margin-left: 0.8rem;
    margin-right: 0.8rem;
}

.mx_20 {
    margin-left: 2.0rem;
    margin-right: 2.0rem;
}

.mt_n10 {
    margin-top: -1rem;
}

.mx_n05 {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

.mx_n20 {
    margin-left: -2.0rem;
    margin-right: -2.0rem;
}

/*패딩*/

.pt_6 {
    padding-top: 0.6rem;
}

.pt_07 {
    padding-top: 0.7rem;
}

.pt_14 {
    padding-top: 1.4rem;
}

.pt_20 {
    padding-top: 2.0rem;
}

.pt_24 {
    padding-top: 2.4rem;
}

.pt_25 {
    padding-top: 2.5rem;
}

.pt_27 {
    padding-top: 2.7rem;
}

.pt_28 {
    padding-top: 2.8rem;
}

.pt_37 {
    padding-top: 3.7rem;
}

.pt_48 {
    padding-top: 4.8rem;
}

.pt_50 {
    padding-top: 5.0rem;
}

.pt_60 {
    padding-top: 6.0rem;
}

.pt_80 {
    padding-top: 8.0rem;
}

.pt_120 {
    padding-top: 12.0rem;
}

.pb_07 {
    padding-bottom: 0.7rem;
}

.pb_14 {
    padding-bottom: 1.4rem;
}

.pb_16 {
    padding-bottom: 1.6rem;
}

.pb_18 {
    padding-bottom: 1.8rem;
}

.pb_20 {
    padding-bottom: 2.0rem;
}

.pb_24 {
    padding-bottom: 2.4rem;
}

.pb_25 {
    padding-bottom: 2.5rem;
}

.pb_28 {
    padding-bottom: 2.8rem;
}

.pb_33 {
    padding-bottom: 3.3rem;
}

.pb_40 {
    padding-bottom: 4.0rem;
}

.pb_50 {
    padding-bottom: 5.0rem;
}

.pb_60 {
    padding-bottom: 6.0rem;
}

.pb_70 {
    padding-bottom: 7.0rem;
}

.pb_80 {
    padding-bottom: 8.0rem;
}

.pb_90 {
    padding-bottom: 9.0rem;
}

.pb_100 {
    padding-bottom: 10.0rem;
}

.pb_114 {
    padding-bottom: 11.4rem;
}

.pl_12 {
    padding-left: 1.2rem;
}

.pl_16 {
    padding-left: 1.6rem;
}

.pl_18 {
    padding-left: 1.8rem;
}

.pl_20 {
    padding-left: 2.0rem;
}

.pl_26 {
    padding-left: 2.6rem;
}

.pl_40 {
    padding-left: 4.0rem;
}

.pr_16 {
    padding-right: 1.6rem;
}

.py_7 {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.py_8 {
    padding-top: 0.8rem;
    padding-bottom: 0.7rem;
}

.py_11 {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}

.py_13 {
    padding-top: 1.3rem;
    padding-bottom: 1.3rem;
}

.py_20 {
    padding-top: 2.0rem;
    padding-bottom: 2.0rem;
}

.py_25 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.py_28 {
    padding-top: 2.8rem;
    padding-bottom: 2.8rem;
}

.py_35 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

.px_8 {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
}

.px_12 {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}

.px_16 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
}

.px_17 {
    padding-left: 1.7rem;
    padding-right: 1.7rem;
}

.px_18 {
    padding-left: 1.7rem;
    padding-right: 1.8rem;
}

.px_20 {
    padding-left: 2.0rem;
    padding-right: 2.0rem;
}

.px_22 {
    padding-left: 2.2rem;
    padding-right: 2.2rem;
}

.p_20 {
    padding: 2rem;
}

.vh_100 {
    min-height: 100vh;
}

.vh_100_vh {
    height: 100vh;
}

.w-auto {
    width: auto;
}

.rounded-md {
    border-radius: 0.6rem;
}

.rounded {
    border-radius: 0.8rem;
}

/* 모바일 헤더 */
.hd_pc {
    display: block;
}
.hd_m {
    display: none;
}

/* 모바일 헤더 기본 */
.hd_m {
    background: #fff;
    height: 56px;
}

.hd_m_inner {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.m_logo img {
    height: 39px;
    width: auto;
    display: block;
    margin-bottom: 0.4rem;
}

.m_right {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

/* 검색 */
.m_search {
    min-width: 0;
    margin-right: 1.5rem;
}

/* 기본: PC 보임, 모바일 숨김 */
.hd_pc {
    display: block;
}
.hd_m {
    display: none;
}

/* 우측 아이템 간격 (gap 대신 margin) */
.m_lang {
    margin-right: 4rem;
}
.m_search {
    margin-right: 1.8rem;
}

/* 언어 버튼 */
.m_lang {
    position: relative;
    flex-shrink: 0;
}

.m_lang_btn {
    display: inline-flex;
    align-items: center;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    gap: 0.5rem;
}

.m_lang_code {
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 1;
}

.m_lang_arrow img {
    display: block;
    transform: rotate(180deg);
}

/* 열렸을 때 화살표 회전 */
.m_lang_btn[aria-expanded="true"] .m_lang_arrow img {
    transform: rotate(0deg);
}

/* 드롭다운 메뉴 */
.m_lang_menu {
    position: absolute;
    top: calc(100% + 10px);
    right: -4.5rem;
    z-index: 9999;
    display: none;
    min-width: 100px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: #fff;
    border-radius: 1.2rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* 열렸을 때만 표시 */
.m_lang_btn[aria-expanded="true"] + .m_lang_menu {
    display: block;
}

/* 메뉴 버튼 스타일 */
.m_lang_menu .depth_btn {
    width: 100%;
    text-align: center;
    border: 0;
    background: transparent;
    padding: 1rem 1.4rem;
    cursor: pointer;
    font-size: 1.6rem;
}

.m_lang_menu .depth_btn:hover {
    background: var(--gray-50);
}

.m_lang_menu .depth_btn.is_active {
    font-weight: 600;
}

.m_lang_menu {
    padding: 1.2rem;
}

/* 공통 버튼 스타일 */
.m_lang_menu .depth_btn {
    width: 100%;
    text-align: center;
    border: 0;
    background: transparent;
    padding: 1.2rem 1.4rem;
    border-radius: 1.4rem;
    font-weight: 500;
}

.m_lang_menu .depth_btn.is_active {
    background: var(--gray-50);
}

/* hover도 살짝 회색으로(선택) */
.m_lang_menu .depth_btn:hover {
    background: var(--gray-50);
}

.m_lang_arrow img {
    max-width: none;
    display: block;
    width: 2rem;
    height: 2rem;
}

.ft_wrap {
    display: flex;
    justify-content: space-between;
}

.ft_right {
    text-align: right;
}

.ft_tel {
    margin-top: 5.5rem;
}

.ft_mail {
    margin-top: 1.8rem;
}

.ft_mail,
.ft_text,
.ft_time {
    color: var(--gray-200);
}

.ft_copy {
    color: var(--gray-500);
    margin-top: 0rem;
}

.ft_title {
    margin-bottom: 1rem;
}

.ft_headoffice {
    margin-top: 4rem;
}

.ft_localstore {
    margin-top: 1rem;
}

.ft_sns {
    margin-top: 3.6rem;
}

.ft_sns {
    display: flex;
    justify-content: right;
    align-items: center;
}

.ft_instagram {
    margin-right: 1rem;
    color: #fff;
}

.ft_sns_icon img {
    width: 16px;
    height: 16px;
}

.ft_hang {
    line-height: 140%;
}

.br_660 {
    display: none;
}

/* 메인 */

body,
html {
    overflow-x: hidden;
}

.wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

/* banner */
.banner_section {
    padding: 9rem 10rem;
}

.banner_wrapper {
    position: relative;
}

.banner-swiper {
    overflow: visible;
}

.swiper-wrapper {
    align-items: stretch;
}

.swiper-slide {
    opacity: 0.3;
    transition: opacity 0.3s ease;
    height: auto;
}

.swiper-slide-active,
.swiper-slide-active + .swiper-slide {
    opacity: 1;
}

.banner_slide {
    height: 100%;
}

.banner_card {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.banner_img {
    width: 100%;
    height: 100%;
    object-fit: cotain;
    display: block;
    transition: transform 0.3s ease;
}

/* 화살표 버튼 - container 양 끝에 absolute 배치 */
.banner-swiper-button-next,
.banner-swiper-button-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 5rem;
    height: 5rem;
    background: #fff;
    border-radius: 5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: box-shadow 0.3s ease;
    margin-top: -2rem;
    /* 페이지네이션 공간 보정 */
}

.banner-swiper-button-prev {
    left: 10px;
}

.banner-swiper-button-next {
    right: 10px;
}

.banner-swiper-button-next:hover,
.banner-swiper-button-prev:hover {
    background-color: #f2f2f2;
}

.banner-swiper-button-next img,
.banner-swiper-button-prev img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
}

/* Pagination 기본 스타일 */
.banner_wrapper {
    position: relative;
}

.banner_wrapper {
    position: relative;
}

.banner-pagination-dots {
    position: absolute;
    bottom: -40px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    display: none !important;
}

.banner-pagination-dots .swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    background: var(--gray-100)!important;
    opacity: 0.5 !important;
    margin: 0 4px !important;
    border-radius: 50% !important;
}

.banner-pagination-dots .swiper-pagination-bullet-active {
    opacity: 1 !important;
    background: var(--secondary)!important;
}



/* section1 */
.section1 {
    padding-bottom: 10rem;
}

/* row 간격 */
.section1_cards {
    margin-top: 5rem;
    margin-left: 0 !important;
    margin-right: 0 !important;

}

/* col 사이 간격을 만들고 싶으면: (부트스트랩 기본 gutter가 없다면 이걸 사용) */
.section1_cards > [class*="col-"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.box {
    width: 100%;
    min-height: 44rem;
    background-size: auto;
    background-position: right bottom;
    background-repeat: no-repeat;
    overflow: hidden;
}

.box_contents {
    padding: 2.9rem;
}

.view_products {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    text-decoration: none;
    width: fit-content;
}

.view_arrow img {
    transform: rotate(0deg);
    transition: transform 280ms ease;
    will-change: transform;
}

.view_products:hover .view_arrow img {
    transform: rotate(270deg);
}

.box_body {
    margin-top: 1.6rem;
    margin-bottom: 3.2rem;
}

.box_1 {
    background: url("../img/instant_noodles.svg") right bottom no-repeat var(--primary-50);
}

.box_2 {
    background: url("../img/snack.svg") right bottom no-repeat #E9F4E9;
}

.box_3 {
    background: url("../img/sauces.svg") right bottom no-repeat #FFEFDC;
}

/* section2 */
.section2 {
    background-color: var(--gray-50);
    padding: 10rem 0;
}

.section2_row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.section2_tit_wrap {
    margin-bottom: 5rem;
}

.section2_tit,
.why_partner h3 {
    text-align: center;
}

.inner_row {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
}

.inner_row > .why_box {
    padding-left: 1rem !important;
    margin-bottom: 1rem;
}

.box_left {
    padding-right: 2rem;
}

.welcome h3 {
    text-align: center;
    margin-bottom: 3.6rem;
}

.why_partner {
    background-color: #fff;
    padding: 3.2rem;
}

.why_inner_box {
    padding: 3rem;
    border: 1px solid var(--gray-200);
    background-color: #fff;
}

.why_box_wrap {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 4rem;
}

.why_box {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.why_inner_icon {
    border-radius: 5rem;
    margin-bottom: 5.7rem;
    width: 4rem;
    height: 4rem;
}

.why_inner_icon_1 {
    background: url("../img/why_icon_1.svg") center no-repeat var(--primary-400);
}

.why_inner_icon_2 {
    background: url("../img/why_icon_2.svg") center no-repeat var(--primary-400);
}

.why_inner_icon_3 {
    background: url("../img/why_icon_3.svg") center no-repeat var(--primary-400);
}

.why_inner_icon_4 {
    background: url("../img/why_icon_4.svg") center no-repeat var(--primary-400);
}

.partners_box_wrap {
    display: flex;
    justify-content: space-between;
}

.welcome_content {
    text-align: center;
    display: flex;
    align-items: center;
    padding: 2.5rem 1.4rem;
    border-bottom: 1px solid var(--gray-200);
}

.welcome_icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    margin-right: 2rem;
    flex-shrink: 0;
}

.welcome_icon_1 {
    background: url("../img/welcome_icon_1.svg") no-repeat center var(--primary-400);
}
.welcome_icon_2 {
    background: url("../img/welcome_icon_2.svg") no-repeat center var(--primary-400);
}
.welcome_icon_3 {
    background: url("../img/welcome_icon_3.svg") no-repeat center var(--primary-400);
}

.none_border {
    border: none;
}

.partners_shadow {
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
}

.inquiry {
    padding: 3.3rem;
    margin-top: 1.5rem;
}

.inquiry_content {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.welcome {
    padding: 3.4rem;
}

/* section3 */
.section3 {
    padding: 10rem 0;
}

.best_sellers {
    --gap: 2rem;
    /* 카드 간격 */
    --perView: 4;
    /* 기본: 한 화면에 4개 */
    margin-top: 5rem;
}

/* 뷰포트: 가로 스크롤 */
.best_viewport {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;

    /* 스냅(넘기는 느낌 강화) */
    scroll-snap-type: x mandatory;
}

/* 스크롤바 숨김 */
.best_viewport::-webkit-scrollbar {
    height: 0;
}
.best_viewport {
    scrollbar-width: none;
}

/* 트랙 */
.best_track {
    display: flex;
    gap: var(--gap);
    align-items: flex-start;
    padding-bottom: 0.1px;
    /* 일부 브라우저 스냅 버그 방지용 */
}

.best_item {
    flex: 0 0 calc((100% - (var(--gap) * (var(--perView) - 1))) / var(--perView));
    scroll-snap-align: start;
}

.best_card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.best_thumb {
    aspect-ratio: 1 / 1;
    border: 1px solid var(--gray-200);
    border-radius: 1rem;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.best_thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;

    transform: scale(1);
    transition: transform 280ms ease;
    will-change: transform;
}

.best_card:hover .best_thumb img {
    transform: scale(1.06);
}

.best_name {
    margin: 2.3rem 0 1.3rem;
}
.best_weight {
    margin-bottom: 1.5rem;
}
.best_desc {
    margin: 0;
}

.best_bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.8rem;
    margin-top: 5rem;
}

.best_bar {
    flex: 1;
    height: 0.2rem;
    background: var(--gray-50);
    position: relative;
    overflow: hidden;
}

.best_bar_fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 50%;
    background: var(--gray-800);
}

.best_nav {
    display: flex;
    gap: 1rem;
}

.best_btn {
    width: 5rem;
    height: 5rem;
    border-radius: 5rem;
    border: 1px solid var(--gray-100);
    background: #fff;
    color: var(--secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.best_btn:hover {
    border: 1px solid var(--gray-900);
    background: var(--gray-900);
    color: #fff;
}

.best_btn svg {
    width: 2.5rem;
    height: 2.5rem;
    display: block;
}

.best_btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.ft {
    padding: 5rem 0;
    background-color: #30343A;
}

.ft_logo {
    width: 210px;
    height: 69px;
}

@media (max-width: 1261px) {
    .box_body br {
        display: none;
    }
}

/*반응형 max 1200 xl*/
@media (max-width: 1199.98px) {
    /* section1 */
    .section1_cards > .col-lg-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .section1_cards > [class*="col-"] {
        margin-bottom: 2rem;
    }

    .section1_cards > [class*="col-"]:last-child {
        margin-bottom: 0;
    }

    .box_body {
        font-size: 2rem;
        line-height: 145%;
    }

    .view_products span {
        font-size: 2.2rem;
    }

    .view_arrow {
        margin-bottom: 0.3rem;
    }

    .box {
        background-size: 30%;
    }

    .box_body br {
        display: block;
    }

    /* section2 */

    .section2_row {
        flex-direction: column;
    }

    .section2_row .box_left,
    .section2_row .box_right {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .section2_row .box_left {
        margin-bottom: 1.5rem;
        /* 카드 간 간격 */
    }

    .section2_row .box_right .row > .col-12 {
        margin-bottom: 1.5rem;
        /* welcome과 inquiry 카드 간 간격 */
    }

    .section2_row .box_right .row > .col-12:last-child {
        margin-bottom: 0;
        /* 마지막 카드는 하단 마진 제거 */
    }

    .box_left {
        padding-right: 0;
    }

    .section2_subtit {
        font-size: 1.8rem;
    }
}

@media (max-width: 1130px) {

    .ft {
        padding: 3rem 0 !important;
    }

    .ft_logo {
        width: 160px;
        height: 52px;
    }

    .ft_tel {
        font-size: 1.8rem !important;
        margin-top: 4rem !important;
    }
    .ft_title {
        font-size: 1.6rem !important;
    }

    .ft_localstore {
        padding-top: 0;
    }

    .ft_headoffice {
        margin-top: 2rem;
    }

    .ft_mail,
    .ft_text,
    .ft_time {
        font-size: 1.6rem !important;
    }

    .ft_copy {
        font-size: 1.4rem !important;
    }
}

@media (max-width: 1070px) {

    .ft_tel {
        margin-top: 4rem;
    }

    .ft_mail {
        margin-top: 1.3rem;
    }

    .ft_wrap {
        flex-direction: column;
    }

    .ft_title {
        margin-bottom: 1.3rem;
        margin-top: 3rem;
    }

    .ft_left {
        flex: 1;
        max-width: none;
    }

    .ft_right {
        text-align: left;
        align-items: flex-start;
    }

    .ft_copy {
        max-width: none;
        /* 모바일은 전체폭 */
        margin-top: 4rem;
    }

    .ft_sns {
        justify-content: left;
        margin-top: 4rem;
    }

    /* 긴 주소/영문 줄바꿈 안전장치 */
    .ft_mail,
    .ft_text,
    .ft_time {
        overflow-wrap: anywhere;
        word-break: keep-all;
    }

    .ft_company {
        margin-top: 0.8rem !important;
    }

}

/*반응형 max 992px lg*/

@media (max-width: 991.98px) {
    .hd_pc .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .btn-lg {
        height: var(--height);
        font-size: 1.5rem;
    }

    .best_sellers {
        --perView: 2;
    }

    /*전체사이즈*/

    .modal.modal_full {
        overflow-y: auto;
    }

    .modal.modal_full .modal-title button {
        border: 0;
        background: transparent;
        width: 4.8rem;
    }

    .modal.modal_full .modal-content {
        border-radius: 0;
        max-height: 100vh;
        height: 100vh;
    }

    .modal.modal_full .modal-dialog {
        margin: 0 auto;
    }

    .modal.modal_full .modal-title {

        width: 100%;

        background: #fff;

        padding: 2.4rem 0.4rem 0.6rem;

        display: flex;

        align-items: center;

        justify-content: space-between;

    }

    .modal.modal_full .modal-body {
        border-bottom: 0;
    }

    .modal.modal_full .modal-footer {
        padding-top: 1.4rem;
        padding-bottom: 1.4rem;
        display: block;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .modal.modal_full .modal-footer .form-row {
        margin-left: -5px;
        margin-right: -5px;
    }

    .modal.modal_full .bg-black .modal-title {
        background: #000;
    }

    /*하단 팝업*/

    .modal_bottom.modal {
        padding-right: 0 !important;
        overflow-y: hidden;
    }

    .modal_bottom.modal.show .modal-dialog {
        padding-right: 0 !important;
        transform: translate(-50%, 0);
    }

    .modal_bottom.modal .modal-dialog {
        transform: translate(0, 5rem);
        position: fixed;

        bottom: 0;

        width: 100%;

        max-width: 100%;

        transform: translate(-50%, 5rem);

        left: 50%;

    }

    .modal_bottom.modal .modal-title button {
        border: 0;
        background: transparent;
        width: 3.2rem;
        position: absolute;
        right: 2.0rem;
        top: 1.6rem;
    }

    .modal_bottom.modal .modal-dialog {
        justify-content: flex-end;
        margin: 0 auto;
        min-height: 100%;
    }

    .modal_bottom.modal .modal-content {
        border-radius: 2.0rem 2.0rem 0 0;
        margin-top: 3.0rem;
    }

    .modal_bottom.modal .modal-body {
        border-bottom: 0;
        padding: 2rem 0 5.6rem;
    }

    .modal-backdrop {
        left: 50%;
        width: 100%;
        transform: translateX(-50%);
    }

    /*rounded*/

    .rounded-lg {
        border-radius: 1.2rem !important;
    }

    /* section1 */
    .tit_h2 {
        font-size: 3.3rem;
    }

}

@media (min-width: 851px) and (max-width: 991.98px) {
    .hd_pc {
        display: block !important;
    }
}

/*반응형 max 767px md*/

@media (max-width: 850px) {
    .hd_pc {
        display: none !important;
    }
    .hd_m {
        display: block !important;
    }

}
@media (max-width: 767.98px) {

    /* banner */

        .banner-swiper-button-prev,
    .banner-swiper-button-next {
        display: none !important;
    }
    
    .banner-pagination-dots {
        display: block !important;
        text-align: center !important;
    }

    .banner_section {
        padding: 6rem 0rem;
    }
    .section1 {
        padding-bottom: 5rem;
    }

    .section2,
    .section3 {
        padding: 5rem 0;
    }

    .tit_h2 {
        font-size: 3rem;
    }

    .box_1 {
        background-size: 38%;
    }
    .box_2 {
        background-size: 42%;
    }
    .box_3 {
        background-size: 44%;
    }

    .tit_h3 {
        font-size: 2.4rem;
    }

    .section1_cards {
        margin-top: 2.2rem;
    }

    .inquiry {
        margin-top: 0;
    }

    .welcome_icon {
    margin-right: 1.9rem;
}

.section2_tit_wrap {
    margin-bottom: 3rem;
}

.tit_h4, .welcome_tit{
    font-size: 2.2rem;
}

.inquiry_content{
    font-size: 1.7rem !important;
    display: block;
}

.inquiry{
    padding: 2.7rem;
}

    /* section3 */
    .best_sellers {
        margin-top: 2.2rem;
    }
}

/*반응형 max 576px sm*/

@media (max-width: 575.98px) {
    .box_body br{
        display: none;
    }
}

@media (max-width: 660px) {
    .br_660 {
        display: block;
    }
    .pipe_contact {
        display: none;
    }
    /* Contact 앞 | 제거 */
    .contact_part {
        display: block;
        /* Contact를 다음 줄로 */
        margin-top: 8px;
        /* 줄간격(원하면 조절) */
    }

    .best_sellers {
        --perView: 1;
    }

    /* section1 */
    .tit_h2 {
        font-size: 2.7rem;
    }

    .tit_h2 br {
        display: none;
    }


}

/*반응형 max 360px*/

@media (max-width: 360px) {

    html {
        font-size: 9.4px;
    }

}