@charset "utf-8"; 


#wrap {margin:0 auto;width:100%;overflow:hidden;}

/* ---------------------- Grid system ---------------------- */

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {width: 100%;padding-right: 2rem;padding-left: 2rem;margin-right: auto;margin-left: auto;}

.container-article {width:100%;max-width: 800px;padding-right: 2rem;padding-left: 2rem;margin-right: auto;margin-left: auto;}


/* Break Point */
@media (min-width: 768px) {
  .container, .container-sm, .container-md {max-width: 680px;}
}

@media (min-width: 992px) {
  .container, .container-sm, .container-md, .container-lg {}
}

@media (min-width: 1200px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {max-width: 1180px; padding-right: 2rem;padding-left: 2rem;}
}

@media (min-width: 1400px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {}
}

@media (min-width: 1600px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {max-width: 1280px;padding-right:1.6rem;padding-left:1.6rem;}
}

.row:before, .row:after, .container:before, .container:after,
.form-horizontal .form-group:before, .form-horizontal .form-group:after, .dl-horizontal dd:before, .dl-horizontal dd:after,
.pull-right:before, .pull-right:after, .pull-left:before, .pull-left:after, .inner:before, .inner:after{display: table; content: " "; clear: both;}

.row {
  --bs-gutter-x: 2rem;
  --bs-gutter-y: 0;
  display: flex;
  flex: 1 0 100%;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) / -2);
  margin-left: calc(var(--bs-gutter-x) / -2);
}

.row > * {flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left: calc(var(--bs-gutter-x) / 2);
  margin-top: var(--bs-gutter-y);
}

.col {flex: 1 0 0%;}

 /* Mobile */
.col-md {flex: 1 0 0%;}
.row-cols-auto > * {flex: 0 0 auto;width: auto;}
.row-cols-1 > * {flex: 0 0 auto;width: 100%;}
.row-cols-2 > * {flex: 0 0 auto;width: 50%;}
.row-cols-3 > * {flex: 0 0 auto;width: 33.333333%;}
.row-cols-4 > * {flex: 0 0 auto;width: 25%;}
.row-cols-5 > * {flex: 0 0 auto;width: 20%;}
.row-cols-6 > * {flex: 0 0 auto;width: 16.666667%;}
.col-auto {flex: 0 0 auto;width: auto;}
.col-1 {flex: 0 0 auto; width: 8.333333%;}
.col-2 {flex: 0 0 auto; width: 16.666667%;}
.col-3 {flex: 0 0 auto; width: 25%;}
.col-4 {flex: 0 0 auto; width: 33.333333%;}
.col-5 {flex: 0 0 auto; width: 41.666667%;}
.col-6 {flex: 0 0 auto; width: 50%;}
.col-7 {flex: 0 0 auto; width: 58.333333%;}
.col-8 {flex: 0 0 auto; width: 66.666667%;}
.col-9 {flex: 0 0 auto;width: 75%;}
.col-10 {flex: 0 0 auto;width: 83.333333%;}
.col-11 {flex: 0 0 auto; width: 91.666667%;}
.col-12 {flex: 0 0 auto;width: 100%;}
.offset-0 {margin-left: 0;}
.offset-1 {margin-left: 8.333333%;}
.offset-2 {margin-left: 16.666667%;}
.offset-3 {margin-left: 25%;}
.offset-4 {margin-left: 33.333333%;}
.offset-5 {margin-left: 41.666667%;}
.offset-6 {margin-left: 50%;}
.offset-7 {margin-left: 58.333333%;}
.offset-8 {margin-left: 66.666667%;}
.offset-9 {margin-left: 75%;}
.offset-10 {margin-left: 83.333333%;}
.offset-11 {margin-left: 91.666667%;}

.g-0, .gx-0 {--bs-gutter-x: 0;}
.g-0, .gy-0 {--bs-gutter-y: 0;}
.g-1, .gx-1 {--bs-gutter-x: 0.25rem;}
.g-1, .gy-1 {--bs-gutter-y: 0.25rem;}
.g-2, .gx-2 {--bs-gutter-x: 0.5rem;}
.g-2, .gy-2 {--bs-gutter-y: 0.5rem;}
.g-3, .gx-3 {--bs-gutter-x: 1rem;}
.g-3, .gy-3 { --bs-gutter-y: 1rem;}
.g-4, .gx-4 {--bs-gutter-x: 1.5rem;}
.g-4, .gy-4 {--bs-gutter-y: 1.5rem;}
.g-5, .gx-5 { --bs-gutter-x: 3rem;}
.g-5, .gy-5 {--bs-gutter-y: 3rem;}
.g-6, .gx-6 {--bs-gutter-x: 6.4rem;}
.g-6, .gy-6 {--bs-gutter-y: 6.4rem;}


.order-first {order: -1 !important;} 
.order-0 {order: 0 !important;}
.order-1 {order: 1 !important;}
.order-2 {order: 2 !important;}
.order-3 {order: 3 !important;}
.order-4 {order: 4 !important;}
.order-5 {order: 5 !important;}
.order-last {order: 6 !important;}
 
 /* 768px 이상 - iPad */
 @media (min-width: 768px) {
  .col-md {flex: 1 0 0%;}
  .row-cols-md-auto > * {flex: 0 0 auto;width: auto;}
  .row-cols-md-1 > * {flex: 0 0 auto;width: 100%;}
  .row-cols-md-2 > * {flex: 0 0 auto;width: 50%;}
  .row-cols-md-3 > * {flex: 0 0 auto;width: 33.333333%;}
  .row-cols-md-4 > * {flex: 0 0 auto;width: 25%;}
  .row-cols-md-5 > * {flex: 0 0 auto;width: 20%;}
  .row-cols-md-6 > * {flex: 0 0 auto;width: 16.666667%;}
  .col-md-auto {flex: 0 0 auto;width: auto;}
  .col-md-1 {flex: 0 0 auto; width: 8.333333%;}
  .col-md-2 {flex: 0 0 auto; width: 16.666667%;}
  .col-md-3 {flex: 0 0 auto; width: 25%;}
  .col-md-4 {flex: 0 0 auto; width: 33.333333%;}
  .col-md-5 {flex: 0 0 auto; width: 41.666667%;}
  .col-md-6 {flex: 0 0 auto; width: 50%;}
  .col-md-7 {flex: 0 0 auto; width: 58.333333%;}
  .col-md-8 {flex: 0 0 auto; width: 66.666667%;}
  .col-md-9 {flex: 0 0 auto;width: 75%;}
  .col-md-10 {flex: 0 0 auto;width: 83.333333%;}
  .col-md-11 {flex: 0 0 auto; width: 91.666667%;}
  .col-md-12 {flex: 0 0 auto;width: 100%;}
  .offset-md-0 {margin-left: 0;}
  .offset-md-1 {margin-left: 8.333333%;}
  .offset-md-2 {margin-left: 16.666667%;}
  .offset-md-3 {margin-left: 25%;}
  .offset-md-4 {margin-left: 33.333333%;}
  .offset-md-5 {margin-left: 41.666667%;}
  .offset-md-6 {margin-left: 50%;}
  .offset-md-7 {margin-left: 58.333333%;}
  .offset-md-8 {margin-left: 66.666667%;}
  .offset-md-9 {margin-left: 75%;}
  .offset-md-10 {margin-left: 83.333333%;}
  .offset-md-11 {margin-left: 91.666667%;}
  
   .g-md-0, .gx-md-0 {--bs-gutter-x: 0;}
  .g-md-0, .gy-md-0 {--bs-gutter-y: 0;}
  .g-md-1, .gx-md-1 {--bs-gutter-x: 0.25rem;}
  .g-md-1, .gy-md-1 {--bs-gutter-y: 0.25rem;}
  .g-md-2, .gx-md-2 {--bs-gutter-x: 0.5rem;}
  .g-md-2, .gy-md-2 {--bs-gutter-y: 0.5rem;}
  .g-md-3, .gx-md-3 {--bs-gutter-x: 1rem;}
  .g-md-3, .gy-md-3 { --bs-gutter-y: 1rem;}
  .g-md-4, .gx-md-4 {--bs-gutter-x: 1.5rem;}
  .g-md-4, .gy-md-4 {--bs-gutter-y: 1.5rem;}
  .g-md-5, .gx-md-5 { --bs-gutter-x: 3rem;}
  .g-md-5, .gy-md-5 {--bs-gutter-y: 3rem;}
  .g-md-6, .gx-md-6 {--bs-gutter-x: 6.4rem;}
  .g-md-6, .gy-md-6 {--bs-gutter-y: 6.4rem;}
  
  .order-md-first {order: -1 !important;}
  .order-md-0 {order: 0 !important;}
  .order-md-1 {order: 1 !important;}
  .order-md-2 {order: 2 !important;}
  .order-md-3 {order: 3 !important;}
  .order-md-4 {order: 4 !important;}
  .order-md-5 {order: 5 !important;}
  .order-md-last {order: 6 !important;}
  
 }
 
 /* 992px 이상 - iPad Pro */
 @media (min-width: 992px) {
  .col-lg {flex: 1 0 0%;}
  .row-cols-lg-auto > * {flex: 0 0 auto;width: auto;}
  .row-cols-lg-1 > * {flex: 0 0 auto;width: 100%;}
  .row-cols-lg-2 > * {flex: 0 0 auto;width: 50%;}
  .row-cols-lg-3 > * {flex: 0 0 auto;width: 33.333333%;}
  .row-cols-lg-4 > * {flex: 0 0 auto;width: 25%;}
  .row-cols-lg-5 > * {flex: 0 0 auto;width: 20%;}
  .row-cols-lg-6 > * {flex: 0 0 auto;width: 16.666667%;}
  .col-lg-auto {flex: 0 0 auto;width: auto;}
  .col-lg-1 {flex: 0 0 auto; width: 8.333333%;}
  .col-lg-2 {flex: 0 0 auto; width: 16.666667%;}
  .col-lg-3 {flex: 0 0 auto; width: 25%;}
  .col-lg-4 {flex: 0 0 auto; width: 33.333333%;}
  .col-lg-5 {flex: 0 0 auto; width: 41.666667%;}
  .col-lg-6 {flex: 0 0 auto; width: 50%;}
  .col-lg-7 {flex: 0 0 auto; width: 58.333333%;}
  .col-lg-8 {flex: 0 0 auto; width: 66.666667%;}
  .col-lg-9 {flex: 0 0 auto;width: 75%;}
  .col-lg-10 {flex: 0 0 auto;width: 83.333333%;}
  .col-lg-11 {flex: 0 0 auto; width: 91.666667%;}
  .col-lg-12 {flex: 0 0 auto;width: 100%;}
  .offset-lg-0 {margin-left: 0;}
  .offset-lg-1 {margin-left: 8.333333%;}
  .offset-lg-2 {margin-left: 16.666667%;}
  .offset-lg-3 {margin-left: 25%;}
  .offset-lg-4 {margin-left: 33.333333%;}
  .offset-lg-5 {margin-left: 41.666667%;}
  .offset-lg-6 {margin-left: 50%;}
  .offset-lg-7 {margin-left: 58.333333%;}
  .offset-lg-8 {margin-left: 66.666667%;}
  .offset-lg-9 {margin-left: 75%;}
  .offset-lg-10 {margin-left: 83.333333%;}
  .offset-lg-11 {margin-left: 91.666667%;}
  
  .g-lg-0, .gx-lg-0 {--bs-gutter-x: 0;}
  .g-lg-0, .gy-lg-0 {--bs-gutter-y: 0;}
  .g-lg-1, .gx-lg-1 {--bs-gutter-x: 0.25rem;}
  .g-lg-1, .gy-lg-1 {--bs-gutter-y: 0.25rem;}
  .g-lg-2, .gx-lg-2 {--bs-gutter-x: 0.5rem;}
  .g-lg-2, .gy-lg-2 {--bs-gutter-y: 0.5rem;}
  .g-lg-3, .gx-lg-3 {--bs-gutter-x: 1rem;}
  .g-lg-3, .gy-lg-3 { --bs-gutter-y: 1rem;}
  .g-lg-4, .gx-lg-4 {--bs-gutter-x: 1.5rem;}
  .g-lg-4, .gy-lg-4 {--bs-gutter-y: 1.5rem;}
  .g-lg-5, .gx-lg-5 { --bs-gutter-x: 3rem;}
  .g-lg-5, .gy-lg-5 {--bs-gutter-y: 3rem;}
  .g-lg-6, .gx-lg-6 {--bs-gutter-x: 6.4rem;}
  
  .order-lg-first {order: -1 !important;}
  .order-lg-0 {order: 0 !important;}
  .order-lg-1 {order: 1 !important;}
  .order-lg-2 {order: 2 !important;}
  .order-lg-3 {order: 3 !important;}
  .order-lg-4 {order: 4 !important;}
  .order-lg-5 {order: 5 !important;}
  .order-lg-last {order: 6 !important;}
 }
 
 
 /* 1200px 이상 - Desktop Small */ 
@media (min-width: 1200px) {
  .col-xl {flex: 1 0 0%;}
  .row-cols-xl-auto > * {flex: 0 0 auto;width: auto;}
  .row-cols-xl-1 > * {flex: 0 0 auto;width: 100%;}
  .row-cols-xl-2 > * {flex: 0 0 auto;width: 50%;}
  .row-cols-xl-3 > * {flex: 0 0 auto;width: 33.333333%;}
  .row-cols-xl-4 > * {flex: 0 0 auto;width: 25%;}
  .row-cols-xl-5 > * {flex: 0 0 auto;width: 20%;}
  .row-cols-xl-6 > * {flex: 0 0 auto;width: 16.666667%;}
  .col-xl-auto {flex: 0 0 auto;width: auto;}
  .col-xl-1 {flex: 0 0 auto; width: 8.333333%;}
  .col-xl-2 {flex: 0 0 auto; width: 16.666667%;}
  .col-xl-3 {flex: 0 0 auto; width: 25%;}
  .col-xl-4 {flex: 0 0 auto; width: 33.333333%;}
  .col-xl-5 {flex: 0 0 auto; width: 41.666667%;}
  .col-xl-6 {flex: 0 0 auto; width: 50%;}
  .col-xl-7 {flex: 0 0 auto; width: 58.333333%;}
  .col-xl-8 {flex: 0 0 auto; width: 66.666667%;}
  .col-xl-9 {flex: 0 0 auto;width: 75%;}
  .col-xl-10 {flex: 0 0 auto;width: 83.333333%;}
  .col-xl-11 {flex: 0 0 auto; width: 91.666667%;}
  .col-xl-12 {flex: 0 0 auto;width: 100%;}
  .offset-xl-0 {margin-left: 0;}
  .offset-xl-1 {margin-left: 8.333333%;}
  .offset-xl-2 {margin-left: 16.666667%;}
  .offset-xl-3 {margin-left: 25%;}
  .offset-xl-4 {margin-left: 33.333333%;}
  .offset-xl-5 {margin-left: 41.666667%;}
  .offset-xl-6 {margin-left: 50%;}
  .offset-xl-7 {margin-left: 58.333333%;}
  .offset-xl-8 {margin-left: 66.666667%;}
  .offset-xl-9 {margin-left: 75%;}
  .offset-xl-10 {margin-left: 83.333333%;}
  .offset-xl-11 {margin-left: 91.666667%;}
  
  .g-xl-0, .gx-xl-0 {--bs-gutter-x: 0;}
  .g-xl-0, .gy-xl-0 {--bs-gutter-y: 0;}
  .g-xl-1, .gx-xl-1 {--bs-gutter-x: 0.25rem;}
  .g-xl-1, .gy-xl-1 {--bs-gutter-y: 0.25rem;}
  .g-xl-2, .gx-xl-2 {--bs-gutter-x: 0.5rem;}
  .g-xl-2, .gy-xl-2 {--bs-gutter-y: 0.5rem;}
  .g-xl-3, .gx-xl-3 {--bs-gutter-x: 1rem;}
  .g-xl-3, .gy-xl-3 { --bs-gutter-y: 1rem;}
  .g-xl-4, .gx-xl-4 {--bs-gutter-x: 1.5rem;}
  .g-xl-4, .gy-xl-4 {--bs-gutter-y: 1.5rem;}
  .g-xl-5, .gx-xl-5 { --bs-gutter-x: 3rem;}
  .g-xl-5, .gy-xl-5 {--bs-gutter-y: 3rem;}
  .g-xl-6, .gy-xl-6 {--bs-gutter-y: 4rem;}
  
  .order-xl-first {order: -1 !important;}
  .order-xl-0 {order: 0 !important;}
  .order-xl-1 {order: 1 !important;}
  .order-xl-2 {order: 2 !important;}
  .order-xl-3 {order: 3 !important;}
  .order-xl-4 {order: 4 !important;}
  .order-xl-5 {order: 5 !important;}
  .order-xl-last {order: 6 !important;}
  
 }


 /* 1400px 이상 - Desktop Large */ 
@media (min-width: 1400px) {
  .col-xl {flex: 1 0 0%;}
  .row-cols-xxl-auto > * {flex: 0 0 auto;width: auto;}
  .row-cols-xxl-1 > * {flex: 0 0 auto;width: 100%;}
  .row-cols-xxl-2 > * {flex: 0 0 auto;width: 50%;}
  .row-cols-xxl-3 > * {flex: 0 0 auto;width: 33.333333%;}
  .row-cols-xxl-4 > * {flex: 0 0 auto;width: 25%;}
  .row-cols-xxl-5 > * {flex: 0 0 auto;width: 20%;}
  .row-cols-xxl-6 > * {flex: 0 0 auto;width: 16.666667%;}
  .col-xxl-auto {flex: 0 0 auto;width: auto;}
  .col-xxl-1 {flex: 0 0 auto; width: 8.333333%;}
  .col-xxl-2 {flex: 0 0 auto; width: 16.666667%;}
  .col-xxl-3 {flex: 0 0 auto; width: 25%;}
  .col-xxl-4 {flex: 0 0 auto; width: 33.333333%;}
  .col-xxl-5 {flex: 0 0 auto; width: 41.666667%;}
  .col-xxl-6 {flex: 0 0 auto; width: 50%;}
  .col-xxl-7 {flex: 0 0 auto; width: 58.333333%;}
  .col-xxl-8 {flex: 0 0 auto; width: 66.666667%;}
  .col-xxl-9 {flex: 0 0 auto;width: 75%;}
  .col-xxl-10 {flex: 0 0 auto;width: 83.333333%;}
  .col-xxl-11 {flex: 0 0 auto; width: 91.666667%;}
  .col-xxl-12 {flex: 0 0 auto;width: 100%;}
  .offset-xxl-0 {margin-left: 0;}
  .offset-xxl-1 {margin-left: 8.333333%;}
  .offset-xxl-2 {margin-left: 16.666667%;}
  .offset-xxl-3 {margin-left: 25%;}
  .offset-xxl-4 {margin-left: 33.333333%;}
  .offset-xxl-5 {margin-left: 41.666667%;}
  .offset-xxl-6 {margin-left: 50%;}
  .offset-xxl-7 {margin-left: 58.333333%;}
  .offset-xxl-8 {margin-left: 66.666667%;}
  .offset-xxl-9 {margin-left: 75%;}
  .offset-xxl-10 {margin-left: 83.333333%;}
  .offset-xxl-11 {margin-left: 91.666667%;}
  
  .g-xxl-0, .gx-xxl-0 {--bs-gutter-x: 0;}
  .g-xxl-0, .gy-xxl-0 {--bs-gutter-y: 0;}
  .g-xxl-1, .gx-xxl-1 {--bs-gutter-x: 0.25rem;}
  .g-xxl-1, .gy-xxl-1 {--bs-gutter-y: 0.25rem;}
  .g-xxl-2, .gx-xxl-2 {--bs-gutter-x: 0.5rem;}
  .g-xxl-2, .gy-xxl-2 {--bs-gutter-y: 0.5rem;}
  .g-xxl-3, .gx-xxl-3 {--bs-gutter-x: 1rem;}
  .g-xxl-3, .gy-xxl-3 { --bs-gutter-y: 1rem;}
  .g-xxl-4, .gx-xxl-4 {--bs-gutter-x: 1.5rem;}
  .g-xxl-4, .gy-xxl-4 {--bs-gutter-y: 1.5rem;}
  .g-xxl-5, .gx-xxl-5 { --bs-gutter-x: 3rem;}
  .g-xxl-5, .gy-xxl-5 {--bs-gutter-y: 3rem;}
  .g-xxl-6, .gy-xxl-6 {--bs-gutter-y: 4rem;}
  
  .order-xxl-first {order: -1 !important;}
  .order-xxl-0 {order: 0 !important;}
  .order-xxl-1 {order: 1 !important;}
  .order-xxl-2 {order: 2 !important;}
  .order-xxl-3 {order: 3 !important;}
  .order-xxl-4 {order: 4 !important;}
  .order-xxl-5 {order: 5 !important;}
  .order-xxl-last {order: 6 !important;}
  
 }
 
 
 /* ---------------------- Display 속성 ---------------------- */
 
 .dp-none {display: none !important;}
 .dp-inline-block {display: inline-block !important;}
 .dp-block {display: block !important;}
 

@media (min-width: 768px) {
  .md-dp-none {display: none !important;}
  .md-dp-inline-block {display: inline-block !important;}
  .md-dp-block {display: block !important;}
 } 
 
@media (min-width: 992px) {
  .lg-dp-none {display: none !important;}
  .lg-dp-inline-block {display: inline-block !important;}
  .lg-dp-block {display: block !important;}
 }
 
 @media (min-width: 1200px) {
  .xl-dp-none {display: none !important;}
  .xl-dp-inline-block {display: inline-block !important;}
  .xl-dp-block {display: block !important;}
 }
 
  @media (min-width: 1400px) {
  .xxl-dp-none {display: none !important;}
  .xxl-dp-inline-block {display: inline-block !important;}
  .xxl-dp-block {display: block !important;}
 }
 
 /* ---------------------- global ---------------------- */
 
 #skipNav {overflow:hidden;position:absolute;left:-9999px;width:0;height:1px;margin:0;padding:0} /* 스킵네비게이션 */
.ir_pm {display:block;overflow:hidden;font-size:0px;line-height:0;text-indent:-9999px} /* 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할때 */
.screen_out {overflow:hidden;position:absolute;width:0;height:0;line-height:0;text-indent:-9999px} /* 대체텍스트가 아닌 접근성을 위한 숨김텍스트를 제공할때 */

.no-scroll {overflow:hidden !important;}
.cl_b:before,
.cl_b:after {clear:both;content:'';display:block}
.show {display:block}
.hide {display:none}
.cover {position: absolute;top:0;left:0;width:100%;height: 100%;z-index:100}


 /* ---------------------- Align ---------------------- */
.inline {display: inline !important;}
.pull-right {float: right !important;}
.pull-left {float: left !important;}
.text-center {text-align: center !important;}
.text-right{text-align: right !important;}
.justify-content-center {justify-content:center !important}


/* Mobile 가로 스크롤 */
.h-scroll {position:relative;width:auto;white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling: touch;-webkit-overflow-scrolling: touch;-ms-overflow-style: -ms-autohiding-scrollbar;overflow-y: hidden;}
.h-scroll::-webkit-scrollbar {display:none;}
.h-scroll > * {display:inline-block;white-space:normal}

 @media (min-width: 992px) {
	 
	.h-scroll {white-space:normal;overflow-x:inherit}	  
 }
 
 

 /* ---------------------- Typhography ---------------------- */
 
 .display1 {font-size:50px;line-height:125%;font-weight: bold}
 .display2 {font-size:40px;line-height:125%;font-weight: bold}
 
 .heading1 {font-size:28px;line-height:140%;font-weight: bold;word-break: keep-all}
 .heading2 {font-size:24px;line-height:140%;font-weight: bold;word-break: keep-all}
 .heading3 {font-size:24px;line-height:140%;font-weight: bold;word-break: keep-all}
 .heading4 {font-size:17px;line-height:140%;font-weight: bold;word-break: keep-all}
 
 .subtitle1 {font-size:28px;line-height:100%;font-weight:bold;;word-break: keep-all}  
 .subtitle2 {font-size:24px;line-height:100%;font-weight:bold;;word-break: keep-all} 
 .subtitle3 {font-size:20px;line-height:100%;font-weight:bold;;word-break: keep-all}
 .subtitle4 {font-size:18px;line-height:100%;font-weight:bold;;word-break: keep-all}
 	  
 .body1 {font-size:24px;line-height:180%;font-weight: bold;word-break: keep-all}
 .body2 {font-size:17px;line-height:180%;word-break: keep-all}
 .body3 {font-size:16px;line-height:170%;word-break: keep-all}
 .body4 {font-size:15px;line-height:180%;word-break: keep-all}
 
 .label1 {font-size:15px;line-height: 100%;font-weight:500}
 .label2 {font-size:14px;line-height: 100%;font-weight:bold}
 .label3 {font-size:13px;line-height: 100%;font-weight:400}
 .label4 {font-size:12px;line-height: 100%;font-weight:400}
 
 
 .caption1 {font-size:13px;line-height: 20px;}
 .caption2 {font-size:12px;line-height: 18px;}
 
  .bold{font-weight:bold !important;}
  
 
  @media (min-width: 992px) {
	  
	  
	   .display1 {font-size:90px;line-height: 95px}
	   .display2 {font-size:60px;line-height:125%;}
	  
	   .heading1 {font-size:40px;line-height:140%;}
	   .heading2 {font-size:32px;line-height:140%;}
	   .heading3 {font-size:28px;line-height:140%;}
	   .heading4 {font-size:20px;line-height:140%;}
	   
	   .subtitle3 {font-size:22px;line-height:100%;}
	   .subtitle4 {font-size:20px;line-height:100%;font-weight:bold;}
	    
	   .label1 {font-size:16px;line-height: 100%;font-weight:500}
	    
	   .body1 {font-size:32px;line-height:180%;font-weight: bold}
	   .body2 {font-size:20px;line-height:180%;}
	   .body3 {font-size:18px;line-height:180%;}
	   .body4 {font-size:16px;line-height:180%;}
		 
	
 }
 
 
 
 /* 말줄임 */
.ellipsis {display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ellipsis-multiline {display:block;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word;white-space:normal;-webkit-line-clamp:3;}
 
 
/* ---------------------- Color Palette ---------------------- */
 .bg-gr-light {background:var(--bg-gr-light);} /* 흰 배경 그라디언트 */
 .bg-gr-dark{background:var(--bg-gr-dark);} /* 어두운 배경 그라이언트 */
 
 .text-gray1 {color:var(--text-gray1);} /* #222 */
 .text-gray2 {color:var(--text-gray2);} /* #666 */
 .text-gray3 {color:var(--text-gray3);} /* #999 */
 .text-white1 {color:var(--text-white1) !important;} /* #222 */
 .text-white2 {color:var(--text-white2) !important;} /* #666 */
 .text-gray3 {color:var(--text-gray3);} /* #999 */
 .text-gr-light {background:var(--bg-gr-light);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} /* 흰 배경 텍스트 그라디언트 */
 .text-gr-dark {background:var(--bg-gr-dark);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} /* 어두운 배경 텍스트 그라디언트 */
 
 .bg-light {background:var(--bg-gray1);} /* #f6f6f6 */
 .bg-dark {background:var(--bg-dark);}
 .bg-white {background:#fff;}

/* ---------------------- Width ---------------------- */
.wid10 {width:10%}
.wid30 {width:30%}
.wid50 {width:50%;}
.wid70 {width:70%;}
.wid80 {width:80%;}
.wid100 {width:100%;}

.list-inline {list-style:none;}
.list-inline>li {display:inline-block;padding-right:5px;padding-left:5px;}


/* ---------------------- Spacing ---------------------- */

.nopadding {padding: 0 !important;margin:0 !important}
.nomargin {margin:0 !important}


.mt-0 {margin-top:0 !important;}
.mt-1 {margin-top:0.4rem !important;}
.mt-2 {margin-top:0.8rem !important;}
.mt-3 {margin-top:1.2rem !important;}
.mt-4 {margin-top:1.6rem !important;}
.mt-5 {margin-top:2.0rem !important;}
.mt-6 {margin-top:2.4rem !important;}
.mt-7 {margin-top:2.8rem !important;}
.mt-8 {margin-top:3.2rem !important;}
.mt-9 {margin-top:3.6rem !important;}
.mt-10 {margin-top:4.0rem !important;}
.mt-11 {margin-top:4.4rem !important;}
.mt-12 {margin-top:4.8rem !important;}

.mb-0 {margin-bottom:0.4rem !important;}
.mb-1 {margin-bottom:0.4rem !important;}
.mb-2 {margin-bottom:0.8rem !important;}
.mb-3 {margin-bottom:1.2rem !important;}
.mb-4 {margin-bottom:1.6rem !important;}
.mb-5 {margin-bottom:2.0rem !important;}
.mb-6 {margin-bottom:2.4rem !important;}
.mb-7 {margin-bottom:2.8rem !important;}
.mb-8 {margin-bottom:3.2rem !important;}
.mb-9 {margin-bottom:3.6rem !important;}
.mb-10 {margin-bottom:4.0rem !important;}
.mb-11 {margin-bottom:4.4rem !important;}
.mb-12 {margin-bottom:4.8rem !important;}

.ml-0 {margin-left:0 !important;}
.ml-1 {margin-left:0.4rem !important;}
.ml-2 {margin-left:0.8rem !important;}
.ml-3 {margin-left:1.2rem !important;}
.ml-4 {margin-left:1.6rem !important;}
.ml-5 {margin-left:2.0rem !important;}
.ml-6 {margin-left:2.4rem !important;}
.ml-7 {margin-left:2.8rem !important;}
.ml-8 {margin-left:3.2rem !important;}
.ml-9 {margin-left:3.6rem !important;}
.ml-10 {margin-left:4.0rem !important;}
.ml-11 {margin-left:4.4rem !important;}
.ml-12 {margin-left:4.8rem !important;}

.mr-0 {margin-right:0 !important;}
.mr-1 {margin-right:0.4rem !important;}
.mr-2 {margin-right:0.8rem !important;}
.mr-3 {margin-right:1.2rem !important;}
.mr-4 {margin-right:1.6rem !important;}
.mr-5 {margin-right:2.0rem !important;}
.mr-6 {margin-right:2.4rem !important;}
.mr-7 {margin-right:2.8rem !important;}
.mr-8 {margin-right:3.2rem !important;}
.mr-9 {margin-right:3.6rem !important;}
.mr-10 {margin-right:4.0rem !important;}
.mr-11 {margin-right:4.4rem !important;}
.mr-12 {margin-right:4.8rem !important;}

.my-0 {margin-top:0 !important;margin-bottom: 0 !important}
.my-1 {margin-top:0.4rem !important;margin-bottom: 0.4rem !important}
.my-2 {margin-top:0.8rem !important;margin-bottom: 0.8rem !important}
.my-3 {margin-top:1.2rem !important;margin-bottom: 1.2rem !important}
.my-4 {margin-top:1.6rem !important;margin-bottom: 1.6rem !important}
.my-5 {margin-top:2.0rem !important;margin-bottom: 2.0rem !important}
.my-6 {margin-top:2.4rem !important;margin-bottom: 2.4rem !important}
.my-7 {margin-top:2.8rem !important;margin-bottom: 2.8rem !important}
.my-8 {margin-top:3.2rem !important;margin-bottom: 3.2rem !important}
.my-9 {margin-top:3.6rem !important;margin-bottom: 3.6rem !important}
.my-10 {margin-top:4.0rem !important;margin-bottom: 4.0rem !important}
.my-11 {margin-top:4.4rem !important;margin-bottom: 4.4rem !important}
.my-12 {margin-top:4.8rem !important;margin-bottom: 4.8rem !important}


.mx-0 {margin-left:0 !important;margin-right: 0 !important}
.mx-1 {margin-left:0.4rem !important;margin-right: 0.4rem !important}
.mx-2 {margin-left:0.8rem !important;margin-right: 0.8rem !important}
.mx-3 {margin-left:1.2rem !important;margin-right: 1.2rem !important}
.mx-4 {margin-left:1.6rem !important;margin-right: 1.6rem !important}
.mx-5 {margin-left:2.0rem !important;margin-right: 2.0rem !important}
.mx-6 {margin-left:2.4rem !important;margin-right: 2.4rem !important}
.mx-7 {margin-left:2.8rem !important;margin-right: 2.8rem !important}
.mx-8 {margin-left:3.2rem !important;margin-right: 3.2rem !important}
.mx-9 {margin-left:3.6rem !important;margin-right: 3.6rem !important}
.mx-10 {margin-left:4.0rem !important;margin-right: 4.0rem !important}
.mx-11 {margin-left:4.4rem !important;margin-right: 4.4rem !important}
.mx-12 {margin-left:4.8rem !important;margin-right: 4.8rem !important}


 @media (min-width: 1200px) {

.mt-xl-0 {margin-top:0 !important;}
.mt-xl-1 {margin-top:0.4rem !important;}
.mt-xl-2 {margin-top:0.8rem !important;}
.mt-xl-3 {margin-top:1.2rem !important;}
.mt-xl-4 {margin-top:1.6rem !important;}
.mt-xl-5 {margin-top:2.0rem !important;}
.mt-xl-6 {margin-top:2.4rem !important;}
.mt-xl-7 {margin-top:2.8rem !important;}
.mt-xl-8 {margin-top:3.2rem !important;}
.mt-xl-9 {margin-top:3.6rem !important;}
.mt-xl-10 {margin-top:4.0rem !important;}

.mb-xl-0 {margin-bottom:0.4rem !important;}
.mb-xl-1 {margin-bottom:0.4rem !important;}
.mb-xl-2 {margin-bottom:0.8rem !important;}
.mb-xl-3 {margin-bottom:1.2rem !important;}
.mb-xl-4 {margin-bottom:1.6rem !important;}
.mb-xl-5 {margin-bottom:2.0rem !important;}
.mb-xl-6 {margin-bottom:2.4rem !important;}
.mb-xl-7 {margin-bottom:2.8rem !important;}
.mb-xl-8 {margin-bottom:3.2rem !important;}
.mb-xl-9 {margin-bottom:3.6rem !important;}
.mb-xl-10 {margin-bottom:4.0rem !important;}
.mb-xl-11 {margin-bottom:4.4rem !important;}
.mb-xl-12 {margin-bottom:4.8rem !important;}

.my-xl-0 {margin-top:0 !important;margin-bottom: 0 !important}
.my-xl-1 {margin-top:0.4rem !important;margin-bottom: 0.4rem !important}
.my-xl-2 {margin-top:0.8rem !important;margin-bottom: 0.8rem !important}
.my-xl-3 {margin-top:1.2rem !important;margin-bottom: 1.2rem !important}
.my-xl-4 {margin-top:1.6rem !important;margin-bottom: 1.6rem !important}
.my-xl-5 {margin-top:2.0rem !important;margin-bottom: 2.0rem !important}
.my-xl-6 {margin-top:2.4rem !important;margin-bottom: 2.4rem !important}
.my-xl-7 {margin-top:2.8rem !important;margin-bottom: 2.8rem !important}
.my-xl-8 {margin-top:3.2rem !important;margin-bottom: 3.2rem !important}
.my-xl-9 {margin-top:3.6rem !important;margin-bottom: 3.6rem !important}
.my-xl-10 {margin-top:4.0rem !important;margin-bottom: 4.0rem !important}
.my-xl-11 {margin-top:4.4rem !important;margin-bottom: 4.4rem !important}
.my-xl-12 {margin-top:4.8rem !important;margin-bottom: 4.8rem !important}


.mx-xl-0 {margin-left:0 !important;margin-right: 0 !important}
.mx-xl-1 {margin-left:0.4rem !important;margin-right: 0.4rem !important}
.mx-xl-2 {margin-left:0.8rem !important;margin-right: 0.8rem !important}
.mx-xl-3 {margin-left:1.2rem !important;margin-right: 1.2rem !important}
.mx-xl-4 {margin-left:1.6rem !important;margin-right: 1.6rem !important}
.mx-xl-5 {margin-left:2.0rem !important;margin-right: 2.0rem !important}
.mx-xl-6 {margin-left:2.4rem !important;margin-right: 2.4rem !important}
.mx-xl-7 {margin-left:2.8rem !important;margin-right: 2.8rem !important}
.mx-xl-8 {margin-left:3.2rem !important;margin-right: 3.2rem !important}
.mx-xl-9 {margin-left:3.6rem !important;margin-right: 3.6rem !important}
.mx-xl-10 {margin-left:4.0rem !important;margin-right: 4.0rem !important}
.mx-xl-11 {margin-left:4.4rem !important;margin-right: 4.4rem !important}
.mx-xl-12 {margin-left:4.8rem !important;margin-right: 4.8rem !important}

}


/* ---------------------- Iconography ---------------------- */

.icon {display: inline-block;width:24px;height:24px;overflow: hidden; vertical-align: middle;background-repeat: no-repeat;margin:auto auto}

.icon.fill-light path,
.icon.fill-light polygon,
.icon.fill-light rect,
.icon.fill-light circle {fill:#fff;}

.icon.fill-dark path,
.icon.fill-dark polygon,
.icon.fill-dark rect,
.icon.fill-dark circle  {fill:var(--text-gray1);}

.icon-m {width:24px;height:24px;}
.icon-s {width:16px;height:16px;}

.icon-brand {background-image:url(/img/cmm/icon_brand.svg);} /* 브랜드 아이콘 */
.icon-essential {background-image:url(/bcm/img/cmm/icon_essential.svg);} /* 기본 아이콘 */
.icon-share {background-image:url(/img/cmm/icon_share.svg);} /* 공유 아이콘 */

/* navigation icons */
.icon.i-arrow-left-dark {background-position: 0 0;}
.icon.i-arrow-left-light {background-position: -24px 0;}
.icon.i-arrow-down-dark {background-position: -48px 0;}
.icon.i-arrow-down-light {background-position: -72px 0;}
.icon.i-delete-dark {background-position: -96px 0;}
.icon.i-delete-light {background-position: -120px 0;}
.icon.i-arrow-move {background-position: -144px 0;}
.icon.i-arrow-move-s {background-position: -168px 0;}


/* function icons */
.icon.i-search-dark {background-position: 0 -24px;}
.icon.i-search-light {background-position: -24px -24px;}
.icon.i-lang {background-position: -48px -24px;}

.icon.i-online-dark {background-position: 0 -48px;}
.icon.i-online-light {background-position: -24px -48px;}

/* Share icons */
.icon.i-instagram {background-position: 0 0;}
.icon.i-youtube {background-position: -24px 0;}
.icon.i-kakaotalk {background-position: -48px 0;}
.icon.i-facebook {background-position: -72px 0;}
.icon.i-twiter {background-position: -96px 0;}




/* ====================== Components ====================== */
	


/* Thumbnail */

.center-block {display:block;margin-left:auto;margin-right:auto;}
.thumb {position:relative;display:block;overflow:hidden;}
.thumb > img {display:block;height:auto;max-width:100%;object-fit:cover;}
.thumb-circle {position:relative;display:block;overflow:hidden;border-radius:50%;-webkit-border-radius:50%;}
.thumb-circle > img {display:block;height:auto;max-width:100%;object-fit:cover;}
.avatar {position:relative;display:inline-block;overflow:hidden;border-radius:50%;-webkit-border-radius:50%;}
.avatar > img {display:block;max-width:100%;width:100%;height:100%;object-fit:cover;}

	
	
/* Buttons */

.btn {position:relative;display: inline-block;line-height:1;color:#222;border: 1px solid transparent;border-radius:var(--radius-xs);
	background-color: transparent;padding: 0 1.6rem;font-size: 1.4rem;font-weight:bold;
	vertical-align: middle;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
	transition: var(--transition);text-align: center}

@media (prefers-reduced-motion: reduce) {
  .btn {transition: none;}
}

.btn:disabled, .btn.disabled, fieldset:disabled .btn {pointer-events: none;opacity: 0.65;}
.btn.btn-block {display:block;width:100%;}
.btn.btn-m-block {display:block;width:100%;}

.btn.btn-white {color:var(--text-gray1);background-color:#fff}
.btn.btn-primary {color:#fff;background:var(--bg-gr-light)}
.btn.btn-line {color:var(--text-gray2);background-color:#fff;border-color:#aaa}

.btn.btn-xs {padding: 0rem 1.6rem;min-width:1rem;height:3.2rem;line-height:3.2rem;font-size:1.3rem;font-weight:400}
.btn.btn-s {padding: 0rem 1.6rem;min-width:1rem;height:4rem;line-height:4rem}
.btn.btn-m {padding: 0 2em;min-width:24rem;height:4.8rem;line-height:4.6rem;font-size: 1.5rem;}
.btn.btn-l {padding: 0 2em;min-width:24rem;height:5.6rem;line-height:5.6rem;font-size:1.6rem}


.btn-with-icon .inner {display: flex;justify-content: flex-start;align-items: center;content:none}
.btn-with-icon .inner .icon {margin-left:4px;}
.btn-with-icon.icon-left .inner .icon {margin-right:4px !important;margin-left:0 !important}
.btn-with-icon.icon-right .inner .icon {margin-left:4px !important;margin-right:0 !important}


/* Text button */
.btn-text {position:relative;display:inline-block;height:2.4rem;text-align:left;line-height:100%;}

.btn-text-s {font-size:1.4rem;}
.btn-text-m {font-size:1.6rem;line-height: 2.4rem}

.btn-text-gray {color:var(--text-gray2);}
.btn-text-white {color:#fff}



@media (min-width: 992px) {
	.btn.btn-m-block {display: inline-block;width:auto;text-align: center}
}






/* Tabs */

.tabs {position: relative;padding-top:0;padding-bottom:3.2rem;}
.tabs ul {display: flex;justify-content: flex-start;align-items: center;margin-left:-0.4rem;margin-right:-0.4rem}
.tabs ul li {padding-left:0.4rem;padding-right:0.4rem}
.tabs ul li a {display:block;}

/* tab size */
.tab-s li a {border-radius: var(--radius-xs);font-size: 1.4rem;font-weight:bold;padding:0 12px;line-height:3.2rem;height:3.2rem;}

.tabs ul.tab-xs {margin-left:-0.2rem;margin-right:-0.2rem}
.tabs ul.tab-xs li {padding-left:0.2rem;padding-right:0.2rem}
.tab-xs li a {border-radius: var(--radius-xs);font-size: 1.3rem;font-weight:bold;padding:0 12px;line-height:3.2rem;height:3.2rem;}

/* tab color */
.tab-basic-dark li a {color:#fff;}
.tab-basic-dark li.on a {background:#fff;color:var(--text-gray1)}

.tab-basic li a {background:#fff;color:var(--text-gray1);}
.tab-basic li.on a {background:var(--bg-dark);color:#fff}


@media (min-width: 992px) {
	
	.tabs ul {margin-left:-0.8rem;margin-right:-0.8rem}
	.tabs ul li {padding-left:0.8rem;padding-right:0.8rem}
	
	.tab-s li a {font-size: 1.6rem;font-weight:bold;padding:0 16px;line-height:4rem;height:4rem;}
	
	.tabs ul.tab-xs {margin-left:-0.4rem;margin-right:-0.4rem}
	.tabs ul.tab-xs li {padding-left:0.4rem;padding-right:0.4rem}
	.tab-xs li a {font-size: 1.4rem;font-weight:bold;padding:0 12px;line-height:3.6rem;height:3.6rem;}

}



/* Accordion */

.accordion-tabs {}
.accordion-tab {display:block;overflow: hidden; border-radius:var(--radius-s);box-shadow: 0 4px 4px 10px rgba(0, 0, 0, 0.02);margin-bottom:0.8rem}

.accordion-label {display: flex;justify-content: space-between;cursor: pointer;background:#222;color:#fff;padding:1.6rem 2.4rem}
.accordion-label:hover {background: #262626;}
.accordion-label::after {content: "";width: 24px;height: 24px;text-align: center;display: inline-block;overflow: hidden; vertical-align: middle;background-repeat: no-repeat;margin:auto 0;background-image:url(/img/cmm/icon_essential.svg);background-position: -48px 0;transition: all 0.35s;}  /* Icon */

.accordion-content {max-height: 0;padding: 0 1em;color:#fff;transition: all 0.35s;}

.acc-tab-close {display: flex;justify-content: flex-end;padding: 1em;font-size: 0.75em;background: #2c3e50;cursor: pointer;}
.acc-tab-close:hover {background: #222;}

.accordion-tabs input {position: absolute;opacity: 0;z-index: -1;}
.accordion-tabs input:checked + .accordion-label {background: #222;}
.accordion-tabs input:checked + .accordion-label::after {transform: rotate(180deg);}
.accordion-tabs input:checked ~ .accordion-content {max-height: 100vh;padding: 1em;}





/* Tags */
.tag-group {position: relative}
.tag-group .tag {margin-right:4px}
.tag {display:inline-block;border-radius:4px;overflow: hidden;font-weight:600}

/* tag - size */
.tag.tag-xs {height:2rem;line-height:2rem;font-size:11px;padding:0 0.7rem;}
.tag.tag-s {height:2.4rem;line-height:2.4rem;font-size:12px;padding:0 1.6rem;}
	
	@media (min-width: 1200px) {
		
		.tag.tag-xs {height:2.4rem;line-height:2.4rem;font-size:12px;padding:0 0.8rem;}
		.tag.tag-s {height:2.8rem;line-height:2.8rem;font-size:13px;padding:0 1.6rem;}
	
	}



/* tag - colors */
.tag.tag-info {background:var(--bg-blue);color:#fff;}
.tag.tag-white {background:#fff;color:var(--text-gray1)}
.tag.tag-highlight {background:var(--bg-gr-light);color:#fff;}

/* tag - with icon */
.tag.tag-with-icon {}



/* Badges */
.badge {display:inline-block;font-size:1.2rem;line-height:2.2rem;font-family: 'Cafe24Ohsquare';color:#fff;padding:0 1.2rem;height:2.2rem;border-radius:8px}
.badge_highlight {background:var(--bg-highlight);}





/* ====================== Notifications ====================== */

/* Tool tip */
.tooltip {position: absolute;z-index: 1070;display: block;margin: 0;line-height: 1.5;text-align: center;text-align: start;line-break: auto;font-size: 1.3rem;word-wrap: break-word;opacity: 0;}
.tooltip.show {opacity: 0.9;}

.bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"] {padding: 0.4rem 0;}
.bs-tooltip-top .tooltip-arrow, .bs-tooltip-auto[x-placement^="top"] .tooltip-arrow {bottom: 0;}
.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[x-placement^="top"] .tooltip-arrow::before {top: 0;border-width: 0.4rem 0.4rem 0;border-top-color: #000;}
.bs-tooltip-bottom, .bs-tooltip-auto[x-placement^="bottom"] {padding: 0.4rem 0;}
.bs-tooltip-bottom .tooltip-arrow, .bs-tooltip-auto[x-placement^="bottom"] .tooltip-arrow {top: 0;}
.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .tooltip-arrow::before {bottom: 0;border-width: 0 0.4rem 0.4rem;border-bottom-color: #000;}


/* Toast */
.toast {max-width: 350px;overflow:hidden;font-size:1.4rem;background-color:#fff;background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.1);box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);-webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);opacity: 0;border-radius: 0.3rem;}
.toast:not(:last-child) {margin-bottom: 0.75rem;}
.toast.showing {opacity: 1;}
.toast.show {display: block;opacity: 1;}
.toast.hide {display: none;}
.toast-header {display: flex;align-items: center;padding: 1rem 1.5rem;background-clip: padding-box;}
.toast-body {padding: 1.5rem;}



/* messeagebar */

.messagebar {position: relative;display: flex; flex-direction: column; justify-content: center;align-items: center;border-radius: var(--radius-s);overflow: hidden;padding-top:1.2rem;padding-bottom:1.6rem}
.messagebar .tag {margin-bottom:1.2rem;}
.messagebar span.icon {margin-bottom:0;}

.messagebar.messagebar-info-light {background:#222;color: #fff;}
.messagebar.messagebar-info-dark {background:#292929;color: #fff;}
.messagebar.messagebar-warning {background:#292929;color: #fff;}
.messagebar.messagebar-success {background:#292929;color: #fff;}


@media (min-width: 1200px) {
	
	.messagebar {flex-direction: row; justify-content: center;align-items: center;padding-top:1.6rem;padding-bottom:1.6rem}
	.messagebar .tag {margin-right:16px;margin-bottom:0}
	.messagebar span.icon {margin-right:4px;margin-bottom:0}

}


/* modal */
.modal-open {overflow: hidden;}
.modal-open .modal {overflow-x: hidden;overflow-y: auto;}

.modal {position: fixed;top: 0;left: 0;z-index: 1050;display: none;width: 100%;height: 100%;overflow: hidden;outline: 0;}
.modal-dialog {position:relative;width: auto;margin: 2rem 0rem;pointer-events: none;}
.modal.fade .modal-dialog {transition: transform 0.3s ease-out;transform: translate(0, -50px);}

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {transition: none;}
}

.modal.show .modal-dialog {transform: none;}
.modal-dialog-scrollable {max-height: calc(100% - 1rem);margin: 2rem 0rem;} /* modal scroll */
.modal-dialog-scrollable .modal-content {overflow: hidden;}
.modal-dialog-scrollable .modal-body {overflow-y: auto;}

.modal-dialog-centered {display: flex;align-items: center; min-height: calc(100% - 1rem);} /* vertical cetner modal */

.modal-content {position: relative;display: flex;flex-direction: column;width: 100%;pointer-events: auto;background-color: #fff;background-clip: padding-box;border: 1px solid rgba(0, 0, 0, 0.2);border-radius: 0.6rem;outline: 0;}

.modal-backdrop {position:fixed;top:0;left:0;z-index:1040; width:100vw;height:100vh;background-color: #000;}
.modal-backdrop.fade {opacity: 0;}
.modal-backdrop.show {opacity: 0.7;}

.modal-header .close {position:absolute;top:1rem;right:1rem;width:5rem;height:5rem;text-align:center;color:#fff;z-index:10}
.modal-header .close span {display:block;font-size:4rem;line-height:4rem;}
.modal-title {margin-bottom:0;line-height: 1.5;}
.modal-body {position: relative;flex: 1 1 auto;padding: 2.4rem;}
.modal-footer {display: flex;flex-wrap: wrap;flex-shrink: 0;align-items: center;justify-content: flex-end;padding: 0.75rem;border-top: 1px solid #dee2e6;border-bottom-right-radius: calc(0.3rem - 1px);border-bottom-left-radius: calc(0.3rem - 1px);}
.modal-scrollbar-measure {position: absolute;top: -9999px;width: 50px;height: 50px;overflow: scroll;}

.modal-body:not {cursor: url(/img/cmm/cursor_close.svg) 5 5, progress;}


@media (min-width: 768px) {
  .modal-dialog {max-width: 500px;margin: 1.75rem auto;}
  .modal-dialog-scrollable {max-height: calc(100% - 3.5rem);margin: 1.75rem auto;}
  .modal-dialog-centered {min-height: calc(100% - 3.5rem);}
  .bd-content>[id] {scroll-margin-top:4rem}
  
  .modal-dialog.modal-sm {max-width:500px}
}

@media (min-width: 992px) {
  .modal-dialog {max-width: 780px;}
  .modal-body {padding:0 5.5rem 5.5rem 5.5rem;}
  .modal-dialog.modal-sm {max-width:500px}
}

@media (min-width: 1200px) {
  .modal-dialog {max-width: 960px;}
  .modal-body {padding:0 8rem 5rem 8rem;}
  .modal-dialog.modal-sm {max-width:500px}
}



/* pagenation */
.pagination {display: flex;padding-left: 0;list-style: none;}
.page-link {position: relative;display: block;color: #0d6efd;text-decoration: none;background-color: #fff;border: 1px solid #dee2e6;}
.page-link:hover {z-index: 2;color: #024dbc;background-color: #e9ecef;border-color: #dee2e6;}
.page-link:focus {z-index: 3;outline: 0;box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);}
.page-item:not(:first-child) .page-link {margin-left: -1px;}
.page-item.active .page-link {z-index: 3;color: #fff;background-color: #0d6efd;border-color: #0d6efd;}
.page-item.disabled .page-link {color: #6c757d;pointer-events: none;background-color: #fff;border-color: #dee2e6;}
.page-link {padding: 0.375rem 0.75rem;}
.page-item:first-child .page-link {border-top-left-radius: 0.25rem;border-bottom-left-radius: 0.25rem;}
.page-item:last-child .page-link {border-top-right-radius: 0.25rem;border-bottom-right-radius: 0.25rem;}



/* ====================== Forms ====================== */

/* Input text */
.form-label {margin-bottom: 0.6rem;font-weight:bold;font-size:1.6rem;color:var(--text-gray1);display:inline-block}
.form-control {display: block;width: 100%;padding: 0.8rem 1.6rem;font-weight: 400;font-size: 1.6rem;line-height: 100%;
  color:var(--text-gray1);
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid var(--line-gray1);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius:var(--radius-s);
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.form-control.form-control-l {height:5.6rem;padding: 0.8rem 2rem;}
.form-control.form-control-m {height:4rem;}
.form-control.form-control-s {height:3.2rem;}


@media (prefers-reduced-motion: reduce) {
  .form-control {transition: none;}
}

.form-control:focus {border-color: #8bbafe;box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);}
.form-control::-webkit-input-placeholder {color:var(--txt-muted, gray);opacity: 1;}
.form-control::-moz-placeholder {color:var(--txt-muted, gray);opacity: 1;}
.form-control::-ms-input-placeholder {color:var(--txt-muted, gray);opacity: 1;}
.form-control::placeholder {color:var(--txt-muted, gray);opacity: 1;}
.form-control:disabled, .form-control[readonly] {background-color: #f5f5f5;opacity: 1;color:#aaa;}
.form-control:disabled, .form-control[readonly]:focus {box-shadow: none;border-color:#ced4da}

/* Input feedback */
.valid-feedback {display: none;width: 100%;margin-top: 0.25rem;font-size: 1.2rem;color: #28a745;}
.was-validated :valid ~ .valid-feedback,
.was-validated :valid ~ .valid-tooltip,
.is-valid ~ .valid-feedback {display: block;}
.was-validated .form-control:valid, .form-control.is-valid {
  border-color: #28a745;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.invalid-feedback {display: none;width: 100%;margin-top: 0.25rem;font-size: 1.2rem;color: #dc3545;}
.invalid-tooltip {position: absolute;top: 100%;z-index: 5;display: none;max-width: 100%;padding: 0.25rem 0.5rem; margin-top: .1rem;font-size: 1.2rem;color: #fff;background-color: rgba(220, 53, 69, 0.9);border-radius: 0.25rem;}

.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip,
.is-invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-tooltip {
  display: block;
}

.was-validated .form-control:invalid, .form-control.is-invalid {
  border-color: #dc3545;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {border-color: #dc3545;box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);}
.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {padding-right: calc(1.5em + 0.75rem);background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);}


/* Select box */
.form-select {display: block;width: 100%;padding: 1rem 1.2rem;font-size: 1.5rem;font-weight: 400;
  line-height: 1.5;color:var(--primary-black);
  vertical-align: middle;background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;background-position: right 0.75rem center;background-size: 16px 12px;
  border: 1px solid #ced4da;border-radius: 0.25rem;-webkit-appearance: none;-moz-appearance: none;appearance: none;
}
.form-select:focus {border-color: #8bbafe;outline: 0;box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);}
.form-select:focus::-ms-value {color: #495057;background-color: #fff;}
.form-select[multiple], 
.form-select[size]:not([size="1"]) {height: auto;padding-right: 0.75rem;background-image: none;}
.form-select:disabled {color: #6c757d;background-color: #e9ecef;}
.form-select:-moz-focusring {color: transparent;text-shadow: 0 0 0 #495057;}
.form-select-sm {height: calc(1.5em + 0.5rem + 2px);padding-top: 0.25rem;padding-bottom: 0.25rem;padding-left: 0.5rem;font-size: 0.875rem;}
.form-select-lg {height: calc(1.5em + 1rem + 2px);padding-top: 0.5rem;padding-bottom: 0.5rem;padding-left: 1rem;font-size: 1.25rem;}


/* Checkbox */
.form-check {display:block;min-height:2rem;padding-left:2.8rem;}
.form-check .form-check-input {float: left;margin-left: -2.8rem;}
.form-check-input {
  width:2rem;height:2rem;
  margin-top: 0.2rem;
  vertical-align: top;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
  transition: background-color 0.15s ease-in-out, background-position 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}


@media (prefers-reduced-motion: reduce) {
  .form-check-input {transition: none;}
}

.form-check-input[type="checkbox"] {border-radius: 0.3rem;}
.form-check-input[type="radio"] {border-radius: 50%;}
.form-check-input:active {-webkit-filter: brightness(90%);filter: brightness(90%);}
.form-check-input:checked {background-color:var(--primary-black, #111);border-color:var(--primary-black, #111)}

.form-check-input:checked[type="checkbox"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type="radio"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input[type="checkbox"]:indeterminate {
  background-color: #0d6efd;
  border-color: #0d6efd;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

.form-check-input:disabled {pointer-events: none;-webkit-filter: none;filter: none;opacity: .5;}
.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {opacity: .5;}

.form-check-inline {display: inline-block;margin-right: 1rem;}



/* Switch */
.form-switch {padding-left: 2.5em;}
.form-switch .form-check-input {width:4rem;height:2.4rem;margin-left: -2.5em;
	background-image: url(/img/cmm/ico_switch.svg);
	/*background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");*/
	background-position: left center;border-radius: 2em;border-color:#ccc;border-width:2px}
.form-switch .form-check-input:focus {/*background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238bbafe'/%3e%3c/svg%3e");*/}
.form-switch .form-check-input:checked {
  background-position: right center;
  background-color:#3053A3;
  background-image: url(/img/cmm/ico_switch_check.svg);
  border-color:#3053A3;border-width: 2px;
}


/* Input group */
.input-group {position: relative;display: flex;flex-wrap: wrap;align-items: stretch; width: 100%;}
.input-group > .form-control,
.input-group > .form-select,
.input-group > .form-file {position: relative;flex: 1 1 auto;width: 1%; min-width: 0;}
.input-group > .form-control:focus,
.input-group > .form-select:focus,
.input-group > .form-file .form-file-input:focus ~ .form-file-label {z-index: 3;}
.input-group > .form-file > .form-file-input:focus {z-index: 4;}
.input-group > .form-file:not(:last-child) > .form-file-label {border-top-right-radius: 0;border-bottom-right-radius: 0;}
.input-group > .form-file:not(:first-child) > .form-file-label {border-top-left-radius: 0;border-bottom-left-radius: 0;}
.input-group .btn {position: relative;z-index: 2;}
.input-group .btn:focus {z-index: 3;}
.input-group-text {display: flex;align-items: center;padding: 1rem 1.2rem;font-size: 1.5rem;
  line-height: 1.5;color:var(--primary-black);text-align: center;white-space: nowrap;font-weight:bold;color:var(--txt-gray);display:inline-block}

.input-group {border: 1px solid #ced4da; border-radius: 0.3rem;-webkit-border-radius: 0.3rem;}
.input-group > .form-select,
.input-group > .form-control {border:0;}

.input-group > .form-select + .form-control {border-left:1px solid #ced4da;border-radius: 0 0.3rem 0.3rem 0;}



/* dropdown */
.dropdown, .dropleft, .dropright, .dropup {position:relative}
.dropdown-toggle {white-space: nowrap;}
.dropdown-toggle::after {display: inline-block;margin-left:0.6rem; vertical-align: 0.255em;content: "";border-top: 0.3em solid;border-right: 0.3em solid transparent;border-bottom: 0;border-left: 0.3em solid transparent;margin-top:3px}
.dropdown-toggle:empty::after {margin-left: 0;}

.dropdown-menu {position:absolute;top:100%;left:0;z-index:100;display:none;min-width:22rem;padding:1.6rem 1rem;margin:0;font-size:1.4rem;text-align: left;
	background-color: #fff;background-clip: padding-box;border: 1px solid rgba(0, 0, 0, 0.15);border-radius: 0.3rem;color:#212529;box-shadow:3px 3px 10px rgba(0,0,0,0.1)}
.dropdown-menu.dropdown-s {min-width:14rem}
.dropdown-menu.show {display: block;position: absolute; transform: translate3d(0px, 38px, 0px); top: 0px; left: 0px; will-change: transform;}
	
.dropdown-item {display:block;width:100%;padding:0.5rem 1rem;clear:both;color:#212529;white-space: nowrap;background-color:transparent;text-align:left}
.dropdown-item:hover, .dropdown-item:focus {color: #16181b;background-color: #f8f9fa;}
.dropdown-item.active, .dropdown-item:active {color: #fff;text-decoration: none;background-color: #0d6efd;}
.dropdown-item.disabled, .dropdown-item:disabled {color: #6c757d;pointer-events: none;background-color: transparent;}

.dropdown-header {display: block;padding: 0 1rem 0.5rem;margin-bottom: 0;font-size:1.1rem;color: #777;white-space: nowrap;text-transform: uppercase;font-weight:500}





/* Spinners */
@-webkit-keyframes spinner-border {
  to {transform: rotate(360deg);}
}

@keyframes spinner-border {
  to {transform: rotate(360deg);}
}

.spinner-border {display: inline-block;width: 2rem;height: 2rem;vertical-align: text-bottom;border: 0.25em solid currentColor;border-right-color: transparent;border-radius: 50%;-webkit-animation: spinner-border 0.75s linear infinite;animation: spinner-border 0.75s linear infinite;}


@-webkit-keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}

@keyframes spinner-grow {
  0% {transform: scale(0);}
  50% {opacity: 1;transform: none;}
}

.spinner-grow {display: inline-block;width: 2rem;height: 2rem;vertical-align: inherit;
  background-color: currentColor;border-radius: 50%;opacity: 0;-webkit-animation: spinner-grow 0.75s linear infinite;animation: spinner-grow 0.75s linear infinite;}

.spinner-grow-sm {width: 1rem;height: 1rem;}