:root {
--rbb-font: 'SUIT-Regular';
--rbb-color-main1: #172935;
--rbb-color-main2: #fc2323;
--rbb-color-main3: #56728f;
--rbb-color-sub1: #e90000;
--rbb-color-sub2: #dddddd;
--rbb-color-sub3: #ffffff;
--rbb-bg-dark: #181818;
--rbb-bg-light: #fdfdfd;
--rbb-text-dark1: #222222;
--rbb-text-dark2: #555555;
--rbb-text-dark3: #999999;
--rbb-text-light1: #ffffff;
--rbb-text-light2: #dddddd;
--rbb-text-light3: #bbbbbb;
--rbb-text-sub1: #e90000;
--rbb-text-sub2: #0000e9;
--rbb-text-sub3: #00e900;
--rbb-fs-xx: 7.2rem;
--rbb-fs-x: 5.6rem;
--rbb-fs-bbb: 4.4rem;
--rbb-fs-bb: 3.2rem;
--rbb-fs-b: 2.4rem;
--rbb-fs-nb: 1.8rem;
--rbb-fs-n: 1.6rem;
--rbb-fs-s: 1.4rem;
--rbb-fs-ss: 1.2rem;
--rbb-pd-bbb: 12rem;
--rbb-pd-bb: 7rem;
--rbb-pd-b: 4rem;
--rbb-pd-n: 2rem;
--rbb-pd-ns: 1.4rem;
--rbb-pd-s: 1rem;
--rbb-pd-ss: 0.8rem;
--rbb-pd-sss: 0.4rem;
--rbb-pd-xs: 0.2rem;
--rbb-br-b: 10rem;
--rbb-br-n: 2rem;
--rbb-br-s: 0.4rem;
--rbb-box-shadow1: 0 3px 2px rgba(203,208,215,0.3);
--rbb-box-shadow2: 0 3px 6px rgba(203,208,215,0.8);
--rbb-switch-gradient: linear-gradient(90deg, rgba(172,172,179,1) 21%, rgba(192,201,205,1) 72%);
--rbb-switch-gradient-over: linear-gradient(90deg, rgba(255,255,255,0.2) 21%, rgba(16,16,17,0.5) 72%);
--swiper-theme-color: var(--rbb-color-main1) !important;
--swiper-navigation-size: var(--rbb-fs-bbb) !important;
}
 html,
 body {
  position: relative;
  height: 100%;
}

.slidebox{
  display: block;
  max-width: 1280px;
  height: 280px;
  margin: 40px auto;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-slide:nth-child(1),
.swiper-slide:nth-child(5),
.swiper-slide:nth-child(9){
  background: #eeeeee;
  width: 300px;
}
.swiper-slide:nth-child(2),
.swiper-slide:nth-child(6),
.swiper-slide:nth-child(10){
  background: #a78d74;
  width: 200px;
}
.swiper-slide:nth-child(3),
.swiper-slide:nth-child(7),
.swiper-slide:nth-child(11){
  background: #f4f7fe;
  width: 280px;
}
.swiper-slide:nth-child(4),
.swiper-slide:nth-child(8){
  background: #e8f9ef;
  width: 600px;
}

.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-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;  outline:0; appearance: none; padding-right:40px}
.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:transparent; 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=email],
.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 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=email]: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 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 .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 .btn {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 .btn.n {padding:var(--rbb-pd-ns) var(--rbb-pd-n);font-size:var(--rbb-fs-n)}
.rbb-ui .btn.s {padding:var(--rbb-pd-sss) var(--rbb-pd-ss);font-size:var(--rbb-fs-s)}
.rbb-ui .btn.ss {padding:var(--rbb-pd-sss) var(--rbb-pd-ss);font-size:var(--rbb-fs-ss)}
.rbb-ui .btn.b {padding:var(--rbb-pd-n) var(--rbb-pd-b);font-size:var(--rbb-fs-nb)}
.rbb-ui .btn.f {width:100%}
.rbb-ui .btn.sec {background:var(--rbb-color-main2);border:1px solid var(--rbb-color-main2); color:var(--rbb-text-light1)}
.rbb-ui .btn.thd {background:var(--rbb-color-main3);border:1px solid var(--rbb-color-main3); color:var(--rbb-text-light1)}
.rbb-ui .btn.out {background:transparent; color:var(--rbb-color-main1); border:1px solid var(--rbb-color-main1)}
.rbb-ui .btn.out-sec {background:transparent; color:var(--rbb-color-main2); border:1px solid var(--rbb-color-main2)}
.rbb-ui .btn.out-thd {background:transparent; color:var(--rbb-color-main3); border:1px solid var(--rbb-color-main3)}
.rbb-ui .btn.ui {display:inline-block; padding:var(--rbb-pd-ss);background:transparent; color:var(--rbb-text-dark3);border:1px solid var(--rbb-text-dark3);}
.rbb-ui .btn.ui:hover {background:var(--rbb-color-main1); color:var(--rbb-text-light1);border:1px solid var(--rbb-color-main1);z-index:2}
.rbb-ui .btn.ui.sec:hover {background:var(--rbb-color-main2); color:var(--rbb-text-light1);border:1px solid var(--rbb-color-main2)}
.rbb-ui .btn.ui.thd:hover {background:var(--rbb-color-main3); color:var(--rbb-text-light1);border:1px solid var(--rbb-color-main3)}
.rbb-ui .btns[role=group] {display:flex; padding:var(--rbb-pd-s) 0}
.rbb-ui .btns[role=group] .btn {border-radius:0;margin:0;}
.rbb-ui .btns[role=group] .btn:first-child {border-radius:var(--rbb-br-s) 0 0 var(--rbb-br-s);}
.rbb-ui .btns[role=group] .btn:not(:first-child) {margin-left: -1px}
.rbb-ui .btns[role=group] .btn: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; flex-wrap: wrap;}
.rbb-ui .radioList input[type=radio] {opacity:0; width:0;height: 0; overflow:hidden;border:0;background: transform;}
.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;flex-wrap: wrap;}
.rbb-ui .checkList input[type=checkbox] {opacity:0; width:0;height: 0; overflow:hidden;border:0;background: transform;}
.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);}