/* @import url('button.css'); */

/* 그룹용인데 둘데가 애매해서 .. */
.btn-management {
  margin-left: auto;
}

.btn-management > a {
  padding: 7px 8px;
  background-color: white;
  font-size: 0.75rem;
}
.btn-management > a > img {
  margin-left: 7px;
}
.group-desc-box {
  width: 100%;
}
.group-desc-box > .group-name {
  display: flex;
  width: 100%;
  font-size: 1.5rem;
}
/* 요까지 */
div[class$='48'] {
  height: 48px;
}

div[class$='40'] {
  height: 40px;
}

.btn {
  display: inline-flex;
  align-items: center;
  color: white;
  line-height: 1.5;
  width: auto;
  height: auto;
  border-style: none;
  background: #394dd1 0% 0% no-repeat;
  border-radius: 4px;
  opacity: 1;
  vertical-align: middle;
}

/* 버튼눌렀을때? */
.btn:active {
  outline-color: #dcdfee;
}

.btn:focus {
  outline-color: #dcdfee;
}

.btn:hover:enabled {
  cursor: pointer;
}

/* 버튼의 크기 설정 */
/* 가로값이 auto인 버튼, pd:padding의 약자 */

.btn-pd-iconnone-48 {
  width: auto;
  height: 48px;
  padding: 0px 16px;
  font-size: 1rem;
}

.btn-pd-iconleft-48 {
  width: auto;
  height: 48px;
  padding: 0px 20px 0px 16px;
  font-size: 1rem;
}

.btn-pd-iconleft-48 > span {
  margin-left: 4px;
}

.btn-pd-iconright-48 {
  width: auto;
  height: 48px;
  padding: 0px 16px 0px 20px;
  font-size: 1rem;
}

.btn-pd-iconright-48 > span {
  margin-right: 4px;
}

/* 버튼의 스타일 설정 */
/* 가로값이 auto인 버튼, pd:padding의 약자 */

.btn-ghost {
  background: #ffffff;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #4f5783;
  cursor: pointer;
}

.btn-ghost:hover {
  background: #eff1fc;
  box-shadow: 0px 1px 4px 0px rgba(19, 24, 48, 0.4);
}

.btn-line-normal {
  background: #ffffff;
  border: 1px solid #dcdfee;
  border-radius: 4px;
  color: #4f5783;
  cursor: pointer;
}

.btn-line-normal:hover:enabled {
  background: #eff1fc;
  box-shadow: 0px 1px 4px 0px rgba(19, 24, 48, 0.4);
}

.btn-line-accent {
  background: #ffffff;
  border: 1px solid #394dd1;
  border-radius: 4px;
  color: #4f5783;
  cursor: pointer;
}

.btn-line-accent:hover:enabled {
  background: #eff1fc;
  box-shadow: 0px 1px 4px 0px rgba(19, 24, 48, 0.4);
}

.btn-fill-accent {
  background: #394dd1;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}

.btn-fill-accent:hover:enabled {
  background: #293aba;
  box-shadow: 0px 1px 4px 0px rgba(19, 24, 48, 0.4);
  color: #fff;
}

.btn-fill-dark {
  background: #4f5783;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #fff;
}

.btn-fill-dark:hover {
  background: #5f6894;
  box-shadow: 0px 1px 4px 0px rgba(19, 24, 48, 0.4);
}

/* @import url('grid.css'); */

.box-container {
  /* max-width: 1248px; */
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.box-container > .box {
  vertical-align: middle;
  border-radius: 4px;
  opacity: 1;
  margin: 12px 12px;
  border: 0;
}

.height-60 {
  height: 60px;
}

.height-196 {
  height: 196px;
}

.height-112 {
  height: 112px;
}

.box-6 {
  width: calc((100% - 144px) / 6);
}

.box-4 {
  width: calc((100% - 96px) / 4);
}

.box-3 {
  width: calc((100% - 72px) / 3);
}

.box-2 {
  width: calc((100% - 48px) / 2);
}

.box-1 {
  width: calc(100% - 24px);
}

.box-5 {
  width: calc((100% - 120px) / 5);
}

.box-text {
  padding: 0 16px;
}

.box-card-lg {
  padding: 0 24px;
}

.box-card-md {
  padding: 16px;
  transition: all 0.2s ease-in-out;
}

.box-card-md:hover {
  box-shadow: 0px 4px 12px rgba(19, 24, 48, 0.2);
}

.box-card-sm {
  padding: 0 8px;
}

@media screen and (min-width: 1201px) and (max-width: 2000px) {
  .box-container > .box {
    vertical-align: middle;
    border-radius: 4px;
    opacity: 1;
    margin: 12px 12px;
    border: 0;
  }

  .box-6 {
    width: calc((100% - 144px) / 6);
  }

  .box-4 {
    width: calc((100% - 96px) / 4);
  }

  .box-3 {
    width: calc((100% - 72px) / 3);
  }

  .box-2 {
    width: calc((100% - 48px) / 2);
  }

  .box-1 {
    width: calc(100% - 24px);
  }
}

@media screen and (min-width: 901px) and (max-width: 1200px) {
  .box-container > .box {
    vertical-align: middle;
    border-radius: 4px;
    opacity: 1;
    margin: 12px 12px;
    border: 0;
  }

  .box-6 {
    width: calc((100% - 72px) / 3);
  }

  .box-4 {
    width: calc((100% - 96px) / 4);
  }

  .box-3 {
    width: calc((100% - 72px) / 3);
  }

  .box-2 {
    width: calc((100% - 48px) / 2);
  }

  .box-1 {
    width: calc(100% - 24px);
  }
}

@media screen and (min-width: 601px) and (max-width: 900px) {
  .box-container > .box {
    vertical-align: middle;
    border-radius: 4px;
    opacity: 1;
    margin: 12px 12px;
    border: 0;
  }

  .box-6 {
    width: calc((100% - 48px) / 2);
  }

  .box-4 {
    width: calc((100% - 48px) / 2);
  }

  .box-3 {
    width: calc((100% - 48px) / 2);
  }

  .box-2 {
    width: calc(100% - 24px);
  }

  .box-1 {
    width: calc(100% - 24px);
  }
}

@media screen and (min-width: 0) and (max-width: 600px) {
  .box-container > .box {
    vertical-align: middle;
    border-radius: 4px;
    opacity: 1;
    margin: 12px 12px;
    border: 0;
  }

  .box-6 {
    width: calc(100% - 24px);
  }

  .box-4 {
    width: calc(100% - 24px);
  }

  .box-3 {
    width: calc(100% - 24px);
  }

  .box-2 {
    width: calc(100% - 24px);
  }

  .box-1 {
    width: calc(100% - 24px);
  }
}

/* @import url('color.css'); */

.header {
  width: 100%;
  height: 150px;
  background: #1b2246 0% 0% no-repeat padding-box;
  color: #ffffff;
  text-align: center;
}

.helper {
  width: 100%;
  height: 400px;
}

.system {
  text-align: left;
  font-family: Roboto, sans-serif;
}

.color-set {
  text-align: center;
}

.color-box {
  width: 150px;
  height: 48px;
  font-size: 14px;
  text-align: center;
}

.primary {
  color: white;
  font-size: 30px;
}

.color-desc {
  float: left;
}

/* monotone (base) */

.Gi-10 {
  background-color: #fbfbff;
}

.Gi-20 {
  background-color: #f5f6ff;
}

.Gi-30 {
  background-color: #eceefb;
}

.Gi-50 {
  background-color: #dcdfee;
}

.Gi-100 {
  background-color: #cbcee1;
}

.Gi-200 {
  background-color: #b7bdd4;
}

.Gi-300 {
  background-color: #a2a7c1;
}

.Gi-400 {
  background-color: #9196b1;
}

.Gi-500 {
  background-color: #7b81a2;
}

.Gi-600 {
  background-color: #656c92;
}

.Gi-700 {
  background-color: #4f5783;
}

.Gi-800 {
  background-color: #394273;
}

.P-Gi-900 {
  background-color: #242e64;
}

.Gi-950 {
  background-color: #1b2246;
}

.Gi-970 {
  background-color: #131830;
}

.Gi-990 {
  background-color: #0c1026;
}

/* primary soft */

.blue-s-50 {
  background-color: #ebedff;
}

.blue-s-100 {
  background-color: #c6caf2;
}

.blue-s-200 {
  background-color: #a0a8e9;
}

.blue-s-300 {
  background-color: #7885e0;
}

.blue-s-400 {
  background-color: #5264e2;
}

.P-blue-s-500 {
  background-color: #394dd1;
}

.blue-s-600 {
  background-color: #3345c6;
}

.blue-s-700 {
  background-color: #293aba;
}

.blue-s-800 {
  background-color: #2f3ba0;
}

.blue-s-900 {
  background-color: #132583;
}

.blue-s-950 {
  background-color: #001060;
}

/* primary neon */
.blue-n-50 {
  background-color: #eaeaff;
}

.blue-n-100 {
  background-color: #c8c9ff;
}

.blue-n-200 {
  background-color: #a1a6ff;
}

.blue-n-300 {
  background-color: #7682ff;
}

.blue-n-400 {
  background-color: #5263ff;
}

.P-blue-n-500 {
  background-color: #2643ff;
}

.blue-n-600 {
  background-color: #2239f3;
}

.blue-n-700 {
  background-color: #112ce6;
}

.blue-n-800 {
  background-color: #001cdb;
}

.blue-n-900 {
  background-color: #0000cc;
}

.Pink-s-25 {
  background-color: #fdf1f7;
}

.Pink-s-50 {
  background-color: #fbe4ea;
}

.Pink-s-100 {
  background-color: #edb7d3;
}

.Pink-s-200 {
  background-color: #e388b5;
}

.Pink-s-300 {
  background-color: #db5998;
}

.P-Pink-s-400 {
  background-color: #d63381;
}

.Pink-s-500 {
  background-color: #d2006b;
}

.Pink-s-600 {
  background-color: #c10067;
}

.Pink-s-700 {
  background-color: #ab0060;
}

.Pink-s-800 {
  background-color: #96005a;
}

.Pink-s-900 {
  background-color: #71024f;
}

.Pink-s-950 {
  background-color: #3e002b;
}

.Pink-n-25 {
  background-color: #fff0f9;
}

.Pink-n-50 {
  background-color: #ffe1ef;
}

.Pink-n-100 {
  background-color: #fdb4d7;
}

.Pink-n-200 {
  background-color: #fd7fbc;
}

.Pink-n-300 {
  background-color: #fa429e;
}

.P-Pink-n-400 {
  background-color: #f50086;
}

.Pink-n-500 {
  background-color: #dd0077;
}

.Red-50 {
  background-color: #ffebee;
}

.Red-100 {
  background-color: #ffccd2;
}

.Red-200 {
  background-color: #fa9798;
}

.Red-300 {
  background-color: #f36d70;
}

.P-Red-400 {
  background-color: #ff474a;
}

.Red-500 {
  background-color: #ff2f2c;
}

.Red-600 {
  background-color: #f6212c;
}

.Red-700 {
  background-color: #e41027;
}

.Red-800 {
  background-color: #d7001f;
}

.Red-900 {
  background-color: #c80011;
}

.Red-25 {
  background-color: #fff5f6;
}

/* Yellow */
.Yellow-50 {
  background-color: #fffde7;
}

.Yellow-100 {
  background-color: #fff9c4;
}

.Yellow-200 {
  background-color: #fff59d;
}

.Yellow-300 {
  background-color: #fef075;
}

.Yellow-400 {
  background-color: #ffe810;
}

.P-Yellow-500 {
  background-color: #ffdb44;
}

.Yellow-600 {
  background-color: #ffd000;
}

.Yellow-700 {
  background-color: #ffbb00;
}

.Yellow-800 {
  background-color: #ff9900;
}

.YE-900 {
  background-color: #ff7700;
}

.YE-750 {
  background-color: #fea852;
}

.YE-950 {
  background-color: #ff6550;
}

.RC-700 {
  background-color: #e41027;
}

.GB-50 {
  background-color: #dff7f5;
}

.GB-100 {
  background-color: #aeebe4;
}

.GB-200 {
  background-color: #74dfd3;
}

.GB-300 {
  background-color: #0bd1c0;
}

.P-GB-400 {
  background-color: #00c5b1;
}

.GB-500 {
  background-color: #00b8a0;
}

.GB-600 {
  background-color: #00a992;
}

.a .GB-700 {
  background-color: #009880;
}

.GB-800 {
  background-color: #008771;
}

.GB-900 {
  background-color: #006a52;
}

.GB-950 {
  background-color: #004e37;
}

.GB-NEON {
  background-color: #23edc6;
}

.GRD-SWETING-1 {
  background: transparent linear-gradient(108deg, #c6caf2 0%, #f7bccb 100%) 0%
    0% no-repeat padding-box;
}

.GRD-SWETING-2 {
  background: transparent linear-gradient(108deg, #5264e2 0%, #f65f86 100%) 0%
    0% no-repeat padding-box;
}

.GRD-Mix {
  background: transparent linear-gradient(108deg, #c554af 0%, #dfa0d3 100%) 0%
    0% no-repeat padding-box;
}

.GRD-MB {
  background: transparent linear-gradient(108deg, #ff7700 0%, #ffbb00 100%) 0%
    0% no-repeat padding-box;
}

.GRD-GD {
  background: transparent linear-gradient(108deg, #ffdb44 0%, #fef075 100%) 0%
    0% no-repeat padding-box;
}

.GRD-LT {
  background: transparent linear-gradient(108deg, #eceefb 0%, #ffffff 100%) 0%
    0% no-repeat padding-box;
}

.GRD-DK {
  background: transparent linear-gradient(108deg, #242e64 0%, #0c1026 100%) 0%
    0% no-repeat padding-box;
}

.Sweting-mix {
  background-color: #c656b6;
}

.Code-purple {
  background-color: #da8eff;
}

.Code-sky {
  background-color: #aaf0ff;
}

.Code-apricot {
  background-color: #ffa381;
}

.YE-TXT {
  background-color: #653e2f;
}

.GI-12 {
  background-color: #242e64;
}

.P-BI-500 {
  background-color: #394dd1;
}

.P-RP-400 {
  background-color: #f23b6c;
}

.P-GB-400 {
  background-color: #00c59e;
}

.YE-500 {
  background-color: #ffdb44;
}

/* @import url('elevation.css'); */
.full-box {
  width: 100%;
  height: 900px;
}

.half-box {
  display: inline-block;
  width: 40%;
  height: 900px;
}

#dark {
  background: #1b2246 0% 0% no-repeat padding-box;
}

.elevation-box {
  width: 160px;
  height: 80px;
  text-align: center;
  vertical-align: center;
  margin-left: 24px;
  margin-top: 24px;
  line-height: 80px;
}

.Shadow-lt-1 {
  box-shadow: 0px 1px 2px rgba(19, 24, 48, 0.2);
}

.Shadow-lt-2 {
  box-shadow: 0px 1px 4px rgba(19, 24, 48, 0.2);
}

.Shadow-lt-3 {
  box-shadow: 0px 2px 6px rgba(19, 24, 48, 0.2);
}

.Shadow-lt-4 {
  box-shadow: 0px 3px 8px rgba(19, 24, 48, 0.2);
}

.Shadow-lt-5 {
  box-shadow: 0px 4px 12px rgba(19, 24, 48, 0.2);
}

.Shadow-lt-6 {
  box-shadow: 0px 5px 16px rgba(19, 24, 48, 0.2);
}

.Shadow-lt-7 {
  box-shadow: 0px 6px 24px rgba(19, 24, 48, 0.2);
}

.Shadow-lt-8 {
  box-shadow: 0px 7px 32px rgba(19, 24, 48, 0.2);
}

.Shadow-dk-1 {
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
}

.Shadow-dk-2 {
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
}

.Shadow-dk-3 {
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5);
}

.Shadow-dk-4 {
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.5);
}

.Shadow-dk-5 {
  box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.5);
}

.Shadow-dk-6 {
  box-shadow: 0px 6px 24px rgba(0, 0, 0, 0.5);
}

.Shadow-dk-7 {
  box-shadow: 0px 7px 32px rgba(0, 0, 0, 0.5);
}

.Shadow-dk-8 {
  box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.5);
}

.Light-lt-1 {
  box-shadow: 0px 1px 2px rgba(57, 77, 209, 0.2);
}

.Light-lt-2 {
  box-shadow: 0px 1px 4px rgba(57, 77, 209, 0.2);
}

.Light-lt-3 {
  box-shadow: 0px 2px 6px rgba(57, 77, 209, 0.2);
}

.Light-lt-4 {
  box-shadow: 0px 3px 8px rgba(57, 77, 209, 0.2);
}

.Light-lt-5 {
  box-shadow: 0px 4px 12px rgba(57, 77, 209, 0.2);
}

.Light-lt-6 {
  box-shadow: 0px 5px 16px rgba(57, 77, 209, 0.2);
}

.Light-lt-7 {
  box-shadow: 0px 6px 24px rgba(57, 77, 209, 0.2);
}

.Light-lt-8 {
  box-shadow: 0px 7px 32px rgba(57, 77, 209, 0.2);
}

.Light-dk-1 {
  box-shadow: 0px 2px 4px rgba(255, 255, 255, 0.5);
}

.Light-dk-2 {
  box-shadow: 0px 3px 6px rgba(255, 255, 255, 0.5);
}

.Light-dk-3 {
  box-shadow: 0px 4px 8px rgba(255, 255, 255, 0.5);
}

.Light-dk-4 {
  box-shadow: 0px 4px 12px rgba(255, 255, 255, 0.5);
}

.Light-dk-5 {
  box-shadow: 0px 5px 16px rgba(255, 255, 255, 0.5);
}

.Light-dk-6 {
  box-shadow: 0px 6px 20px rgba(255, 255, 255, 0.5);
}

.Light-dk-7 {
  box-shadow: 0px 7px 24px rgba(255, 255, 255, 0.5);
}

.Light-dk-8 {
  box-shadow: 0px 8px 32px rgba(255, 255, 255, 0.5);
}

/* @import url('font.css'); */
.header {
  background-color: #1b2246;
  text-align: center;
  width: 1920px;
  height: 147px;
  /*border-bottom :  1px solid #CBCEE1;*/
}

.logo {
  color: white;
  float: left;
  margin-right: 5px;
  text-align: center;
}

.sub {
  padding: 8px 10px;
  float: left;
}

.container {
  padding: 20px 0;
  width: 980px;
  margin: auto;
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

.header {
  background-color: #1b2246;
  text-align: center;

  width: 1210px;
  height: 147px;
  /*border-bottom :  1px solid #CBCEE1;*/
}

.logo {
  color: white;
  float: left;
  align-content: center;
  font-size: 40px;
}

.sub {
  color: white;
  padding: 8px 10px;
  font-size: 12px;
  float: left;
}

.font_title {
  font-size: 48px;
}

.content1 {
  width: 1210px;
  padding: 10px;
}

.content2 {
  width: 1210px;
  padding: 10px;
}

.font_content1 {
  width: 600px;
  float: left;
}

.font_content2 {
  width: 300px;
  float: left;
  /*  border:  1px solid #CBCEE1;
            border-right: none;*/
}

.font_size_guide {
  /*   border: 1px solid #CBCEE1;*/
  width: 600px;
  height: 1180px;
}

.font_size_guide_ment {
  height: 30px;
  font-size: 24px;
}

.font_size_class {
  float: left;
  width: 150px;
  height: 50px;
}

.font_effect_guide_ment {
  font-size: 24px;
  float: left;
}

.font_effect_guide {
  /*   border: 1px solid #CBCEE1;*/
  width: 600px;
  height: 1180px;
  float: left;
}

.ft-thin {
  font-family: 'Noto Sans CJK KR';
  font-weight: 100;
  line-height: 1.5;
}

.ft-light {
  font-family: 'Noto Sans CJK KR';
  font-weight: 300;
  line-height: 1.5;
}

.ft-regular {
  font-family: 'Noto Sans CJK KR';
  font-weight: 400;
  line-height: 1.5;
}

.ft-medium {
  font-family: 'Noto Sans CJK KR';
  font-weight: 500;
  line-height: 1.5;
}

.ft-bold {
  font-family: 'Noto Sans CJK KR';
  font-weight: 700;
  line-height: 1.5;
}

.ft-black {
  font-family: 'Noto Sans CJK KR';
  font-weight: 900;
  line-height: 1.5;
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

/* 
@import url('select.css'); */
/* div {
    border: 1px solid #dddddd;
} */

/* Customize the label (the checkbox-container) */
.checkbox-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkbox-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #dcdfee;
  border-radius: 4px;
  opacity: 1;
  transition-property: background-color;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}

/* On mouse-over, add a grey background color */
/* .checkbox-container:hover input ~ .checkbox-checkmark {
    background-color: #ccc;
} */

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkbox-checkmark {
  background-color: #394dd1;
  opacity: 1;
  transition-property: background-color;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}

.checkbox-container input:disabled ~ .checkbox-checkmark {
  background: #dcdfee 0% 0% no-repeat padding-box;
  border-radius: 4px;
  opacity: 1;
}

/* Create the checkbox-checkmark/indicator (hidden when not checked) */
.checkbox-checkmark:after {
  content: '';
  position: absolute;
  display: none;
}

/* Show the checkbox-checkmark when checked */
/* .checkbox-container input:checked ~ .checkbox-checkmark:after {
    display: block;
    background-image: url('/assets/icons/ic_checkbox_on_fill_bl.svg');
} */

/* Style the checkbox-checkmark/indicator */
.checkbox-container .checkbox-checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background-image: url('/assets/icons/ic_checkbox_on_fill_bl.svg');
  /* x */
}

input[type='checkbox']:checked + .checkbox-checkmark {
  background-image: url('/assets/icons/ic-check-normal-line-lt.svg');
  /* here */
}

/* radio */

.radio-container {
  display: flex;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-items: center;
}

/* Hide the browser's default radio button */
.radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.radio-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 24px;
  width: 24px;
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #dcdfee;
  border-radius: 12px;
  opacity: 1;
}

/* On mouse-over, add a grey background color */
.radio-container:hover input ~ .radio-checkmark {
  background-color: #394dd1;
}

/* When the radio button is checked, add a blue background */
.radio-container input:checked ~ .radio-checkmark {
  background-color: white;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio-checkmark:after {
  content: '';
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-container input:checked ~ .radio-checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radio-container .radio-checkmark:after {
  top: 5px;
  left: 5px;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background: #394dd1;
}

/* dropdown */
.type-dropdownmenu {
  height: 48px;
  border-style: none;
  background: #f5f6ff 0% 0% no-repeat padding-box;
  border-radius: 4px;
  opacity: 1;
  letter-spacing: var(--unnamed-character-spacing-0);
  color: var(--gi-400-9196b1-placeholder);
  text-align: left;
  font: normal normal normal 16px/20px Noto Sans CJK KR;
  letter-spacing: 0px;
  color: #9196b1;
  opacity: 1;
  padding-right: 20px;
}

.type-dropdownmenu:hover {
  background: #f5f6ff 0% 0% no-repeat padding-box;
  border-radius: 4px;
  opacity: 1;
  transition: all ease 1s 0s;
  border-bottom: 1px solid #394dd1;
}

.type-dropdownmenu:focus {
  outline: none;
  background: #ffffff 0% 0% no-repeat padding-box;
  border-radius: 4px;
  border-style: none;
  border-bottom: 1px solid #394dd1;
  opacity: 1;
}

/* @import url('textfield.css'); */
input,
select {
  border-style: none;
}

.input-self:hover {
  border-bottom: 1px solid #394dd1;
  opacity: 1;
}

.input-self:focus {
  outline: none;
  background: #ffffff 0% 0% no-repeat padding-box;
  border-radius: 4px;
  border-style: none;
  border-bottom: 1px solid #394dd1;
  opacity: 1;
}

.input-self {
  background: #f5f6ff 0% 0% no-repeat padding-box;
  border-radius: 4px;
  opacity: 1;
  width: 100%;
  height: 48px;
  text-align: left;
  font: normal normal normal 16px/28px Noto Sans CJK KR;
  letter-spacing: 0px;
  color: #9196b1;
  opacity: 1;
  padding: 12px 0px 12px 16px;
  transition: all 0.2s ease-in-out;
  border: 1px solid #eceeff;
}

.helper {
  width: 100%;
  height: 300px;
}

.input-menu:hover {
  background: #f5f6ff 0% 0% no-repeat padding-box;
  border-radius: 4px;
  opacity: 1;
  border-bottom: 1px solid #394dd1;
  transition: all ease 2s 0s;
}

.input-menu:focus {
  outline: none;
  background: #ffffff 0% 0% no-repeat padding-box;
  border-radius: 4px;
  border-style: none;
  border-bottom: 1px solid #394dd1;
  opacity: 1;
}

.input-menu {
  width: 336px;
  height: 48px;
  background: #f5f6ff 0% 0% no-repeat padding-box;
  border-radius: 4px;
  opacity: 1;
  letter-spacing: var(--unnamed-character-spacing-0);
  color: var(--gi-400-9196b1-placeholder);
  text-align: left;
  font: normal normal normal 16px/28px Noto Sans CJK KR;
  letter-spacing: 0px;
  color: #9196b1;
  opacity: 1;
  padding: 12px 0px 12px 16px;
}

.select-option {
  color: #242e64;
}

#out-label {
  display: block;
  color: #7b81a2;
}

/* 도둑질 */
#in-label {
  color: #9196b1;
}

.form-label-group {
  position: relative;
  margin-bottom: 1rem;
}

.form-label-group > input,
.form-label-group > label {
  height: 3.125rem;
  padding: 0.75rem;
}

.form-label-group > label {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  margin-bottom: 0;
  /* Override default `<label>` margin */
  line-height: 1.5;
  color: #495057;
  pointer-events: none;
  cursor: text;
  /* Match the input under the label */
  border: 1px solid transparent;
  border-radius: 0.25rem;
  transition: all 0.1s ease-in-out;
}

.form-label-group input::-webkit-input-placeholder {
  color: transparent;
}

.form-label-group input:-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::-moz-placeholder {
  color: transparent;
}

.form-label-group input::placeholder {
  color: transparent;
}

/* .form-label-group:hover input::placeholder {
  color: #394dd1;
} */
#in-label {
}

.form-label-group:hover #in-label {
  color: #394dd1;
}

.form-label-group input:not(:placeholder-shown) {
  padding-top: 1.25rem;
  padding-bottom: 0.25rem;
}

.form-label-group input:not(:placeholder-shown) ~ label {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 12px;
  color: #777;
}

/* Fallback for Edge
  -------------------------------------------------- */
@supports (-ms-ime-align: auto) {
  .form-label-group > label {
    display: none;
  }

  .form-label-group input::-ms-input-placeholder {
    color: #777;
  }
}

/* Fallback for IE
  -------------------------------------------------- */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .form-label-group > label {
    display: none;
  }

  .form-label-group input:-ms-input-placeholder {
    color: #777;
  }
}

/* @import url('footer.css'); */

/* footer */
footer {
  border-top: 1px solid #dcdfee;
  left: 0;
  bottom: 0;
  padding: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 30px;
  margin-top: 134px;
  height: auto;
  color: rgba(19, 24, 48, 0.8);
  transition: all 0.3s ease-in-out;
}

.footer-content {
  max-width: 1280px;
  width: 100%;
}

.f_linkmsg {
  display: flex;
  margin-bottom: 15px;
  font-family: Noto Sans CJK KR;
}

.f_detailmsg {
  font-family: Noto Sans CJK KR;
}

.f_link:not(:first-child) {
  margin-left: 16px;
}

HEAD .footer > .f_detailmsg > .detail {
  margin-bottom: 5px;
}

.link {
  color: inherit;
  text-decoration: none;
  cursor: default;
  transition: all 0.3s ease;
}

.link:link {
  cursor: pointer;
}

.link:hover {
  color: rgba(19, 24, 48, 0.8);
  font-family: Noto Sans CJK KR;
  transition: all 0.3s ease;
}

.link > span {
  position: relative;
}

.link > span::after {
  font-family: Noto Sans CJK KR;
  width: 100%;
  content: '';
  width: 0%;
  left: 50%;
  height: 1px;
  display: block;
  position: absolute;
  border-bottom: 1px solid rgba(19, 24, 48, 0.8);
  transition: all 0.3s ease;
}

.link:hover > span::after {
  font-family: Noto Sans CJK KR;
  content: '';
  width: 100%;
  left: 0px;
  height: 1px;
  display: block;
  position: absolute;
  border-bottom: 1px solid rgba(19, 24, 48, 0.8);
  transition: all 0.3s ease;
}

/*미디어쿼리*/
@media screen and (min-width: 361px) {
  .footer {
    padding: 24px;
  }

  .f_linkmsg > .f_link > span {
    font-size: 13px;
  }

  .f_detailmsg > .detail {
    font-size: 11px;
  }
}

@media screen and (min-width: 769px) {
  .footer {
    padding: 36px;
  }

  .f_linkmsg > .f_link > span {
    font-size: 14px;
  }

  .f_detailmsg > .detail {
    font-size: 12px;
  }
}

@media screen and (min-width: 1021px) {
  .footer {
    padding: 48px;
  }

  .f_linkmsg > .f_link > span {
    font-size: 16px;
  }

  .f_detailmsg > .detail {
    font-size: 14px;
  }
}

/*
footer>.box-container {
    width: 1280px;
    margin: 12px;
    padding: 0 calc((100% - 1280px) / 2);
}*/

/* @import url('header.css'); */

/* header */
header {
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 72px;
  padding: 0 24px;
  align-items: center;
  z-index: 4;
}

/*스크롤에 없어지는 헤더*/
.scrollDown {
  transform: translate(0, -150px);
  transition: transform 1s;
}

.header-menu {
  margin: 22px 16px;
}

.hr-vertical {
  height: 32px;
  width: 0;
  border: 1px solid #dcdfee;
  margin: 0 33px;
}

header img {
  width: 32px;
  height: 21px;
  margin-right: 4px;
}

.btn-right {
  display: flex;
  align-items: center;
  width: auto;
  margin-left: auto;
  justify-content: center;
}

.header-menu {
  text-align: left;
  letter-spacing: 0px;
  color: #656c92;
  opacity: 1;
  font: normal normal 300 20px/24px Noto Sans CJK KR;
}

.header-menu:hover {
  font: normal normal 500 20px/24px Noto Sans CJK KR;
  letter-spacing: 0px;
  color: #242e64;
}

header > span {
  text-align: left;
  font: normal normal bold 18px/22px Roboto;
  letter-spacing: 0px;
  color: #242e64;
  opacity: 1;
  white-space: nowrap;
}

#burgermenu {
  display: none;
}

.sidebar-blue {
  background: blue;
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 0;
  height: 100%;
  align-items: center;
  z-index: 150;
  overflow-x: hidden;
  transition: 0.5s;
  background: rgba(0, 0, 0, 0.5);
}

.sidebar {
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 0;
  height: 100%;
  align-items: center;
  z-index: 200;
  overflow-x: hidden;
  transition: 0.5s;
  opacity: 1;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 17px 0px;
}

.sidebar-menu {
  display: flex;
  border: none;
  width: auto;
  height: 48px;
  align-items: center;
  padding: 12px 0px;
  font: normal normal normal 16px/21px Noto Sans CJK KR;
  letter-spacing: 0px;
  color: #4f5783;
  opacity: 1;
}

.sidebar-menu {
  padding-left: 24px;
  display: block;
  white-space: nowrap;
  letter-spacing: 0px;
  opacity: 1;
}

.sidebar-menu:hover {
  text-align: left;
  font: normal normal 500 16px/21px Noto Sans CJK KR;
  letter-spacing: 0px;
  color: #394dd1;
  opacity: 1;
}

.xicon {
  width: 20px;
  height: 20px;
  margin-left: auto;
  margin-right: 16px;
}

.logoicon {
  margin-left: 24px;
  width: 32px;
  height: 21px;
}

.header-profile-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
}

.logotitle {
  margin-left: 4px;
  text-align: left;
  font: normal normal bold 18px/22px Roboto;
  letter-spacing: 0px;
  color: #394dd1;
  opacity: 1;
}

.login-text {
  font: normal normal 500 16px/24px Noto Sans CJK KR;
  letter-spacing: 0px;
  color: #ffffff;
  opacity: 1;
}

.login-text-short {
  display: none;
  font: normal normal 500 16px/24px Noto Sans CJK KR;
  letter-spacing: 0px;
  color: #ffffff;
  opacity: 1;
}

.header-profile-menus-box {
  width: fit-content;
  height: auto;
  position: absolute;
  top: 72px;
  right: 24px;
  visibility: hidden;
  background: #ffffff 0% 0% no-repeat padding-box;
  border-radius: 4px;
  opacity: 1;
  padding-bottom: 8px;
  z-index: 5;
}

.header-profile-menus {
  width: 100%;
  display: flex;
  align-items: center;
  height: auto;
  padding: 16px;
}

.profile-img-box {
  display: flex;
  align-items: center;
}

.header-profile-menu-top {
  width: 100%;
  display: flex;
  align-items: center;
  height: 50%;
  padding: 16px;
  border-radius: 4px;
  flex-direction: column;
}

.profile-top-box {
  border: 1px solid #dcdfee;
  width: 100%;
  display: flex;
  padding: 12px;
  align-items: center;
  margin-bottom: 8px;
}

.profile-top-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profile-top-link > a {
  border: 1px solid #dcdfee;
  padding: 12px 30px;
  color: #394273;
  font-size: 1rem;
}

.profile-top-link > a:hover {
  background: rgba(57, 77, 209, 0.08);
  font: normal normal bold 1rem/21px Noto Sans CJK KR;
  letter-spacing: 0px;
  color: #394dd1;
}

.my-page-box {
  margin-right: 5px;
}

.my-class-box {
  margin-left: 5px;
}

.header-profile-menus > span {
  width: 100%;
}

.profile-name-box {
  margin-left: 12px;
}

.name-box {
  display: block;
  text-align: left;
  font: normal normal normal 14px/21px Noto Sans CJK KR;
  letter-spacing: 0px;
  color: #394273;
  opacity: 1;
}

.nickname-box {
  display: block;
  text-align: left;
  font: normal normal bold 18px/21px Noto Sans CJK KR;

  letter-spacing: 0px;
  color: #394273;
  opacity: 1;
}

.header-profile-menus-box > ul > li {
  display: flex;
  align-items: center;
  list-style: none;
  height: 48px;
  text-align: left;
  font: normal normal normal 15px/21px Noto Sans CJK KR;
  letter-spacing: 0px;
  color: #394273;
  opacity: 1;
  cursor: pointer;
}

.header-profile-menus-box > ul > li > a {
}

.profile-img {
  width: 48px;
  height: 48px;
  border: 2px solid #e1677d;
  border-radius: 16px;
  opacity: 1;
}

.profile-name-box {
  display: block;
}

.header-profile-menus-box > ul > li:hover {
  text-align: left;
  font: normal normal bold 15px/21px Noto Sans CJK KR;
  letter-spacing: 0px;
  color: #394dd1;
  background: rgba(57, 77, 209, 0.08);
}

.logout-btn {
  border: 0;
  outline: none;
}

.now-locate {
  font-weight: 500;
  letter-spacing: 0px;
  color: #242e64;
}

.now-locate-side {
  text-align: left;
  font-weight: 500;
  letter-spacing: 0px;
  color: #394dd1;
  opacity: 1;
}

.none {
  display: none;
}

/* for responsive header */
@media screen and (max-width: 1200px) {
  header {
    height: 56px;
    padding: 16px;
  }

  .nav-header {
    align-items: center;
    justify-items: center;
  }

  .nav-header > span {
    margin-right: auto;
  }

  .hr-vertical {
    display: none;
  }

  .header-menu {
    display: none;
  }

  .btn-right {
    margin-left: 0;
  }

  .btn-right > button span {
    display: none;
  }

  .btn-right > button:before {
    content: '로그인';
  }

  #logoimage {
    margin-left: auto;
  }

  #burgermenu {
    display: block;
  }

  header img {
    width: 24px;
    height: 24px;
    margin-right: 4px;
  }

  .login-text {
    display: none;
  }

  .login-text-short {
    display: block;
  }

  .header-profile-menus-box {
    top: 56px;
    width: fit-content;
    height: auto;
  }

  .header-profile-menus {
    height: 52px;
  }

  .profile-img {
    width: 32px;
    height: 32px;
  }
}

@media screen and (min-width: 1200px) {
}

@media screen and (min-width: 901px) and (max-width: 1200px) {
}

@media screen and (min-width: 601px) and (max-width: 900px) {
}

@media screen and (min-width: 0) and (max-width: 600px) {
  .header-profile-img {
    width: 24px;
    height: 24px;
  }
}

/* @import url('category.css'); */

.category {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  width: 100%;
}

.category_text {
  cursor: pointer;
}

.category_content {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 792px;
}

.category_text {
  color: #7b81a2;
  margin: 12px;
}

.ct_ln {
  width: auto;
  border-bottom: 1px solid #242e64;
}

/*헤더*/
.scrollDown {
  transform: translate(0, -150px);
  transition: transform 1s;
}

/*
카테고리 위에 sticky
*/
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* @import url('img_color.css'); */

/*필요한 칼라가 없다면 추가하세요*/
/* https://tests.christianoliff.com/hex-to-css-filter-generator/ */
.icon {
  display: inline-block;
  background-size: cover;
  background-color: transparent !important;
}

/*White*/
.Gi-00 {
  filter: invert(94%) sepia(98%) saturate(8%) hue-rotate(182deg)
    brightness(102%) contrast(106%);
}

/*dk-Dark blue*/
.Gi-700 {
  filter: invert(34%) sepia(13%) saturate(1486%) hue-rotate(193deg)
    brightness(95%) contrast(91%);
}

/*Blue*/
.P-blue-s-500 {
  filter: invert(23%) sepia(94%) saturate(2094%) hue-rotate(226deg)
    brightness(88%) contrast(87%);
}

/*Pink*/
.P-Pink-s-400 {
  filter: invert(37%) sepia(67%) saturate(3658%) hue-rotate(310deg)
    brightness(86%) contrast(95%);
}

.gray {
  filter: invert(53%) sepia(0%) saturate(28%) hue-rotate(166deg) brightness(96%)
    contrast(82%);
}

/* @import url('toast.css'); */

#toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  padding: 15px 20px;
  transform: translate(-50%, 100px);
  overflow: hidden;
  font-size: 0.8rem;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s, transform 0.5s;
  background: rgba(255, 255, 255, 0.8);
  color: #000;
  z-index: 10000;
  border-radius: 4px;
  text-align: center;
  font: normal normal bold 16px/20px Noto Sans CJK KR;
  letter-spacing: 0px;
}

#toast.reveal {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* @import url('statebar.css'); */

.state-bar-overlay {
  width: 100%;
  height: 78px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.state-bar {
  display: flex;
  height: 78px;
  width: 100%;
  max-width: 892px;
}

.state {
  padding-top: 16px;
  padding-bottom: 38px;
  position: relative;
  width: 25%;
  height: 78px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.state-content {
  width: 24px;
  height: 24px;
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #cbcee1;
  border-radius: 12px;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.now-state-content {
  width: 24px;
  height: 24px;
  background: #242e64 0% 0% no-repeat padding-box;
  border: 1px solid #cbcee1;
  border-radius: 12px;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.innericon {
  width: 10px;
  height: auto;
}

.state-content-text {
  position: absolute;
  bottom: 16px;
  text-align: center;
  font: normal normal normal 12px/24px Noto Sans CJK KR;
  letter-spacing: 0px;
  color: #656c92;
  opacity: 1;
}

.state-line {
  width: calc((100% - 24px) / 2);
  height: 2px;
  margin: 38px 0px;
  background: #cbcee1 0% 0% no-repeat padding-box;
  opacity: 1;
}

.state-line-white {
  width: calc((100% - 24px) / 2);
  height: 2px;
  margin: 38px 0px;
  background: #fff 0% 0% no-repeat padding-box;
  opacity: 1;
}

@font-face {
  font-family: 'Noto Sans CJK KR';
  font-style: normal;
  font-weight: 100;
  src: url('/fonts/NotoSansKR-thin.woff2') format('woff2'),
    url('/fonts/NotoSansKR-thin.woff') format('woff'),
    url('fonts/NotoSansKR-thin.otf') format('opentype');
}

@font-face {
  font-family: 'Noto Sans CJK KR';
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/NotoSansKR-light.woff2') format('woff2'),
    url('/fonts/NotoSansKR-light.woff') format('woff'),
    url('fonts/NotoSansKR-light.otf') format('opentype');
}

@font-face {
  font-family: 'Noto Sans CJK KR';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/NotoSansKR-Regular.woff2') format('woff2'),
    url('/fonts/NotoSansKR-Regular.woff') format('woff'),
    url('fonts/NotoSansKR-Regular.otf') format('opentype');
}

@font-face {
  font-family: 'Noto Sans CJK KR';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/NotoSansKR-Medium.woff2') format('woff2'),
    url('/fonts/NotoSansKR-Medium.woff') format('woff'),
    url('fonts/NotoSansKR-Medium.otf') format('opentype');
}

@font-face {
  font-family: 'Noto Sans CJK KR';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/NotoSansKR-Bold.woff2') format('woff2'),
    url('/fonts/NotoSansKR-Bold.woff') format('woff'),
    url('fonts/NotoSansKR-Bold.otf') format('opentype');
}

@font-face {
  font-family: 'Noto Sans CJK KR';
  font-style: normal;
  font-weight: 900;
  src: url('/fonts/NotoSansKR-Black.woff2') format('woff2'),
    url('/fonts/NotoSansKR-Black.woff') format('woff'),
    url('fonts/NotoSansKR-Black.otf') format('opentype');
}

* {
  box-sizing: border-box;
}

body {
  line-height: 1.5;
  margin: 0.2px;
}

.none {
  display: none !important;
}

a {
  text-decoration: none;
}