@charset "utf-8";
@import "font.css";

* {
    box-sizing: border-box;
    font-family: "Pretendard", Sans-serif;
    /* color: #2f3444; */
}
/* a:visited {
    color: unset;
} */

p,
span,
button,
div,
input,
a,
b {
    color: var(--Dark, #2f3444);
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
}
input[type="text"],
input[type="password"],
input[type="number"] {
    height: 40px;
    padding: 0px 12px;
    border-radius: 4px;
    border: 1px solid var(--Grey_D, #ddd);
    background: var(--White, #fff);
}
video {
    object-fit: cover;
    object-position: center;
}

.swal2-actions {
    width: 100% !important;
    flex-wrap: unset !important;
}
.swal2-deny,
.swal2-confirm {
    max-width: 140px !important;
    width: 100% !important;
}
.swal2-html-container.set {
    margin: 0 !important;
    padding: 0 !important;
}
.swal2-html-container.set > .exit_pop_content {
    text-align: center;
    line-height: 20px; /* 142.857% */
    padding-top: 32px;
}
.swal2-html-container.set > .exit_pop_content.mobile {
    align-self: flex-end;
}
.swal2-html-container.set > .exit_pop_content > .join_pop {
    padding-top: 12px;
}
.swal2-html-container.set > .exit_pop_content > .title {
    font-size: 24px;
    font-weight: 800;
    line-height: 30px; /* 125% */
    margin-bottom: 12px;
}
.swal2-popup.set > .swal2-close {
    width: 24px;
    height: 24px;
}
.swal2-popup.set > .swal2-actions > button {
    height: 50px;
}
.swal2-popup.set.mobile {
    align-self: flex-end;
    grid-row: 3;
    max-width: unset;
    border-radius: 12px 12px 0 0;
}
.swal2-backdrop-show.set {
    /* 모바일 팝업 백그라운드 */
    padding: 0;
}

[type="radio"],
select {
    appearance: none;
}
.normalradios {
    vertical-align: middle;
    appearance: none;
    border: 2px solid #cccccc;
    border-radius: 50%;
    width: 17px;
    height: 17px;
}

.normalradios:checked {
    border: 2px solid #000;
    position: relative;
}
.normalradios:checked:after {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    background-color: #000;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}
.normalradios:disabled {
    border: 5px solid #ddd;
}
label.input_label {
    margin-left: 5px;
    margin-right: 15px;
}
.swal2-styled.swal2-confirm {
    box-shadow: none !important; /* "아니오" 버튼의 포커스 테두리를 제거 */
}
div:where(.swal2-container) .swal2-html-container {
    color: var(--Dark, #212121) !important;
    text-align: center;
    font-size: 14px !important;
    line-height: 20px !important;
    margin: 40px 0 0 0 !important;
}
div:where(.swal2-container).swal2-center > .swal2-popup {
    padding: 20px;
    max-width: 400px;
    width: 100%;
    border-radius: 12px;
    background: #fff;
}
.swal2-deny,
.swal2-confirm {
    border-radius: 100px !important;
    padding: 0.8em 1.3em !important;
}

.pop_test_btn_custom {
    padding: 12px 40px !important;
}
.pop_test_long {
    max-width: 480px !important;
}

#timer {
    position: absolute;
    top: 0;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: red;
    z-index: 100;
}
form {
    margin: 0;
}

html {
    overflow-y: scroll;
    overflow-x: hidden;
}
/* 폰트, color는 디자인가이드에 맞게사용 */
body {
    margin: 0;
    font-size: 14px;
}
p {
    margin: 0;
}
input,
button,
select,
textarea {
    font-family: "NanumSquare_Neo" "돋움", Dotum, Helvetica,
        "Apple SD Gothic Neo", Sans-serif;
    margin: 0;
    padding: 0;
}
button {
    border: none;
    cursor: pointer;
    background-color: #fff;
}
ul:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "";
}

/* hidden */
.hidden {
    display: block;
    position: absolute;
    overflow: hidden;
    top: -999999px;
    left: -999999px;
    width: 1px;
    height: 1px;
    font-size: 0;
    text-indent: -999999px;
    line-height: 0;
}

.sign_admin_view {
    width: 200px;
    height: 120px;
    background-color: #f4f4f4;
}

/* button area */
.btn {
    display: inline-block;
    vertical-align: bottom;
}
.btn img {
    border: 0;
    vertical-align: middle;
}
.btn:hover {
    text-decoration: none;
}

.btn.homepage,
.btn.logout {
    font-family: "돋움", Dotum, Helvetica, "Apple SD Gothic Neo", Sans-serif;
}

.btn.homepage {
    height: 22px;
    padding: 0 7px;
    border: 1px solid #686868;
    font-size: 11px;
    color: #ffffff;
    line-height: 24px;
    background-color: #565656;
}
.btn.logout {
    height: 22px;
    padding: 0 7px;
    border: 1px solid #686868;
    font-size: 11px;
    color: #ffffff;
    line-height: 24px;
    background-color: #3a3a3a;
}
.btn.prove {
    height: 22px;
    padding: 0 7px;
    border: 1px solid #686868;
    font-size: 11px;
    color: #ffffff;
    line-height: 24px;
    background-color: #0476b8;
}
.btn.grayback {
    height: 22px;
    padding: 0 7px;
    border: 1px solid #686868;
    font-size: 11px;
    color: #999;
    line-height: 24px;
    background-color: #f2f2f2;
}

.btn.done {
    height: 22px;
    padding: 2px 6px 0;
    border: 1px solid #b4b4b4;
    font-size: 12px;
    line-height: 20px;
    color: #333333;
    text-align: center;
    letter-spacing: -0.06em;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    background-color: #f2f2f2;
}

/*
 * 조건부 검색 시 쓰는 버튼
 * 상위메뉴 등 기본적인 버튼 : basic
 * 미리보기 : basic look
 */
button.btn.basic {
    height: 36px;
}
a.btn.basic {
    height: 34px;
}
.btn.basic {
    padding: 0 22px;
    border: 1px solid #bfbfbf;
    font-family: "Nanum Gothic", "NanumGothic", "나눔고딕", Helvetica,
        "Apple SD Gothic Neo", Sans-serif;
    font-weight: bold;
    font-size: 13px;
    line-height: 35px;
    color: #515151;
    text-align: center;
    letter-spacing: -0.04em;
    background-color: #fafafa;
}
.btn.basic span {
    display: block;
    text-align: left;
}
.btn.basic span.look {
    padding-right: 22px;
    background: url("../images/icon/icon_link.png") no-repeat right 11px;
}

/*
 * 조건부 검색 시 쓰는 버튼
 * 검색 : sch
 * 전체보기 : clear
 */
.btn.sch,
.btn.clear {
    width: 100px;
    height: 27px;
    font-family: "Nanum Gothic", "NanumGothic", "나눔고딕", Helvetica,
        "Apple SD Gothic Neo", Sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-align: center;
    line-height: 27px;
    color: #ffffff;
}
.btn.sch {
    background-color: black;
}
.btn.clear {
    background-color: white;
    border: 1px solid #d7d7d7;
    color: #807f80;
}

/*
 * 문자발송, 메일발송 버튼 : sns
 * 
 */
.btn.sns {
    width: 134px;
    height: 34px;
    border: 1px solid #bfbfbf;
    font-family: "Nanum Gothic", "NanumGothic", "나눔고딕", Helvetica,
        "Apple SD Gothic Neo", Sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #515151;
    text-align: center;
    line-height: 35px;
    background-color: #e8e8e8;
}
.btn.sns span {
    display: block;
    text-align: left;
}
.btn.sns span.icon_sms {
    padding-left: 53px;
    background: url("../images/icon/icon_sms.png") no-repeat 31px 11px;
}
.btn.sns span.icon_mail {
    padding-left: 56px;
    background: url("../images/icon/icon_mail.png") no-repeat 29px 12px;
}
button.btn.upper {
    height: 27px;
}
a.btn.upper {
    height: 25px;
}
.btn.upper {
    padding: 0 15px;
    border: 1px solid #bababa;
    font-family: "Nanum Gothic", "NanumGothic", "나눔고딕", Helvetica,
        "Apple SD Gothic Neo", Sans-serif;
    font-size: 13px;
    color: #606060;
    background: #f5f5f5;
    background: -moz-linear-gradient(
        top,
        #ffffff 0%,
        #f5f5f5 100%
    ); /* FF3.6-15 */
    background: -webkit-linear-gradient(
        top,
        #ffffff 0%,
        #f5f5f5 100%
    ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #f5f5f5 100%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0 ); /* IE6-9 */
}

/*
 * table 검색 버튼 : schtable
 * active한 버튼 : acti
 * 노멀한 버튼 : none
 */
button.btn.schtable,
button.btn.acti,
button.btn.none {
    height: 25px;
}
a.btn.schtable,
a.btn.acti,
a.btn.none {
    height: 23px;
}
.btn.schtable {
    padding: 0 17px;
    border: 1px solid #3793c8;
    font-family: "Nanum Gothic", "NanumGothic", "나눔고딕", Helvetica,
        "Apple SD Gothic Neo", Sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    color: #4d4d4d;
    line-height: 24px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
.btn.acti {
    padding: 0 14px;
    border: 1px solid #0074b5;
    font-family: "Nanum Gothic", "NanumGothic", "나눔고딕", Helvetica,
        "Apple SD Gothic Neo", Sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    line-height: 24px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    background-color: #0074b5;
}
.btn.none {
    padding: 0 14px;
    border: 1px solid #939292;
    font-family: "Nanum Gothic", "NanumGothic", "나눔고딕", Helvetica,
        "Apple SD Gothic Neo", Sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    color: #4d4d4d;
    line-height: 24px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    background-color: #fefefe;
}

/*
 * table안에 있는 버튼 
 * 보기 : look
 * active한 버튼 : active
 * 노멀한 버튼 : nomal
 */
button.btn.look,
button.btn.active,
button.btn.nomal {
    height: 22px;
}
a.btn.look,
a.btn.active,
a.btn.nomal {
    height: 20px;
}
a.btn.look:hover,
a.btn.active:hover,
a.btn.nomal:hover {
    text-decoration: none;
}
.btn.look {
    padding: 0 10px;
    border: 1px solid #bababa;
    font-family: "Nanum Gothic", "NanumGothic", "나눔고딕", Helvetica,
        "Apple SD Gothic Neo", Sans-serif;
    font-size: 12px;
    color: #515151;
    line-height: 20px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    background: #f5f5f5;
    background: -moz-linear-gradient(
        top,
        #ffffff 0%,
        #f5f5f5 100%
    ); /* FF3.6-15 */
    background: -webkit-linear-gradient(
        top,
        #ffffff 0%,
        #f5f5f5 100%
    ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #f5f5f5 100%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0 ); /* IE6-9 */
}
.btn.active {
    padding: 0 10px;
    border: 1px solid #3793c8;
    font-family: "Nanum Gothic", "NanumGothic", "나눔고딕", Helvetica,
        "Apple SD Gothic Neo", Sans-serif;
    font-size: 12px;
    color: #515151;
    line-height: 20px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
.btn.nomal {
    padding: 0 10px;
    border: 1px solid #b1b1b1;
    font-family: "Nanum Gothic", "NanumGothic", "나눔고딕", Helvetica,
        "Apple SD Gothic Neo", Sans-serif;
    font-size: 12px;
    color: #515151;
    line-height: 20px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}

/* 
 * 목록 : list
 * 저장, 수정, 등록, 추가 : save
 * 취소, 삭제 : cancel
 */
.mbn {
    font-size: 20px;
    font-weight: bold;
}
.bd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.bd2 {
    justify-content: flex-end;
}
button.btn.list,
button.btn.save,
button.btn.delete,
button.btn.cancel {
    width: 104px;
    height: 36px;
    font-family: "Nanum Gothic", "NanumGothic", "나눔고딕", Helvetica,
        "Apple SD Gothic Neo", Sans-serif;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}
a.btn.list,
a.btn.save,
a.btn.delete,
a.btn.cancel {
    width: 104px;
    height: 36px;
    font-family: "Nanum Gothic", "NanumGothic", "나눔고딕", Helvetica,
        "Apple SD Gothic Neo", Sans-serif;
    font-size: 13px;
    line-height: 34px;
}
.btn.list {
    border: 1px solid #7a7979;
    color: #515151;
    text-align: center;
    background-color: #fafafa;
}
.btn.save {
    color: #ffffff;
    text-align: center;
    background-color: #2172d3;
}
.btn.cancel {
    border: 1px solid #7a7979;
    color: #807f80;
    text-align: center;
    background-color: #f2f2f2;
}
.btn.delete {
    color: #ffffff;
    text-align: center;
    background-color: #a6a6a6;
    font-size: 20px;
}

/* input & Select Type */
/* textarea {text-align: left; text-indent: 3px; line-height: 1.4em; min-height: 150px; padding: 5px; }
p {line-height: 1.5em; text-align: left;}
select {height: 25px; border: 1px solid #969696; text-align: left; text-indent: 1px;}
input {display: inline-block; display: inline; vertical-align: middle; }
input[type=text] {padding: 5px; font-size: 100%; text-indent: 1px; text-align: left;}
input[type=number] { padding: 5px; font-size: 100%; text-indent: 1px; text-align: left;}
input[type=file] {padding: 5px; font-size: 100%; text-indent: 1px; text-align: left;}
input {height: 40px; padding: 5px; font-size: 100%; text-indent: 1px; text-align: left;}
input[type=checkbox] {height: 20px; padding: 0px; font-size: 100%; text-indent: 1px; text-align: left;}
input[type=radio] {height: 20px; padding: 0px; font-size: 100%; text-indent: 1px; text-align: left;}
select {height: 30px !important; padding: 5px; font-size: 100%; text-indent: 1px; text-align: left;}
input[type=text].alignc {text-align: center;}
    .in_wp40 {width: 40px; border: 1px solid #969696;}
    .in_wp50 {width: 50px; border: 1px solid #969696;}
    .in_wp60 {width: 60px; border: 1px solid #969696;}
    .in_wp70 {width: 70px; border: 1px solid #969696;}
    .in_wp80 {width: 80px; border: 1px solid #969696;}
    .in_wp90 {width: 90px; border: 1px solid #969696;}
    .in_wp100 {width: 100px; border: 1px solid #969696;}
    .in_wp110 {width: 110px; border: 1px solid #969696;}
    .in_wp120 {width: 120px; border: 1px solid #969696;}
    .in_wp130 {width: 130px; border: 1px solid #969696;}
    .in_wp140 {width: 140px; border: 1px solid #969696;}
    .in_wp150 {width: 150px; border: 1px solid #969696;}
    .in_wp160 {width: 160px; border: 1px solid #969696;}
    .in_wp170 {width: 170px; border: 1px solid #969696;}
    .in_wp180 {width: 180px; border: 1px solid #969696;}
    .in_wp190 {width: 190px; border: 1px solid #969696;}
    .in_wp200 {width: 200px; border: 1px solid #969696;}
    .in_wp250 {width: 250px; border: 1px solid #969696;}
    .in_wp300 {width: 300px; border: 1px solid #969696;}
    .in_wp400 {width: 400px; border: 1px solid #969696;}
    .in_wp500 {width: 500px; border: 1px solid #969696;}
    .in_wp600 {width: 600px; border: 1px solid #969696;}
    .in_w15 {width: 15%; border: 1px solid #969696;}
    .in_w20 {width: 20%; border: 1px solid #969696;}
    .in_w25 {width: 25%; border: 1px solid #969696;}
    .in_w30 {width: 30%; border: 1px solid #969696;}
    .in_w33 {width: 33%; border: 1px solid #969696;}
    .in_w35 {width: 35%; border: 1px solid #969696;}
    .in_w39 {width: 39%; border: 1px solid #969696;}
    .in_w40 {width: 40%; border: 1px solid #969696;}
    .in_w45 {width: 45%; border: 1px solid #969696;}
    .in_w49 {width: 49%; border: 1px solid #969696;}
    .in_w50 {width: 50%; border: 1px solid #969696;}
    .in_w60 {width: 60%; border: 1px solid #969696;}
    .in_w70 {width: 70%; border: 1px solid #969696;}
    .in_w80 {width: 80%; border: 1px solid #969696;}
    .in_w90 {width: 90%; border: 1px solid #969696;}
    .in_w93 {width: 93%; border: 1px solid #969696;}
    .in_w95 {width: 95%; border: 1px solid #969696;}
    .in_w98 {width: 98%; border: 1px solid #969696;}
    .in_w100 {width: 100%; border: 1px solid #969696;}
    .height23 {height: 23px;}
     */

/* margin & padding */

.in_wp600 {
    width: 600px !important;
}

.marginl3 {
    margin-left: 3px;
}
.marginl5 {
    margin-left: 5px;
}
.marginl10 {
    margin-left: 10px;
}
.marginl12 {
    margin-left: 12px;
}
.marginl15 {
    margin-left: 15px;
}
.marginl20 {
    margin-left: 20px;
}
.marginl22 {
    margin-left: 22px;
}
.marginl25 {
    margin-left: 25px;
}
.marginl40 {
    margin-left: 40px;
}
.marginml5 {
    margin-left: -5px;
}
.marginr3 {
    margin-right: 3px;
}
.marginr5 {
    margin-right: 5px;
}
.marginr10 {
    margin-right: 10px;
}
.marginr20 {
    margin-right: 20px;
}
.marginmt2 {
    margin-top: -2px;
}
.margintm5 {
    margin-top: -5px;
}
.margintm10 {
    margin-top: -10px;
}
.margintm20 {
    margin-top: -20px;
}

.margint2 {
    margin-top: 2px;
}
.margint3 {
    margin-top: 3px;
}
.margint5 {
    margin-top: 5px;
}
.margint6 {
    margin-top: 6px;
}
.margint10 {
    margin-top: 10px;
}
.margint12 {
    margin-top: 12px !important;
}
.margint15 {
    margin-top: 15px;
}
.margint20 {
    margin-top: 20px !important;
}
.margint26 {
    margin-top: 26px;
}
.margint40 {
    margin-top: 40px !important;
}
.margint49 {
    margin-top: 49px;
}
.margint50 {
    margin-top: 50px;
}
.margint60 {
    margin-top: 60px !important;
}
.margint100 {
    margin-top: 100px;
}

.marginb10 {
    margin-bottom: 10px;
}
.marginb20 {
    margin-bottom: 20px;
}
.marginb30 {
    margin-bottom: 30px;
}
.marginb40 {
    margin-bottom: 40px;
}

.margin5 {
    margin: 5px;
}

.pad5 {
    padding: 5px;
}
.pad10 {
    padding: 10px !important;
}
.pad510 {
    padding: 5px 10px;
}
.padt5 {
    padding-top: 8px;
}
.padt6 {
    padding-top: 6px;
}
.padt52 {
    padding-top: 52px;
}
.padl5 {
    padding-left: 5px;
}
.padl10 {
    padding-left: 10px;
}
.padl15 {
    padding-left: 15px;
}
.padt10 {
    padding-top: 10px;
}
.pad105 {
    padding: 10px 10px 5px;
}

.backgroundgray {
    background-color: #f5f5f5;
}
.minW1280 {
    width: 1280px;
}
/* a css */
a {
    cursor: pointer;
}
a,
a:link,
a:visited {
    text-decoration: none;
}

/* align */
.alignl {
    text-align: left;
}
.alignr {
    text-align: right !important;
}
.alignc {
    display: flex;
    justify-content: center;
    gap: 5px;
    text-align: center;
}

.float_left {
    float: left;
}
.float_right {
    float: right;
}
.ableft {
    position: absolute;
    left: 0;
    top: 0;
}
.abright {
    position: absolute;
    right: 0;
    top: 0;
}

.vertical_top {
    vertical-align: top;
}

/* color */
.color_none {
    color: #4d4d4d;
}
.color_point {
    color: #005bac;
}
.color_pointr {
    color: #ff0000;
}
.color_pointg {
    color: #21872d;
}
.color_pointo {
    color: #ff6600;
}
.color_pointgr {
    color: #8bc138;
}
.color_pointgy {
    color: #777777;
}
.bold {
    font-weight: bold;
}

.important_txt {
    display: inline-block;
    margin-top: 1px;
    font-size: 15px;
    color: #ff0000;
    vertical-align: middle;
}
.important_txt1 {
    display: inline-block;
    margin-top: -1px;
    font-size: 12px;
    color: #ff0000;
    vertical-align: middle;
}
.important_txt2 {
    padding-left: 15px;
    padding-top: 3px;
    font-size: 12px;
    color: #626262;
    line-height: 1.5em;
    background: url("../images/icon/icon_important.png") no-repeat 1px 7px;
}

/* skip */
.skip_nav {
    height: 0;
}
.skip_nav a {
    display: block;
    position: absolute;
    left: 0;
    top: -100px;
    width: 100%;
    height: 1px;
    text-align: center;
}
.skip_nav a:focus,
.skip a:active {
    position: absolute;
    top: 0;
    z-index: 120;
    height: 25px;
    padding: 10px 0;
    font-size: 1.4em;
    font-weight: 700;
    color: #36348f;
    background: #fff;
}

/* block */
.theblock {
    display: block;
}
.inblock {
    display: inline-block;
}

/* area */
.division {
    overflow: hidden;
}
.division20 {
    overflow: hidden;
    margin-bottom: 20px;
}
.division40 {
    overflow: hidden;
    margin-bottom: 40px;
}
.division50 {
    overflow: hidden;
    margin-bottom: 50px;
}
.table_area {
    overflow: hidden;
    margin-bottom: 20px;
    background: white;
    padding: 30px 15px;
    border-radius: 15px;
    border: 1px solid #dadada;
}
.button_area {
    overflow: hidden;
    margin-bottom: 34px;
}
.button_area02 {
    overflow: hidden;
    margin-bottom: 14px;
}
select.handling_select {
    height: 36px;
}
.float_left {
    float: left;
}
.float_right {
    float: right;
}
.file_area + .file_area {
    margin-top: 8px;
}
.editor_area {
    overflow: hidden;
}
.half_area {
    overflow: hidden;
    float: left;
    width: 50%;
}
.area20 {
    float: left;
    width: 20%;
}
.area30 {
    float: left;
    width: 30%;
}
.area35 {
    float: left;
    width: 35%;
}
.area40 {
    float: left;
    width: 40%;
}
.area45 {
    float: left;
    width: 45%;
}
.area50 {
    float: left;
    width: 50%;
}
.area55 {
    float: left;
    width: 55%;
}
.area60 {
    float: left;
    width: 60%;
}
.area65 {
    float: left;
    width: 65%;
}
.area70 {
    float: left;
    width: 70%;
}
.area80 {
    float: left;
    width: 80%;
}
.area_xscroll {
    overflow-x: auto;
    min-width: 730px;
} /* 가로 스크롤 레이아웃 */
.area_xscroll2 {
    overflow-x: auto;
} /* 가로 스크롤 레이아웃 */

.select_area {
    overflow: hidden;
    padding: 8px 10px;
    border: 1px solid #dedede;
} /* border area */
.select_area strong.title {
    font-family: "Nanum Gothic", "NanumGothic", "나눔고딕", Helvetica,
        "Apple SD Gothic Neo", Sans-serif;
    font-weight: bold;
    font-size: 13px;
}
.select_area span.txt {
    font-family: "Nanum Gothic", "NanumGothic", "나눔고딕", Helvetica,
        "Apple SD Gothic Neo", Sans-serif;
    font-size: 13px;
}

.bggray {
    background: #e8e8e8;
}
.bgwhite {
    background: #fff;
}

table.td_left tr td {
    text-align: left !important;
}
table.list.dash th,
table.list.dash tr,
table.list.dash td {
    padding: 10px !important;
}

.img_link_box > img {
    cursor: pointer;
}

.page_loading {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}

.page_loading > i {
    color: #efc614;
}

.down_link {
    margin-left: 25px;
    font-size: 0.9em;
    background-color: #000;
    color: #fff !important;
    display: inline-block;
    padding: 0px 20px;
    line-height: 30px;
    text-align: center;
    border-radius: 7px;
}

.partner_file_box {
    height: 35px;
    display: flex;
    align-items: center;
    border-bottom: solid #bebebe 2px;
    padding: 25px 0px;
}

.partner_file_box > a {
    width: 80%;
}

.partner_file_box > p {
    width: 80px;
    height: 25px;
    line-height: 25px;
    cursor: pointer;
}

.paging_area02 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}
.paging_area02 > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #666;
}
.paging_area02 > a > strong {
    color: #000;
}

.DetailFramepopup {
    position: fixed;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 100000;
    background-color: rgba(0, 0, 0, 0.7);
    left: 0;
    top: 0;
}

.Framepopup {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    border: 0px;
}

.community_detail_popup {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    padding: 20px;
}

.community_detail_popup_area,
.pet_service_detail_popup {
    background-color: #fff;
    width: 600px;
    z-index: 1;
    border-radius: 12px;
    position: sticky;
    left: calc(50% - 300px);
    top: 100px;
    margin: 100px 0;
}
.pet_service_detail_popup {
    width: 560px;
    left: calc(50% - 280px);
}

.community_detail_popup_area > div.popup_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid var(--Grey_D, #ddd);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
    color: var(--Dark, #212121);
    font-size: 20px;
    font-weight: 800;
}
.community_detail_popup_area > div.popup_contents_area {
    padding: 20px;
}
.community_detail_popup_area > div.popup_contents_area > div.popup_profiles {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.community_detail_popup_area
    > div.popup_contents_area
    > div.popup_profiles
    > div.profiles {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--Dark, #212121);
    font-size: 12px;
    font-weight: 800;
    gap: 5px;
}
.community_detail_popup_area
    > div.popup_contents_area
    > div.popup_profiles
    > div.buttons {
    position: relative;
}
.community_detail_popup_area > div.popup_contents_area > div.info1 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 8px;
    color: #666;
    font-size: 10px;
    font-weight: 400;
}

.community_detail_popup_area > div.popup_contents_area > div.info1 > span {
    display: flex;
    width: 43px;
    height: 30px;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    border-radius: 100px;
    background-color: #eee;
    color: #212121;
    font-size: 10px;
}
.community_detail_popup_area
    > div.popup_contents_area
    > div.popup_contents_title {
    margin-top: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eeeeee;
    color: var(--Dark, #212121);
    font-size: 24px;
    font-weight: 800;
}

.community_detail_popup_area
    > div.popup_contents_area
    > div.popup_profiles
    > div.buttons
    > .buttons_sub {
    position: absolute;
    right: 0;
    top: 12px;
    border: 1px solid var(--Grey_D, #ddd);
    border-radius: 8px;
    padding: 12px;
    width: 80px;
    background-color: #fff;
    display: none;
}
.community_detail_popup_area
    > div.popup_contents_area
    > div.popup_profiles
    > div.buttons
    > .buttons_sub
    > button {
    color: var(--Dark, #212121);
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    width: 100%;
    height: 20px;
}
.community_detail_popup_area > div.popup_contents_area > div.popup_contents {
    line-height: 25px;
    margin-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eeeeee;
}
.community_detail_popup_area
    > div.popup_contents_area
    > div.popup_contents
    img {
    width: 100% !important;
}
.community_detail_popup_area
    > div.popup_contents_area
    > div.popup_replylist_count {
    margin-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eeeeee;
}

.community_detail_popup_area
    > div.popup_contents_area
    > div.popup_contents
    > div.selecter_list_area {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 12px;
    margin-top: 20px;
}
.community_detail_popup_area
    > div.popup_contents_area
    > div.popup_contents
    > div.selecter_list_area
    > div.list_title {
    color: var(--Dark, #212121);
    font-size: 20px;
    font-weight: 800;
}
.community_detail_popup_area
    > div.popup_contents_area
    > div.popup_contents
    > div.selecter_list_area
    > div.select_list {
    margin-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eeeeee;
}
.community_detail_popup_area
    > div.popup_contents_area
    > div.popup_contents
    > div.selecter_list_area
    > div.select_list
    > p {
    margin-top: 8px;
}
.community_detail_popup_area
    > div.popup_contents_area
    > div.popup_contents
    > div.selecter_list_area
    > div.list_buttons {
    text-align: center;
    margin-top: 20px;
}
.community_detail_popup_area
    > div.popup_contents_area
    > div.popup_contents
    > div.selecter_list_area
    > div.list_buttons
    > button {
    width: 200px;
    height: 56px;
    color: var(--White, #fff);
    font-size: 16px;
    font-weight: 800;
    border-radius: 100px;
    background: var(--Primary, #ff820f);
}
.community_detail_popup_area
    > div.popup_contents_area
    > div.popup_contents
    > div.selecter_list_area
    > div.select_list_result
    > div {
    margin-top: 20px;
}
.community_detail_popup_area
    > div.popup_contents_area
    > div.popup_contents
    > div.selecter_list_area
    > div.select_list_result
    > div
    > p {
    color: var(--Dark, #212121);
    /* Title_b */
    font-size: 16px;
    font-weight: 800;
}
.community_detail_popup_area
    > div.popup_contents_area
    > div.popup_contents
    > div.selecter_list_area
    > div.select_list_result
    > div
    > div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.community_detail_popup_area
    > div.popup_contents_area
    > div.popup_contents
    > div.selecter_list_area
    > div.select_list_result
    > div
    > div
    > div {
    width: 200px;
    height: 8px;
    background-color: #eee;
    border-radius: 100px;
    margin-right: 5px;
    position: relative;
}
.community_detail_popup_area
    > div.popup_contents_area
    > div.popup_contents
    > div.selecter_list_area
    > div.select_list_result
    > div
    > div
    > div
    > div {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 8px;
    background-color: #ff820f;
    border-radius: 100px;
}
.community_detail_popup_area
    > div.popup_contents_area
    > div.popup_contents
    > div.selecter_list_area
    > div.select_list_result
    > div
    > div
    > span {
    color: var(--Dark, #212121);
    font-size: 12px;
    font-weight: 400;
}

.swal2-title {
    color: #000 !important;
}
.popup_replylist > div {
    margin-top: 20px;
}
.popup_replylist > div,
.replylistwrap {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
}
.replylistwrap > div:nth-child(2) {
    width: calc(100% - 12px);
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}
.replylistwrap > div:nth-child(2) > div,
.replylistwrap > div:nth-child(2) > button {
    width: 100%;
    display: flex;
}
.replylistwrap > div:nth-child(2) > div:nth-child(1) {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.replylistwrap > div:nth-child(2) > div:nth-child(1) > div.buttons {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 15px;
}
.replylistwrap
    > div:nth-child(2)
    > div:nth-child(1)
    > div.buttons
    > .buttons_sub {
    position: absolute;
    right: 0;
    top: 15px;
    border: 1px solid var(--Grey_D, #ddd);
    border-radius: 8px;
    padding: 12px;
    width: 80px;
    background-color: #fff;
    display: none;
    z-index: 1000;
}
.replylistwrap
    > div:nth-child(2)
    > div:nth-child(1)
    > div.buttons
    > .buttons_sub
    > button {
    color: var(--Dark, #212121);
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    width: 100%;
    height: 20px;
}
.replylistwrap > div:nth-child(2) > div:nth-child(1) > div.buttons > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: var(--Dark, #212121);
    font-size: 12px;
    font-weight: 800;
}
.replylistwrap > div:nth-child(2) > div:nth-child(2) {
    color: var(--Dark, #212121);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}
.replylistwrap > div:nth-child(2) > div:nth-child(2) > span {
    color: #999;
    margin-right: 5px;
}
.replylistwrap > div:nth-child(2) > button:nth-child(3) {
    margin-top: 12px;
    color: var(--Dark, #212121);
    font-size: 12px;
    font-weight: 400;
}
.replylistwrap > div:nth-child(2) > button:nth-child(4) {
    margin-top: 12px;
    color: var(--Dark, #212121);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    padding-left: 20px;
}

.community_detail_popup_area > div.popup_replyinput {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #ccc;
}
.community_detail_popup_area > div.popup_replyinput > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0px 20px;
    gap: 5px;
    color: var(--Dark, #212121);
    font-size: 14px;
    font-weight: 400;
    background: white;
}
.community_detail_popup_area > div.popup_replyinput > div > input {
    width: 100%;
    height: 56px;
    border: none;
    padding: 0 12px;
}
.community_detail_popup_area > div.popup_replyinput > button {
    width: 100px;
    height: 57px;
    background-color: #000 !important;
    margin-top: -1px;
    color: var(--White, #fff);
    font-size: 16px;
    font-weight: 800;
    border-bottom-right-radius: 12px;
}

.emer_popup {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.emer_popup_area {
    width: 400px;
    padding: 20px;
    background-color: #fff;
    border-radius: 12px;
}
.emer_popup_area_close {
    text-align: right;
}
.emer_popup_area_title {
    color: var(--Dark, #212121);
    font-size: 24px;
    font-weight: 800;
    text-align: center;
}
.emer_popup_area_subtitle {
    color: var(--Dark, #212121);
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    margin-top: 8px;
}
.emer_popup_area_selector {
    margin-top: 12px;
}
.emer_popup_area_selector > p {
    margin-top: 8px;
}
.emer_popup_area_selector > p > label {
    margin-left: 0px;
    margin-right: 0px;
    cursor: pointer;
}

.emer_radio + label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    appearance: none;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 100%;
    padding: 12px 20px;
    color: var(--Grey_9, #999);
    font-size: 16px;
    font-weight: 400;
}

.emer_radio:checked + label {
    border: 1px solid #ff820f;
    background-color: #ff820f;
    position: relative;
    color: var(--White, #fff);
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}
.emer_radio:checked + label::after {
    content: url("../images/common/fa6-solid-check.svg");
    position: absolute;
    right: 20px;
    color: "#fff";
}

.emer_popup_area_selector > p > textarea {
    margin-top: 12px;
    border-radius: 4px;
    border: 1px solid var(--Grey_D, #ddd);
    padding: 12px;
    width: 100%;
    height: 100px;
    resize: none;
}
.emer_popup_area_picture {
    margin-top: 12px;
}
.emer_popup_area_picture > div:nth-child(1) {
    color: var(--Dark, #212121);
    font-size: 14px;
    font-weight: 800;
}
.emer_popup_area_picture > div:nth-child(2) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 12px;
}
.emer_popup_area_picture > div:nth-child(2) > div,
.emer_popup_area_picture > div:nth-child(2) > button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background-color: #f5f5f5;
    border-radius: 4px;
    position: relative;
}
.emer_popup_area_picture > div:nth-child(2) > button {
    flex-direction: column;
}
.emer_popup_area_picture > div:nth-child(2) > button > span {
    color: var(--Grey_9, #999);
    font-size: 12px;
    font-weight: 400;
    margin-top: 4px;
}
.emer_popup_area_picture > div:nth-child(2) > button > span > strong {
    color: #000;
    font-weight: 800;
}
.emer_popup_area_picture > div:nth-child(2) > div {
    background-size: cover;
    background-position: center;
}
.emer_popup_area_picture > div:nth-child(2) > div > button {
    position: absolute;
    right: 0px;
    top: 0px;
}

.emer_popup_area_buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}
.emer_popup_area_buttons > button {
    width: 120px;
    height: 50px;
    border-radius: 100px;
    background: var(--Grey_C, #ccc);
    color: var(--White, #fff);
    font-size: 16px;
    font-weight: 800;
}
.emer_popup_area_buttons > button:last-child {
    background-color: #000;
}

.buttonstyle1 {
    border-radius: 8px;
    background: var(--Dark, #212121);
    display: flex;
    padding: 8px 20px;
    color: var(--White, #fff);
    font-size: 12px;
    font-weight: 800;
}
.buttonstyle2 {
    border-radius: 8px;
    border: 1px solid var(--Primary, #ff820f);
    background: var(--White, #fff);
    display: flex;
    padding: 8px 20px;
    color: var(--Primary, #ff820f);
    font-size: 12px;
    font-weight: 800;
}
.buttonstyle3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0px;
}
.buttonstyle3 > button:nth-child(1) {
    border-radius: 8px 0px 0px 8px;
    background: var(--Primary, #ff820f);
    padding: 8px 20px;
    color: var(--White, #fff);
    font-size: 12px;
    font-weight: 800;
}
.buttonstyle3 > button:nth-child(2) {
    border-radius: 0px 8px 8px 0px;
    background: var(--Green, #44ca42);
    padding: 8px 20px;
    color: var(--White, #fff);
    font-size: 12px;
    font-weight: 800;
}
.buttonstyle4 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 50px;
    border-radius: 100px;
    background: var(--Dark, #212121);
    color: var(--White, #fff);
    font-size: 16px;
    font-weight: 800;
}
.stickerstyle1 {
    display: inline-block;
    border-radius: 4px;
    background: var(--Dark, #212121);
    padding: 4px 8px;
    color: var(--White, #fff);
    font-size: 10px;
    font-weight: 800;
}

.pageinfobox {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #ddd;
    width: 100%;
    height: 80px;
}

.pageinfobox > div.pageinfobox_title {
    width: 1280px;
    font-size: 24px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pageinfobox > div.pageinfobox_title > div:nth-child(2) {
    font-size: 16px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nomalbutton {
    width: 100%;
    min-height: 56px;
    border-radius: 100px;
    background: #ccc;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
}
.nomalbutton.line {
    background: #fff;
    border: 1px solid #212121;
    color: #212121;
}
.nomalbutton.fill {
    background: #212121;
}
.nomalbutton.middle {
    font-size: 14px;
    min-height: 44px;
}
.nomalbutton.vote {
    max-width: 200px;
}

.normalradioarea {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-direction: row;
    flex-wrap: wrap;
}
.normalradio {
    display: none;
}
.normalradio + label {
    background-color: #eeeeee;
    font-size: 14px;
    font-weight: 400;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    min-height: 44px;
    border-radius: 50px;
    cursor: pointer;
}
.normalradio:checked + label {
    background-color: #ff820f;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
}
.normalradioarea2 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex-direction: row;
    flex-wrap: wrap;
}
.normalradio2 {
    display: none;
}
.normalradio2 + label {
    background-color: #eeeeee;
    font-size: 14px;
    font-weight: 400;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    border-radius: 50px;
    cursor: pointer;
    max-width: 132px;
    width: 100%;
}
.normalradio2:checked + label {
    background-color: #ff820f;
    font-weight: 800;
    color: #fff;
}
.normalselect {
    border-radius: 4px;
    border: 1px solid #ddd;
    height: 44px;
    width: 100%;
    padding: 0px 0px 0 12px;
    background: url(../images/zoo_img/sel-arrow.svg) no-repeat;
    background-position: right 10px bottom 50%;
}

.normalradioarea3 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
}
.normalradio3 {
    display: none;
}
.normalradio3 + label {
    background-color: white /* #EEEEEE */;
    font-size: 14px;
    font-weight: 400;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100%;
    min-height: 64px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--Grey_D, #ddd);
}
.normalradio3:checked + label {
    background-color: #ff820f;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    border: none;
}

.inputRadiopop {
    position: fixed;
    z-index: 1001;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.inputRadiopop > div {
    width: 400px;
    background-color: #fff;
    border-radius: 12px;
    padding: 20px;
}
.inputRadiopop > div > div:nth-child(1) {
    text-align: center;
    font-size: 24px;
    font-weight: 800;
}
.inputRadiopop > div > div:nth-child(2) {
    height: 300px;
    overflow: auto;
    margin-top: 40px;
}
.inputRadiopop > div > div:nth-child(3) {
    width: 200px;
    margin: auto;
    margin-top: 40px;
}

.normalinput {
    border: 1px solid #ccc;
    height: 64px;
    font-size: 16px;
    padding: 0px 20px;
    padding-right: 10px;
    border-radius: 40px;
    width: 100%;
}

.fontsizeinfo {
    position: relative;
}
.fontsizeinfoviewer {
    position: absolute;
    right: 20px;
    bottom: 16px;
    font-size: 10px;
    color: #999;
}

.page_info_cate.off {
    display: none !important;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.normal_post_term {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    gap: 20px;
    margin-top: 40px;
    border-radius: 12px;
    border: 1px solid var(--Primary, #ff820f);
}
.normal_post_term.mobile {
    border: none;
    padding: 0;
}
.normal_post_term > .title {
    color: var(--Dark, #212121);
    font-size: 24px;
    font-weight: 800;
    line-height: 30px; /* 125% */
}
.normal_post_term > .normal_post_btn {
    border-radius: 100px;
    border: 1px solid var(--Orange, #ff7c32);
    display: flex;
    padding: 12px 40px;
    align-items: center;

    color: var(--Orange, #ff7c32);
    font-weight: 800;
    line-height: 20px; /* 142.857% */
}
.term_open_box.on {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    gap: 20px;
}
.term_open_box .term_tap {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    background: var(--Grey_F1, #f1f1f1);
    padding: 20px;
    width: 100%;
    gap: 8px;
    cursor: pointer;
}
.term_open_box .term_tap.sub,
.term_open_box .term_tap.price {
    background: none;
    padding: 0;
}
.term_open_box .term_tap > .title {
    color: var(--Dark, #212121);
    font-size: 16px;
    font-weight: 800;
    line-height: 24px; /* 150% */
}
.term_open_box .term_tap > .comment {
    color: var(--Dark, #212121);
    font-size: 16px;
    line-height: 24px; /* 150% */
}
.term_open_box .term_tap.price > .title {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 20px; /* 142.857% */
    gap: 4px;
}
.term_open_box .term_tap.price > .title img {
    cursor: pointer;
}
.term_open_box .term_tap.price > .top_bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-top: 1px solid var(--Grey_C, #ccc);
    border-bottom: 1px solid var(--Grey_C, #ccc);
    background: var(--Grey_F1, #f1f1f1);
    padding: 8px 0px;
}
.term_open_box .term_tap.price > .top_bar p {
    text-align: center;
    width: 100%;
}
.term_tap.price .price_graph {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.term_tap.price .price_graph > .price_graph_part {
    display: flex;
    border-bottom: 1px solid var(--Grey_C, #ccc);
}
.price_graph_part > .sub_part {
    padding: 8px 20px;
}
.price_graph_part > .sub_part .text_one {
    color: var(--Dark, #212121);
    line-height: 20px; /* 142.857% */
}
.price_graph_part > .sub_part .text_two {
    color: var(--Dark, #212121);
    font-weight: 800;
    line-height: 20px; /* 142.857% */
}
.price_graph_part > .sub_part .sub_part_divide_box {
    display: flex;
    width: 100%;
    border-bottom: 1px solid var(--Grey_C, #ccc);
}
.price_graph_part > .sub_part .sub_part_divide_box:nth-last-child(1) {
    border: none;
}
.price_graph_part > .sub_part .sub_part_divide_box .sub_part_divide {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 8px 20px;
}
.price_graph_part
    > .sub_part
    .sub_part_divide_box
    .sub_part_divide
    .text_group {
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.price_graph_part > .sub_part._1 {
    max-width: 160px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.price_graph_part > .sub_part._2 {
    width: 100%;
    padding: 0;
    display: flex;
    align-items: center;
}

/* ----------------------------- */

.category_tab {
    /* width: 100%; */
    border-bottom: 1px solid var(--Dark, #2f3444);
    margin-top: 40px;
    display: flex;
    justify-content: center;
}
.category_tab > .tab_button {
    margin: 0 100px;
    /* width: 100%; */
    display: flex;
    align-items: center;
    /* justify-content: center; */
    gap: 100px;
    transition: 0.3 ease;
}
.category_tab > .tab_button > a {
    height: 72px;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.category_tab > .tab_button > a.on {
    color: var(--Secondary, #ef4c22);
}
.category_tab > .tab_button > a.on::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    border-bottom: 4px solid var(--Secondary, #ef4c22);
}
.category_tab_small{
    width: 100%;
    padding: 20px;
    display: none;


}
.category_tab_small >.tab_button{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:10px;
    


}
.category_tab_small >.tab_button a{
padding:10px ;
display: flex;
align-items: center;
justify-content: center;;
font-size: 16px;
font-weight: 700;
border:1px solid black;
border-radius: 8px;;
}
.category_tab_small >.tab_button > a.on{
    color: var(--Secondary, #ef4c22);
    border:2px solid #ef4c22;
}

.loading_spin {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 3px solid rgba(0,0,0,.3);
    border-radius: 50%;
    border-top-color: #000;
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}