@charset "UTF-8";
/*
	Author	: hyojeong yang
	Date	: 2023-03-22
	Project	: 톡톡AI영어
*/
@font-face {
  font-family: "pretendard";
  font-style: normal;
  font-weight: 300;
  src: url("font/pretendard-light.woff2") format("woff2"), url("font/pretendard-light.woff") format("woff");
}
@font-face {
  font-family: "pretendard";
  font-style: normal;
  font-weight: 400;
  src: url("font/pretendard-regular.woff2") format("woff2"), url("font/pretendard-regular.woff") format("woff");
}
@font-face {
  font-family: "pretendard";
  font-style: normal;
  font-weight: 500;
  src: url("font/pretendard-medium.woff2") format("woff2"), url("font/pretendard-medium.woff") format("woff");
}
@font-face {
  font-family: "pretendard";
  font-style: normal;
  font-weight: 700;
  src: url("font/pretendard-bold.woff2") format("woff2"), url("font/pretendard-bold.woff") format("woff");
}
@font-face {
  font-family: "pretendard";
  font-style: normal;
  font-weight: 900;
  src: url("font/pretendard-black.woff2") format("woff2"), url("font/pretendard-black.woff") format("woff");
}
html, body {
  height: 100%;
  box-sizing: border-box;
}

html {
  border: 0;
  outline: 0;
  font-size: 62.5%;
}

body {
  font-size: 14px;
  line-height: 1.5;
  font-family: "pretendard", "맑은 고딕", "Malgun Gothic", "Apple Gothic", "돋움", Dotum, "굴림", Gulim, sans-serif;
  background-color: transparent;
  color: #333;
  font-weight: 400;
  letter-spacing: -0.02em;
  width: 100%;
  word-break: break-word;
  word-wrap: break-word;
}

body.noscroll {
  overflow: hidden;
}

::-moz-selection {
  color: #fff;
  background-color: #222;
}

::selection {
  color: #fff;
  background-color: #222;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

table caption {
  height: 0;
  font-size: 0.1em;
  color: #fff;
  opacity: 0;
}

button,
input,
textarea,
select {
  font-family: "Noto Sans KR", "맑은 고딕", "Malgun Gothic", "Apple Gothic", "돋움", Dotum, "굴림", Gulim, sans-serif;
  /*font-size: 12px;*/
  color: #333;
  letter-spacing: -0.05rem;
}

button {
  outline: none;
  border: none;
  background: none;
  cursor: pointer;
}

button:focus {
  /*outline:auto;*/
}

textarea {
  padding: 20px;
  box-sizing: border-box;
  background: transparent;
  border-color: #ddd;
  display: block;
}

select {
  border: 1px solid #ddd;
  box-sizing: border-box;
  height: 40px;
  padding: 0 41px 0 10px;
  vertical-align: top;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-sizing: border-box;
  -webkit-user-select: none;
  -ms-user-select: none;
  background: url("../images/common/sel_arr.svg") center right no-repeat;
  font-size: 14px;
}

select::-ms-expand {
  display: none;
}

html, body, nav, section, article, figure, figcaption,
h1, h2, h3, h4, h5, h6,
menu, ul, ol, dl, li, dt, dd,
p, form {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.1em;
}

img {
  margin: 0;
  border: none;
}

ul, ol, dl, li {
  list-style: none;
}

cite, em, address {
  font-style: normal;
}

em {
  color: #1D8BF8;
  font-weight: 700;
}

b, strong {
  font-weight: 700;
}

iframe {
  border: none;
  outline: 0;
}

a > span {
  cursor: pointer;
}

a {
  text-decoration: none;
  color: #333;
}

a:hover,
a:focus {
  text-decoration: none;
}

*:focus,
a:focus,
textarea:focus, input:focus {
  /*outline: 0;*/
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
}

fieldset legend {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}

hr {
  display: block;
  height: 1px;
  border: none;
  background-color: #ddd;
  margin: 0 0 30px;
}

input[type=text],
input[type=password],
input[type=number],
input[type=email],
input[type=tel],
input[type=time],
input[type=date],
input[type=datetime] {
  vertical-align: middle;
  padding: 0 16px;
  height: 40px;
  border: 1px solid #ddd;
  width: 260px;
  box-sizing: border-box;
  transition: all 0.3s;
  background-color: #fff;
}

input[type=time],
input[type=date],
input[type=datetime] {
  padding-right: 10px;
}

input[type=text].bg {
  background-color: #F8F8F8;
  border-color: #F8F8F8;
}

input[type=number] {
  padding: 0;
  text-align: center;
}

input[type=file],
input[type=file]:hover {
  padding: 0;
  border: none;
}

td input {
  vertical-align: top;
}

textarea {
  width: 100%;
  border: 1px solid #ddd;
  background-color: #fff;
}

input:hover,
textarea:hover {
  border: 1px solid #ddd;
}

input[type=file]:hover {
  border: none;
}

input:focus,
textarea:focus {
  border: 1px solid #ddd;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

textarea[disabled=disabled] {
  border: none;
}

textarea:focus[disabled=disabled] {
  box-shadow: none;
}

input[type=radio],
input[type=checkbox] {
  border: 0;
  height: auto;
  box-shadow: none;
  cursor: pointer;
}

input[type=checkbox] {
  width: 20px;
  height: 20px;
  background: none;
}

/*checkbox, radio */
.checkradio {
  display: inline-block;
  position: relative;
  font-size: 0;
  margin-right: 20px;
  min-width: 30px;
  min-height: 30px;
  vertical-align: middle;
}

.checkradio:only-child, .checkradio:last-child {
  margin-right: 0;
}

.checkradio input[type=checkbox],
.checkradio input[type=radio] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.checkradio input[type=checkbox] + label,
.checkradio input[type=radio] + label {
  display: inline-block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  font-size: 14px;
  vertical-align: middle;
  min-height: 24px;
  min-width: 24px;
  line-height: 22px;
  box-sizing: border-box;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
}

.checkradio input[type=checkbox] + label:before,
.checkradio input[type=radio] + label:before {
  content: " ";
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  width: 24px;
  height: 24px;
  background: #fff;
  border: 1px solid #ddd;
  box-sizing: border-box;
  transition: all 0.5s;
}

.checkradio input[type=checkbox] + label:after {
  content: " ";
  position: absolute;
  top: 5px;
  left: 9px;
  width: 7px;
  height: 10px;
  box-sizing: border-box;
  border-right: 2px solid #999;
  border-bottom: 2px solid #999;
  transform: rotate(45deg);
  transition: all 0.5s;
}

.checkradio input[type=radio] + label:after {
  content: " ";
  position: absolute;
  top: 7px;
  left: 6px;
  width: 12px;
  height: 12px;
  background: #999;
  transition: all 0.5s;
}

.checkradio input[type=checkbox] + label.txt-hide,
.checkradio input[type=radio] + label.txt-hide {
  position: relative;
  top: auto;
  left: auto;
  overflow: hidden;
  width: auto;
  height: auto;
  font-size: 0;
  line-height: 1.5;
  clip: rect(0 0 0 0);
  white-space: normal;
  text-indent: 0;
}

.checkradio input[type=checkbox] + label.txt-hide:before,
.checkradio input[type=radio] + label.txt-hide:before {
  margin-right: 0;
}

.checkradio input[type=checkbox] + label + input[type=text],
.checkradio input[type=radio] + label + input[type=text] {
  margin-left: 10px;
}

.checkradio input[type=checkbox]:checked + label:before,
.checkradio input[type=checkbox]:checked + label:after,
.checkradio input[type=radio]:checked + label:before {
  border-color: #1D8BF8;
}

.checkradio input[type=checkbox]:checked + label:after {
  animation: checkbox 0.5s ease-in;
}

@keyframes checkbox {
  0% {
    opacity: 0.5;
    transform: scale(0) rotate(45deg);
  }
  40% {
    opacity: 0.5;
    transform: scale(1.2) rotate(45deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(45deg);
  }
}
.checkradio input[type=radio]:checked + label:after {
  background-color: #1D8BF8;
  animation: checkbox 0.8s;
}

.checkradio input[type=checkbox]:focus + label,
.checkradio input[type=radio]:focus + label {
  outline: 2px solid #333;
  box-sizing: border-box;
}

.checkradio input[type=checkbox]:disabled + label,
.checkradio input[type=radio]:disabled + label,
.checkradio input[type=checkbox]:disabled + label *,
.checkradio input[type=radio]:disabled + label * {
  color: #999 !important;
}

.checkradio input[type=checkbox]:disabled + label:before,
.checkradio input[type=radio]:disabled + label:before {
  color: #F8F8F8;
}

.checkradio input[type=checkbox]:disabled + label:after,
.checkradio input[type=radio]:disabled + label:after {
  background-color: #c6d6e6;
}

.checkradio input[type=radio] + label:before, .checkradio input[type=radio] + label:after {
  border-radius: 50%;
}

.checkradio-custom-area {
  font-size: 0;
  margin-bottom: -5px;
}

.checkradio-custom-area .checkradio {
  margin-right: 3px;
  margin-bottom: 5px;
}

.checkradio-custom-area .checkradio input[type=checkbox] + label:before,
.checkradio-custom-area .checkradio input[type=radio] + label:before,
.checkradio-custom-area .checkradio input[type=checkbox] + label:after,
.checkradio-custom-area .checkradio input[type=radio] + label:after {
  display: none;
}

.checkradio-custom-area .checkradio input[type=checkbox] + label,
.checkradio-custom-area .checkradio input[type=radio] + label {
  display: inline-block;
  font-size: 14px;
  border: 1px solid #ddd;
  color: #777;
  height: 30px;
  line-height: 30px;
  border-radius: 2em;
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
  min-width: 65px;
  text-align: center;
}

.checkradio-custom-area .checkradio input[type=checkbox]:checked + label,
.checkradio-custom-area .checkradio input[type=radio]:checked + label {
  background-color: #1D8BF8;
  border-color: #1D8BF8;
  color: #fff;
}

.checkradio-custom2-area {
  font-size: 0;
  display: flex;
  width: 100%;
}

.checkradio-custom2-area .checkradio {
  margin-right: 0;
  width: 100%;
}

.checkradio-custom2-area .checkradio input[type=checkbox] + label,
.checkradio-custom2-area .checkradio input[type=radio] + label {
  display: block;
  width: 100%;
  height: 36px;
  line-height: 36px;
  border: 1px solid #ddd;
  text-align: center;
  box-sizing: border-box;
}

.checkradio-custom2-area .checkradio input[type=checkbox]:checked + label,
.checkradio-custom2-area .checkradio input[type=radio]:checked + label {
  background-color: #1D8BF8;
  border-color: #1D8BF8;
  color: #fff;
}

.checkradio-custom2-area .checkradio input[type=checkbox] + label:before,
.checkradio-custom2-area .checkradio input[type=radio] + label:before,
.checkradio-custom2-area .checkradio input[type=checkbox] + label:after,
.checkradio-custom2-area .checkradio input[type=radio] + label:after {
  display: none;
}

input[readonly]:not(.datepicker), input[readonly]:not(.datepicker):hover, input[readonly]:not(.datepicker):focus,
input[disabled]:not(.datepicker), input[disabled]:not(.datepicker):hover, input[disabled]:not(.datepicker):focus {
  background: #f9f9f9;
  border: 1px solid #ddd;
  font-weight: 300;
  box-shadow: none;
}

.p0 {
  width: 100px;
}

.p1 {
  width: 10%;
}

.p2 {
  width: 20%;
}

.p3 {
  width: 30%;
}

.p4 {
  width: 40%;
}

.p5 {
  width: 50%;
}

.p6 {
  width: 60%;
}

.p7 {
  width: 70%;
}

.p8 {
  width: 80%;
}

.p9 {
  width: 90%;
}

.p10 {
  width: 100% !important;
}

.mt10 {
  margin-top: 10px;
}

.mt20 {
  margin-top: 20px;
}

.mb10 {
  margin-bottom: 10px;
}

.mb20 {
  margin-bottom: 20px;
}

.mr10 {
  margin-right: 10px;
}

.mr20 {
  margin-right: 20px;
}

.ml10 {
  margin-left: 10px;
}

.ml20 {
  margin-left: 20px;
}

/* layout */
.wrap {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 1200px;
  box-sizing: border-box;
}

/* common */
.ac {
  text-align: center !important;
}

.al {
  text-align: left !important;
}

.ar {
  text-align: right !important;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.fr + * {
  clear: both;
}

.clear {
  clear: both;
}

.hidden {
  position: absolute;
  top: -99999px;
  left: -99999px;
  font-size: 1px;
  color: #fff;
  opacity: 0;
}

.pc-block {
  display: block !important;
}

.ta-block {
  display: none !important;
}

.m-block {
  display: none !important;
}

.m-none {
  display: block !important;
}

.inlin-block {
  display: inline-block;
}

.fc-rd {
  color: #EB325D !important;
}

.fc-bl {
  color: #1D8BF8 !important;
}

.fc-gn {
  color: #282D69 !important;
}

.fc-gr {
  color: #999 !important;
}

.fc-bk {
  color: #333 !important;
}

.fc-wh {
  color: #fff !important;
}

.fs-lg {
  font-size: 16px;
}

.fs-sm {
  font-size: 13px;
}

.fw-l {
  font-weight: 100 !important;
}

.fw-m {
  font-weight: 400 !important;
}

.fw-b {
  font-weight: 700 !important;
}

.ellipsis {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  width: 100%;
  overflow: hidden;
}

.txt-hide {
  position: absolute;
  width: 1px;
  height: 1px;
  font-size: 1px;
  line-height: 0;
  white-space: nowrap;
  padding: 0;
  border: 0;
  font-size: 0;
  text-indent: -99999px;
}

.tbl-area {
  display: table;
  width: 100%;
  margin-bottom: 30px;
}

.tbl-area:last-child {
  margin-bottom: 0;
}

.tbl-l,
.tbl-r {
  display: table-cell;
  vertical-align: middle;
}

.tbl-r {
  text-align: right;
}

/* -------------------------------------------------
    BTN
------------------------------------------------- */
.btn-cont {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  text-align: center;
  justify-content: center;
  gap: 8px;
  margin-top: 80px;
  margin-bottom: 100px;
}
.btn-cont.al {
  justify-content: flex-start;
}
.btn-cont.ar {
  justify-content: flex-end;
}

.btn-flex-cont {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  text-align: center;
  justify-content: center;
  gap: 8px;
  margin-top: 35px;
  margin-bottom: 100px;
}
.btn-flex-cont .btn,
.btn-flex-cont .btn-sm,
.btn-flex-cont .btn-lg,
.btn-flex-cont .btn-ico {
  flex: 1;
}
.btn-flex-cont .l-area,
.btn-flex-cont .r-area {
  display: flex;
  flex: 1;
  gap: 8px;
}
.btn-flex-cont .l-area > .btn,
.btn-flex-cont .l-area > .btn-sm,
.btn-flex-cont .l-area > .btn-lg,
.btn-flex-cont .l-area > .btn-ico,
.btn-flex-cont .r-area > .btn,
.btn-flex-cont .r-area > .btn-sm,
.btn-flex-cont .r-area > .btn-lg,
.btn-flex-cont .r-area > .btn-ico {
  flex: none;
}
.btn-flex-cont .r-area {
  justify-content: flex-end;
}

.btn,
.btn-sm,
.btn-lg,
.btn-xlg,
.btn-xsm {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  box-sizing: border-box;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: color, background-color;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.btn {
  padding: 0 16px;
  height: 40px;
  line-height: 38px;
  font-size: 14px;
}

.btn-xsm {
  padding: 0 8px;
  height: 24px;
  line-height: 22px;
  font-size: 11px;
  border-radius: 2em;
}

.btn-sm {
  padding: 0 12px;
  height: 32px;
  line-height: 30px;
  font-size: 12px;
}

.btn-lg {
  padding: 0 32px;
  height: 56px;
  line-height: 54px;
  font-size: 16px;
}

.btn-xlg {
  padding: 0 32px;
  min-width: 240px;
  line-height: 72px;
  height: 72px;
  text-align: center;
  font-weight: 700;
  font-size: 20px;
}

/* btn : default */
.btn,
.btn-sm,
.btn-lg,
.btn-xsm,
.btn-xlg {
  background-color: #fff;
  border: 1px solid #ddd;
  color: #333;
}
.btn:hover, .btn:focus,
.btn-sm:hover,
.btn-sm:focus,
.btn-lg:hover,
.btn-lg:focus,
.btn-xsm:hover,
.btn-xsm:focus,
.btn-xlg:hover,
.btn-xlg:focus {
  border-color: #d0d0d0;
}
.btn:disabled,
.btn-sm:disabled,
.btn-lg:disabled,
.btn-xsm:disabled,
.btn-xlg:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* btn : spot */
.btn.spot,
.btn-sm.spot,
.btn-lg.spot,
.btn-xsm.spot,
.btn-xlg.spot {
  border-color: #1D8BF8;
  color: #1D8BF8;
  font-weight: 400;
}
.btn.spot:hover, .btn.spot:focus,
.btn-sm.spot:hover,
.btn-sm.spot:focus,
.btn-lg.spot:hover,
.btn-lg.spot:focus,
.btn-xsm.spot:hover,
.btn-xsm.spot:focus,
.btn-xlg.spot:hover,
.btn-xlg.spot:focus {
  background-color: rgba(29, 139, 248, 0.05);
}

/* btn : spot2 */
.btn.spot2,
.btn-sm.spot2,
.btn-lg.spot2,
.btn-xsm.spot2,
.btn-xlg.spot2 {
  background-color: #1D8BF8;
  border-color: #1D8BF8;
  color: #fff;
  font-weight: 700;
}
.btn.spot2:hover, .btn.spot2:focus,
.btn-sm.spot2:hover,
.btn-sm.spot2:focus,
.btn-lg.spot2:hover,
.btn-lg.spot2:focus,
.btn-xsm.spot2:hover,
.btn-xsm.spot2:focus,
.btn-xlg.spot2:hover,
.btn-xlg.spot2:focus {
  color: #fff;
  border-color: #087ef4;
  background-color: #087ef4;
}

/* btn : spot3 */
.btn.spot3,
.btn-sm.spot3,
.btn-lg.spot3,
.btn-xsm.spot3,
.btn-xlg.spot3 {
  border-color: #EB325D;
  color: #EB325D;
}
.btn.spot3:hover, .btn.spot3:focus,
.btn-sm.spot3:hover,
.btn-sm.spot3:focus,
.btn-lg.spot3:hover,
.btn-lg.spot3:focus,
.btn-xsm.spot3:hover,
.btn-xsm.spot3:focus,
.btn-xlg.spot3:hover,
.btn-xlg.spot3:focus {
  background-color: rgba(235, 50, 93, 0.05);
}

.btn-more {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  padding: 0 30px;
  height: 50px;
  line-height: 48px;
  font-size: 14px;
  width: 200px;
  border: 1px solid #F8F8F8;
  text-align: center;
  box-sizing: border-box;
  padding-right: 54px;
}

.btn-more:after {
  content: " ";
  position: absolute;
  top: 50%;
  right: calc(50% - 54px);
  width: 24px;
  height: 24px;
  background: url("../images/common/arr.svg") center center no-repeat;
  transform: translateY(-50%) rotate(-90deg);
}

.btn-close {
  position: absolute;
  width: 24px;
  height: 24px;
  right: 0;
  margin: 0;
  text-indent: -99999px;
}

.btn-close:before,
.btn-close:after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background-color: #333;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.btn-close:after {
  transform: translate(-50%, -50%) rotate(45deg);
}

.btn-close.lg:before,
.btn-close.lg:after {
  width: 35px;
  height: 1px;
  color: #333;
}

.btn-close.sm {
  width: 16px;
  height: 16px;
}

.btn-close.sm:before,
.btn-close.sm:after {
  width: 12px;
}

.btn-close.gr:before,
.btn-close.gr:after {
  background-color: #999;
}

.btn-close.spot {
  background-color: rgba(0, 0, 0, 0.5);
}

.btn-close.spot:before,
.btn-close.spot:after {
  background-color: #fff;
}

.btn-etc {
  position: absolute;
  right: 3px;
  top: 3px;
  text-indent: -99999px;
  width: 16px;
  height: 16px;
  border-radius: 1px;
  background: url("../images/common/ico_etc.svg") center center no-repeat rgba(0, 0, 0, 0.25);
}

.btn-top {
  right: 20px;
  bottom: 20px;
  position: fixed;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background-color: #fff;
  border: 1px solid #F8F8F8;
  box-shadow: var(--box-shadow);
  border-radius: 50%;
  color: #fff;
  text-align: center;
  z-index: 10;
  text-indent: -99999px;
}

.btn-top:before {
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  background: url("../images/common/arr.svg") center center no-repeat;
  transform: translate(-50%, -50%) rotate(90deg);
}

.btn-zzim {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 24px;
  height: 24px;
  text-indent: -9999px;
  background: url("../images/common/ico_zzim_wh.svg") center center no-repeat;
  z-index: 1;
}

.btn-zzim.bk {
  background-image: url("../images/common/ico_zzim.svg");
}

.btn-zzim.is-active {
  background-image: url("../images/common/ico_zzim_spot.svg");
}

.btn-zzim-r,
.btn-share-r {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #F8F8F8;
  text-align: center;
  vertical-align: top;
  box-sizing: border-box;
  font-size: 10px;
  color: #999;
}

.btn-zzim-r:before,
.btn-share-r:before {
  content: " ";
  display: block;
  margin: 0 auto;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center center;
}

.btn-zzim-r:before {
  background-image: url("../images/common/ico_zzim_gr.svg");
}

.btn-zzim-r.is-active:before {
  background-image: url("../images/common/ico_zzim_spot.svg");
  animation: zzim 1s ease-in;
}

@keyframes zzim {
  0% {
    opacity: 0.5;
    transform: translateZ(0) rotateY(90deg) scale(2);
  }
  40% {
    opacity: 1;
    transform: scale(0.8);
  }
  60% {
    opacity: 0.8;
    transform: scale(2);
  }
  100% {
    opacity: 1;
    transform: translateZ(0) rotateY(0) scale(1);
  }
}
.btn-share-r:before {
  background-image: url("../images/common/ico_share_gr.svg");
}

.btn-add {
  width: 40px;
  height: 40px;
  background: url("../images/common/ico_add_wh.svg") center center no-repeat #F8F8F8;
}

.btn-help {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("../images/common/btn_help.svg") no-repeat;
  background-size: 100% 100%;
  text-indent: -9999px;
}

.btn-sel-lg {
  position: relative;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  box-sizing: border-box;
  height: 50px;
  line-height: 48px;
  padding: 0 45px 0 10px;
  font-size: 15px;
  font-weight: 400;
  border-radius: var(--border-radius);
  border: 1px solid #ddd;
  overflow: hidden;
}

.btn-sel-lg:before {
  content: " ";
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
  height: 48px;
  background: url("../images/common/sel_arr_bg.svg") right no-repeat #F8F8F8;
}

.btn-sel-lg span {
  display: block;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* -------------------------------------------------
    ICON
------------------------------------------------- */
[class^=ico-] {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  margin-right: 5px;
  width: 24px;
  height: 24px;
}

i.bi {
  display: inline-block;
  font-size: 18px;
  vertical-align: middle;
}

.btn .bi {
  margin-right: 5px;
  margin-top: -3px;
}

[class^=ico-].sm {
  width: 16px;
  height: 16px;
  margin-top: -2px;
}

[class^=ico-].back {
  margin-left: 5px;
}

/*.btn [class^=ico-],
.btn-sm [class^=ico-] {
    margin-left: -5px;
}*/
.ico-sch {
  background-image: url("../images/common/ico_sch.svg");
}

.ico-user {
  background-image: url("../images/common/ico_user.svg");
}

.ico-logout {
  background-image: url("../images/common/ico_logout.svg");
}

.ico-down {
  background-image: url("../images/common/ico_down.svg");
}

.ico-more {
  position: relative;
  margin: 0;
}

.ico-more:before,
.ico-more:after {
  content: " ";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 2px;
  background-color: #777;
  transform: translate(-50%, -50%);
}

.ico-more:after {
  transform: translate(-50%, -50%) rotate(-90deg);
}

.ico-zzim {
  background-image: url("../images/common/ico_zzim.svg");
}

.ico-zzim.spot {
  background-image: url("../images/common/ico_zzim_spot.svg");
}

.ico-share {
  background-image: url("../images/common/ico_share.svg");
}

.ico-move {
  background-image: url("../images/common/ico_move_gr.svg");
}

/* jquery-plugin :  datepicker */
.datepicker-box {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.datepicker-box::after {
  content: " ";
  position: absolute;
  top: 1px;
  right: 1px;
  width: 30px;
  height: 34px;
  background-image: url("../images/common/sel_arr_bg.svg");
  border-radius: 0 6px 6px 0;
}

.datepicker-box.block {
  display: block;
}

.datepicker-box + .dash {
  margin: 0 20px 0 -30px !important;
}

input[type=text].datepicker {
  display: inline-block !important;
  width: 130px;
  padding-right: 30px;
  box-sizing: border-box;
  background: url("../images/common/ico_calendar.svg") right center no-repeat #fff;
}

/*.datepicker + .ui-datepicker-trigger {
    position:relative;
    vertical-align:middle;
}*/
.ui-datepicker-trigger {
  display: inline-block;
  width: 30px;
  height: 30px;
  vertical-align: middle;
  padding: 0;
  margin-right: 20px;
}

.ui-datepicker-trigger img {
  display: block;
  width: 100%;
}

.ui-datepicker {
  background-color: #fff;
  margin-top: -2px;
  border: 1px solid #ddd;
  width: 100%;
  max-width: 300px;
  padding: 20px 10px 10px;
  display: none;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  margin: 0 auto;
  z-index: 1;
}

.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: 0 70px 0 0;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 30px;
  height: 30px;
  text-indent: -999px;
  background-repeat: no-repeat;
  cursor: pointer;
  background: #333;
  border-radius: 50%;
}

.ui-datepicker .ui-datepicker-prev {
  right: 40px;
}

.ui-datepicker .ui-datepicker-next {
  right: 5px;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -4px;
  margin-left: -3px;
  width: 7px;
  height: 7px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg);
}

.ui-datepicker .ui-datepicker-next span {
  /*left:auto;
  right:50%;
  margin-right:-1px;*/
  transform: rotate(135deg);
}

.ui-datepicker .ui-datepicker-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
  line-height: 30px;
  text-align: left;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  width: 80px;
  vertical-align: middle;
  height: 30px;
  font-size: 1.5rem;
  padding-left: 10px;
  padding-right: 30px;
}

.ui-datepicker select.ui-datepicker-year {
  margin-right: 5px;
}

.ui-datepicker table {
  width: 100%;
  font-size: 0.9rem;
  border-collapse: collapse;
  margin: 10px 0 0.2em;
  text-align: center;
}

.ui-datepicker th {
  padding: 0.3em 0.3em;
  color: #333;
  text-align: center;
  /*height:14px;*/
  font-size: 1.4rem;
  font-weight: bold;
  border: 0;
}

.ui-datepicker th.ui-datepicker-week-end span[title=Sunday] {
  color: #c51162;
}

.ui-datepicker td:first-child a {
  color: #c51162;
}

.ui-datepicker tr:first-child td {
  border-top: 0;
}

.ui-datepicker td {
  text-align: center;
  padding: 0.2em 0;
  border: 0;
  height: 14px;
}

.ui-datepicker td span,
.ui-datepicker td a {
  display: block;
  position: relative;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  text-decoration: none;
  border-bottom: 0;
  margin: 0 auto;
  color: #333;
  font-size: 1.4rem;
}

.ui-datepicker .ui-datepicker-buttonpane {
  background-image: none;
  margin: 0.7em 0 0 0;
  padding: 0 0.2em;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.ui-datepicker .ui-datepicker-buttonpane button {
  float: right;
  margin: 0.5em 0.2em 0.4em;
  cursor: pointer;
  padding: 0.2em 0.6em 0.3em 0.6em;
  width: auto;
  overflow: visible;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  float: left;
}

.due {
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px;
  font-size: 1.5rem;
  color: #333;
  position: relative;
  top: 3px;
}

.ui-datepicker .ui-state-highlight {
  background: #c6d6e6;
  color: #000;
  border-radius: 50%;
}

.ui-datepicker .highlight2 {
  background: #6a6f8d;
  color: #fff;
  border-radius: 50%;
}

.ui-datepicker .highlight3 {
  background: #fff;
  border: 2px solid #ffb100;
  line-height: 16px;
  box-sizing: border-box;
  color: #000;
}

/* popup */
.dim,
.dim-header {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 50;
}

.dim.wh {
  background-color: #fff;
}

.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 450px;
  width: calc(100% - 30px);
  background-color: #fff;
  z-index: 51;
  box-sizing: border-box;
}

.popup .pop-header {
  position: relative;
  height: 60px;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

.popup .pop-header h1 {
  display: flex;
  height: 60px;
  align-items: center;
  font-size: 18px;
  color: #333;
}

.popup .btn-close {
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}

.popup .pop-body {
  padding: 16px 16px 20px;
  max-height: calc(90vh - 60px);
  overflow-y: auto;
  box-sizing: border-box;
}

.popup .pop-body::-webkit-scrollbar {
  width: 8px;
}

.popup .pop-body::-webkit-scrollbar-thumb {
  background-color: #DEE2E6;
  border-radius: 2em;
}

/* tabs */
.tabs-normal .tabs-cont {
  display: none;
}

.tabs-nav {
  margin-bottom: 20px;
  display: table;
  table-layout: fixed;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #F8F8F8;
}

.tabs-nav li {
  display: table-cell;
  margin-right: 30px;
}

.tabs-nav li:last-of-type {
  margin-right: 0;
}

.tabs-nav li a {
  position: relative;
  display: block;
  font-size: 18px;
  color: #999;
  padding: 0 5px;
  box-sizing: border-box;
  height: 50px;
  line-height: 50px;
  background-color: #fff;
  white-space: nowrap;
  transition: all 0.3s;
}

.tabs-nav li a:hover,
.tabs-nav li a.is-active {
  color: #1D8BF8;
  font-weight: 700;
}

.tabs-nav li a.is-active:before {
  content: " ";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background-color: #1D8BF8;
}

/* table*/
.scroll-x {
  overflow-x: auto;
}

.scroll-x table {
  width: 100%;
}

table img {
  max-width: 100%;
}

.list-type,
.write-type,
.write-type2,
.info-type,
.view-type {
  position: relative;
  clear: both;
  word-break: keep-all;
}
.list-type table,
.write-type table,
.write-type2 table,
.info-type table,
.view-type table {
  width: 100%;
  clear: both;
  border-top: 1px solid #333;
}
.list-type th,
.list-type td,
.write-type th,
.write-type td,
.write-type2 th,
.write-type2 td,
.info-type th,
.info-type td,
.view-type th,
.view-type td {
  border-color: #eee;
  box-sizing: border-box;
}
.list-type th,
.write-type th,
.write-type2 th,
.info-type th,
.view-type th {
  font-weight: 400;
  background-color: #F8F8F8;
}
.list-type + *,
.write-type + *,
.write-type2 + *,
.info-type + *,
.view-type + * {
  margin-top: 40px;
}
.list-type + .bg-box, .list-type + .border-box, .list-type + .msg,
.write-type + .bg-box,
.write-type + .border-box,
.write-type + .msg,
.write-type2 + .bg-box,
.write-type2 + .border-box,
.write-type2 + .msg,
.info-type + .bg-box,
.info-type + .border-box,
.info-type + .msg,
.view-type + .bg-box,
.view-type + .border-box,
.view-type + .msg {
  margin-top: 20px;
}

/* table : info-type */
.info-type {
  word-break: break-all;
}
.info-type th,
.info-type td {
  padding: 12px 8px;
  height: 52px;
  border-bottom: 1px solid #eee;
}
.info-type th {
  background: #F8F8F8;
  padding-top: 12px;
  padding-bottom: 12px;
  color: #777;
}
.info-type th.spot {
  background-color: #F8F8F8;
}
.info-type thead th {
  text-align: center;
}
.info-type th.ac,
.info-type td.ac,
.info-type tr.ac th,
.info-type tr.ac td {
  padding: 14px 4px;
  text-align: center;
}
.info-type tr.ac th.al {
  text-align: left;
}
.info-type tr.strong td {
  font-weight: 700;
  font-size: 1.5rem;
  color: #333;
}
.info-type td a:hover,
.info-type td a em {
  text-decoration: underline;
}
.info-type + table {
  margin-top: 10px;
}
.info-type th strong {
  font-size: 1.5rem;
  font-weight: 700;
}
.info-type tbody + tbody tr:first-child th,
.info-type tbody + tbody tr:first-child td {
  border-top: 2px solid #ddd;
}

/* table : list-type */
.list-type th,
.list-type td {
  padding: 12px 8px;
  min-height: 44px;
  border-bottom: 1px solid #eee;
  text-align: center;
}
.list-type thead th {
  color: #777;
}
.list-type tbody td {
  height: 60px;
  box-sizing: border-box;
}
.list-type tbody td.al > a {
  display: inline-block;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  width: 100%;
  overflow: hidden;
  max-width: 100%;
  width: auto;
  color: #333;
  box-sizing: border-box;
  cursor: pointer;
}
.list-type tbody td.al > a:hover {
  color: #1D8BF8;
}
.list-type tbody td.al > a + .msg {
  margin-top: 5px;
}
.list-type tbody td.pcta {
  display: table-cell !important;
}
.list-type .btn-cont {
  align-items: center;
  margin: 0;
  gap: 4px;
}
.list-type.sm {
  font-size: 13px;
}
.list-type.sm th,
.list-type.sm td {
  padding: 12px 4px;
  min-height: 44px;
}
.list-type.sm th {
  font-size: 13px;
}

/* write-type */
.required {
  display: inline-block;
  margin-left: 2px;
  width: 7px;
  height: 7px;
  animation: opacity 2s infinite alternate;
  color: #EB325D;
}

.txt-option {
  font-size: 12px;
  color: #777;
}

.msg {
  font-size: 12px;
  color: #777;
}

.write-type th,
.write-type td {
  border-bottom: 1px solid #ddd;
  text-align: left;
  height: 60px;
  padding: 8px 16px;
  vertical-align: middle;
  box-sizing: border-box;
}
.write-type th {
  background-color: #F8F8F8;
  border-right: 1px solid #ddd;
  position: relative;
  font-weight: 500;
}
.write-type th.spot {
  background-color: #F8F8F8;
}
.write-type td > * {
  margin-top: 4px;
  margin-bottom: 4px;
}
.write-type td > :not(.block), .write-type td > :not(.datepicker-box) {
  margin-right: 4px;
}
.write-type td > :last-child {
  margin-right: 0;
}
.write-type td .checkradio {
  margin-right: 36px;
}
.write-type td fieldset .checkradio {
  margin-top: 4px;
  margin-bottom: 4px;
}
.write-type input.q0 {
  width: 100px;
}
.write-type input[type=number].q0 {
  width: 100px;
}
.write-type input.q1 {
  width: calc((100% - 30px) / 4);
}
.write-type input.q2 {
  width: calc((100% - 10px) / 2);
}
.write-type input.q3 {
  width: calc((100% - 30px) / 3 * 2);
}
.write-type input.q4 {
  width: 100%;
}
.write-type input + .msg, .write-type input + .item-list-box {
  margin-top: 0;
}

/* table : view-type */
.view-type img {
  max-width: 100%;
}
.view-type thead th {
  padding: 24px 0;
  text-align: left;
  background-color: none;
  background: none !important;
  border-bottom: 1px solid #eee;
}
.view-type thead h3 {
  font-size: 18px;
  font-weight: 700;
}
.view-type thead .info {
  margin-top: 4px;
}
.view-type tbody td {
  padding: 24px 0;
  border-bottom: 1px solid #eee;
}
.view-type .info {
  display: flex;
  flex-wrap: wrap;
}
.view-type .info li {
  position: relative;
}
.view-type .info li:after {
  content: " ";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin: 0 8px;
  margin-top: -2px;
  background-color: #333;
  vertical-align: middle;
}
.view-type .info li:last-child {
  margin-right: 0;
  padding-right: 0;
}
.view-type .info li:last-child:after {
  display: none;
}

/*board reset*/
#boardContents {
  padding: 40px 0;
}

#boardContents h1,
#boardContents h2,
#boardContents h3,
#boardContents h4,
#boardContents h5,
#boardContents h6 {
  margin: initial;
  padding: initial;
  line-height: 1.8em;
}

#boardContents h1 {
  font-size: 2em;
}

#boardContents h2 {
  font-size: 1.5em;
}

#boardContents h3 {
  font-size: 1.17em;
}

#boardContents h4 {
  font-size: 1em;
}

#boardContents h5 {
  font-size: 0.83em;
}

#boardContents h6 {
  font-size: 0.67em;
}

#boardContents ol,
#boardContents ol li {
  list-style: decimal;
}

#boardContents ul,
#boardContents ul li {
  list-style: disc;
}

#boardContents img {
  max-width: 100%;
  margin: 0 auto;
}

/* paging */
.paging {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px auto;
  gap: 4px;
  overflow: hidden;
  text-align: center;
  font-size: 0;
  overflow-x: auto;
}
.paging li {
  display: inline-block;
  vertical-align: middle;
}
.paging a {
  position: relative;
  display: block;
  color: #777;
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #ddd;
}
.paging a:hover, .paging a:focus {
  color: #333;
}
.paging .pv {
  margin-right: 8px;
}
.paging .fw {
  margin-left: 8px;
}
.paging .txt-hide {
  position: static;
  text-indent: -9999px;
  color: #fff;
  font-size: 0;
}

.paging li.ppv a span:before,
.paging li.ffw a span:before,
.paging li.ppv a span:after,
.paging li.ffw a span:after,
.paging li.pv a span:before,
.paging li.fw a span:before {
  content: "";
  position: absolute;
  display: block;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border-top: 2px solid #777;
  border-left: 2px solid #777;
  top: 50%;
  left: 50%;
  transform-origin: left top;
}

.paging li.pv a span:before,
.paging li.ppv a span:before,
.paging li.ppv a span:after {
  transform: rotate(-45deg);
}

.paging li.fw a span:before,
.paging li.ffw a span:before,
.paging li.ffw a span:after {
  transform: rotate(135deg);
}

.paging li.pv a span:before {
  margin-left: -4px;
}

.paging li.fw a span:before {
  margin-left: 4px;
}

.paging li.ppv a span:before {
  margin-left: -8px;
}

.paging li.ppv a span:after {
  margin-left: 0;
}

.paging li.ffw a span:before {
  margin-left: 0;
}

.paging li.ffw a span:after {
  margin-left: 8px;
}

.paging li.disabled a,
.paging li.disabled a:hover,
.paging li.disabled a:focus {
  background-position: 0 0;
}

.paging li a:hover,
.paging li a:focus {
  color: #333;
}

.paging li.ppv a:hover span:before, .paging li.ppv a:focus:before,
.paging li.ffw a:hover span:before, .paging li.ffw a:focus:before,
.paging li.ppv a:hover span:after, .paging li.ppv a:focus:after,
.paging li.ffw a:hover span:after, .paging li.ffw a:focus:after,
.paging li.pv a:hover span:before, .paging li.pv a:focus:before,
.paging li.fw a:hover span:before, .paging li.fw a:focus:before {
  border-color: #333;
}

.paging li.is-active a,
.paging li.is-active a:hover,
.paging li.is-active a:focus {
  color: #1D8BF8;
  font-weight: 700;
  border-color: #1D8BF8;
}

/* site-header */
.site-header .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}
.site-header .logo img {
  display: block;
}
.site-header .user {
  display: inline-block;
  padding: 0 16px;
  height: 36px;
  line-height: 36px;
  align-items: center;
  background-color: #fff;
  border-radius: 2em;
}

/* site-footer */
.site-footer {
  padding: 40px 0;
  background-color: #F8F8F8;
  color: #777;
}
.site-footer img {
  position: absolute;
  right: 0;
}

/* site-body */
.site-body {
  padding-bottom: 100px;
}

/* main */
.mn-contents section {
  margin-bottom: 120px;
}
.mn-contents section > *:last-child {
  margin-bottom: 0;
}
.mn-contents section:last-of-type {
  margin-bottom: 0;
}
.mn-contents img {
  display: block;
}

.mn-tit {
  margin-bottom: 40px;
  font-size: 36px;
  font-weight: 700;
  text-align: center;
}

.mn-visual {
  background-color: #C1E0FF;
  margin-top: -120px;
  margin-bottom: 200px;
}
.mn-visual .img-area {
  transform: translateY(120px);
}
.mn-visual img {
  display: block;
  width: 100%;
}

.mn-sticky {
  position: sticky;
  left: 0;
  bottom: 20px;
  width: 100%;
  text-align: center;
  margin-top: 80px;
  margin-bottom: 120px;
}

.test {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #EBF4FF;
}
.test .test-header {
  display: flex;
  height: 64px;
  align-items: center;
  padding-left: 40px;
  padding-right: 40px;
  justify-content: space-between;
  background-color: #fff;
}
.test .test-header .l-area,
.test .test-header .r-area {
  display: flex;
  align-items: center;
  gap: 8px 16px;
}
.test .test-header h1 img {
  height: 32px;
}
.test .test-header .user {
  display: inline-block;
  height: 36px;
  line-height: 36px;
  font-weight: 700;
  padding: 0 16px;
  background-color: #EBF4FF;
  border-radius: 2em;
}
.test .btn-close {
  position: relative;
}
.test .test-body {
  display: flex;
  padding: 40px;
  box-sizing: border-box;
  flex: 1;
  overflow: hidden;
  padding: 24px 40px;
  overflow-y: auto;
  background: url("../image/test/bg.jpg") center bottom no-repeat;
  background-size: cover;
}
.test .test-cont {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
}
.test .test-cont.bg-wh {
  display: block;
  flex: 1;
  overflow: hidden;
  overflow-y: auto;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.test .test-info-area {
  padding-top: 96px;
  text-align: center;
  justify-content: center;
}
.test .test-info-area .test-tit {
  margin-bottom: 24px;
  font-size: 100px;
  font-weight: 700;
  color: #282D69;
}
.test .test-info-area .txt-area {
  font-size: 18px;
}
.test .test-info-area .btn-test-start {
  transition: all 0.3s;
}
.test .test-info-area .btn-test-start:hover {
  transform: scale(1.1);
}
.test .test-info-area .btn-test-start img {
  display: block;
  margin: 0 auto;
}/*# sourceMappingURL=style.css.map */