:root {
    /* Layout */
    --layoutwidth: 1200px ;
    --boldWeight: 400;
    /* Font */
    --mainfont:'Pretendard Variable';
    --pointfont:'Belleza';
    /* Color */
    --pointcolor: #8b7148 ;
}

/* ========== Font family ========== */
.main-font    {font-family: var(--mainfont), sans-serif; }
.point-font   {font-family: var(--pointfont), serif; }

/* =============== Color ===============*/
.point-color   {color: var(--pointcolor)!important;color: var(--pointcolor)}
.point-bg      {background-color: var(--pointcolor)}

/* ===== Basic color + background =====*/
.color-white          {color:#ffffff;}
.color-black          {color: #000000;}
.bg-white             {background-color:#ffffff;}
.bg-black             {background-color:#000000;}

/* ===== Basic ===== */
html,body{font-size:16px; letter-spacing: -.5px;}
@media (max-width:1580px){html, body {font-size: 14px;}}
@media (max-width:1240px){html, body {font-size: 13px; overflow-x: hidden;}}
@media (max-width:1024px){html, body {font-size: 11px;}}
@media (max-width:768px) {html, body {font-size: 10px;}}
/* ========== Font size ========== */
.font-12  { font-size: 0.750rem; }
.font-14  { font-size: 0.875rem; }
.font-15  { font-size: .9375rem; }
.font-16  { font-size: 1.000rem; }
.font-18  { font-size: 1.125rem; }
.font-20  { font-size: 1.250rem; }
.font-22  { font-size: 1.375rem; }
.font-24  { font-size: 1.500rem; }
.font-25  { font-size: 1.5625rem;}
.font-26  { font-size: 1.625rem; }
.font-28  { font-size: 1.750rem; }
.font-30  { font-size: 1.875rem; }
.font-32  { font-size: 2.000rem; }
.font-34  { font-size: 2.125rem; }
.font-35  { font-size: 2.1875rem;}
.font-36  { font-size: 2.250rem; }
.font-38  { font-size: 2.375rem; }
.font-40  { font-size: 2.500rem; }
.font-42  { font-size: 2.625rem; }
.font-44  { font-size: 2.750rem; }
.font-45  { font-size: 2.8125rem;}
.font-46  { font-size: 2.875rem; }
.font-48  { font-size: 3.000rem; }
.font-50  { font-size: 3.125rem; }
.font-55  { font-size: 3.4375rem;}
.font-60  { font-size: 3.750rem; }
.font-65  { font-size: 4.0625rem;}
.font-70  { font-size: 4.375rem; }
.font-75  { font-size: 4.6875rem;}
.font-80  { font-size: 5.000rem; }
.font-85  { font-size: 5.3125rem;}
.font-90  { font-size: 5.625rem; }
.font-95  { font-size: 5.9375rem;}
.font-100 { font-size: 6.250rem; }
.font-110 { font-size: 6.875rem; }
.font-120 { font-size: 7.500rem; }
.font-130 { font-size: 8.125rem; }
.font-140 { font-size: 8.750rem; }
.font-150 { font-size: 9.375rem; }
.font-160 { font-size: 10.000rem; }
.font-170 { font-size: 10.625rem; }
.font-180 { font-size: 11.250rem; }
.font-190 { font-size: 11.875rem; }
.font-200 { font-size: 12.500rem; }

@media (max-width:768px) {
    .font-22  { font-size: 1.25rem; }
    .font-50 { font-size: 2.95rem; }
}

/* ========== Font weight ========= */
.bold100 {font-weight:100}
.bold200 {font-weight:200}
.bold300 {font-weight:300}
.bold400 {font-weight:400}
.bold500 {font-weight:500}
.bold600 {font-weight:600}
.bold700 {font-weight:700}
.bold800 {font-weight:800}
.bold900 {font-weight:900}

/* ========== Line-hight ========== */
.lh-10 {line-height: 1.0}
.lh-12 {line-height: 1.2}
.lh-14 {line-height: 1.4}
.lh-15 {line-height: 1.5}
.lh-16 {line-height: 1.6}
.lh-17 {line-height: 1.7}
.lh-20 {line-height: 2.0}

/* =============== Letter-spacing =============== */
.sp-1 {letter-spacing: -1px}
.sp-2 {letter-spacing: -2px}
.sp-20 {letter-spacing: 2px}
.ls-01{letter-spacing: -1px;}
.ls-02{letter-spacing: -2px;}
.ls-03{letter-spacing: -.3px;}
.ls-04{letter-spacing: -.4px;}
.ls-05{letter-spacing: 0.5px;}
.ls-08{letter-spacing: 0.8px;}
.ls-10{letter-spacing: 1px;}
.ls-20{letter-spacing: 2px;}
.ls-30{letter-spacing: 3px;}
.ls-40{letter-spacing: 4px;}
.ls-50{letter-spacing: 5px;}
.ls-100{letter-spacing: 10px;}
.ls-120{letter-spacing: 12px;}
.ls-150{letter-spacing: 15px;}

/* ========== Text-align ========== */
.text-left   {text-align:left;}
.text-right  {text-align:right;}
.text-center {text-align:center;}

/* ===== width ===== */
.width100 {width: 100% !important;width:100%}
.width95 {width: 95%;}
.width90 {width: 90%;}
.width85 {width: 85%;}
.width80 {width: 80%;}
.width75 {width: 75%;}
.width70 {width: 70%;}
.width65 {width: 65%;}
.width60 {width: 60%;}
.width55 {width: 55%;}
.width50 {width: 50%;}
.width45 {width: 45%;}
.width40 {width: 40%;}
.width35 {width: 35%;}
.width30 {width: 30%;}
.width25 {width: 25%;}
.width20 {width: 20%;}
.width15 {width: 15%;}
.width10 {width: 10%;}

/* ===== Margin ===== */
.no-margin {margin:0 !important}
.m-zero-auto {margin: 0 auto ;}
.m-auto {margin: auto}

.ml-auto {margin-left: auto;}
.mr-auto {margin-right: auto;}
.mt-auto {margin-top: auto;}
.mb-auto {margin-bottom: auto;}
.mx-auto {margin-left: auto;margin-right:auto}
.my-auto {margin-top: auto;margin-bottom:auto}

.mt-0   {margin-top: 0 !important;}
.mt-5   {margin-top: 0.3125rem;}
.mt-10  {margin-top: 0.625rem; }
.mt-15  {margin-top: 0.9375rem;}
.mt-20  {margin-top: 1.250rem; }
.mt-25  {margin-top: 1.5625rem;}
.mt-30  {margin-top: 1.875rem; }
.mt-35  {margin-top: 2.1875rem;}
.mt-40  {margin-top: 2.500rem; }
.mt-45  {margin-top: 2.8125rem;}
.mt-50  {margin-top: 3.125rem; }
.mt-60  {margin-top: 3.750rem; }
.mt-70  {margin-top: 4.375rem; }
.mt-80  {margin-top: 5.000rem; }
.mt-90  {margin-top: 5.625rem; }
.mt-100 {margin-top: 6.250rem; }
.mt-120 {margin-top: 7.500rem; }
.mt-140 {margin-top: 8.750rem; }
.mt-150 {margin-top: 9.375rem; }

.mb-0   {margin-bottom: 0 !important;}
.mb-5   {margin-bottom: 0.3125rem;}
.mb-10  {margin-bottom: 0.625rem; }
.mb-15  {margin-bottom: 0.9375rem;}
.mb-20  {margin-bottom: 1.250rem; }
.mb-25  {margin-bottom: 1.5625rem;}
.mb-30  {margin-bottom: 1.875rem; }
.mb-35  {margin-bottom: 2.1875rem;}
.mb-40  {margin-bottom: 2.500rem; }
.mb-45  {margin-bottom: 2.8125rem;}
.mb-50  {margin-bottom: 3.125rem; }
.mb-60  {margin-bottom: 3.750rem; }
.mb-70  {margin-bottom: 4.375rem; }
.mb-80  {margin-bottom: 5.000rem; }
.mb-90  {margin-bottom: 5.625rem; }
.mb-100 {margin-bottom: 6.250rem; }
.mb-120 {margin-bottom: 7.500rem; }
.mb-140 {margin-bottom: 8.750rem; }
.mb-150 {margin-bottom: 9.375rem; }

.mr-0   {margin-right: 0 !important;}
.mr-5   {margin-right: 0.3125rem;}
.mr-10  {margin-right: 0.625rem; }
.mr-15  {margin-right: 0.9375rem;}
.mr-20  {margin-right: 1.250rem; }
.mr-25  {margin-right: 1.5625rem;}
.mr-30  {margin-right: 1.875rem; }
.mr-35  {margin-right: 2.1875rem;}
.mr-40  {margin-right: 2.500rem; }
.mr-45  {margin-right: 2.8125rem;}
.mr-50  {margin-right: 3.125rem; }
.mr-60  {margin-right: 3.750rem; }
.mr-70  {margin-right: 4.375rem; }
.mr-80  {margin-right: 5.000rem; }
.mr-90  {margin-right: 5.625rem; }
.mr-100 {margin-right: 6.250rem; }

.ml-0   {margin-left: 0 !important;}
.ml-5   {margin-left: 0.3125rem;}
.ml-10  {margin-left: 0.625rem; }
.ml-15  {margin-left: 0.9375rem;}
.ml-20  {margin-left: 1.250rem; }
.ml-25  {margin-left: 1.5625rem;}
.ml-30  {margin-left: 1.875rem; }
.ml-35  {margin-left: 2.1875rem;}
.ml-40  {margin-left: 2.500rem; }
.ml-45  {margin-left: 2.8125rem;}
.ml-50  {margin-left: 3.125rem; }
.ml-60  {margin-left: 3.750rem; }
.ml-70  {margin-left: 4.375rem; }
.ml-80  {margin-left: 5.000rem; }
.ml-90  {margin-left: 5.625rem; }
.ml-100 {margin-left: 6.250rem; }

/* ===== Padding ===== */
.no-padding {padding:0!important}

.pt-0   {padding-top: 0!important;}
.pb-0   {padding-bottom: 0!important;}
.pr-0   {padding-right:0!important}
.pl-0   {padding-left:0!important}

.pt-5   {padding-top: 0.3125rem;}
.pt-10  {padding-top: 0.625rem; }
.pt-15  {padding-top: 0.9375rem;}
.pt-20  {padding-top: 1.250rem; }
.pt-25  {padding-top: 1.5625rem;}
.pt-30  {padding-top: 1.875rem; }
.pt-35  {padding-top: 2.1875rem;}
.pt-40  {padding-top: 2.500rem; }
.pt-45  {padding-top: 2.8125rem;}
.pt-50  {padding-top: 3.125rem; }
.pt-60  {padding-top: 3.750rem; }
.pt-70  {padding-top: 4.375rem; }
.pt-80  {padding-top: 5.000rem; }
.pt-90  {padding-top: 5.625rem; }
.pt-100 {padding-top: 6.250rem; }

.pb-5   {padding-bottom: 0.3125rem;}
.pb-10  {padding-bottom: 0.625rem; }
.pb-15  {padding-bottom: 0.9375rem;}
.pb-20  {padding-bottom: 1.250rem; }
.pb-25  {padding-bottom: 1.5625rem;}
.pb-30  {padding-bottom: 1.875rem; }
.pb-35  {padding-bottom: 2.1875rem;}
.pb-40  {padding-bottom: 2.500rem; }
.pb-45  {padding-bottom: 2.8125rem;}
.pb-50  {padding-bottom: 3.125rem; }
.pb-60  {padding-bottom: 3.750rem; }
.pb-70  {padding-bottom: 4.375rem; }
.pb-80  {padding-bottom: 5.000rem; }
.pb-90  {padding-bottom: 5.625rem; }
.pb-100 {padding-bottom: 6.250rem; }

.pr-5   {padding-right: 0.3125rem;}
.pr-10  {padding-right: 0.625rem; }
.pr-15  {padding-right: 0.9375rem;}
.pr-20  {padding-right: 1.250rem; }
.pr-25  {padding-right: 1.5625rem;}
.pr-30  {padding-right: 1.875rem; }
.pr-35  {padding-right: 2.1875rem;}
.pr-40  {padding-right: 2.500rem; }
.pr-45  {padding-right: 2.8125rem;}
.pr-50  {padding-right: 3.125rem; }
.pr-60  {padding-right: 3.750rem; }
.pr-70  {padding-right: 4.375rem; }
.pr-80  {padding-right: 5.000rem; }
.pr-90  {padding-right: 5.625rem; }
.pr-100 {padding-right: 6.250rem; }

.pl-5   {padding-left: 0.3125rem;}
.pl-10  {padding-left: 0.625rem; }
.pl-15  {padding-left: 0.9375rem;}
.pl-20  {padding-left: 1.250rem; }
.pl-25  {padding-left: 1.5625rem;}
.pl-30  {padding-left: 1.875rem; }
.pl-35  {padding-left: 2.1875rem;}
.pl-40  {padding-left: 2.500rem; }
.pl-45  {padding-left: 2.8125rem;}
.pl-50  {padding-left: 3.125rem; }
.pl-60  {padding-left: 3.750rem; }
.pl-70  {padding-left: 4.375rem; }
.pl-80  {padding-left: 5.000rem; }
.pl-90  {padding-left: 5.625rem; }
.pl-100 {padding-left: 6.250rem; }

/* Padding (em)*/
.pt-1em   {padding-top:    1em}
.pt-2em   {padding-top:    2em}
.pt-3em   {padding-top:    3em}
.pt-4em   {padding-top:    4em}
.pb-1em   {padding-bottom: 1em}
.pb-2em   {padding-bottom: 2em}
.pb-3em   {padding-bottom: 3em}
.pb-4em   {padding-bottom: 4em}
.pr-1em   {padding-right:  1em}
.pr-2em   {padding-right:  2em}
.pr-3em   {padding-right:  3em}
.pr-4em   {padding-right:  4em}
.pl-1em   {padding-left:   1em}
.pl-2em   {padding-left:   2em}
.pl-3em   {padding-left:   3em}
.pl-4em   {padding-left:   4em}

.pd-1em {padding: 1em}
.pd-2em {padding: 2em}
.pd-3em {padding: 3em}
.pd-4em {padding: 4em}
.px-1em {padding-left: 1em ; padding-right: 1em}
.px-2em {padding-left: 2em ; padding-right: 2em}
.px-3em {padding-left: 3em ; padding-right: 3em}
.px-4em {padding-left: 4em ; padding-right: 4em}

.py-1em {padding-top:  1em ; padding-bottom: 1em}
.py-2em {padding-top:  2em ; padding-bottom: 2em}
.py-3em {padding-top:  3em ; padding-bottom: 3em}
.py-4em {padding-top:  4em ; padding-bottom: 4em}

.px-em-point {padding-left:  0.5em ; padding-right: 0.5em}
.py-em-point {padding-top:  0.5em ; padding-bottom: 0.5em}

.visible-lg, .visible-md, .visible-sm, .visible-xs,.visible-xxs {display:none !important}

@media (max-width:1550px) { .hidden-lg {display:none!important} .visible-lg {display:block!important}}
@media (max-width:1240px) { .hidden-md {display:none!important} .visible-md {display:block!important}}
@media (max-width:990px)  { .hidden-sm {display:none!important} .visible-sm {display:block!important}}
@media (max-width:768px)  { .hidden-xs {display:none!important} .visible-xs {display:block!important}}
@media (max-width:500px)  { .hidden-xxs{display:none!important} .visible-xxs{display:block!important}}

/* =============== Display =============== */
.block { display: block; }
.inline-block { display: inline-block; }

.flex { display: -webkit-box; display: -ms-flexbox; display: flex; }
.flex-wrap{display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;flex-wrap: wrap;}
.flex-center {display: flex; align-items: center; justify-content: center;}
.flex-between {display: flex; justify-content: space-between;}

.justify-start { justify-content:flex-start !important}
.justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.justify-end { justify-content: flex-end; }

.items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
.items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.items-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }

.align-self-start{-ms-flex-item-align: start;align-self: flex-start}
.align-self-center{-ms-flex-item-align:center;align-self: center}
.align-self-end{-ms-flex-item-align:end;align-self: flex-end}

.shrink0{flex-shrink: 0}
.flex-column {flex-direction: column;}

.section-left  {padding-left : calc((100% - var(--layoutwidth)) / 2);width:100%;}
.section-right {padding-right: calc((100% - var(--layoutwidth)) / 2);width:100%;}
@media (max-width:1550px) {
    .section-left, .section-right {padding-left : 5%; padding-right: 5%; }
}

.flexList { --x-gap:1.500rem; --y-gap:1.500rem;  display:flex;  flex-wrap:wrap;  gap:var(--y-gap) var(--x-gap);}
.flexList > .box{width:calc(100% / var(--count) - (var(--x-gap) * (var(--count) - 1)) / var(--count)); }
[boxCount="2"]{ --count:2; }
[boxCount="3"]{ --count:3; }
[boxCount="4"]{ --count:4; }
[boxCount="5"]{ --count:5; }
[boxCount="6"]{ --count:6; }

@media (max-width:1550px){
    .lg-direction{flex-direction: column;}
    .lg-w100{width:100%}
    .lg-w90{width:90%}
    .lg-w80{width:80%}
    .lg-order{order: 1}
    .lg-cont_box {margin-top: 4.68rem;}

    .lg-wrap3{--count:3}
    .lg-wrap2{--count:2}
    .lg-wrap1{--count:1}
}
@media (max-width:1240px){
    .md-direction{flex-direction: column;}
    .md-w100{width:100%}
    .md-w90{width:90%}
    .md-w80{width:80%}
    .md-order{order: 1}
    .md-cont_box {margin-top: 4.68rem;}

    .md-wrap3{--count:3}
    .md-wrap2{--count:2}
    .md-wrap1{--count:1}
}
@media (max-width:990px){
    .sm-direction{flex-direction: column;}
    .sm-w100{width:100%}
    .sm-w90{width:90%}
    .sm-w80{width:80%}
    .sm-order{order: 1}
    .sm-cont_box {margin-top: 4.68rem;}

    .sm-wrap3{--count:3}
    .sm-wrap2{--count:2}
    .sm-wrap1{--count:1}
}
@media (max-width:768px){
    .xs-direction{flex-direction: column;}
    .xs-w100{width:100%}
    .xs-w90{width:90%}
    .xs-w80{width:80%}
    .xs-order{order: 1}
    .lg-cont_box,.md-cont_box,.sm-cont_box,.xs-cont_box {margin-top: 3.5rem;}

    .xs-wrap3{--count:3}
    .xs-wrap2{--count:2}
    .xs-wrap1{--count:1}
}
@media (max-width:500px){
    .xxs-direction{flex-direction: column;}
    .xxs-w100{width:100%}
    .xxs-w90{width:90%}
    .xxs-w80{width:80%}
    .xxs-order{order: 1}
    .xxs-cont_box {margin-top: 3.5rem}

    .xxs-wrap2{--count:2}
    .xxs-wrap1{--count:1}
}