/* text decoration */
.under-line { border-bottom: 1px solid rgba(0, 0, 0, 0.10) !important;}
.under-line-ddd { border-bottom: 1px solid #ddd}
.under-line-82 { border-bottom: 1px solid #828282}
.under-line-dashed:not(:last-child) { border-bottom: 1px dashed #ddd}
.under-line-primary { border-bottom: 2px solid var(--primary); }
.under-link-pink { border-bottom: 3px solid rgba(255, 87, 117, 1); padding-bottom: 10px}

.text-right { text-align: right !important; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-under-line { border-bottom: 1px solid #ddd}
.text-through { text-decoration: line-through}

.size-px-8 { font-size: 8px !important}
.size-px-9 { font-size: 9px !important}
.size-px-10 { font-size: 10px !important;}
.size-px-11 { font-size: 11px !important;}
.size-px-12 { font-size: 12px !important;}
.size-px-13 { font-size: 13px !important;}
.size-px-14 { font-size: 14px !important;}
.size-px-15 { font-size: 15px !important;}
.size-px-16 { font-size: 16px !important;}
.size-px-17 { font-size: 17px !important;}
.size-px-18 { font-size: 18px !important;}
.size-px-19 { font-size: 19px !important;}
.size-px-20 { font-size: 20px !important;}
.size-px-22 { font-size: 22px !important;}
.size-px-24 { font-size: 24px !important;}
.size-px-28 { font-size: 28px !important;}
.size-px-32 { font-size: 32px !important;}
.size-px-36 { font-size: 36px !important;}
.size-px-48 { font-size: 48px !important;}


.size-em-05 { font-size: 0.5em;}
.size-em-06 { font-size: 0.6em;}
.size-em-07 { font-size: 0.7em;}
.size-em-08 { font-size: 0.8em;}
.size-em-09 { font-size: 0.9em;}
.size-em-10 { font-size: 1.0em;}
.size-em-11 { font-size: 1.1em;}
.size-em-12 { font-size: 1.2em;}
.size-em-13 { font-size: 1.3em;}
.size-em-14 { font-size: 1.4em;}
.size-em-15 { font-size: 1.5em;}
.size-em-16 { font-size: 1.6em;}
.size-em-17 { font-size: 1.7em;}
.size-em-18 { font-size: 1.8em;}
.size-em-19 { font-size: 1.9em;}
.size-em-20 { font-size: 2.0em;}



.size-rem-05 { font-size: 0.5rem;}
.size-rem-06 { font-size: 0.6rem;}
.size-rem-07 { font-size: 0.7rem;}
.size-rem-08 { font-size: 0.8rem;}
.size-rem-09 { font-size: 0.9rem;}
.size-rem-10 { font-size: 1.0rem;}
.size-rem-11 { font-size: 1.1rem;}
.size-rem-12 { font-size: 1.2rem;}
.size-rem-13 { font-size: 1.3rem;}
.size-rem-14 { font-size: 1.4rem;}
.size-rem-15 { font-size: 1.5rem;}
.size-rem-16 { font-size: 1.6rem;}
.size-rem-17 { font-size: 1.7rem;}
.size-rem-18 { font-size: 1.8rem;}
.size-rem-19 { font-size: 1.9rem;}
.size-rem-20 { font-size: 2.0rem;}


.line-height-1 { line-height: 1}
.line-height-2 { line-height: 2}
.line-height-3 { line-height: 3}

.line-height-100 { line-height: 100%}
.line-height-110 { line-height: 110%}
.line-height-120 { line-height: 120%}
.line-height-130 { line-height: 130%}
.line-height-140 { line-height: 140%}
.line-height-150 { line-height: 150%}
.line-height-160 { line-height: 160%}
.line-height-170 { line-height: 170%}
.line-height-180 { line-height: 180%}
.line-height-190 { line-height: 190%}
.line-height-200 { line-height: 200%}

.font-weight-bold { font-weight: bold !important;}
.font-weight-300 { font-weight: 300 !important;}
.font-weight-400 { font-weight: 400 !important;}
.font-weight-500 { font-weight: 500 !important;}
.font-weight-600 { font-weight: 600 !important;}
.font-weight-700 { font-weight: 700 !important;}

.letter-space-1 { letter-spacing: -1px}
.letter-space-2 { letter-spacing: -2px}

/* text color */
.color-primary { color: var(--primary) !important;}
.color-base { color: #FFFFFF !important;}
.color-white { color: #F9F9FD !important;}
.color-gray { color: #F9F9FD !important;}
.color-dark-gray { color: #646670 !important;}
.color-dark { color: #3B3B3B !important;}
.color-error { color: #F44336 !important;}

.color-plus { color: #5fa8d3 !important;}
.color-minus { color: #f44336 !important;}
.color-success { color: #15ab94 !important;}
.color-error { color: #f44336 !important;}
.color-cancel { color: #FF5D46 !important;}
.color-white { color: white !important;}
.color-blue { color: #0f6ecd !important;}
.color-orange { color: darkorange !important;}
.color-green { color: #15ab94 !important; }
.color-gray { color: #bbb !important;}
.color-red { color: red !important;}
.color-yellow { color: gold !important;}

.color-red-light { color: #FF5D46 !important;}

.color-purple-light { color: #6f7dff }

.color-black { color: black !important;}
.color-eee { color: #eee !important;}
.color-bbb { color: #bbb !important;}
.color-333 { color: #333 !important;}

.color-star { color: gold !important;}
.color-pink { color: rgba(255, 87, 117, 1) !important;}

.vertical-middle { vertical-align: middle !important;}
.vertical-top { vertical-align: top !important;}
.vertical-bottom { vertical-align: bottom !important;}
.vertical-sub { vertical-align: sub !important;}
.vertical-text-bottom { vertical-align: text-bottom !important;}

/* padding & margin */

.pa-5 { padding: 5px !important;}
.pa-5-10 { padding: 5px 10px !important;}
.pa-5-15 { padding: 5px 15px !important;}
.pa-10 { padding: 10px !important;}
.pa-10-15 { padding: 10px 15px !important;}
.pa-10-20 { padding: 10px 20px !important;}
.pa-15-10 { padding: 15px 10px !important;}
.pa-15-20 { padding: 15px 20px !important;}
.pa-20 { padding: 20px;}
.pa-20-10 { padding: 20px 10px;}
.pa-20-30 { padding: 20px 30px;}
.pa-20-40 { padding: 20px 40px;}
.pa-20-50 { padding: 20px 50px;}
.pa-30 { padding: 30px;}
.pa-30-10 { padding: 30px 10px;}
.pa-40 { padding: 40px;}
.pa-10-10-15-10 { padding: 10px 10px 15px 10px !important;}
.pa-50 { padding: 50px}
.pa-50-10 { padding: 50px 10px !important;}
.pa-50-20 { padding: 50px 20px !important;}

.pl-5 { padding-left: 5px}
.pl-10 { padding-left: 10px}
.pl-20 { padding-left: 20px}
.pl-30 { padding-left: 30px}

.pt-5 { padding-top: 5px}
.pt-10 { padding-top: 10px}
.pt-20 { padding-top: 20px}
.pt-30 { padding-top: 30px}
.pt-40 { padding-top: 40px}
.pt-50 { padding-top: 50px}

.pb-5 { padding-bottom: 5px}
.pb-10 { padding-bottom: 10px}
.pb-20 { padding-bottom: 20px}
.pb-30 { padding-bottom: 30px}
.pb-40 { padding-bottom: 40px}
.pb-50 { padding-bottom: 50px}

.ptb-5 { padding-top: 5px; padding-bottom: 5px !important;}
.ptb-10 { padding-top: 10px; padding-bottom: 10px !important;}
.ptb-15 { padding-top: 15px; padding-bottom: 15px !important;}
.ptb-20 { padding-top: 20px; padding-bottom: 20px !important;}
.ptb-30 { padding-top: 30px; padding-bottom: 30px !important;}
.ptb-40 { padding-top: 40px; padding-bottom: 40px !important;}
.ptb-50 { padding-top: 50px; padding-bottom: 50px !important;}

.prl-5 { padding-left: 5px; padding-right: 5px !important;}
.prl-10 { padding-left: 10px; padding-right: 10px !important;}
.prl-20 { padding-left: 20px; padding-right: 20px !important;}
.prl-30 { padding-left: 30px; padding-right: 30px !important;}
.prl-40 { padding-left: 40px; padding-right: 40px !important;}
.prl-50 { padding-left: 50px; padding-right: 50px !important;}

.ma-auto { margin: 0 auto !important;}
.mt-5 { margin-top: 5px !important;}
.mt-10 { margin-top: 10px !important;}
.mt-15 { margin-top: 15px !important;}
.mt-20 { margin-top: 20px !important;}
.mt-30 { margin-top: 30px !important;}
.mt-40 { margin-top: 40px !important;}
.mt-50 { margin-top: 50px !important;}

.mt-auto { margin-top: auto !important;}

.mb-5 { margin-bottom: 5px !important;}
.mb-10 { margin-bottom: 10px !important;}
.mb-20 { margin-bottom: 20px !important;}
.mb-30 { margin-bottom: 30px !important;}
.mb-40 { margin-bottom: 40px !important;}
.mb-50 { margin-bottom: 50px !important;}

.mr-5 { margin-right: 5px}
.mr-10 { margin-right: 10px}
.mr-15 { margin-right: 15px}
.mr-20 { margin-right: 20px}
.mr-30 { margin-right: 30px}
.mr-40 { margin-right: 40px}
.mr-50 { margin-right: 50px}

.ml-5 { margin-left: 5px}
.ml-10 { margin-left: 10px}
.ml-15 { margin-left: 15px}
.ml-20 { margin-left: 20px}

.mrl-10 { margin-right: 10px; margin-left: 10px}

.indent-10 { text-indent: 10px}

/* layout */
.container, .container-pc {
    /* width: 1200px; */
    margin: 0 auto;
}

.justify-center { display: flex; justify-content: center}
.justify-space-around { display: flex; justify-content: space-around}
.justify-space-between { display: flex !important; justify-content: space-between }
.justify-start {display: flex; justify-content: start}
.justify-end {display: flex; justify-content: end}

.items-center{ align-items: center}

.flex-column { display: flex; flex-direction: column;}
.flex-column-wrap { display: flex; flex-direction: column; flex-wrap: wrap;}

.flex-row { display: flex; flex-direction: row; flex-wrap: nowrap;}
.flex-row-wrap { display: flex; flex-direction: row; flex-wrap: wrap}

.gap-5 {gap: 5px}
.gap-10 {gap: 10px}
.gap-15 {gap: 15px}
.gap-20 {gap: 20px}
.gap-30 {gap: 30px}
.gap-40 {gap: 40px}
.gap-50 {gap: 50px}

.flex-1 { flex: 1}
.flex-2 { flex: 2}
.flex-3 { flex: 3}
.flex-4 { flex: 4}
.flex-5 { flex: 5}

.float-right { float: right;}

.display-none{display:none;}
.display-block{display:block;}

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

.full-height { height: 100%;}
.full-width { width: 100%;}
.height-auto { height: auto !important;}

.min-height-150 { height: 150px; min-height: 150px}
.min-height-250 { height: 250px; min-height: 250px}
.min-height-350 { height: 350px; min-height: 350px}

.inline-block { display: inline-block;}

/* background */

.bg-000 { background-color: white}
.bg-base { background-color: #F0FCFA}
.bg-white { background-color: #F6F9F9}
.bg-dark { background-color: #084C3F}

.bg-primary { background-color: #00AE8D}
.bg-secondary { background-color: #8AEBF8}

.bg-pink { background-color: rgba(255, 87, 117, 1); color: white}

.bg-none { background-color: transparent}
.bg-default { background-color: #eee}
.bg-identify { background-color: #333; color: #eee}
.bg-gray { background-color: gray; color: white}
.bg-gray-light { background-color: #eee;}
.bg-gray-dark { background: rgba(95, 95, 95, 1);}

.bg-green { background-color: #0f9d58; color: white;}
.bg-red { background-color: #bf360c; color: white;}
.bg-orange { background-color: darkorange; color: white;}
.bg-f5 { background-color: #f5f5f5}
.bg-eee { background-color: #eee !important}
.bg-select { background-color: black}
.bg-blue { background-color: #0D47A1; color: white}
.bg-light-gray { background-color: darkgray;}
.bg-light-green { background-color: #81C784;}
.bg-light-blue { background-color: #eee;}
.bg-light-red { background-color: #EF9A9A;}
.bg-black { background-color: black; color: #eee; border: 1px solid black !important;}
.bg-fe { background-color: #eee; color: #eee;}
.bg-yellow { background-color: yellow;}


/* input */
.select-list-type { border: 1px solid #ddd; width: 100%; padding: 13px; color: black; height: auto;}

input { font-size: 12px; letter-spacing: -0.5px}
input:disabled,
input:read-only { background-color: #eee; color: #bbb;}

.input-disabled { background-color: #eee}
.input-secret { -webkit-text-security: disc }

.input-underline { width: 100%; border-bottom: 1px solid #ddd; padding: 10px;}

.input-underline:focus,
.input-underline.input  { border-bottom: 1px solid #009BFA}


.input-box { padding: 10px; border: 1px solid #ddd;}
.input-box-inline { width: auto; padding: 5px 10px; border: 1px solid #ddd; box-sizing: content-box}
.input-box-5 { width: 100%; padding: 5px; border: 1px solid #ddd;}
.box { border: 1px solid #ddd; box-sizing: border-box}
.box-rl { border-right: 1px solid #ddd; border-left: 1px solid #ddd}

.radius-5 { border-radius: 5px; overflow: hidden}
.radius-10 { border-radius: 10px; overflow: hidden}
.radius-20 { border-radius: 20px; overflow: hidden}
.radius-100 { border-radius: 100%; overflow: hidden}
.radius-top-20 { border-radius: 20px 20px 0 0; overflow: hidden}
.radius-bottom-20 { border-radius: 0 0 20px 20px; overflow: hidden}

.login-checkbox { width: 20px !important; vertical-align: middle; margin-right: 0px;}

.square-40 { width: 40px; height: 40px}
.square-50 { width: 50px; height: 50px}
.square-64 { width: 64px; height: 64px}
.square-100 { width: 100px; height: 100px; overflow: hidden}
.square-120 { width: 120px; height: 120px}
.square-240 { width: 240px; height: 240px}
.square-360 { width: 360px; height: 360px}
.square-480 { width: 480px; height: 480px}

/* button */
.btn {
    height: auto;
    padding: 9.5px 77.5px;
    border-radius: 4px;
    font-size: 16px;
    border: 1px solid #E4E4E9;
}
.btn:disabled {
    border: 1px solid #E4E4E9 !important;
    background: #eee !important;
    color: #646670 !important;
}
.btn.btn-fill {
    background-color: var(--bg-primary);
    color: var(--color-white);
    border: 1px solid var(--bg-primary);
}
.btn.btn-outline {
    border: 1px solid var(--primary, #00AE8D) !important;
    background-color: var(--white, #FFF);
    color: var(--primary)
}
.btn.btn-m {
    font-size: 12px
}
.btn.btn-s {
    font-size: 12px;
    padding: 5px 10px;
    border-radius: unset;
    border-width: 2px;
}

.btn-round {
    height: auto;
    padding: 9px 28px;
    border-radius: 100px;
    font-size: 16px;
}
.btn-round:disabled {
    border: 1px solid #E4E4E9 !important;
    background-color: var(--disabled, rgba(228, 228, 233, 0.60)) !important;
    color: #ADB0BA !important;
}
.btn-round.btn-fill {
    background-color: var(--bg-primary);
    color: var(--color-white);
    border: 1px solid var(--bg-primary)
}
.btn-round.btn-outline {
    border: 1px solid var(--primary, #00AE8D);
    background-color: var(--white, #FFF);
    color: var(--primary)
}
.btn-round.btn-m {
    font-size: 14px;
    padding: 4px 28px;
}
.btn-round.btn-s {
    font-size: 12px;
    padding: 5px 15px;
}
.btn-round.btn-ss {
    font-size: 11px;
    padding: 5px 15px;
    line-height: 100%;
}

.btn-primary {
    height: auto;
    background-color: var(--bg-primary);
    color: var(--white);
    line-height: 100%;
    padding: 9px 10px;
    font-size: 11px;
}


.btn-primary-outline {
    height: auto;
    background-color: var(--bg-white);
    color: var(--primary);
    line-height: 100%;
    padding: 9px 10px;
    font-size: 11px;
    border: 1px solid var(--primary)
}


.btn-default {
    height: auto;
    background-color: #646670;
    color: var(--white);
    line-height: 100%;
    padding: 9px 10px;
    font-size: 11px;
}

.btn-underline {
    height: auto;
    padding: 9px 28px;
    font-size: 16px;
    text-underline-offset : 5px;
    text-decoration: underline;
}
.btn-underline:hover {
    color: var(--primary)
}

.box-hover-primary:hover {
    border: 1px solid var(--primary)
}
.box-hover-primary:hover .btn-round{
    background-color: var(--bg-primary);
    color: var(--white)
}

.btn-underline.btn-m {
    font-size: 14px;
    padding: 4px 28px;
}
.btn-underline.btn-s {
    font-size: 12px
}

.btn-danger {
    padding: 5px 10px;
    background-color: var(--error);
    color: var(--white);
}
.btn-success {
    padding: 5px 10px;
    background-color: var(--bg-primary);
    color: var(--white);
}
.btn-warning {
    padding: 5px 10px;
    background-color: orange;
    color: var(--white);
}

.btn-info2 {
    padding: 5px 10px;
    background-color: rgba(255, 87, 117, 1) !important;
}
.btn-info2:hover {
    border: none;
}


/* box */

.width-10 { width: 10% }
.width-15 { width: 15% }
.width-20 { width: 20% }
.width-25 { width: 25% }
.width-30 { width: 30% }
.width-35 { width: 35% }
.width-40 { width: 40% }
.width-45 { width: 45% }
.width-50 { width: 50% }
.width-55 { width: 55% }
.width-60 { width: 60% }
.width-65 { width: 65% }
.width-70 { width: 70% }
.width-75 { width: 75% }
.width-80 { width: 80% }
.width-85 { width: 85% }
.width-90 { width: 90% }
.width-95 { width: 95% }
.width-100 { width: 100% }

.width-100-px { width: 100px }
.width-110-px { width: 110px }
.width-120-px { width: 120px }
.width-130-px { width: 130px }
.width-140-px { width: 140px }
.width-150-px { width: 150px }
.width-160-px { width: 160px }
.width-170-px { width: 170px }
.width-180-px { width: 180px }
.width-190-px { width: 190px }
.width-200-px { width: 200px }
.width-250-px { width: 250px }
.width-300-px { width: 300px }

.width-480 { width: 480px}


.top-line { border-top: 1px solid #ddd}
.top-line-primary { border-top: 2px solid var(--primary)}
.top-line-primary-m { border-top: 1px solid var(--primary)}
.top-line-dashed { border-top: 1px dashed #ddd}

.under-shadow { box-shadow: 0px 1px 5px gray}
.shadow-circle { box-shadow: 0px 1px 5px gray; border-radius: 100%}

.ul-inline li {
    display: inline-block;
}
.ul-under-line {}
.ul-under-line li:not(:last-child) { border-bottom: 1px solid #ddd }

.ul-child-style-disc li { list-style: disc; list-style-position: inherit}

.box-shadow {
    box-shadow: 4px 12px 5px rgba(0,0,0,.09);
}

/* icon */
.icon-large { font-size: 48px !important;}
.icon-x-large { font-size: 60px  !important; }
.icon-xx-large { font-size: 72px  !important; }
.icon-xxx-large { font-size: 84px  !important; }
.icon-xxxx-large { font-size: 96px  !important; }

/* label */
label { cursor: pointer}
.label { color: #eee; border-radius: 5px; padding: 3px 7px 3px; line-height: 12px !important; font-size: 10px; }
.label-new { background-color: #0D47A1;}
.label-hot { background-color: #e64a19;}
.label-recomm { background-color: #0f9d58;}
.label-season { background-color: #00b0ff;}


.label-primary { background-color: var(--bg-primary); }
.label-default { background-color: #bbb;}
.label-success { background-color: var(--bg-success);}
.label-cancel { background-color: var(--bg-secondary);}

/* animation */
.rotate-180 {
    transform: rotate(180deg);
}

/* position */
.position-relative { position: relative }
.position-fixed { position: fixed;}
.position-absolute { position: absolute !important;}
.position-absolute.icon-menu-down { right: 10px; top: 12px}
.position-fixed-full { position: fixed; width: 100%; height: 100%; left: 0; top: 0}
.position-absolute-full { position: absolute !important;  width: 100%; height: 100%; left: 0; top: 0}


/* design */
.text-20 { font-size: 20px; font-weight: 600;}
.text-18 { font-size: 18px; font-weight: 500;}
.text-16 { font-size: 16px; font-weight: 400;}
.text-14 { font-size: 14px; font-weight: 400;}

.text-12 { font-size: 12px; font-weight: 400;}
.text-11 { font-size: 11px; font-weight: 400;}
.text-10 { font-size: 10px; font-weight: 400;}
.text-09 { font-size: 09px; font-weight: 400;}

@media (min-width: 721px) and (max-width: 1000px) {
    .text-vw-18 { font-size: 1.8vw;}
    .text-vw-16 { font-size: 1.6vw;}
}


.cursor-pointer {
    cursor: pointer;
}

/* table */
.table { width: 100%; font-size: 12px; table-layout: fixed}

.table > tbody > tr > th
,.table > tbody > tr > td
,.table > thead > tr > th
,.table > thead > tr > td
,.table > tfoot > tr > th
,.table > tfoot > tr > td {
    text-align: center;
    padding: 10px;
    border: 1px solid #ddd;
    word-break: break-all;
}

.table th { background-color: #f6f9f9 !important; }

.table.th-left > tbody > tr > th{ text-align: left ;}
.table.td-left > tbody > tr > td { text-align: left ;}
.table.td-right > tbody > tr > td { text-align: right ;}

.table .td-left { text-align: left}

.table tr{
    background-color: #fff;
}

.table-even thead tr { background-color: #0D47A1}
.table-even tbody tr:nth-child(even){
    background-color: #eee;
}

.table-odd thead tr { background-color: #fff}
.table-odd tbody tr:nth-child(odd){
    background-color: #0D47A1;
}

.td-bold td{
    font-weight: bold;
}


/* 이미지 */
.object-cover {
    object-fit: cover;
    width: 100%;
}

/* 미디어 쿼리 */

@media (max-width: 1199px) {

    .container, .container-m{
        padding-left: 20px; padding-right: 20px;
    }
}

@media (min-width: 721px) and (max-width: 1199px) {
    .hide-tab {
        display: none !important;
    }
}
@media (max-width: 720px) {

    .bg-base-m { background-color: #F0FCFA}

    .hide-m {
        display: none !important;
    }
    .container, .container-m{
        padding-left: 20px; padding-right: 20px;
    }

    .justify-center-m { display: flex; justify-content: center}
    .justify-space-around-m { display: flex; justify-content: space-around}
    .justify-space-between-m { display: flex; justify-content: space-between }
    .justify-start-m {display: flex; justify-content: start}
    .justify-end-m {display: flex; justify-content: end}

    .flex-column-m { display: flex; flex-direction: column;}

    .pa-5-m { padding: 5px !important;}
    .pa-5-10-m { padding: 5px 10px !important;}
    .pa-5-15-m { padding: 5px 15px !important;}
    .pa-10-m { padding: 10px !important;}
    .pa-10-5-m { padding: 10px 5px !important;}
    .pa-10-15-m { padding: 10px 15px !important;}
    .pa-10-20-m { padding: 10px 20px !important;}
    .pa-15-m { padding: 15px !important;}
    .pa-15-10-m { padding: 15px 10px !important;}
    .pa-15-20-m { padding: 15px 20px !important;}
    .pa-20-m { padding: 20px;}
    .pa-20-10-m { padding: 20px 10px;}
    .pa-20-30-m { padding: 20px 30px;}
    .pa-20-40-m { padding: 20px 40px;}
    .pa-20-50-m { padding: 20px 50px;}
    .pa-30-m { padding: 30px;}
    .pa-40-m { padding: 40px;}
    .pa-10-10-15-10-m { padding: 10px 10px 15px 10px !important;}
    .pa-50-m { padding: 50px}
    .pa-50-20-m { padding: 50px 20px !important;}

    .pb-5-m { padding-bottom: 5px}
    .pb-10-m { padding-bottom: 10px}
    .pb-20-m { padding-bottom: 20px}
    .pb-30-m { padding-bottom: 30px}
    .pb-40-m { padding-bottom: 40px}
    .pb-50-m { padding-bottom: 50px}

    .prl-5-m { padding-left: 5px; padding-right: 5px !important;}
    .prl-10-m { padding-left: 10px; padding-right: 10px !important;}
    .prl-20-m { padding-left: 20px; padding-right: 20px !important;}
    .prl-30-m { padding-left: 30px; padding-right: 30px !important;}
    .prl-40-m { padding-left: 40px; padding-right: 40px !important;}
    .prl-50-m { padding-left: 50px; padding-right: 50px !important;}

    .ptb-5-m { padding-top: 5px; padding-bottom: 5px !important;}
    .ptb-10-m { padding-top: 10px; padding-bottom: 10px !important;}
    .ptb-20-m { padding-top: 20px; padding-bottom: 20px !important;}
    .ptb-30-m { padding-top: 30px; padding-bottom: 30px !important;}
    .ptb-40-m { padding-top: 40px; padding-bottom: 40px !important;}
    .ptb-50-m { padding-top: 50px; padding-bottom: 50px !important;}

    .mt-5-m { margin-top: 5px !important;}
    .mt-10-m { margin-top: 10px !important;}
    .mt-15-m { margin-top: 15px !important;}
    .mt-20-m { margin-top: 20px !important;}
    .mt-30-m { margin-top: 30px !important;}
    .mt-40-m { margin-top: 40px !important;}
    .mt-50-m { margin-top: 50px !important;}

    .mb-5-m { margin-bottom: 5px !important;}
    .mb-10-m { margin-bottom: 10px !important;}
    .mb-20-m { margin-bottom: 20px !important;}
    .mb-30-m { margin-bottom: 30px !important;}
    .mb-40-m { margin-bottom: 40px !important;}
    .mb-50-m { margin-bottom: 50px !important;}

    .mr-5-m { margin-right: 5px}
    .mr-10-m { margin-right: 10px}
    .mr-15-m { margin-right: 15px}
    .mr-20-m { margin-right: 20px}
    .mr-30-m { margin-right: 30px}
    .mr-40-m { margin-right: 40px}
    .mr-50-m { margin-right: 50px}

    .ml-5-m { margin-left: 5px}
    .ml-10-m { margin-left: 10px}
    .ml-15-m { margin-left: 15px}
    .ml-20-m { margin-left: 20px}

    .mrl-10-m { margin-right: 10px; margin-left: 10px}


    .size-px-8-m { font-size: 8px !important}
    .size-px-9-m { font-size: 9px !important}
    .size-px-10-m { font-size: 10px !important;}
    .size-px-11-m { font-size: 11px !important;}
    .size-px-12-m { font-size: 12px !important;}
    .size-px-13-m { font-size: 13px !important;}
    .size-px-14-m { font-size: 14px !important;}
    .size-px-15-m { font-size: 15px !important;}
    .size-px-16-m { font-size: 16px !important;}
    .size-px-17-m { font-size: 17px !important;}
    .size-px-18-m { font-size: 18px !important;}
    .size-px-19-m { font-size: 19px !important;}
    .size-px-20-m { font-size: 20px !important;}
    .size-px-22-m { font-size: 22px !important;}
    .size-px-24-m { font-size: 24px !important;}
    .size-px-28-m { font-size: 28px !important;}
    .size-px-32-m { font-size: 32px !important;}
    .size-px-36-m { font-size: 36px !important;}
    .size-px-48-m { font-size: 48px !important;}


    .size-rem-05-m { font-size: 0.5rem !important;}
    .size-rem-06-m { font-size: 0.6rem !important;}
    .size-rem-07-m { font-size: 0.7rem !important;}
    .size-rem-08-m { font-size: 0.8em !important;}
    .size-rem-09-m { font-size: 0.9rem !important;}
    .size-rem-10-m { font-size: 1.0rem !important;}
    .size-rem-11-m { font-size: 1.1rem !important;}
    .size-rem-12-m { font-size: 1.2rem !important;}
    .size-rem-13-m { font-size: 1.3rem !important;}
    .size-rem-14-m { font-size: 1.4rem !important;}
    .size-rem-15-m { font-size: 1.5rem !important;}
    .size-rem-16-m { font-size: 1.6rem !important;}
    .size-rem-17-m { font-size: 1.7rem !important;}
    .size-rem-18-m { font-size: 1.8rem !important;}
    .size-rem-19-m { font-size: 1.9rem !important;}
    .size-rem-20-m { font-size: 2.0rem !important;}


    .btn-round.btn-ss-m {
        font-size: 11px;
        padding: 5px 15px;
        line-height: 100%;
    }

    .btn.btn-s-m {
        font-size: 12px;
        padding: 5px 10px;
        border-radius: unset;
        border-width: 2px !important;
    }


    .width-10-m { width: 10% }
    .width-15-m { width: 15% }
    .width-20-m { width: 20% }
    .width-25-m { width: 25% }
    .width-30-m { width: 30% !important;}
    .width-35-m { width: 35% }
    .width-40-m { width: 40% }
    .width-45-m { width: 45% }
    .width-50-m { width: 50% }
    .width-55-m { width: 55% }
    .width-60-m { width: 60% }
    .width-65-m { width: 65% }
    .width-70-m { width: 70% }
    .width-75-m { width: 75% }
    .width-80-m { width: 80% }
    .width-85-m { width: 85% }
    .width-90-m { width: 90% }
    .width-95-m { width: 95% }
    .width-100-m { width: 100% }

    .width-15px-m { width: 15px !important;}
    .width-20px-m { width: 20px !important;}


    .square-25-m { width: 25px; height: 25px}
    .square-40-m { width: 40px; height: 40px}
    .square-50-m { width: 50px; height: 50px}
    .square-64-m { width: 64px; height: 64px}
    .square-100-m { width: 100px; height: 100px}
    .square-120-m { width: 120px; height: 120px}
    .square-240-m { width: 240px; height: 240px}
    .square-360-m { width: 360px; height: 360px}
    .square-480-m { width: 480px; height: 480px}


    .gap-5-m {gap: 5px}
    .gap-10-m {gap: 10px}
    .gap-15-m {gap: 15px}
    .gap-20-m {gap: 20px}
    .gap-30-m {gap: 30px}
    .gap-40-m {gap: 40px}
    .gap-50-m {gap: 50px}


    .radius-5-m { border-radius: 5px; overflow: hidden}
    .radius-10-m { border-radius: 10px; overflow: hidden}
    .radius-20-m { border-radius: 20px; overflow: hidden}
}

@media (min-width: 720px) {

    .bg-base-pc { background-color: #F0FCFA}
    .under-line-primary-pc { border-bottom: 2px solid var(--primary); }

    .hide-pc {
        display: none
    }

    .top-line-pc {
        border-top: 1px solid #ddd
    }

    .justify-center-pc { display: flex; justify-content: center}
    .justify-space-around-pc { display: flex; justify-content: space-around}
    .justify-space-between-pc { display: flex; justify-content: space-between }
    .justify-start-pc {display: flex; justify-content: start}
    .justify-end-pc {display: flex; justify-content: end}


    .pa-5-pc { padding: 5px !important;}
    .pa-5-10-pc { padding: 5px 10px !important;}
    .pa-5-15-pc { padding: 5px 15px !important;}
    .pa-10-pc { padding: 10px !important;}
    .pa-10-15-pc { padding: 10px 15px !important;}
    .pa-10-20-pc { padding: 10px 20px !important;}
    .pa-15-pc { padding: 15px !important;}
    .pa-15-10-pc { padding: 15px 10px !important;}
    .pa-15-20-pc { padding: 15px 20px !important;}
    .pa-20-pc { padding: 20px;}
    .pa-20-10-pc { padding: 20px 10px;}
    .pa-20-30-pc { padding: 20px 30px;}
    .pa-20-40-pc { padding: 20px 40px;}
    .pa-20-50-pc { padding: 20px 50px;}
    .pa-30-pc { padding: 30px;}
    .pa-40-pc { padding: 40px;}
    .pa-10-10-15-10-pc { padding: 10px 10px 15px 10px !important;}
    .pa-50-pc { padding: 50px}
    .pa-50-20-pc { padding: 50px 20px !important;}

    .pb-5-pc { padding-bottom: 5px}
    .pb-10-pc { padding-bottom: 10px}
    .pb-20-pc { padding-bottom: 20px}
    .pb-30-pc { padding-bottom: 30px}
    .pb-40-pc { padding-bottom: 40px}
    .pb-50-pc { padding-bottom: 50px}

    .prl-5-pc { padding-left: 5px; padding-right: 5px !important;}
    .prl-10-pc { padding-left: 10px; padding-right: 10px !important;}
    .prl-20-pc { padding-left: 20px; padding-right: 20px !important;}
    .prl-30-pc { padding-left: 30px; padding-right: 30px !important;}
    .prl-40-pc { padding-left: 40px; padding-right: 40px !important;}
    .prl-50-pc { padding-left: 50px; padding-right: 50px !important;}

    .ptb-5-pc { padding-top: 5px; padding-bottom: 5px !important;}
    .ptb-10-pc { padding-top: 10px; padding-bottom: 10px !important;}
    .ptb-20-pc { padding-top: 20px; padding-bottom: 20px !important;}
    .ptb-30-pc { padding-top: 30px; padding-bottom: 30px !important;}
    .ptb-40-pc { padding-top: 40px; padding-bottom: 40px !important;}
    .ptb-50-pc { padding-top: 50px; padding-bottom: 50px !important;}


    .mt-5-pc { margin-top: 5px !important;}
    .mt-10-pc { margin-top: 10px !important;}
    .mt-15-pc { margin-top: 15px !important;}
    .mt-20-pc { margin-top: 20px !important;}
    .mt-30-pc { margin-top: 30px !important;}
    .mt-40-pc { margin-top: 40px !important;}
    .mt-50-pc { margin-top: 50px !important;}

    .mb-5-pc { margin-bottom: 5px !important;}
    .mb-10-pc { margin-bottom: 10px !important;}
    .mb-20-pc { margin-bottom: 20px !important;}
    .mb-30-pc { margin-bottom: 30px !important;}
    .mb-40-pc { margin-bottom: 40px !important;}
    .mb-50-pc { margin-bottom: 50px !important;}

    .mr-5-pc { margin-right: 5px}
    .mr-10-pc { margin-right: 10px}
    .mr-15-pc { margin-right: 15px}
    .mr-20-pc { margin-right: 20px}
    .mr-30-pc { margin-right: 30px}
    .mr-40-pc { margin-right: 40px}
    .mr-50-pc { margin-right: 50px}

    .ml-5-pc { margin-left: 5px}
    .ml-10-pc { margin-left: 10px}
    .ml-15-pc { margin-left: 15px}
    .ml-20-pc { margin-left: 20px}

    .mrl-10-pc { margin-right: 10px; margin-left: 10px}


    .size-px-8-pc { font-size: 8px !important}
    .size-px-9-pc { font-size: 9px !important}
    .size-px-10-pc { font-size: 10px !important;}
    .size-px-11-pc { font-size: 11px !important;}
    .size-px-12-pc { font-size: 12px !important;}
    .size-px-13-pc { font-size: 13px !important;}
    .size-px-14-pc { font-size: 14px !important;}
    .size-px-15-pc { font-size: 15px !important;}
    .size-px-16-pc { font-size: 16px !important;}
    .size-px-17-pc { font-size: 17px !important;}
    .size-px-18-pc { font-size: 18px !important;}
    .size-px-19-pc { font-size: 19px !important;}
    .size-px-20-pc { font-size: 20px !important;}
    .size-px-22-pc { font-size: 22px !important;}
    .size-px-24-pc { font-size: 24px !important;}
    .size-px-28-pc { font-size: 28px !important;}
    .size-px-32-pc { font-size: 32px !important;}
    .size-px-36-pc { font-size: 36px !important;}
    .size-px-48-pc { font-size: 48px !important;}


    .width-10-pc { width: 10% }
    .width-15-pc { width: 15% }
    .width-20-pc { width: 20% }
    .width-25-pc { width: 25% }
    .width-30-pc { width: 30% }
    .width-35-pc { width: 35% }
    .width-40-pc { width: 40% }
    .width-45-pc { width: 45% }
    .width-50-pc { width: 50% }
    .width-55-pc { width: 55% }
    .width-60-pc { width: 60% }
    .width-65-pc { width: 65% }
    .width-70-pc { width: 70% }
    .width-75-pc { width: 75% }
    .width-80-pc { width: 80% }
    .width-85-pc { width: 85% }
    .width-90-pc { width: 90% }
    .width-95-pc { width: 95% }
    .width-100-pc { width: 100% }



    .square-25-pc { width: 25px; height: 25px}
    .square-40-pc { width: 40px; height: 40px}
    .square-50-pc { width: 50px; height: 50px}
    .square-64-pc { width: 64px; height: 64px}
    .square-100-pc { width: 100px; height: 100px}
    .square-120-pc { width: 120px; height: 120px}
    .square-240-pc { width: 240px; height: 240px}
    .square-360-pc { width: 360px; height: 360px}
    .square-480-pc { width: 480px; height: 480px}


    .btn-round.btn-m-pc {
        font-size: 14px;
        padding: 4px 2.8vw;
    }


    .gap-5-pc {gap: 5px}
    .gap-10-pc {gap: 10px}
    .gap-15-pc {gap: 15px}
    .gap-20-pc {gap: 20px}
    .gap-30-pc {gap: 30px}
    .gap-40-pc {gap: 40px}
    .gap-50-pc {gap: 50px}


    .radius-5-pc { border-radius: 5px; overflow: hidden}
    .radius-10-pc { border-radius: 10px; overflow: hidden}
    .radius-20-pc { border-radius: 20px; overflow: hidden}


    .width-480-pc { width: 480px}
}

.escape {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 720px) {

    h1, .h1 {font-size:  20px;}
    h2, .h2 {font-size:  16px;}
    h3, .h3 {font-size:  14px;}
    h4, .h4 {font-size:  12px;}
    h5, .h5 {font-size:  11px;}
    h6, .h6 {font-size:  14px;}
}


/* 포인트 */

.item-point.on {
    border: 1px solid var(--primary);
    background-color: var(--bg-base);
}
.item-point:hover {
    border: 1px solid var(--primary);
}
.item-charge:hover {
    border: 1px solid var(--primary);
}
.item-charge.on {
    border: 1px solid var(--primary);
    background-color: var(--bg-primary);
    color: var(--white)
}

/* 서브탑 */
.sub-top .on {
    background-color: var(--bg-base);
    border-color: var(--primary) !important;
    color: var(--primary);
}
.sub-top .bg-default{
    border-color: var(--bg-dark);
}

.btn-green { background-color: #3B8AFF !important; border-color: #3B8AFF !important;}


.border-none {border: unset;}

.width-25-pdt {
    width: calc(25% - 10px);
    margin-bottom: 10px;
    margin-right: 10px;
}

.width-25-pdt:not(:nth-child(4n)){
}