html {font-size: 62.5%}
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
:root{
  --rbb-font:'Pretendard-Regular',;

  --rbb-inner:1480px;

  --rbb-color-main1: #1a3f82;
  --rbb-color-main2: #4280c3;
  --rbb-color-main3: #95b3d7;
  --rbb-color-sub1:#e90000;
  --rbb-color-sub2:#f3f3f4;
  --rbb-color-sub3:#fff;

  --rbb-bg-dark:#050609;
  --rbb-bg-light:#E9E9E9;

  --rbb-text-dark1:#050609;
  --rbb-text-dark2:#555;
  --rbb-text-dark3:#999;
  --rbb-text-light1:#fff;
  --rbb-text-light2:#ddd;
  --rbb-text-light3:#bbb;
  --rbb-text-sub1:#e90000;
  --rbb-text-sub2:#0000e9;
  --rbb-text-sub3:#00e900;

  --rbb-fs-nbb:2rem;
  --rbb-fs-nb:1.8rem;
  --rbb-fs-n:1.6rem;
  --rbb-fs-b:2.4rem;
  --rbb-fs-bb:3.2rem;
  --rbb-fs-bbb:5.0rem;
  --rbb-fs-x:6.2rem;
  --rbb-fs-s:1.6rem;
  --rbb-fs-ss:1.4rem;
  --rbb-fs-sss:1.2rem;


  --rbb-pd-bbb:16rem;
  --rbb-pd-bb:7rem;
  --rbb-pd-b:4rem;
  --rbb-pd-n:2rem;
  --rbb-pd-nb:3rem;
  --rbb-pd-ns:1.4rem;
  --rbb-pd-s:1rem;
  --rbb-pd-ss:0.8rem;
  --rbb-pd-sss:0.4rem;

--rbb-br-b: 1.3rem;
--rbb-br-n: 0.9rem;
--rbb-br-s: 3.9rem;

  --rbb-btn-pd:1.5rem 2.4rem;
}
 html,
 body {
  position: relative;
  height: 100%;
}


.autoplay-progress {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 10;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: var(--swiper-theme-color);
}

.autoplay-progress svg {
  --progress: 0;
  position: absolute;
  left: 0;
  top: 0px;
  z-index: 10;
  width: 100%;
  height: 100%;
  stroke-width: 4px;
  stroke: var(--swiper-theme-color);
  fill: none;
  stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
  stroke-dasharray: 125.6;
  transform: rotate(-90deg);
}


.rbb-ui {font-family: var(--rbb-font); font-size:var(--rbb-fs-n); color:var(--rbb-text-dark2)}
.rbb-ui .color-main1 {color:var(--rbb-color-main1)}
.rbb-ui h1 {font-size:var(--rbb-fs-bbb)}
.rbb-ui h2 {font-size:var(--rbb-fs-bb)}
.rbb-ui h3 {font-size:var(--rbb-fs-b)}
.rbb-ui h4 {font-size:var(--rbb-fs-n)}
.rbb-ui h5 {font-size:var(--rbb-fs-s)}
.rbb-ui h6 {font-size:var(--rbb-fs-ss)}
.rbb-ui p,pre,input,textarea,div,nav,section,i,strong,em,b,button,a {font-size:var(--rbb-fs-n)}

.rbb-ui img {max-width: 100%}
.rbb-ui .item .img {display: inline-block; width:2rem}
/*.rbb-ui select {display:none}*/
.rbb-ui select {padding:var(--rbb-pd-s) var(--rbb-pd-n);border:1px solid var(--rbb-text-dark3); text-align: left; box-shadow:var(--rbb-box-shadow1);background:var(--rbb-color-sub3); font-size:var(--rbb-fs-n); position:relative; border-radius:var(--rbb-br-s);  margin:4px 6px 4px 0;  outline:0; }
.rbb-ui select:focus { z-index:3;border:2px solid var(--rbb-color-main2);box-shadow:var(--rbb-box-shadow2);margin:3px 4px 3px 0;background:var(--rbb-color-sub3); color:var(--rbb-text-dark1);}
.rbb-ui select option {border-radius:0 !important}
.rbb-ui .custom-select-container {
  position:relative;display:inline-block; min-width: 100px;
  vertical-align:middle;
}
.rbb-ui .custom-select {
  position: relative;
  display: block;
  cursor: pointer;
  background-color: var(--rbb-color-sub3);
  padding: var(--rbb-pd-ns);
  border: 1px solid var(--rbb-text-dark3);
  border-radius: var(--rbb-br-s);
  user-select: none;
  padding-right: 40px;
  word-break: keep-all;
  box-shadow:var(--rbb-box-shadow1);
}
.rbb-ui .custom-select:before {
  position:absolute;
  right: 12px;
  top:35%;
  font-family:'swiper-icons';
  content: 'next';
  transform: rotate(90deg) scale(0.7);
}

.rbb-ui .custom-options {
  padding:var(--rbb-pd-ns) 0;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  transform:translateY(-3px);
  background-color: var(--rbb-color-sub3);
  border: 1px solid var(--rbb-text-dark3);
  border-radius:0 0 var(--rbb-br-s) var(--rbb-br-s);
  overflow:hidden;
  border-top:0;
  max-height: 150px;
  overflow-y: auto;
  z-index: 10;
  display: none;
  box-shadow:var(--rbb-box-shadow2);
}
.rbb-ui .custom-options::-webkit-scrollbar {
  width: 6px;
}

.rbb-ui .custom-options::-webkit-scrollbar-thumb {
  background: #bbb; /* 스크롤바 색상 */
  border-radius: 10px; /* 스크롤바 둥근 테두리 */
}

.rbb-ui .custom-options::-webkit-scrollbar-track {
  background: #ddd;  /*스크롤바 뒷 배경 색상*/
}

.rbb-ui .custom-options.show {
  display: block;
}

.rbb-ui .custom-options li {
  padding: 8px;
  cursor: pointer;
  list-style: none;
}
.rbb-ui .custom-options li:hover {
  background-color: var(--rbb-color-sub2);
}

.rbb-ui .rp {
  position: relative;
  overflow: hidden;
}

.rbb-ui .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(256, 256, 256, 0.2);
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
  pointer-events: none;
}
.rbb-ui .out .ripple,
.rbb-ui .out-sec .ripple,
.rbb-ui .out-thd .ripple{
  background: rgba(80, 80, 80, 0.2);
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}


.rbb-ui .chips a,
.rbb-ui .chips button {display:inline-block; border:1px solid var(--rbb-color-main1); background:none; color:var(--rbb-color-main1); padding:var(--rbb-pd-s) var(--rbb-pd-n); cursor:pointer; border-radius:var(--rbb-br-b);font-size:var(--rbb-fs-n)}
.rbb-ui .chips a:hover,
.rbb-ui .chips button:hover,
.rbb-ui .chips a.on,
.rbb-ui .chips button.on {background:var(--rbb-color-main1);color:var(--rbb-text-light1)}

.rbb-ui .tabs {position:relative}
.rbb-ui .tabs ul {display:flex; }
.rbb-ui .tabs ul:before {content:'';background:var(--rbb-color-sub2); height:2px; width:100%; bottom:0;left:0;right:0; z-index: -1;position:absolute}
.rbb-ui .tabs ul li {}
.rbb-ui .tabs ul li a {display:block;padding:var(--rbb-pd-n) var(--rbb-pd-n);cursor:pointer;color:var(--rbb-text-dark3);font-weight:600; word-break:keep-all}
.rbb-ui .tabs ul li a.current {color:var(--rbb-color-main1);}
.rbb-ui .tabs span.bar {color:var(--rbb-color-main1);position:absolute;display:block;width:0px;height:4px; bottom:0;left:0;background:var(--rbb-color-main1); transition:all 0.4s ease}


.rbb-ui .formArea {}
.rbb-ui .formArea input[type=text],
.rbb-ui .formArea input[type=password],
.rbb-ui .formArea input[type=tel],
.rbb-ui .formArea input[type=date],
.rbb-ui .formArea input[type=number],
.rbb-ui .formArea input[type=email],
.rbb-ui .formArea textarea {padding:var(--rbb-pd-ns);border:1px solid var(--rbb-text-dark3); text-align: left; box-shadow:var(--rbb-box-shadow1);background:var(--rbb-color-sub3); font-size:var(--rbb-fs-n); position:relative; border-radius:var(--rbb-br-s);  margin:4px 6px 4px 0;appearance:none;  outline:0;vertical-align:middle}
.rbb-ui .formArea input[type=text]:focus,
.rbb-ui .formArea input[type=password]:focus,
.rbb-ui .formArea input[type=tel]:focus,
.rbb-ui .formArea input[type=date]:focus,
.rbb-ui .formArea input[type=number]:focus,
.rbb-ui .formArea input[type=email]:focus,
.rbb-ui .formArea textarea:focus { z-index:3;border:2px solid var(--rbb-color-main2);box-shadow:var(--rbb-box-shadow2);margin:3px 4px 3px 0;background:var(--rbb-color-sub3); color:var(--rbb-text-dark1);}
.rbb-ui .formArea textarea {width: 100%;}

.rbb-ui .formArea label+input:not([type=checkbox],[type=radio]),
.rbb-ui .formArea .label+input:not([type=checkbox],[type=radio]) {display:block; }

.rbb-ui .rbbtns[role=group] {display:flex; padding:var(--rbb-pd-s) 0}
.rbb-ui .rbbtns[role=group] .rbbtn {border-radius:0;margin:0;}
.rbb-ui .rbbtns[role=group] .rbbtn:first-child {border-radius:var(--rbb-br-s) 0 0 var(--rbb-br-s);}
.rbb-ui .rbbtns[role=group] .rbbtn:not(:first-child) {margin-left: -1px}
.rbb-ui .rbbtns[role=group] .rbbtn:last-child {border-radius:0 var(--rbb-br-s) var(--rbb-br-s) 0;}

.rbb-ui .label {color:var(--rbb-color-main1); padding:var(--rbb-pd-xs) 0;display:inline-block; font-size:var(--rbb-fs-s);margin:var(--rbb-pd-s) var(--rbb-pd-s) 0 0}
.rbb-ui .label:before {content:''}
.rbb-ui .rbbtn {display:inline-block; cursor:pointer;padding:var(--rbb-pd-ns) var(--rbb-pd-b); border-radius:var(--rbb-br-s); text-align:center; background:var(--rbb-color-main1); color:var(--rbb-text-light1); border:1px solid var(--rbb-color-main1); font-size:var(--rbb-fs-n);position:relative; overflow: hidden;vertical-align:middle;}
.rbb-ui .rbbtn.n {padding:var(--rbb-pd-ns) var(--rbb-pd-n);font-size:var(--rbb-fs-n)}
.rbb-ui .rbbtn.s {padding:var(--rbb-pd-sss) var(--rbb-pd-ss);font-size:var(--rbb-fs-s)}
.rbb-ui .rbbtn.ss {padding:var(--rbb-pd-sss) var(--rbb-pd-ss);font-size:var(--rbb-fs-ss)}
.rbb-ui .rbbtn.b {padding:var(--rbb-pd-n) var(--rbb-pd-b);font-size:var(--rbb-fs-nb)}
.rbb-ui .rbbtn.bb {padding:var(--rbb-pd-n) var(--rbb-pd-b);font-size:var(--rbb-fs-b)}
.rbb-ui .rbbtn.f {width:100%}
.rbb-ui .rbbtn.sec {background:var(--rbb-color-main2);border:1px solid var(--rbb-color-main2); color:var(--rbb-text-light1)}
.rbb-ui .rbbtn.thd {background:var(--rbb-color-main3);border:1px solid var(--rbb-color-main3); color:var(--rbb-text-light1)}
.rbb-ui .rbbtn.out {background:none; color:var(--rbb-color-main1); border:1px solid var(--rbb-color-main1)}
.rbb-ui .rbbtn.out-sec {background:none; color:var(--rbb-color-main2); border:1px solid var(--rbb-color-main2)}
.rbb-ui .rbbtn.out-thd {background:none; color:var(--rbb-color-main3); border:1px solid var(--rbb-color-main3)}
.rbb-ui .rbbtn.ui {display:inline-block; padding:var(--rbb-pd-ss);background:none; color:var(--rbb-text-dark3);border:1px solid var(--rbb-text-dark3);}
.rbb-ui .rbbtn.ui:hover {background:var(--rbb-color-main1); color:var(--rbb-text-light1);border:1px solid var(--rbb-color-main1);z-index:2}
.rbb-ui .rbbtn.ui.sec:hover {background:var(--rbb-color-main2); color:var(--rbb-text-light1);border:1px solid var(--rbb-color-main2)}
.rbb-ui .rbbtn.ui.thd:hover {background:var(--rbb-color-main3); color:var(--rbb-text-light1);border:1px solid var(--rbb-color-main3)}
.rbb-ui .rbbtns[role=group] {display:flex; padding:var(--rbb-pd-s) 0}
.rbb-ui .rbbtns[role=group] .rbbtn {border-radius:0;margin:0;}
.rbb-ui .rbbtns[role=group] .rbbtn:first-child {border-radius:var(--rbb-br-s) 0 0 var(--rbb-br-s);}
.rbb-ui .rbbtns[role=group] .rbbtn:not(:first-child) {margin-left: -1px}
.rbb-ui .rbbtns[role=group] .rbbtn:last-child {border-radius:0 var(--rbb-br-s) var(--rbb-br-s) 0;}

.rbb-ui .mix[role=group] {display:flex; padding:var(--rbb-pd-s) 0}
.rbb-ui .mix[role=group] > * {margin-right: -1px !important;border-radius:0 !important}
.rbb-ui .mix[role=group] > *:first-child {border-radius:var(--rbb-br-s) 0 0 var(--rbb-br-s) !important;}
.rbb-ui .mix[role=group] > *:last-child {border-radius:0 var(--rbb-br-s) var(--rbb-br-s) 0 !important;; margin-right:0 !important;}
.rbb-ui input.f {width:100%}
.rbb-ui input.bb {width:70%}
.rbb-ui input.b {width:50%}
.rbb-ui input.n {width:30%}
.rbb-ui input.s {width:20%}
.rbb-ui input.ss {width:10%;min-width:80px}

.rbb-ui .radioList {display:flex;}
.rbb-ui .radioList input[type=radio] {opacity:0; width:0;height: 0; overflow:hidden;border:0;background: none; transform: scale(0);display:block}
.rbb-ui .radioList input[type=radio]+label {display:inline-block; border-radius: var(--rbb-br-s);border:1px solid var(--rbb-text-dark3); cursor:pointer;padding:var(--rbb-pd-s) var(--rbb-pd-s) var(--rbb-pd-s) 30px; position: relative; margin:4px 6px 4px 0;box-shadow:var(--rbb-box-shadow1);}
.rbb-ui .radioList input[type=radio]+label:before,
.rbb-ui .radioList input[type=radio]+label:after {content:'';display:block; position:absolute; left:var(--rbb-pd-ns);  border-radius:50%; top:50%; transform:translate(-50%,-50%)}
.rbb-ui .radioList input[type=radio]+label:before {border:1px solid var(--rbb-text-light3); width:16px; height:16px;}
.rbb-ui .radioList input[type=radio]+label:after {width:0px; height:0px; background:var(--rbb-text-light3); transition:all 0.2s ease}
.rbb-ui .radioList input[type=radio]:checked+label {border:2px solid var(--rbb-color-main1);margin:0 2px 0 0; color:var(--rbb-color-main1);margin:3px 4px 3px 0;}
.rbb-ui .radioList input[type=radio]:checked+label:before {border:1px solid var(--rbb-color-main1); width:16px; height:16px;}
.rbb-ui .radioList input[type=radio]:checked+label:after {width:12px; height:12px; background:var(--rbb-color-main1)}

.rbb-ui .checkList {display:flex;}
.rbb-ui .checkList input[type=checkbox] {opacity:0; width:0;height: 0; overflow:hidden;border:0;background: none; transform: scale(0);display:block}
.rbb-ui .checkList input[type=checkbox]+label {display:inline-block; border-radius: var(--rbb-br-s);border:1px solid var(--rbb-text-dark3); cursor:pointer;padding:var(--rbb-pd-s) var(--rbb-pd-s) var(--rbb-pd-s) 30px; position: relative; margin:4px 6px 4px 0;box-shadow:var(--rbb-box-shadow1); }
.rbb-ui .checkList input[type=checkbox]+label:before,
.rbb-ui .checkList input[type=checkbox]+label:after {content:''; background:var(--rbb-text-light3);display:block; position:absolute; left:var(--rbb-pd-ns); width:10px; height: 4px; border-radius:50px; top:50%}
.rbb-ui .checkList input[type=checkbox]+label:before {transform:rotate(45deg) translate(-6px, 100%);  z-index:2}
.rbb-ui .checkList input[type=checkbox]+label:after {transform:rotate(-45deg) translate(0px, -100%); width:14px;transition:background 0.1s 0s linear;z-index:1}

.rbb-ui .checkList input[type=checkbox]:checked+label {border:2px solid var(--rbb-color-main1);margin:3px 4px 3px 0; color:var(--rbb-color-main1)}
.rbb-ui .checkList input[type=checkbox]:checked+label:before,
.rbb-ui .checkList input[type=checkbox]:checked+label:after {background:var(--rbb-color-main1);}

.rbb-ui .switch {display:inline-block; position:relative}
.rbb-ui .switch input[type=checkbox] {opacity:0; width:0;height: 0; overflow:hidden;border:0; position:absolute;z-index:0}
.rbb-ui .switch input[type=checkbox]+label {background:var(--rbb-text-light3);background:var(--rbb-switch-gradient); border-radius: 50px; height:var(--rbb-pd-n);width:calc(var(--rbb-pd-n)*2);position:relative; margin:4px 6px 4px 0; cursor:pointer;display:block;box-shadow:var(--rbb-box-shadow1);position:relative; overflow:hidden}
.rbb-ui .switch input[type=checkbox]+label:after {content:''; position: absolute; top:0px; left:0px; width: var(--rbb-pd-n); height: var(--rbb-pd-n); background:var(--rbb-text-light1); border-radius: 50%; transition: all 0.3s ease; transform:translateX(0%) scale(0.7)}
.rbb-ui .switch input[type=checkbox]+label:before {content:'';display;block; background:var(--rbb-switch-gradient-over); position:absolute; top:0;right:0;bottom:0;left:0; opacity:0; transition:background 0.2s ease}
.rbb-ui .switch input[type=checkbox]:checked+label {background:var(--rbb-color-main1);}
.rbb-ui .switch input[type=checkbox]:checked+label:before {opacity:0.4;}
.rbb-ui .switch input[type=checkbox]:checked+label:after {transform:translateX(calc(var(--rbb-pd-n))) scale(0.7);}


.rbb-ui .formArea input[type=file] {padding:var(--rbb-pd-ns);border:1px solid var(--rbb-text-dark3); text-align: left; box-shadow:var(--rbb-box-shadow1);background:var(--rbb-color-sub3); font-size:var(--rbb-fs-n); position:relative;  margin:4px 6px 4px 0;appearance:none;  outline:0;vertical-align:middle;line-height:1.4}
.rbb-ui .formArea input[type=file]:focus {z-index:3;border:2px solid var(--rbb-color-main2);box-shadow:var(--rbb-box-shadow2);margin:3px 4px 3px 0;background:var(--rbb-color-sub3); color:var(--rbb-text-dark1);}


.full {width:100%}

@media screen and (max-width:1520px){
  :root{
    --rbb-inner:1200px;
  }
}

@media screen and (max-width:1199px){
  :root{
    --rbb-inner:980px;
  }
}

@media screen and (max-width:979px){
  :root{
    --rbb-inner:820px;
  }
}

@media screen and (max-width:819px){
  :root{
    --rbb-inner:100%;
  }
}
@media screen and (min-width:520px){
  .mb-o {display:none}
}
@media screen and (max-width:519px){
  .mb-o {display:block}
}