@charset "utf-8";
:root {
    --layoutWidth: 1800px;
    --layoutWidthMini : 1544px;
    --boldWeight: 300;

    /* Font */
    --mainfont:'Pretendard';
    --pointfont:'EB Garamond';
    --koSerif:'Noto Serif KR';

    /* Color */
    --BodyColor : #faf8ef;
    --pointcolor: #271803 ;
    --subcolor: #734728;
    --sub2color: #482c03;
    --sub3color: #f2d8a7;
    --backcolor: #fcfcfd;
    --textcolor: #1c1c1c;

    --gray : #767676;
    --dark-gray : #838383;
    --light-gray   : #acacac;    
}

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

/* =============== Color ===============*/
.point-color    { color: var(--pointcolor)!important; color: var(--pointcolor); }
.sub-color      { color: var(--subcolor)!important; color: var(--subcolor); }
.sub2-color     { color: var(--sub2color)!important; color: var(--sub2color); }
.sub3-color     { color: var(--sub3color)!important; color: var(--sub3color); }
.back-color     { color: var(--backcolor)!important; color: var(--backcolor); }

.point-bg       { background-color: var(--pointcolor); }
.sub-bg         { background-color: var(--subcolor); }
.sub2-bg        { background-color: var(--sub2color); }
.sub3-bg        { background-color: var(--sub3color); }
.back-bg        { background-color: var(--backcolor); }

/* ==================================================================
    Reset 초기화
===================================================================== */

*{ outline:none; }
*, :after, :before { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video
{ margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; }

html, body {
    font-family: var(--mainfont), sans-serif; font-weight: var(--boldWeight); line-height: 1.4;
    word-break:break-all; color: var(--textcolor);
}
body {
    -webkit-font-smoothing: antialiased; -font-smoothing: antialiased;
    letter-spacing: -1.2px; background-color: var(--BodyColor);
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
div,span,p,ul,ol,li,dd,dt,dl,h1,h2,h3,h4,h5,h6 { word-break: keep-all; }
h1, h2, h3, h4, h5, h6 { font-size: 1em; margin: 0; padding: 0; font-family: inherit; }
a { text-decoration:none; color: var(--textcolor); -webkit-tap-highlight-color: transparent; }
button{ border:none; background-color:transparent; cursor: pointer; }
ul,li, ol, dl,dt,dd { list-style:none; }
b, strong { font-weight: 600; }
small{ font-size:0.9em; vertical-align: text-bottom; }
tbody, tfoot, thead, tr, th, td{ vertical-align: middle; }
br{ font-family:sans-serif; }
img{
    image-rendering: -moz-auto;         /* Firefox */
    image-rendering:   -o-auto;         /* Opera */
    image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
    image-rendering: auto;
    -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
    max-width: 100%;
    display: block;
}
input, button,textarea, select { margin:0; padding:0; font-family: var(--mainfont), sans-serif; font-size:1em; }
input[type="submit"] { width: auto; }
input[type="button"], input[type="text"], input[type="email"],
input[type="search"], input[type="password"], textarea, input[type="submit"]
{ appearance: none; -webkit-appearance: none; outline: none; }

input:focus, textarea:focus { border-color: #585858; outline: none; }
input[type="button"]:focus{ outline: none; }
select::-ms-expand{ display:none; }

::-webkit-input-placeholder { color: #6f6f6f; text-overflow: ellipsis; }
::-moz-placeholder { color: #6f6f6f; text-overflow: ellipsis; opacity:1; }
::-ms-input-placeholder { color: #6f6f6f; text-overflow: ellipsis; opacity:1; }

/* Scroll관련 */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); box-shadow: inset 0 0 6px rgba(0,0,0,0.1); border-radius: 5px; background-color: rgba(220, 220, 220, 0.3); }
::-webkit-scrollbar-thumb { background-clip: padding-box; border-radius: 5px; background: var(--pointcolor); border: 1px solid transparent; }

@media (max-width: 500px) {
    div,span,p,ul,ol,li,dd,dt,dl,h1,h2,h3,h4,h5,h6{ word-break: keep-all; }
}

/* ===== Basic ===== */
html,body{ font-size:16px; letter-spacing: -1px; }
@media (max-width:1544px)   { html, body { font-size: 14px; } }
@media (max-width:1240px)   { html, body { font-size: 13px; } }
@media (max-width:990px)    { html, body { font-size: 12px; } }
@media (max-width:768px)    { html, body { font-size: 14px; } }

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

.color-gray           { color: var(--gray); }
.color-dark-gray      { color: var(--dark-gray); }
.color-light-gray     { color: var(--light-gray); }

.bg-white             { background-color:#ffffff; }
.bg-black             { background-color:#000000; }


.bg-gray              { background-color: var(--gray); }
.bg-dark-gray         { background-color: var(--dark-gray); }
.bg-light-gray        { background-color: var(--light-gray); }

/* ========== Font size (16px 기준) ========== */
.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-90  {font-size: 4.625rem;}
    .font-100 {font-size: 5.250rem;}
    .font-120 {font-size: 5.500rem;}
}

/* ========== 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 =============== */

.ls-00 { letter-spacing: 0; }
.ls-01 { letter-spacing: -1px; }
.ls-02 { letter-spacing: -2px; }
.ls-03 { letter-spacing: -3px; }
.ls-04 { letter-spacing: -4px; }
.ls-05 { letter-spacing: -5px; }
.ls-06 { letter-spacing: -6px; }
.ls-07 { letter-spacing: -7px; }
.ls-08 { letter-spacing: -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-80 { letter-spacing: 8px; }
.ls-100 { letter-spacing: 10px; }

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

.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;}
.flex-end {display: flex; justify-content: flex-end;}

.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 Common ==========*/
.section       { padding: 200px 0; }
.section_mini  { padding: 150px 0; }
.section-left  { padding-left : calc( (100% - var(--layoutWidth) ) / 2); width:100%; }
.section-right { padding-right: calc( (100% - var(--layoutWidth) ) / 2); width:100%; }
.section-left_mini  { padding-left : calc( (100% - var( --layoutWidthMini) ) / 2); width:100%; }
.section-right_mini { padding-right: calc( (100% - var( --layoutWidthMini) ) / 2); width:100%; }

.container { max-width: var(--layoutWidth); margin: auto; }
.container_mini{ max-width: var(--layoutWidthMini); margin: auto; }
@media (min-width:2000px) {
    .container { max-width: 90%; margin: auto; }
    .container_mini { max-width: 80%; margin: auto; }
}
@media (max-width:1544px) {
    .container{ width: 90%; margin:auto; padding: 0; }
    .container_mini{ width: 85%; margin: auto; }
    .section-left, .section-left_mini   { padding-left : 5%; }
    .section-right, .section-right_mini { padding-right: 5%; } 
}
@media (max-width: 990px) {
    .section       { padding: 150px 0; }
    .section_mini  { padding: 100px 0; }
}
@media (max-width: 768px) {
    /* .section, .section_mini { padding: 80px 0; } */
    .container_mini{ width: 87.5%; }
}

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

/* ========== Position & Visible ========== */
.hidden   { overflow: hidden; }
.relative { position: relative; }
.absolute { position: absolute; }

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

@media (max-width:1410px) { .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; } }

/* ===== Img & Width===== */
.img-responsive { max-width: 100%;display: block; }

.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 ===== */
.m-zero-auto { margin: 0 auto; }
.m-auto { margin: 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; }

.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; }

.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; }

/* ===== 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; }

.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; }

.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; }

/* Padding (em)*/
.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; }

/* ==================================================================
    기본 box style Layout
===================================================================== */
.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)); }
.flexList[layoutStyle="fullbox"] {--x-gap:0; --y-gap:10px; }
.flexList[layoutStyle="fullbox"] > .box{  width:calc(100% / var(--count)) }
/* boxCout */
[boxCount="2"]{ --count:2; }
[boxCount="3"]{ --count:3; }
[boxCount="4"]{ --count:4; }
[boxCount="5"]{ --count:5; }
[boxCount="6"]{ --count:6; }
[boxCount="7"]{ --count:7; }
[boxCount="8"]{ --count:8; }

@media (max-width:1544px){
    .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-wrap4{--count:4}
    .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}
}

/* radius */
.sec-radius-xl { border-radius: 5rem; }
.sec-radius-lg { border-radius: 4rem; }
.sec-radius { border-radius: 3rem; }
.sec-radius-md { border-radius: 2rem; }
.sec-radius-sm { border-radius: 1rem; }
.sec-radius-xs { border-radius: .5rem; }
.sec-radius-xxs { border-radius: .25rem; }

/* opacity */
.op-1 { opacity: .1; }
.op-2 { opacity: .2; }
.op-3 { opacity: .3; }
.op-4 { opacity: .4; }
.op-5 { opacity: .5; }
.op-6 { opacity: .6; }
.op-7 { opacity: .7; }
.op-8 { opacity: .8; }
.op-9 { opacity: .9; }

/* ==================================================================
    Animation 및 효과 설정부분
===================================================================== */

/* ========== Aos (fade) ========== */
[data-aos=fade-up2] { transform: translate3d(0, 30px, 0); }
[data-aos=fade-down2] { transform: translate3d(0, -30px, 0); }
[data-aos=fade-right2] { transform: translate3d(-30px, 0, 0); }
[data-aos=fade-left2] { transform: translate3d(30px, 0, 0); }
[data-aos=fade-up-right2] { transform: translate3d(-30px, 30px, 0); }
[data-aos=fade-up-left2] { transform: translate3d(30px, 30px, 0); }
[data-aos=fade-down-right2] { transform: translate3d(-30px, -30px, 0); }
[data-aos=fade-down-left2] { transform: translate3d(30px, -30px, 0); }
[data-aos=fade-in] { transform: translate3d(0, 0, 0); }
/* ========== Aos (zoom) ========== */
[data-aos*="bg-zoom-out"]{transform: scale(1.1)}
[data-aos*="bg-zoom-out"].aos-animate {transform: scale(1);}
[data-aos*="bg-zoom-in"]{transform: scale(1)}
[data-aos*="bg-zoom-in"].aos-animate {transform: scale(1.1);}

/* ========== Aos (reveal) ========== */
[data-aos="reveal-line"]{clip-path:polygon(0 0,0 0,0 100%,0 100%);}
[data-aos="reveal-line"].aos-animate {clip-path: polygon(0 0,100% 0,100% 100%,0 100%)}
[data-aos="reveal-line-revers"]{clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%)}
[data-aos="reveal-line-revers"].aos-animate {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)}

[data-aos="reveal-line-half"]{clip-path:polygon(0 0,50% 0,50% 100%,0 100%);}
[data-aos="reveal-line-half"].aos-animate {clip-path: polygon(0 0,100% 0,100% 100%,0 100%)}
[data-aos="reveal-line-half-revers"]{clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%);}
[data-aos="reveal-line-half-revers"].aos-animate {clip-path: polygon(0 0,100% 0,100% 100%,0% 100%)}

[data-aos="reveal-top"]{clip-path:polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);}
[data-aos="reveal-top"].aos-animate {clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);}
[data-aos="reveal-bottom"]{clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);}
[data-aos="reveal-bottom"].aos-animate {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
[data-aos="reveal-circle"]{clip-path: circle(0% at 50% 50%);}
[data-aos="reveal-circle"].aos-animate {clip-path:  circle(100% at 50% 50%);}
[data-aos="reveal-open"]{clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%)}
[data-aos="reveal-open"].aos-animate {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)}


/* ========== Aos (animation 효과로 설정) ========== */
[data-aos="title"]{ opacity: 0;}
[data-aos="title"].aos-animate {animation: title 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;}
[data-aos="tit_mini"]{ opacity: 0;}
[data-aos="tit_mini"].aos-animate {animation: tit_mini 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;}
[data-aos="focus"]{ opacity: 0;}
[data-aos="focus"].aos-animate {animation: focus 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}

/* ========== Animation ========== */
@keyframes title    {0% {letter-spacing: -0.5em;opacity: 0;} 40% {opacity: 0.6;}  100% {opacity: 1;} }
@keyframes tit_mini {0% {letter-spacing: 0.5em;opacity: 0;}  40% {opacity: 0.6;}  100% {letter-spacing: 0;opacity: 1;}}
@keyframes focus    {0% {-webkit-filter: blur(12px);filter: blur(12px);opacity: 0;}  100% {-webkit-filter: blur(0px);filter: blur(0px);opacity: 1;}}
@keyframes cycleM   {0% {transform:  translateY(0) scale(1);}    100% {transform: translateY(1.5rem) scale(0.95)}}
@keyframes rotate   {from{ transform: rotate(0); }to{ transform: rotate(360deg); }}
@keyframes scroll   {0% {transform: translate(-50%, 0);opacity: 0;} 40% {opacity: 1;}80% {transform: translate(-50%, 1.4rem);opacity: 0;}100% {opacity: 0;}}
@keyframes bigger   {0%{transform: scale(0); opacity:1;} 100%{transform: scale(5); opacity:0;}}
@keyframes bounce   {to {transform: translateX(2rem);opacity: 0;}}