/* Reset */
*{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-size:100%;font:inherit;vertical-align:baseline;outline:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
html, body{height:100%}
body,th,td,input,select,textarea,button,p{color:#333; line-height:1.5; font-weight:400; font-family:'Roboto', Helvetica, Arial, sans-serif}
button{cursor:pointer}
a{text-decoration:none; color:inherit; /*transition:all 0.3s ease*/}
a:hover{text-decoration:none}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block}
dl, ol, ul, menu, li{list-style:none}
i,em,address{font-style:italic;font-weight:normal}
input, select, button, textarea{vertical-align:middle;outline:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:none;background:inherit}
input[type=”button”], input[type=”submit”], input[type="radio"], input[type="checkbox"], /*input[type="text"]*/ button{transition:all 0.2s ease}
/* hr{display:none} */
strong{font-weight:600}
table{border-collapse:collapse;border-spacing:0}
img{border:0;max-width:100%;vertical-align:middle}
fieldset{border:none}
body{-webkit-text-size-adjust:100%}
sup{vertical-align:super; font-size:smaller}
sub{vertical-align:sub; font-size:smaller}
code{color:#ea4c89}
/* IOS input 초기화 */
input, select, button, textarea{-webkit-border-radius:0; /* 모서리 스타일 제거 */ -webkit-appearance:none; /* 인풋내 그림자 제거 */ }


:root{
  /* container max-width 설정 */
  --container-xs:  650px;  /* 필요시 사용 */
  --container-sm:  700px;
  --container-md:  980px;
  --container-lg:  1140px;
  --container-xl:  1280px; /* 필요시 사용 */
  --container-xxl: 1400px; /* 필요시 사용 */
  --container-xxxl:1600px; /* 필요시 사용 */
  /* container 좌우 패딩 설정 */
  --container-w-pd:40px;

  /* single 본문 가로 설정 */
  --single-xxlg-width:var(--container-xxxl);
  --single-xlg-width:var(--container-xl);
  --single-lg-width:var(--container-md);
  --single-base-width:var(--container-xs);
}


/* Grid system
768  이상 --container-xs,
1070 이상 --container-sm,
1260 이상 --container-md,
1400 이상 --container-lg
*/
@-ms-viewport{width:device-width}html{box-sizing:border-box;-ms-overflow-style:scrollbar}*,::after,::before{box-sizing:inherit}
.container,
.container-xs,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.container-xxxl,
.container-fluid{width:90%; margin-right:auto; margin-left:auto; padding-left:0; padding-right:0}
@media(min-width:576px){
  .container,
  .container-xs,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl,
  .container-xxxl,
  .container-fluid{max-width:inherit}
}
@media(min-width:768px){
  .container     {max-width:var(--container-sm)}
  .container-xs  {max-width:var(--container-sm)}
  .container-sm  {max-width:var(--container-sm)}
  .container-md  {max-width:var(--container-sm)}
  .container-lg  {max-width:var(--container-sm)}
  .container-xl  {max-width:var(--container-sm)}
  .container-xxl {max-width:var(--container-sm)}
  .container-xxxl{max-width:var(--container-sm)}
  .container,
  .container-xs,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl,
  .container-xxxl,
  .container-fluid{width:100%; padding-left:var(--container-w-pd); padding-right:var(--container-w-pd)}
}
@media(min-width:1070px){
  .container     {max-width:var(--container-sm)}
  .container-xs  {max-width:var(--container-xs)}
  .container-sm  {max-width:var(--container-sm)}
  .container-md  {max-width:var(--container-md)}
  .container-lg  {max-width:var(--container-lg)}
  .container-xl  {max-width:var(--container-xl)}
  .container-xxl {max-width:var(--container-xxl)}
  .container-xxxl{max-width:var(--container-xxxl)}
  .container{max-width:var(--container-md)}
}
@media(min-width:1260px){
  .container{max-width:var(--container-lg)}
}
@media(min-width:1400px){
  .container{max-width:var(--container-xl)}
}


:root{
/* global color */
/* color / white / black : 그레이스케일 컬러 */
--white-1:  rgba(255,255,255,.01);
--white-2:  rgba(255,255,255,.02);
--white-3:  rgba(255,255,255,.03);
--white-4:  rgba(255,255,255,.04);
--white-5:  rgba(255,255,255,.05);
--white-6:  rgba(255,255,255,.06);
--white-7:  rgba(255,255,255,.07);
--white-8:  rgba(255,255,255,.08);
--white-9:  rgba(255,255,255,.09);
--white-10: rgba(255,255,255,.1);
--white-20: rgba(255,255,255,.2);
--white-30: rgba(255,255,255,.3);
--white-40: rgba(255,255,255,.4);
--white-50: rgba(255,255,255,.5);
--white-60: rgba(255,255,255,.6);
--white-70: rgba(255,255,255,.7);
--white-80: rgba(255,255,255,.8);
--white-90: rgba(255,255,255,.9);
--white-100:rgba(255,255,255,1);

--black-1:  rgba(0,0,0,.01);
--black-2:  rgba(0,0,0,.02);
--black-3:  rgba(0,0,0,.03);
--black-4:  rgba(0,0,0,.04);
--black-5:  rgba(0,0,0,.05);
--black-6:  rgba(0,0,0,.06);
--black-7:  rgba(0,0,0,.07);
--black-8:  rgba(0,0,0,.08);
--black-9:  rgba(0,0,0,.09);
--black-10: rgba(0,0,0,.1);
--black-15: rgba(0,0,0,.15);
--black-20: rgba(0,0,0,.2);
--black-25: rgba(0,0,0,.25);
--black-30: rgba(0,0,0,.3);
--black-35: rgba(0,0,0,.35);
--black-40: rgba(0,0,0,.4);
--black-45: rgba(0,0,0,.45);
--black-50: rgba(0,0,0,.5);
--black-55: rgba(0,0,0,.55);
--black-60: rgba(0,0,0,.6);
--black-65: rgba(0,0,0,.65);
--black-70: rgba(0,0,0,.7);
--black-75: rgba(0,0,0,.75);
--black-80: rgba(0,0,0,.8);
--black-85: rgba(0,0,0,.85);
--black-90: rgba(0,0,0,.9);
--black-95: rgba(0,0,0,.95);
--black-100:rgba(0,0,0,1);

--gray-25:  #F9F9F9;
--gray-50:  #F5F5F5;
--gray-75:  #E9E9E9;
--gray-100: #E0E0E0;
--gray-200: #C6C6C6;
--gray-300: #A8A8A8;
--gray-400: #8D8D8D;
--gray-500: #6F6F6F;
--gray-600: #525252;
--gray-700: #393939;
--gray-800: #262626;
--gray-900: #161616;

--gray-opacity-50:  rgba(0,23,51,0.02);
--gray-opacity-100: rgba(2,32,71,0.05);
--gray-opacity-200: rgba(0,27,55,0.1);
--gray-opacity-300: rgba(0,29,58,0.18);
--gray-opacity-400: rgba(0,29,54,0.31);
--gray-opacity-500: rgba(3,24,50,0.46);
--gray-opacity-600: rgba(0,19,43,0.58);
--gray-opacity-700: rgba(3,18,40,0.7);
--gray-opacity-800: rgba(0,12,30,0.8);
--gray-opacity-900: rgba(2,9,19,0.91);

--gray-cool-25:  #FCFCFD;
--gray-cool-50:  #F9FAFB;
--gray-cool-100: #EEF0F3;
--gray-cool-200: #E3E6ED;
--gray-cool-300: #D0D5DD;
--gray-cool-400: #98A2B3;
--gray-cool-500: #667085;
--gray-cool-600: #475467;
--gray-cool-700: #344054;
--gray-cool-800: #1D2939;
--gray-cool-900: #101828;

--green-25:  #F4FFF3;
--green-50:  #E3F7E7;
--green-100: #BDEBC5;
--green-200: #8FDE9F;
--green-300: #57D276;
--green-400: #06C755;
--green-500: #00BC33;
--green-600: #00AC2A;
--green-700: #009A1C;
--green-800: #006900;
--green-900: #013600;

--yellow-25:  #FFFCF5;
--yellow-50:  #FFFCE4;
--yellow-100: #FFF7BE;
--yellow-200: #FFF192;
--yellow-300: #FFEC65;
--yellow-400: #FDE73D;
--yellow-500: #FEE500;
--yellow-600: #FDD100;
--yellow-700: #FCB900;
--yellow-800: #FC9F00;
--yellow-900: #FA7300;

--orange-25:  #FFFAF5;
--orange-50:  #FFF6ED;
--orange-100: #FFEAD5;
--orange-200: #FDDCAB;
--orange-300: #FEB273;
--orange-400: #FD853A;
--orange-500: #FB6514;
--orange-600: #EC4A0A;
--orange-700: #C4320A;
--orange-800: #9C2A10;
--orange-900: #7E2410;

--red-25:  #FFF5F6;
--red-50:  #FFE9EE;
--red-100: #FFC9D2;
--red-200: #F99298;
--red-300: #F3636F;
--red-400: #FF334B;
--red-500: #FF002D;
--red-600: #F6002E;
--red-700: #E40028;
--red-800: #D80020;
--red-900: #C80013;

--rose-25:  #FFF5F6;
--rose-50:  #FFF1F3;
--rose-100: #FFE4E8;
--rose-200: #FECDD6;
--rose-300: #FEA3B4;
--rose-400: #FD6F8E;
--rose-500: #F63D68;
--rose-600: #E31B54;
--rose-700: #C01048;
--rose-800: #A11043;
--rose-900: #89123E;

--pink-25:  #FEF6FB;
--pink-50:  #FDF2FA;
--pink-100: #FCE7F6;
--pink-200: #FCCEEE;
--pink-300: #FAA7E0;
--pink-400: #F670C7;
--pink-500: #EE46BC;
--pink-600: #DD2590;
--pink-700: #C11574;
--pink-800: #9E165F;
--pink-900: #851651;

--purple-25:  #FAFAFF;
--purple-50:  #F4F3FF;
--purple-100: #EBE9FE;
--purple-200: #D9D6FE;
--purple-300: #BDB4FE;
--purple-400: #9B8AFB;
--purple-500: #7A5AF8;
--purple-600: #6938EF;
--purple-700: #5925DC;
--purple-800: #4A1FB8;
--purple-900: #3E1C96;

--indigo-25:  #F5F8FF;
--indigo-50:  #EEF4FF;
--indigo-100: #E0EAFF;
--indigo-200: #C7D7FE;
--indigo-300: #A4BCFD;
--indigo-400: #8098F9;
--indigo-500: #6172F3;
--indigo-600: #444CE7;
--indigo-700: #3538CD;
--indigo-800: #2D31A6;
--indigo-900: #2D3282;

--blue-gray-25:  #FCFCFD;
--blue-gray-50:  #F8F9FC;
--blue-gray-100: #EAECF5;
--blue-gray-200: #D5D9EB;
--blue-gray-300: #AFB5D9;
--blue-gray-400: #717BBC;
--blue-gray-500: #4E5BA6;
--blue-gray-600: #3E4784;
--blue-gray-700: #363F72;
--blue-gray-800: #293056;
--blue-gray-900: #101323;

--blue-25:  #F5FAFF;
--blue-50:  #EEF7FF;
--blue-100: #CBE8FF;
--blue-200: #A7D9FF;
--blue-300: #68BBFF;
--blue-400: #329CFF;
--blue-500: #067DFD;
--blue-600: #0062E5;
--blue-700: #0048C8;
--blue-800: #0231A6;
--blue-900: #072182;

--blue-light-25:  #F5FBFF;
--blue-light-50:  #F0F9FF;
--blue-light-100: #E0F2FE;
--blue-light-200: #B9E6FE;
--blue-light-300: #7CD4FD;
--blue-light-400: #36BFFA;
--blue-light-500: #0BA5EC;
--blue-light-600: #0086C9;
--blue-light-700: #026AA2;
--blue-light-800: #065986;
--blue-light-900: #0B4A6F;

--color-watv:  #4F67ED;
--color-naver: #03C75A;
--color-kakao: #FEE500;
--color-toss:  #3182f6;

--white: #fff;
--black: #000;
--transparency:transparent;


/* radius */
--radius-none:  0;
--radius-xs:    2px;
--radius-sm:    4px;
--radius-md:    6px;
--radius-lg:    8px;
--radius-xl:    10px;
--radius-2xl:   12px;
--radius-3xl:   14px;
--radius-4xl:   16px;
--radius-5xl:   20px;
--radius-6xl:   22px;
--radius-7xl:   24px;
--radius-circle:999px;


/* semantic */
/* color / main */
--smt-color-primary:var(--color-watv);
--smt-color-sub1:   var(--blue-400);
--smt-color-sub2:   var(--blue-light-400);
--smt-color-sub3:   var(--indigo-500);
--smt-color-sub4:   var(--purple-500);
--smt-color-sub5:   var(--blue-gray-500);
--smt-color-link:   var(--color-toss);

/* color / state */
--smt-color-complete:var(--blue-400);
--smt-color-success: var(--green-500);
--smt-color-danger:  var(--red-600);
--smt-color-warning: var(--yellow-700);
--smt-color-info:    var(--blue-light-400);
--smt-color-white:   var(--white-100);
--smt-color-black:   var(--black-95);

/* color / brand */
--smt-color-brand-blue:  var(--color-toss);
--smt-color-brand-red:   var();
--smt-color-brand-green: var(--color-naver);
--smt-color-brand-yellow:var(--color-kakao);

/* radius */
--smt-radius-none:   var(--radius-none);
--smt-radius-primary:var(--radius-md);
--smt-radius-xs:     var(--radius-xs);
--smt-radius-sm:     var(--radius-sm);
--smt-radius-md:     var(--radius-md);
--smt-radius-lg:     var(--radius-lg);
--smt-radius-xl:     var(--radius-xl);
--smt-radius-2xl:    var(--radius-2xl);
--smt-radius-3xl:    var(--radius-3xl);
--smt-radius-4xl:    var(--radius-4xl);
--smt-radius-5xl:    var(--radius-5xl);
--smt-radius-6xl:    var(--radius-6xl);
--smt-radius-7xl:    var(--radius-7xl);
--smt-radius-circle: var(--radius-circle);


/* component */
/* color / ui */
--comp-color-bg-basic:      var(--black-3);
--comp-color-border:        var(--black-20);

--comp-color-active:        var(--smt-color-brand-blue);
--comp-color-gray-light:    var(--black-20);
--comp-color-gray:          var(--black-70);
--comp-color-gray-dark:     var(--black-50);
--comp-color-gray-deep:     var(--black-90);
--comp-color-disable:       var(--black-25);

--comp-border-shadow:         inset 0 0 0 1px rgba(0,0,0,0.15);
--comp-border-shadow-primary: inset 0 0 0 1px var(--smt-color-primary);
--comp-border-shadow-complete:inset 0 0 0 1px var(--smt-color-complete);
--comp-border-shadow-success: inset 0 0 0 1px var(--smt-color-success);
--comp-border-shadow-danger:  inset 0 0 0 1px var(--smt-color-danger);
--comp-border-shadow-warning: inset 0 0 0 1px var(--smt-color-warning);
--comp-border-shadow-info:    inset 0 0 0 1px var(--smt-color-info);
--comp-border-shadow-white:   inset 0 0 0 1px var(--smt-color-white);
--comp-border-shadow-black:   inset 0 0 0 1px var(--smt-color-black);
--comp-shadow:                0 1px 4px 0 rgba(0,0,0,0.15);

/* color / text */
--comp-color-text-component:  var(--black-70); // 기본 텍스트 컬러
--comp-color-text-placeholder:var(--black-20);
--comp-color-text-disable:    var(--black-10);
--comp-color-text-heading:    var(--black-80);
--comp-color-text-body:       var(--black-60);
--comp-color-text-gray-light: var(--black-20);
--comp-color-text-gray:       var(--black-40);
--comp-color-text-gray-dark:  var(--black-60);
--comp-color-text-gray-deep:  var(--black-90);
--comp-color-text-link:       var(--smt-color-link);

/* color / border */
--comp-color-border-primary:   var(--black-100);
--comp-color-border-brand:     var(--smt-color-brand-blue);
--comp-color-border-gray-light:var(--black-75);
--comp-color-border-gray:      var(--black-20);
--comp-color-border-gray-dark: var(--black-50);
--comp-color-border-gray-deep: var(--black-90);
--comp-color-border-disable:   var(--black-70);
}


/* Common Style */

/* dark */
.dark,
.dark *{color:#FFF}
.dark-important,
.dark-important *{color:#FFF !important}


/* .style-lined{box-shadow:var(--border-shadow) var(--color-border)}
.style-filled{color:#FFF; background-color:var(--color-primary)}
.style-tonal{background-color:var(--color-style-tonal)}
.style-outline{box-shadow:var(--border-shadow) var(--color-style-text); background-color:transparent}
.style-shadow{box-shadow:var(--shadow-btn); background-color:#FFF}
.style-text{background-color:transparent; padding-left:12px; padding-right:12px}
.style-text-tight{padding:0; height:inherit; background-color:transparent; border-radius:0; overflow:visible}

.btn-icon-only{padding:initial; width:40px; height:var(--comp-height); width:var(--btn-width)}

.color-primary    {color:var(--comp-color-primary)}
.color-secondary-1{color:var(--color-secondary-1)}
.color-secondary-2{color:var(--color-secondary-2)}
.color-secondary-3{color:var(--color-secondary-3)}
.color-secondary-4{color:var(--color-secondary-4)}
.color-secondary-5{color:var(--color-secondary-5)}
.color-bg-primary    {background-color:var(--color-primary)}
.color-bg-secondary-1{background-color:var(--color-secondary-1)}
.color-bg-secondary-2{background-color:var(--color-secondary-2)}
.color-bg-secondary-3{background-color:var(--color-secondary-3)}
.color-bg-secondary-4{background-color:var(--color-secondary-4)}
.color-bg-secondary-5{background-color:var(--color-secondary-5)}
.color-complete{color:var(--color-complete)}
.color-success {color:var(--color-success)}
.color-danger  {color:var(--color-danger)}
.color-warning {color:var(--color-warning)}
.color-white   {color:var(--color-white)}
.color-black   {color:var(--color-black)}

.style-filled.color-primary{background-color:var(--color-primary); color:#FFF}
.style-filled.color-complete{background-color:var(--color-complete); color:#FFF}
.style-filled.color-success{background-color:var(--color-success); color:#FFF}
.style-filled.color-danger{background-color:var(--color-danger); color:#FFF}
.style-filled.color-warning{background-color:var(--color-warning); color:#FFF}
.style-filled.color-white{background-color:var(--color-white); color:var(--color-gray-700)}
.style-filled.color-black{background-color:var(--color-black); color:#FFF}

.style-lined.color-white{background-color:var(--color-white); color:var(--color-gray-700)} */




/* .style-tonal.color-complete{color:var(--color-complete); background-color:var(--color-complete-light)}
.style-tonal.color-success{color:var(--color-success); background-color:var(--color-success-light)}
.style-tonal.color-danger{color:var(--color-danger); background-color:var(--color-danger-light)}
.style-tonal.color-warning{color:#e4910b; background-color:var(--color-warning-light)}
.style-lined.color-warning,
.style-shadow.color-warning{color:#e4910b}

.style-outline.color-primary{color:var(--color-primary); box-shadow:var(--border-shadow) var(--color-primary)}
.style-outline.color-complete{color:var(--color-complete); box-shadow:var(--border-shadow) var(--color-complete)}
.style-outline.color-success{color:var(--color-success); box-shadow:var(--border-shadow) var(--color-success)}
.style-outline.color-danger{color:var(--color-danger); box-shadow:var(--border-shadow) var(--color-danger)}
.style-outline.color-warning{color:#e4910b; box-shadow:inset 0 0 0 1px #e4910b} */


.color-gray-25 {color:var(--gray-25)}
.color-gray-50 {color:var(--gray-50)}
.color-gray-75 {color:var(--gray-50)}
.color-gray-100{color:var(--gray-100)}
.color-gray-200{color:var(--gray-200)}
.color-gray-300{color:var(--gray-300)}
.color-gray-400{color:var(--gray-400)}
.color-gray-500{color:var(--gray-500)}
.color-gray-600{color:var(--gray-600)}
.color-gray-700{color:var(--gray-700)}
.color-gray-800{color:var(--gray-800)}
.color-gray-900{color:var(--gray-900)}

.color-bg-gray-25 {background-color:var(--gray-25)}
.color-bg-gray-50 {background-color:var(--gray-50)}
.color-bg-gray-75 {background-color:var(--gray-50)}
.color-bg-gray-100{background-color:var(--gray-100)}
.color-bg-gray-200{background-color:var(--gray-200)}
.color-bg-gray-300{background-color:var(--gray-300)}
.color-bg-gray-400{background-color:var(--gray-400)}
.color-bg-gray-500{background-color:var(--gray-500)}
.color-bg-gray-600{background-color:var(--gray-600)}
.color-bg-gray-700{background-color:var(--gray-700)}
.color-bg-gray-800{background-color:var(--gray-800)}
.color-bg-gray-900{background-color:var(--gray-900)}

.color-gray-cool-25 {color:var(--gray-cool-25)}
.color-gray-cool-50 {color:var(--gray-cool-50)}
.color-gray-cool-75 {color:var(--gray-cool-50)}
.color-gray-cool-100{color:var(--gray-cool-100)}
.color-gray-cool-200{color:var(--gray-cool-200)}
.color-gray-cool-300{color:var(--gray-cool-300)}
.color-gray-cool-400{color:var(--gray-cool-400)}
.color-gray-cool-500{color:var(--gray-cool-500)}
.color-gray-cool-600{color:var(--gray-cool-600)}
.color-gray-cool-700{color:var(--gray-cool-700)}
.color-gray-cool-800{color:var(--gray-cool-800)}
.color-gray-cool-900{color:var(--gray-cool-900)}

.color-bg-gray-cool-25 {background-color:var(--gray-cool-25)}
.color-bg-gray-cool-50 {background-color:var(--gray-cool-50)}
.color-bg-gray-cool-75 {background-color:var(--gray-cool-50)}
.color-bg-gray-cool-100{background-color:var(--gray-cool-100)}
.color-bg-gray-cool-200{background-color:var(--gray-cool-200)}
.color-bg-gray-cool-300{background-color:var(--gray-cool-300)}
.color-bg-gray-cool-400{background-color:var(--gray-cool-400)}
.color-bg-gray-cool-500{background-color:var(--gray-cool-500)}
.color-bg-gray-cool-600{background-color:var(--gray-cool-600)}
.color-bg-gray-cool-700{background-color:var(--gray-cool-700)}
.color-bg-gray-cool-800{background-color:var(--gray-cool-800)}
.color-bg-gray-cool-900{background-color:var(--gray-cool-900)}

.color-green-25 {color:var(--green-25)}
.color-green-50 {color:var(--green-50)}
.color-green-75 {color:var(--green-50)}
.color-green-100{color:var(--green-100)}
.color-green-200{color:var(--green-200)}
.color-green-300{color:var(--green-300)}
.color-green-400{color:var(--green-400)}
.color-green-500{color:var(--green-500)}
.color-green-600{color:var(--green-600)}
.color-green-700{color:var(--green-700)}
.color-green-800{color:var(--green-800)}
.color-green-900{color:var(--green-900)}

.color-bg-green-25 {background-color:var(--green-25)}
.color-bg-green-50 {background-color:var(--green-50)}
.color-bg-green-75 {background-color:var(--green-50)}
.color-bg-green-100{background-color:var(--green-100)}
.color-bg-green-200{background-color:var(--green-200)}
.color-bg-green-300{background-color:var(--green-300)}
.color-bg-green-400{background-color:var(--green-400)}
.color-bg-green-500{background-color:var(--green-500)}
.color-bg-green-600{background-color:var(--green-600)}
.color-bg-green-700{background-color:var(--green-700)}
.color-bg-green-800{background-color:var(--green-800)}
.color-bg-green-900{background-color:var(--green-900)}

.color-yellow-25 {color:var(--yellow-25)}
.color-yellow-50 {color:var(--yellow-50)}
.color-yellow-75 {color:var(--yellow-50)}
.color-yellow-100{color:var(--yellow-100)}
.color-yellow-200{color:var(--yellow-200)}
.color-yellow-300{color:var(--yellow-300)}
.color-yellow-400{color:var(--yellow-400)}
.color-yellow-500{color:var(--yellow-500)}
.color-yellow-600{color:var(--yellow-600)}
.color-yellow-700{color:var(--yellow-700)}
.color-yellow-800{color:var(--yellow-800)}
.color-yellow-900{color:var(--yellow-900)}

.color-bg-yellow-25 {background-color:var(--yellow-25)}
.color-bg-yellow-50 {background-color:var(--yellow-50)}
.color-bg-yellow-75 {background-color:var(--yellow-50)}
.color-bg-yellow-100{background-color:var(--yellow-100)}
.color-bg-yellow-200{background-color:var(--yellow-200)}
.color-bg-yellow-300{background-color:var(--yellow-300)}
.color-bg-yellow-400{background-color:var(--yellow-400)}
.color-bg-yellow-500{background-color:var(--yellow-500)}
.color-bg-yellow-600{background-color:var(--yellow-600)}
.color-bg-yellow-700{background-color:var(--yellow-700)}
.color-bg-yellow-800{background-color:var(--yellow-800)}
.color-bg-yellow-900{background-color:var(--yellow-900)}

.color-orange-25 {color:var(--orange-25)}
.color-orange-50 {color:var(--orange-50)}
.color-orange-75 {color:var(--orange-50)}
.color-orange-100{color:var(--orange-100)}
.color-orange-200{color:var(--orange-200)}
.color-orange-300{color:var(--orange-300)}
.color-orange-400{color:var(--orange-400)}
.color-orange-500{color:var(--orange-500)}
.color-orange-600{color:var(--orange-600)}
.color-orange-700{color:var(--orange-700)}
.color-orange-800{color:var(--orange-800)}
.color-orange-900{color:var(--orange-900)}

.color-bg-orange-25 {background-color:var(--orange-25)}
.color-bg-orange-50 {background-color:var(--orange-50)}
.color-bg-orange-75 {background-color:var(--orange-50)}
.color-bg-orange-100{background-color:var(--orange-100)}
.color-bg-orange-200{background-color:var(--orange-200)}
.color-bg-orange-300{background-color:var(--orange-300)}
.color-bg-orange-400{background-color:var(--orange-400)}
.color-bg-orange-500{background-color:var(--orange-500)}
.color-bg-orange-600{background-color:var(--orange-600)}
.color-bg-orange-700{background-color:var(--orange-700)}
.color-bg-orange-800{background-color:var(--orange-800)}
.color-bg-orange-900{background-color:var(--orange-900)}

.color-red-25 {color:var(--red-25)}
.color-red-50 {color:var(--red-50)}
.color-red-75 {color:var(--red-50)}
.color-red-100{color:var(--red-100)}
.color-red-200{color:var(--red-200)}
.color-red-300{color:var(--red-300)}
.color-red-400{color:var(--red-400)}
.color-red-500{color:var(--red-500)}
.color-red-600{color:var(--red-600)}
.color-red-700{color:var(--red-700)}
.color-red-800{color:var(--red-800)}
.color-red-900{color:var(--red-900)}

.color-bg-red-25 {background-color:var(--red-25)}
.color-bg-red-50 {background-color:var(--red-50)}
.color-bg-red-75 {background-color:var(--red-50)}
.color-bg-red-100{background-color:var(--red-100)}
.color-bg-red-200{background-color:var(--red-200)}
.color-bg-red-300{background-color:var(--red-300)}
.color-bg-red-400{background-color:var(--red-400)}
.color-bg-red-500{background-color:var(--red-500)}
.color-bg-red-600{background-color:var(--red-600)}
.color-bg-red-700{background-color:var(--red-700)}
.color-bg-red-800{background-color:var(--red-800)}
.color-bg-red-900{background-color:var(--red-900)}

.color-rose-25 {color:var(--rose-25)}
.color-rose-50 {color:var(--rose-50)}
.color-rose-75 {color:var(--rose-50)}
.color-rose-100{color:var(--rose-100)}
.color-rose-200{color:var(--rose-200)}
.color-rose-300{color:var(--rose-300)}
.color-rose-400{color:var(--rose-400)}
.color-rose-500{color:var(--rose-500)}
.color-rose-600{color:var(--rose-600)}
.color-rose-700{color:var(--rose-700)}
.color-rose-800{color:var(--rose-800)}
.color-rose-900{color:var(--rose-900)}

.color-bg-rose-25 {background-color:var(--rose-25)}
.color-bg-rose-50 {background-color:var(--rose-50)}
.color-bg-rose-75 {background-color:var(--rose-50)}
.color-bg-rose-100{background-color:var(--rose-100)}
.color-bg-rose-200{background-color:var(--rose-200)}
.color-bg-rose-300{background-color:var(--rose-300)}
.color-bg-rose-400{background-color:var(--rose-400)}
.color-bg-rose-500{background-color:var(--rose-500)}
.color-bg-rose-600{background-color:var(--rose-600)}
.color-bg-rose-700{background-color:var(--rose-700)}
.color-bg-rose-800{background-color:var(--rose-800)}
.color-bg-rose-900{background-color:var(--rose-900)}

.color-pink-25 {color:var(--pink-25)}
.color-pink-50 {color:var(--pink-50)}
.color-pink-75 {color:var(--pink-50)}
.color-pink-100{color:var(--pink-100)}
.color-pink-200{color:var(--pink-200)}
.color-pink-300{color:var(--pink-300)}
.color-pink-400{color:var(--pink-400)}
.color-pink-500{color:var(--pink-500)}
.color-pink-600{color:var(--pink-600)}
.color-pink-700{color:var(--pink-700)}
.color-pink-800{color:var(--pink-800)}
.color-pink-900{color:var(--pink-900)}

.color-bg-pink-25 {background-color:var(--pink-25)}
.color-bg-pink-50 {background-color:var(--pink-50)}
.color-bg-pink-75 {background-color:var(--pink-50)}
.color-bg-pink-100{background-color:var(--pink-100)}
.color-bg-pink-200{background-color:var(--pink-200)}
.color-bg-pink-300{background-color:var(--pink-300)}
.color-bg-pink-400{background-color:var(--pink-400)}
.color-bg-pink-500{background-color:var(--pink-500)}
.color-bg-pink-600{background-color:var(--pink-600)}
.color-bg-pink-700{background-color:var(--pink-700)}
.color-bg-pink-800{background-color:var(--pink-800)}
.color-bg-pink-900{background-color:var(--pink-900)}

.color-purple-25 {color:var(--purple-25)}
.color-purple-50 {color:var(--purple-50)}
.color-purple-75 {color:var(--purple-50)}
.color-purple-100{color:var(--purple-100)}
.color-purple-200{color:var(--purple-200)}
.color-purple-300{color:var(--purple-300)}
.color-purple-400{color:var(--purple-400)}
.color-purple-500{color:var(--purple-500)}
.color-purple-600{color:var(--purple-600)}
.color-purple-700{color:var(--purple-700)}
.color-purple-800{color:var(--purple-800)}
.color-purple-900{color:var(--purple-900)}

.color-bg-purple-25 {background-color:var(--purple-25)}
.color-bg-purple-50 {background-color:var(--purple-50)}
.color-bg-purple-75 {background-color:var(--purple-50)}
.color-bg-purple-100{background-color:var(--purple-100)}
.color-bg-purple-200{background-color:var(--purple-200)}
.color-bg-purple-300{background-color:var(--purple-300)}
.color-bg-purple-400{background-color:var(--purple-400)}
.color-bg-purple-500{background-color:var(--purple-500)}
.color-bg-purple-600{background-color:var(--purple-600)}
.color-bg-purple-700{background-color:var(--purple-700)}
.color-bg-purple-800{background-color:var(--purple-800)}
.color-bg-purple-900{background-color:var(--purple-900)}

.color-indigo-25 {color:var(--indigo-25)}
.color-indigo-50 {color:var(--indigo-50)}
.color-indigo-75 {color:var(--indigo-50)}
.color-indigo-100{color:var(--indigo-100)}
.color-indigo-200{color:var(--indigo-200)}
.color-indigo-300{color:var(--indigo-300)}
.color-indigo-400{color:var(--indigo-400)}
.color-indigo-500{color:var(--indigo-500)}
.color-indigo-600{color:var(--indigo-600)}
.color-indigo-700{color:var(--indigo-700)}
.color-indigo-800{color:var(--indigo-800)}
.color-indigo-900{color:var(--indigo-900)}

.color-bg-indigo-25 {background-color:var(--indigo-25)}
.color-bg-indigo-50 {background-color:var(--indigo-50)}
.color-bg-indigo-75 {background-color:var(--indigo-50)}
.color-bg-indigo-100{background-color:var(--indigo-100)}
.color-bg-indigo-200{background-color:var(--indigo-200)}
.color-bg-indigo-300{background-color:var(--indigo-300)}
.color-bg-indigo-400{background-color:var(--indigo-400)}
.color-bg-indigo-500{background-color:var(--indigo-500)}
.color-bg-indigo-600{background-color:var(--indigo-600)}
.color-bg-indigo-700{background-color:var(--indigo-700)}
.color-bg-indigo-800{background-color:var(--indigo-800)}
.color-bg-indigo-900{background-color:var(--indigo-900)}

.color-blue-gray-25 {color:var(--blue-gray-25)}
.color-blue-gray-50 {color:var(--blue-gray-50)}
.color-blue-gray-75 {color:var(--blue-gray-50)}
.color-blue-gray-100{color:var(--blue-gray-100)}
.color-blue-gray-200{color:var(--blue-gray-200)}
.color-blue-gray-300{color:var(--blue-gray-300)}
.color-blue-gray-400{color:var(--blue-gray-400)}
.color-blue-gray-500{color:var(--blue-gray-500)}
.color-blue-gray-600{color:var(--blue-gray-600)}
.color-blue-gray-700{color:var(--blue-gray-700)}
.color-blue-gray-800{color:var(--blue-gray-800)}
.color-blue-gray-900{color:var(--blue-gray-900)}

.color-bg-blue-gray-25 {background-color:var(--blue-gray-25)}
.color-bg-blue-gray-50 {background-color:var(--blue-gray-50)}
.color-bg-blue-gray-75 {background-color:var(--blue-gray-50)}
.color-bg-blue-gray-100{background-color:var(--blue-gray-100)}
.color-bg-blue-gray-200{background-color:var(--blue-gray-200)}
.color-bg-blue-gray-300{background-color:var(--blue-gray-300)}
.color-bg-blue-gray-400{background-color:var(--blue-gray-400)}
.color-bg-blue-gray-500{background-color:var(--blue-gray-500)}
.color-bg-blue-gray-600{background-color:var(--blue-gray-600)}
.color-bg-blue-gray-700{background-color:var(--blue-gray-700)}
.color-bg-blue-gray-800{background-color:var(--blue-gray-800)}
.color-bg-blue-gray-900{background-color:var(--blue-gray-900)}

.color-blue-25 {color:var(--blue-25)}
.color-blue-50 {color:var(--blue-50)}
.color-blue-75 {color:var(--blue-50)}
.color-blue-100{color:var(--blue-100)}
.color-blue-200{color:var(--blue-200)}
.color-blue-300{color:var(--blue-300)}
.color-blue-400{color:var(--blue-400)}
.color-blue-500{color:var(--blue-500)}
.color-blue-600{color:var(--blue-600)}
.color-blue-700{color:var(--blue-700)}
.color-blue-800{color:var(--blue-800)}
.color-blue-900{color:var(--blue-900)}

.color-bg-blue-25 {background-color:var(--blue-25)}
.color-bg-blue-50 {background-color:var(--blue-50)}
.color-bg-blue-75 {background-color:var(--blue-50)}
.color-bg-blue-100{background-color:var(--blue-100)}
.color-bg-blue-200{background-color:var(--blue-200)}
.color-bg-blue-300{background-color:var(--blue-300)}
.color-bg-blue-400{background-color:var(--blue-400)}
.color-bg-blue-500{background-color:var(--blue-500)}
.color-bg-blue-600{background-color:var(--blue-600)}
.color-bg-blue-700{background-color:var(--blue-700)}
.color-bg-blue-800{background-color:var(--blue-800)}
.color-bg-blue-900{background-color:var(--blue-900)}

.color-blue-light-25 {color:var(--blue-light-25)}
.color-blue-light-50 {color:var(--blue-light-50)}
.color-blue-light-75 {color:var(--blue-light-50)}
.color-blue-light-100{color:var(--blue-light-100)}
.color-blue-light-200{color:var(--blue-light-200)}
.color-blue-light-300{color:var(--blue-light-300)}
.color-blue-light-400{color:var(--blue-light-400)}
.color-blue-light-500{color:var(--blue-light-500)}
.color-blue-light-600{color:var(--blue-light-600)}
.color-blue-light-700{color:var(--blue-light-700)}
.color-blue-light-800{color:var(--blue-light-800)}
.color-blue-light-900{color:var(--blue-light-900)}

.color-bg-blue-light-25 {background-color:var(--blue-light-25)}
.color-bg-blue-light-50 {background-color:var(--blue-light-50)}
.color-bg-blue-light-75 {background-color:var(--blue-light-50)}
.color-bg-blue-light-100{background-color:var(--blue-light-100)}
.color-bg-blue-light-200{background-color:var(--blue-light-200)}
.color-bg-blue-light-300{background-color:var(--blue-light-300)}
.color-bg-blue-light-400{background-color:var(--blue-light-400)}
.color-bg-blue-light-500{background-color:var(--blue-light-500)}
.color-bg-blue-light-600{background-color:var(--blue-light-600)}
.color-bg-blue-light-700{background-color:var(--blue-light-700)}
.color-bg-blue-light-800{background-color:var(--blue-light-800)}
.color-bg-blue-light-900{background-color:var(--blue-light-900)}




:root{
  --color-border:#d8dbdd;
  --border-shadow:inset 0 0 0 1px;
  --shadow-btn:0 1px 4px 0 rgba(0,0,0,0.15);
}


/*
  max-width
  200 ~ 1600 까지 10단위로 설정.
*/
.mw-200{max-width:200px}
.mw-210{max-width:210px}
.mw-220{max-width:220px}
.mw-230{max-width:230px}
.mw-240{max-width:240px}
.mw-250{max-width:250px}
.mw-260{max-width:260px}
.mw-270{max-width:270px}
.mw-280{max-width:280px}
.mw-290{max-width:290px}

.mw-300{max-width:300px}
.mw-310{max-width:310px}
.mw-320{max-width:320px}
.mw-330{max-width:330px}
.mw-340{max-width:340px}
.mw-350{max-width:350px}
.mw-360{max-width:360px}
.mw-370{max-width:370px}
.mw-380{max-width:380px}
.mw-390{max-width:390px}

.mw-400{max-width:400px}
.mw-410{max-width:410px}
.mw-420{max-width:420px}
.mw-430{max-width:430px}
.mw-440{max-width:440px}
.mw-450{max-width:450px}
.mw-460{max-width:460px}
.mw-470{max-width:470px}
.mw-480{max-width:480px}
.mw-490{max-width:490px}

.mw-500{max-width:500px}
.mw-510{max-width:510px}
.mw-520{max-width:520px}
.mw-530{max-width:530px}
.mw-540{max-width:540px}
.mw-550{max-width:550px}
.mw-560{max-width:560px}
.mw-570{max-width:570px}
.mw-580{max-width:580px}
.mw-590{max-width:590px}

.mw-600{max-width:600px}
.mw-610{max-width:610px}
.mw-620{max-width:620px}
.mw-630{max-width:630px}
.mw-640{max-width:640px}
.mw-650{max-width:650px}
.mw-660{max-width:660px}
.mw-670{max-width:670px}
.mw-680{max-width:680px}
.mw-690{max-width:690px}

.mw-700{max-width:700px}
.mw-710{max-width:710px}
.mw-720{max-width:720px}
.mw-730{max-width:730px}
.mw-740{max-width:740px}
.mw-750{max-width:750px}
.mw-760{max-width:760px}
.mw-770{max-width:770px}
.mw-780{max-width:780px}
.mw-790{max-width:790px}

.mw-800{max-width:800px}
.mw-810{max-width:810px}
.mw-820{max-width:820px}
.mw-830{max-width:830px}
.mw-840{max-width:840px}
.mw-850{max-width:850px}
.mw-860{max-width:860px}
.mw-870{max-width:870px}
.mw-880{max-width:880px}
.mw-890{max-width:890px}

.mw-900{max-width:900px}
.mw-910{max-width:910px}
.mw-920{max-width:920px}
.mw-930{max-width:930px}
.mw-940{max-width:940px}
.mw-950{max-width:950px}
.mw-960{max-width:960px}
.mw-970{max-width:970px}
.mw-980{max-width:980px}
.mw-990{max-width:990px}

.mw-1000{max-width:1000px}
.mw-1010{max-width:1010px}
.mw-1020{max-width:1020px}
.mw-1030{max-width:1030px}
.mw-1040{max-width:1040px}
.mw-1050{max-width:1050px}
.mw-1060{max-width:1060px}
.mw-1070{max-width:1070px}
.mw-1080{max-width:1080px}
.mw-1090{max-width:1090px}

.mw-1100{max-width:1100px}
.mw-1110{max-width:1110px}
.mw-1120{max-width:1120px}
.mw-1130{max-width:1130px}
.mw-1140{max-width:1140px}
.mw-1150{max-width:1150px}
.mw-1160{max-width:1160px}
.mw-1170{max-width:1170px}
.mw-1180{max-width:1180px}
.mw-1190{max-width:1190px}

.mw-1200{max-width:1200px}
.mw-1210{max-width:1210px}
.mw-1220{max-width:1220px}
.mw-1230{max-width:1230px}
.mw-1240{max-width:1240px}
.mw-1250{max-width:1250px}
.mw-1260{max-width:1260px}
.mw-1270{max-width:1270px}
.mw-1280{max-width:1280px}
.mw-1290{max-width:1290px}

.mw-1300{max-width:1300px}
.mw-1310{max-width:1310px}
.mw-1320{max-width:1320px}
.mw-1330{max-width:1330px}
.mw-1340{max-width:1340px}
.mw-1350{max-width:1350px}
.mw-1360{max-width:1360px}
.mw-1370{max-width:1370px}
.mw-1380{max-width:1380px}
.mw-1390{max-width:1390px}

.mw-1400{max-width:1400px}
.mw-1410{max-width:1410px}
.mw-1420{max-width:1420px}
.mw-1430{max-width:1430px}
.mw-1440{max-width:1440px}
.mw-1450{max-width:1450px}
.mw-1460{max-width:1460px}
.mw-1470{max-width:1470px}
.mw-1480{max-width:1480px}
.mw-1490{max-width:1490px}

.mw-1500{max-width:1500px}
.mw-1510{max-width:1510px}
.mw-1520{max-width:1520px}
.mw-1530{max-width:1530px}
.mw-1540{max-width:1540px}
.mw-1550{max-width:1550px}
.mw-1560{max-width:1560px}
.mw-1570{max-width:1570px}
.mw-1580{max-width:1580px}
.mw-1590{max-width:1590px}
.mw-1600{max-width:1600px}


/* sm 이상 해제 */
@media(min-width:576px){
  .mw-inherit-smfix{max-width:inherit}
}
/* md 이상 해제 */
@media(min-width:768px){
  .mw-inherit-mdfix{max-width:inherit}
}
/* lg 이상 해제 */
@media(min-width:1070px){
  .mw-inherit-lgfix{max-width:inherit}
}
/* xl 이상 해제 */
@media(min-width:1200px){
  .mw-inherit-xlfix{max-width:inherit}
}
/* xxl 이상 해제 */
@media(min-width:1400px){
  .mw-inherit-xxlfix{max-width:inherit}
}



/*
  opacity
  1 ~ 100 까지 1단위로 설정.
*/
.op-0{opacity:0}
.op-1{opacity:.01}
.op-2{opacity:.02}
.op-3{opacity:.03}
.op-4{opacity:.04}
.op-5{opacity:.05}
.op-6{opacity:.06}
.op-7{opacity:.07}
.op-8{opacity:.08}
.op-9{opacity:.09}
.op-10{opacity:.10}
.op-11{opacity:.11}
.op-12{opacity:.12}
.op-13{opacity:.13}
.op-14{opacity:.14}
.op-15{opacity:.15}
.op-16{opacity:.16}
.op-17{opacity:.17}
.op-18{opacity:.18}
.op-19{opacity:.19}
.op-20{opacity:.20}
.op-21{opacity:.21}
.op-22{opacity:.22}
.op-23{opacity:.23}
.op-24{opacity:.24}
.op-25{opacity:.25}
.op-26{opacity:.26}
.op-27{opacity:.27}
.op-28{opacity:.28}
.op-29{opacity:.29}
.op-30{opacity:.30}
.op-31{opacity:.31}
.op-32{opacity:.32}
.op-33{opacity:.33}
.op-34{opacity:.34}
.op-35{opacity:.35}
.op-36{opacity:.36}
.op-37{opacity:.37}
.op-38{opacity:.38}
.op-39{opacity:.39}
.op-40{opacity:.40}
.op-41{opacity:.41}
.op-42{opacity:.42}
.op-43{opacity:.43}
.op-44{opacity:.44}
.op-45{opacity:.45}
.op-46{opacity:.46}
.op-47{opacity:.47}
.op-48{opacity:.48}
.op-49{opacity:.49}
.op-50{opacity:.50}
.op-51{opacity:.51}
.op-52{opacity:.52}
.op-53{opacity:.53}
.op-54{opacity:.54}
.op-55{opacity:.55}
.op-56{opacity:.56}
.op-57{opacity:.57}
.op-58{opacity:.58}
.op-59{opacity:.59}
.op-60{opacity:.60}
.op-61{opacity:.61}
.op-62{opacity:.62}
.op-63{opacity:.63}
.op-64{opacity:.64}
.op-65{opacity:.65}
.op-66{opacity:.66}
.op-67{opacity:.67}
.op-68{opacity:.68}
.op-69{opacity:.69}
.op-70{opacity:.70}
.op-71{opacity:.71}
.op-72{opacity:.72}
.op-73{opacity:.73}
.op-74{opacity:.74}
.op-75{opacity:.75}
.op-76{opacity:.76}
.op-77{opacity:.77}
.op-78{opacity:.78}
.op-79{opacity:.79}
.op-80{opacity:.80}
.op-81{opacity:.81}
.op-82{opacity:.82}
.op-83{opacity:.83}
.op-84{opacity:.84}
.op-85{opacity:.85}
.op-86{opacity:.86}
.op-87{opacity:.87}
.op-88{opacity:.88}
.op-89{opacity:.89}
.op-90{opacity:.90}
.op-91{opacity:.91}
.op-92{opacity:.92}
.op-93{opacity:.93}
.op-94{opacity:.94}
.op-95{opacity:.95}
.op-96{opacity:.96}
.op-97{opacity:.97}
.op-98{opacity:.98}
.op-99{opacity:.99}
.op-100{opacity:1}


/*
  Border radius
  1 ~ 10 까지 1단위
  10 ~ 50 까지 5단위
*/
.br-0, .br-0 > * {border-radius:0 !important}
.br-1, .br-1 > * {border-radius:1px !important}
.br-2, .br-2 > * {border-radius:2px !important}
.br-3, .br-3 > * {border-radius:3px !important}
.br-4, .br-4 > * {border-radius:4px !important}
.br-5, .br-5 > * {border-radius:5px !important}
.br-6, .br-6 > * {border-radius:6px !important}
.br-7, .br-7 > * {border-radius:7px !important}
.br-8, .br-8 > * {border-radius:8px !important}
.br-9, .br-9 > * {border-radius:9px !important}
.br-10, .br-10 > * {border-radius:10px !important}
.br-15, .br-15 > * {border-radius:15px !important}
.br-20, .br-20 > * {border-radius:20px !important}
.br-25, .br-25 > * {border-radius:25px !important}
.br-30, .br-30 > * {border-radius:30px !important}
.br-35, .br-35 > * {border-radius:35px !important}
.br-40, .br-40 > * {border-radius:40px !important}
.br-45, .br-45 > * {border-radius:45px !important}
.br-50, .br-50 > * {border-radius:50px !important}

/* 원형 라운드 */
.br-round,
.br-round > *{border-radius:999px !important}

/* 미리 설정된 보더 제거 */
.br-none,
.br-none > *{border-radius:0 !important}


/* order First */
.order-first{order:-1}
/* sm 구간 전용 */
@media all and (min-width:576px) and (max-width:767px){ .order-first-sm{order:-1} }
/* md 구간 전용 */
@media all and (min-width:768px) and (max-width:1069px){ .order-first-md{order:-1} }
/* lg 구간 전용 */
@media all and (min-width:1070px) and (max-width:1199px){ .order-first-lg{order:-1} }
/* xl 구간 전용 */
@media all and (min-width:1200px) and (max-width:1399px){ .order-first-xl{order:-1} }

/* sm 이상 fix */
@media(min-width:576px){ .order-first-smfix{order:-1} }
/* md 이상 fix */
@media(min-width:768px){ .order-first-mdfix{order:-1} }
/* lg 이상 fix */
@media(min-width:1070px){ .order-first-lgfix{order:-1} }
/* xl 이상 fix */
@media(min-width:1200px){ .order-first-xlfix{order:-1} }
/* xxl 이상 */
@media(min-width:1400px){ .order-first-xxlfix{order:-1} }


/* Display */
.dp-i{display:inline}
.dp-b{display:block}
.dp-ib{display:inline-block}
.dp-f{display:flex}
.dp-n{display:none}
/* sm 이상 */
@media(min-width:576px){
  .dp-i-sm{display:inline}
  .dp-b-sm{display:block}
  .dp-ib-sm{display:inline-block}
  .dp-f-sm{display:flex}
  .dp-n-sm{display:none}
}
/* md 이상 */
@media(min-width:768px){
  .dp-i-md{display:inline}
  .dp-b-md{display:block}
  .dp-ib-md{display:inline-block}
  .dp-f-md{display:flex}
  .dp-n-md{display:none}
}
/* lg 이상 */
@media(min-width:1070px){
  .dp-i-lg{display:inline}
  .dp-b-lg{display:block}
  .dp-ib-lg{display:inline-block}
  .dp-f-lg{display:flex}
  .dp-n-lg{display:none}
}
/* xl 이상 */
@media(min-width:1200px){
  .dp-i-xl{display:inline}
  .dp-b-xl{display:block}
  .dp-ib-xl{display:inline-block}
  .dp-f-xl{display:flex}
  .dp-n-xl{display:none}
}
/* lg 이상 */
@media(min-width:1400px){
  .dp-i-xxl{display:inline}
  .dp-b-xxl{display:block}
  .dp-ib-xxl{display:inline-block}
  .dp-f-xxl{display:flex}
  .dp-n-xxl{display:none}
}


/* 텍스트 가림 */
.blind{position:absolute; overflow:hidden; margin:-1px; width:1px; height:1px; clip:rect(0 0 0 0)}


/* video Embeded */
.videoWrap div,
.video-embed{position:relative; width:100%; padding-bottom:56.25%}
.videoWrap iframe,
.video-embed iframe{position:absolute; left:0; width:100%; height:100%}


/* text-wrap */
.text-wrap > *:not(:first-child){margin-top:0.5em}
.text-wrap > *:not(:first-child).btn{margin-top:0.8em}
@media(min-width:1070px){
  .text-wrap > *:not(:first-child){margin-top:0.7em}
  .text-wrap > *:not(:first-child).btn{margin-top:1.2em}
}


/* bg */
.bg{background-position:center; background-repeat:no-repeat; background-size:cover}


/* overlay */
.overlay{position:relative}
.overlay::before{content:''; position:absolute; top:0; right:0; bottom:0; left:0; background-color:#000; opacity:0.4}
.overlay > *{position:relative}


/* font icon */
[class^="ico-"]:before, [class*=" ico-"]:before{width:inherit}


/* Ul */
ul[type = "disk"]{padding-inline-start:1em}
ul[type = "disk"] li{list-style:initial; margin-top:8px}


/* 개행 : 768px 이상에서 br 태그 활성 */
@media(max-width:767px){
  :where(h1, h2, h3, h4, h5, h6, p, .post-excerpt) > br{display:none}
}

/* @media(min-width:768px){
  :where(h1, h2, h3, h4, h5, h6, p, .post-excerpt) > br:not([class|="br-fix-"]){display:inherit}
} */

/* 개행 : 모든 구간 유지 */
.br-fix, .br-fix > *{display:inherit}

/* sm 구간 전용 */
@media all and (min-width:576px) and (max-width:767px) {
  .br-fix-sm  {display:inherit}
}
/* md 구간 전용 */
@media all and (min-width:768px) and (max-width:1069px) {
  .br-fix-md  {display:inherit}
}
/* lg 구간 전용 */
@media all and (min-width:1070px) and (max-width:1199px) {
  .br-fix-lg  {display:inherit}
}
/* xl 구간 전용 */
@media all and (min-width:1200px) and (max-width:1399px) {
  .br-fix-xl  {display:inherit}
}

/* sm 이상 fix */
@media(min-width:576px){
  .br-fix-smfix  {display:inherit}
}
/* md 이상 fix */
@media(min-width:768px){
  .br-fix-mdfix  {display:inherit}
}
/* lg 이상 fix */
@media(min-width:1070px){
  .br-fix-lgfix  {display:inherit}
}
/* xl 이상 fix */
@media(min-width:1200px){
  .br-fix-xlfix  {display:inherit}
}
/* xxl 이상 fix */
@media(min-width:1400px){
  .br-fix-xxlfix  {display:inherit}
}


/* 화살표 */
.css-arrow{
  display:inline-block;
  position:relative;
  width:16px;  /* 화살표 영역 전체 가로 */
  height:8px; /* 화살표 영역 전체 세로 : 선 길이 */
  transition:all 0.15s ease;
  transform:rotate(90deg);
}
.css-arrow::after{
  content:"";
  display:block;
  position:absolute;
}
.css-arrow::after{
  top:0;
  left:50%;
  width:45%; /* 화살표 머리 가로 크기 */
  height:0;
  padding-bottom:45%; /* 화살표 머리 세로 크기 */
  border:1px solid var(--smt-color-primary); /* 화살표 컬러 : primary color */
  border-width:1.5px 0 0 1.5px; /* 화살표 라인 두깨 */
  transform:translate(0, 0) rotate(45deg);
  transform-origin:0% 0%;
  border-radius:0;
  box-sizing:content-box;
}
.css-arrow.arrow-bottom{ transform:rotate(180deg) }
.css-arrow.arrow-left{ transform:rotate(-90deg) }
.css-arrow.arrow-top{ transform:rotate(0deg) }


/* 화살표 : 꼬리 있는 화실표 */
.css-arrow-tail{
  display:inline-block;
  position:relative;
  width:16px;  /* 화살표 영역 전체 가로 */
  height:16px; /* 화살표 영역 전체 세로 : 선 길이 */
  transition:all 0.15s ease;
  transform:rotate(90deg);
}
.css-arrow-tail::before,
.css-arrow-tail::after{
  content:"";
  display:block;
  position:absolute;
}
.css-arrow-tail::before{
  left:50%;
  transform:translate(-50%, 0);
  top:1px;
  bottom:0;
  width:1px;
  background-color:var(--smt-color-primary); /* 화살표 컬러 : primary color */
  box-sizing:border-box;
}
.css-arrow-tail::after{
  top:0;
  left:50%;
  width:45%; /* 화살표 머리 가로 크기 */
  height:0;
  padding-bottom:45%; /* 화살표 머리 세로 크기 */
  border:1px solid var(--smt-color-primary); /* 화살표 컬러 : primary color */
  border-width:1px 0 0 1px; /* 화살표 라인 두깨 */
  transform:translate(0, 0) rotate(45deg);
  transform-origin:0% 0%;
  border-radius:0;
  box-sizing:content-box;
}
.css-arrow-tail.arrow-bottom{ transform:rotate(180deg) }
.css-arrow-tail.arrow-left{ transform:rotate(-90deg) }
.css-arrow-tail.arrow-top{ transform:rotate(0deg) }

/* 긴 화살표 */
.css-arrow-tail.arrow-long{
  width:32px;  /* 화살표 영역 전체 가로 */
  height:32px; /* 화살표 영역 전체 세로 : 선 길이 */
}
.css-arrow-tail.arrow-long::after{
  width:8px;          /* 화살표 머리 가로 크기 */
  padding-bottom:8px; /* 화살표 머리 세로 크기 */
}


/* CSS 삼각형 */
.css-triangle{
  width:0; height:0;
 border-style: solid;
 border-width: 0 7px 10px 7px;
 border-color: transparent transparent black transparent
}
.css-triangle.right{transform:rotate(90deg)}
.css-triangle.bottom{transform:rotate(180deg)}
.css-triangle.left{transform:rotate(270deg)}
.dark .css-triangle{border-color: transparent transparent white transparent}


/* Button Group */
.btn-group{display:inline-flex}
.btn-group > .btn{padding-left:12px; padding-right:12px}
.btn-group > .btn:not(:first-child){margin-left:-1px}
.btn-group > :not(:first-child):not(:last-child){border-left:none; border-right:none}
.btn-group > .btn:not(:last-child){border-top-right-radius:0; border-bottom-right-radius:0}
.btn-group > .btn:not(:first-child){border-top-left-radius:0; border-bottom-left-radius:0}


/* Disabled Button */
.disabled{opacity:0.5}
.disabled:hover::before{display:none}


/* Block Button */
.btn-block{width:100%}


/* Button Square */
.btn-square,
.btn-square > .btn{border-radius:0}


/* Icon Button */
.btn-icon > :first-child:before{margin-left:0}
.btn-icon > :last-child:before{margin-right:0}
.btn-icon [class*="arrow"]:first-child:before{margin-left:-5px}
.btn-icon [class*="arrow"]:last-child:before{margin-right:-5px}
button.btn-icon{text-align:left}


/* Link Color */
.post-contents a{color:var(--color-link)}


/* Style Round */
.style-round,
.style-round > *{border-radius:100px}
.style-round-8,
.style-round-8 > *{border-radius:8px}


/* 그리드 확인용 */
.grid-ex .row + .row{margin-top:1rem}
.grid-ex .row > .col,
.grid-ex .row > [class^="col-"]{padding-top:.75rem; padding-bottom:.75rem; background-color:rgba(39,41,43,0.03); border:1px solid rgba(39,41,43,0.1)}


/* gotop */
#gotop{position:fixed; bottom:20px; right:20px; z-index:110 !important; background:rgb(0, 0, 0); background:rgba(0, 0, 0, 0.7); text-decoration:none; -webkit-border-radius:35px; -moz-border-radius:35px; border-radius:35px; display:none; cursor:pointer; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease}
#gotop a{width:50px; height:50px; display:block; margin:0; position:relative; left:0; top:0; font-size:0; padding:15px 10px; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease}
#gotop a::before{content:''; width:17px; height:11px; background:url('../images/ui/ico-btntop.svg') no-repeat center; background-size:100%; display:inline-block; position:absolute; top:50%; left:50%; margin-top:-7px; margin-left:-8px}
#gotop:hover{background:rgba(0, 0, 0, 0.9)}
#gotop:hover a{top:-4px}


/* line-height */
.lh-100{line-height:1}
.lh-110{line-height:1.1}
.lh-120{line-height:1.2}
.lh-130{line-height:1.3}
.lh-140{line-height:1.4}
.lh-150{line-height:1.5}
.lh-160{line-height:1.6}
.lh-170{line-height:1.7}
.lh-180{line-height:1.8}
.lh-190{line-height:1.9}
.lh-200{line-height:2}


/* font-weight */
.fw-100{font-weight:100}
.fw-200{font-weight:200}
.fw-300{font-weight:300}
.fw-400{font-weight:400}
.fw-500{font-weight:500}
.fw-600{font-weight:600}
.fw-700{font-weight:700}
.fw-800{font-weight:800}
.fw-900{font-weight:900}


/* 텍스트 정렬 */
/* 모든 사이즈 */
.ta-left  {text-align:left}
.ta-center{text-align:center}
.ta-right {text-align:right}

/* sm 구간 전용 */
@media all and (min-width:576px) and (max-width:767px) {
  .ta-left-sm  {text-align:left}
  .ta-center-sm{text-align:center}
  .ta-right-sm {text-align:right}
}
/* md 구간 전용 */
@media all and (min-width:768px) and (max-width:1069px) {
  .ta-left-md  {text-align:left}
  .ta-center-md{text-align:center}
  .ta-right-md {text-align:right}
}
/* lg 구간 전용 */
@media all and (min-width:1070px) and (max-width:1199px) {
  .ta-left-lg  {text-align:left}
  .ta-center-lg{text-align:center}
  .ta-right-lg {text-align:right}
}
/* xl 구간 전용 */
@media all and (min-width:1200px) and (max-width:1399px) {
  .ta-left-xl  {text-align:left}
  .ta-center-xl{text-align:center}
  .ta-right-xl {text-align:right}
}

/* sm 이상 fix */
@media(min-width:576px){
  .ta-left-smfix  {text-align:left}
  .ta-center-smfix{text-align:center}
  .ta-right-smfix {text-align:right}
}
/* md 이상 fix */
@media(min-width:768px){
  .ta-left-mdfix  {text-align:left}
  .ta-center-mdfix{text-align:center}
  .ta-right-mdfix {text-align:right}
}
/* lg 이상 fix */
@media(min-width:1070px){
  .ta-left-lgfix  {text-align:left}
  .ta-center-lgfix{text-align:center}
  .ta-right-lgfix {text-align:right}
}
/* xl 이상 fix */
@media(min-width:1200px){
  .ta-left-xlfix  {text-align:left}
  .ta-center-xlfix{text-align:center}
  .ta-right-xlfix {text-align:right}
}
/* xxl 이상 fix */
@media(min-width:1400px){
  .ta-left-xxlfix  {text-align:left}
  .ta-center-xxlfix{text-align:center}
  .ta-right-xxlfix {text-align:right}
}


/* 말줄임 */
.ellipsis{display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical}
.ellipsis-1{-webkit-line-clamp:1}
.ellipsis-2{-webkit-line-clamp:2}
.ellipsis-3{-webkit-line-clamp:3}
.ellipsis-4{-webkit-line-clamp:4}
@media(min-width:768px){
  .ellipsis-md{-webkit-line-clamp:inherit}
}
@media(min-width:1070px){
  .ellipsis-lg{-webkit-line-clamp:inherit}
}


/* blockquote */
blockquote.line,
blockquote.bible{padding-left:25px; border-left:3px solid #777}