/*common*/
.sub-tit h3 {
  margin-top: 0;
  margin-bottom: 15px;
}
.sub-tit p {
  color: var(--gray05);
}
.sub-tit2 h3 {
  font-size: var(--font30);
  font-weight: 700;
  margin-bottom: 20px;
}
.sub-tit2 p {
  font-size: var(--font25);
  color: var(--black05);
  line-height: 1.5;
  word-break: keep-all;
}
.sub-tit3 {
  font-size: var(--font30);
  font-weight: 700;
}
/*subtop*/
.subtop {
  height: 64vh;
  background: var(--blue01);
  overflow: hidden;
  color: var(--colorff);
}
.subtop img {
  width: 100%;
  position: absolute;
  left: 0;
  top: 120px;
}
.subtop .inner {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
.subtop h1 {
  font-size: var(--font50);
  font-weight: 700;
  line-height: 1.4;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
}
.subtop h1 span {
  font-size: var(--font30);
  font-weight: 500;
}
.subtop p {
  font-size: var(--font20);
  margin: 30px 0 8.5vh;
  line-height: 1.5;
}
.subtop .subtop-nav {
  display: flex;
}
.subtop .subtop-nav > li {
  width: 21.5%;
  border-radius: 0px 15px 0px 0px;
  background: #7695f0;
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
  padding: 20px 0;
  margin-left: -1.5%;
  position: relative;
}
.subtop .subtop-nav > li:nth-last-child(1) {
  border-right: 0;
}
.subtop .subtop-nav > li:nth-child(1) {
  z-index: 10;
  border-radius: 15px 15px 0px 0px;
  margin-left: 0;
}
.subtop .subtop-nav > li:nth-child(2) {
  z-index: 9;
}
.subtop .subtop-nav > li:nth-child(3) {
  z-index: 8;
}
.subtop .subtop-nav > li:nth-child(4) {
  z-index: 7;
}
.subtop .subtop-nav > li:nth-child(6) {
  z-index: 6;
}
.subtop .subtop-nav > li a {
  display: block;
  text-align: center;
  color: var(--colorff);
  font-size: var(--font22);
  font-weight: 500;
}
.subtop .subtop-nav > li.on {
  z-index: 20;
  background: #fff;
  border-radius: 15px 15px 0px 0px;
}
.subtop .subtop-nav > li.on a {
  color: var(--color00);
}
.subtop2 img {
  width: 20%;
  max-width: 242px;
  position: absolute;
  right: 0;
  top: 26%;
  transform: translateY(-50%);
  left: auto;
}
.subtop3 .inner {
  top: 26vh;
  bottom: auto;
}
.subtop4 {
  background: var(--blue09);
}
.subtop4 .inner {
  top: 26vh;
  bottom: auto;
}
.subtop4 img {
  width: 21.3%;
  max-width: 260px;
  top: 52%;
}
/*수리안소개*/
.about-sec1 {
  height: 100vh;
  background: url(/modules/images/home/sub/about-sec1.png);
  background-position: 0 6vh;
  background-size: contain;
  background-repeat: no-repeat;
  color: var(--colorff);
}
.about-sec1::before {
  content: "";
  width: 100%;
  height: 100%;
  background: var(--blue07);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.about-sec1 .inner h1 {
  font-size: var(--font50);
  font-weight: 700;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
  line-height: 1.4;
}
.about-sec1 .inner h1 span {
  font-size: var(--font30);
  font-weight: 500;
}
.about-sec1 .inner p {
  font-size: var(--font20);
  margin: 30px 0 10vh;
}
.about-sec1 .inner .main-btn {
  background: var(--colorff);
  color: var(--blue01);
  font-weight: 700;
}
.aboutsec1-mob {
  display: none;
}
.about-sec2 {
  padding: 15vh 0 18vh;
}
.about-sec2 .inner {
  max-width: 1010px;
}
.about-sec2 .main-tit {
  margin-bottom: 10vh;
  text-align: center;
}
.about-sec2 .main-tit h3 {
  color: var(--black04);
}
.about-sec2 .pagination {
  position: relative;
  width: 100%;
  height: 3vh;
  margin-top: 3vh;
}
.about-sec2 .swiper-pagination-bullet {
  background: var(--gray12);
  margin: 0 20px !important;
  opacity: 1;
}
.about-sec2 .swiper-pagination-bullet-active {
  background: var(--blue01);
}
.about-sec3 {
  padding-bottom: 20vh;
}
.about-sec3 .main-tit {
  margin-bottom: 10vh;
}
.about-sec3 .sec3-con {
  display: flex;
  justify-content: space-between;
  align-items: end;
}
.about-sec3 .sec3-con img {
  width: 44%;
  max-width: 572px;
}
.about-sec3 .sec3-list {
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding-bottom: 7vh;
  width: 46%;
}
.about-sec3 .sec3-list dl {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.about-sec3 .sec3-list dl dt {
  font-size: var(--font30);
  font-weight: 600;
}
.about-sec3 .sec3-list dl dd {
  font-size: var(--font24);
  color: var(--black02);
  line-height: 1.5;
}
.about-sec4 {
  padding-bottom: 28vh;
}
.about-sec4 h3 {
  text-align: center;
  font-size: var(--font50);
  font-weight: 700;
  margin-bottom: 12vh;
}
.about-sec4 h3 span {
  color: var(--blue01);
  position: relative;
  font-weight: 700;
}
.about-sec4 h3 span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue01);
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
}
.about-sec4 .sec4-list {
  display: flex;
  gap: 160px;
}
.about-sec4 .sec4-list > li {
  width: 33.333%;
  border-radius: 8px;
  box-shadow: 0px 8px 7px 0px rgba(0, 0, 0, 0.25);
  padding: 68px 0 55px;
  text-align: center;
  position: relative;
}
.about-sec4 .sec4-list .point {
  position: absolute;
  left: 50%;
  top: -68px;
  transform: translateX(-50%);
  width: 74px;
}
.about-sec4 .sec4-list h6 {
  color: var(--black02);
  font-size: var(--font20);
}
.about-sec4 .sec4-list h5 {
  font-size: var(--font25);
  font-weight: 600;
  margin: 10px 0 32px;
}
.about-sec4 .sec4-list .plus {
  width: 34px;
  margin: 0 auto 32px;
}
.about-sec4 .sec4-list p {
  font-size: var(--font20);
  line-height: 1.5;
  color: var(--black02);
}
.about-sec5 {
  padding-bottom: 22vh;
}
.about-sec5 .main-tit {
  margin-bottom: 120px;
}
.about-sec5 .step-wrap2 {
  position: relative;
  padding: 60px 0 90px;
}
.about-sec5 .list-wrap {
  margin-top: -86px;
}
.about-sec5 .arrow {
  width: 99%;
  position: absolute;
  left: 0;
  top: 40%;
  transform: translateY(-50%);
  z-index: -1;
}
.about-sec5 .sec5-step li .mob {
  display: none;
}

.about-sec5 .sec5-step {
  display: flex;
  gap: 30px;
}
.about-sec5 .sec5-step > li {
  width: 16.666%;
  text-align: center;
}
.about-sec5 .sec5-step > li img {
  width: 90%;
  max-width: 110px;
  margin: auto;
}
.about-sec5 .sec5-step > li dl {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--font20);
  color: var(--colorff);
}
.about-sec5 .sec5-step > li dl dt {
  font-weight: 700;
}
.about-sec5 .sec5-list {
  display: flex;
  gap: 82px;
  margin-top: 3px;
}
.about-sec5 .sec5-list > li {
  position: relative;
  padding: 160px 44px 48px;
  width: 50%;
}
.about-sec5 .sec5-list img {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.about-sec5 .sec5-list h4 {
  font-size: var(--font30);
  font-weight: 700;
  color: var(--blue01);
  margin-bottom: 22px;
}
.about-sec5 .sec5-list .list-num {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.about-sec5 .sec5-list .list-num > li {
  display: flex;
  gap: 8px;
  font-size: var(--font25);
  line-height: 1.5;
  word-break: keep-all;
}
.about-sec6 {
  background: var(--blue05);
  padding: 16vh 0 12vh;
}
.about-sec6 .sec6-con {
  display: flex;
  justify-content: space-between;
}
.about-sec6 .sec6-con h2 {
  font-size: var(--font50);
  font-weight: 700;
}
.about-sec6 .sec6-con p {
  font-size: var(--font30);
  line-height: 1.5;
  margin: 40px 0 42px;
}
.about-sec6 .sec6-con > li:nth-child(2) {
  width: 36%;
  padding-top: 3vh;
}
/*기능안내*/
.function-sec1 {
  padding: 10vh 0 20vh;
}
.function-sec1 .tit {
  margin-bottom: 10vh;
}
.function-sec1 .tit h3 {
  font-size: var(--font30);
  font-weight: 700;
  margin-bottom: 30px;
}
.function-sec1 .tit p {
  font-size: var(--font25);
  color: var(--black05);
  line-height: 1.5;
}
.function-sec1 .function-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 50px;
}
.function-sec1 .function-list > li {
  position: relative;
  border-radius: 10px;
  box-shadow: 0px 5px 15px 0px rgba(45, 106, 237, 0.35);
  padding: 62px 0;
  text-align: center;
  width: calc(33.333% - 33.333px);
}
.function-sec1 .function-list2 > li {
  padding: 62px 0 38px;
}
.function-sec1 .function-list .num {
  font-size: var(--font40);
  font-weight: 700;
  color: rgba(108, 150, 242, 0.4);
  position: absolute;
  left: 26px;
  top: 18px;
}
.function-sec1 .function-list h4 {
  font-size: var(--font25);
  font-weight: 600;
  margin-bottom: 20px;
}
.function-sec1 .function-list p {
  font-size: var(--font20);
  line-height: 1.5;
  color: var(--black05);
}
/*고객지원*/
.support-sec1 {
  padding: 10vh 0 15vh;
}
.support-sec1 .list-wrap {
  display: flex;
  flex-direction: column;
  margin-top: 6.5vh;
}
.support-sec1 .sec1-list {
  padding: 35px 0;
  border-bottom: 2px solid var(--gray06);
  display: flex;
  gap: 50px;
  align-items: center;
}
.support-sec1 .sec1-list > li.img {
  width: 6.5%;
  max-width: 74px;
}
.support-sec1 .sec1-list h4 {
  font-size: var(--font25);
  font-weight: 600;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 13px;
}
.support-sec1 .sec1-list h4 span {
  display: inline-block;
  color: var(--colorff);
  font-size: var(--font22);
  font-weight: 500;
  border-radius: 6px;
  background: var(--gray01);
  padding: 2px 8px;
}
.support-sec1 .sec1-list p {
  font-size: var(--font22);
  font-weight: 500;
  color: var(--gray01);
}
.support-sec2 {
  padding-bottom: 25vh;
}
.support-sec2 .sec2-list {
  display: flex;
  gap: 142px;
  margin-top: 11vh;
}
.support-sec2 .sec2-list > li {
  position: relative;
  width: 50%;
  border-radius: 10px;
  box-shadow: 0px 5px 15px 0px rgba(45, 106, 237, 0.35);
  padding: 100px 0 62px;
  text-align: center;
}
.support-sec2 .sec2-list .num {
  position: absolute;
  left: 46px;
  top: 30px;
  font-size: var(--font50);
  font-weight: 700;
  color: rgba(108, 150, 242, 0.4);
}
.support-sec2 .sec2-list img {
  width: 51.5%;
  max-width: 250px;
  margin: auto;
}
.support-sec2 .sec2-list p {
  font-size: var(--font20);
  margin: 24px 0 40px;
  line-height: 1.5;
  word-break: keep-all;
}
.support-sec2 .sec2-list a {
  display: inline-flex;
  padding: 14px 36px;
  border-radius: 100px;
  background: var(--blue01);
  color: var(--colorff);
  font-size: var(--font20);
  font-weight: 700;
}
.support-sec2 .sec2-list > li:nth-child(2) a {
  background: transparent;
  border: 2px solid var(--gray01);
  font-size: var(--font25);
  color: var(--gray01);
}
/*자주묻는 질문*/
.qna-sec1 {
  padding: 10vh 0 25vh;
}
.qna-sec1 .qna-wrap {
  margin-top: 6.5vh;
  border-top: 4px solid var(--black05);
  border-bottom: 4px solid var(--black05);
}
.qna-sec1 .qna-wrap > div {
  border-bottom: 1px solid var(--gray07);
}
.qna-sec1 .qna-wrap > div:nth-last-child(1) {
  border-bottom: 0;
}
.qna-sec1 .qna-wrap .question {
  padding: 35px 40px;
  display: flex;
  align-items: center;
  font-size: var(--font20);
  font-weight: 600;
  gap: 50px;
  position: relative;
  cursor: pointer;
}
.qna-sec1 .qna-wrap .question img {
  width: 23px;
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.4s;
}
.qna-sec1 .qna-wrap .question.active img {
  transform: rotate(180deg);
}
.qna-sec1 .qna-wrap .answer {
  background: rgba(243, 243, 243, 0.5);
  padding: 50px 120px 60px 120px;
  box-sizing: border-box;
  font-size: var(--font20);
  color: var(--gray01);
  display: none;
  line-height: 1.4;
}
.qna-sec1 .qna-wrap .answer span {
  font-weight: 600;
}
/*공지사항*/
.notice-wrap, .bill-wrap {
  padding: 0 0 5vh;
}
.notice-wrap .table-top {
  margin: 50px 0 20px;
  display: flex;
  justify-content: end;
}
.notice-wrap .table-top .write-btn {
  width: 120px;
  height: 40px;
  background: var(--blue01);
  color: var(--colorff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-size: var(--font20);
  font-weight: 600;
}
.notice-wrap .search-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  width: calc(100% - 180px);
}
.notice-wrap .search-wrap .input-wrap {
  width: 634px;
  position: relative;
}
.notice-wrap .search-wrap .input-wrap input {
  width: 100%;
  height: 40px;
  border-radius: 5px;
  border: 2px solid rgba(201, 201, 201, 0.5);
  background: #fff;
  padding-left: 56px;
  box-sizing: border-box;
  font-weight: 500;
}
.notice-wrap .search-wrap .input-wrap input::placeholder {
  color: var(--gray09);
}
.notice-wrap .search-wrap .input-wrap .icon {
  width: 44px;
  height: 27px;
  border-right: 1px solid var(--gray08);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.notice-wrap .search-wrap .input-wrap .icon img {
  width: 19px;
}
.notice-wrap .search-wrap button {
  width: 74px;
  height: 40px;
  border-radius: 5px;
  background: var(--gray01);
  color: var(--colorff);
  font-size: var(--font20);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notice-wrap table, .bill-wrap table {
  table-layout: fixed;
  width: 100%;
  border-top: 2px solid var(--color00);
  border-bottom: 1px solid var(--color00);
  text-align: center;
}
.notice-wrap table thead tr, .bill-wrap table thead tr {
  border-bottom: 1px solid var(--gray07);
}
.notice-wrap table th, .bill-wrap table th {
  font-size: var(--font18);
  font-weight: 500;
  padding: 20px 0;
}
.notice-wrap table th:nth-child(1) {
  width: 10%;
}
.notice-wrap table th:nth-child(2) {
  width: 66%;
}
.notice-wrap table th:nth-child(3) {
  width: 12%;
}
.notice-wrap table th:nth-child(4) {
  width: 12%;
}
.notice-wrap table th:nth-child(5) {
  width: 12%;
}
.notice-wrap2 table th:nth-child(2) {
  width: 54%;
}
.notice-wrap table tbody tr {
  border-bottom: 1px solid var(--gray07);
  cursor: pointer;
}
.notice-wrap table tbody tr:nth-last-child(1) {
  border-bottom: 0;
}
.notice-wrap table td, .bill-wrap table td {
  padding: 16px 0;
}
.notice-wrap table td:nth-child(2) {
  text-align: initial;
}
.notice-wrap table .new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 19px;
  background-color: var(--blue01);
  color: var(--colorff);
  font-size: 13px;
  font-weight: 600;
  border-radius: 5px;
  margin-left: 10px;
}
.notice-wrap table td,
.notice-wrap table th,
.bill-wrap table td,
.bill-wrap table th {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.notice-wrap .page-wrap {
  display: flex;
  justify-content: center;
  margin-top: 5vh;
}
.notice-wrap .page-btn {
  display: flex;
  align-items: center;
  gap: 30px;
}
.notice-wrap .page-btn > li {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font18);
  font-weight: 500;
  cursor: pointer;
}
.notice-wrap .page-btn > li img {
  width: 10px;
}
.notice-wrap .page-btn > li.on {
  background: var(--blue01);
  color: var(--colorff);
  border-radius: 50%;
}
.notice-wrap2 .state {
  display: inline-flex;
  padding: 5px 6px;
  border-radius: 5px;
}
.notice-wrap2 .state.done {
  background: rgba(195, 213, 253, 0.5);
}
.notice-wrap2 .state.ing {
  background: var(--gray06);
}
.notice-wrap2 .scrit {
  color: var(--gray10);
  display: flex;
  align-items: center;
  gap: 8px;
}
.notice-wrap2 .scrit img {
  width: 14px;
}
/*게시판 클릭시*/
.view-wrap {
/*  padding: 10vh 0 20vh;*/
}
.view-wrap .bo-view {
  margin-top: 50px;
  border-top: 2px solid var(--color00);
  border-bottom: 1px solid var(--gray07);
}
.view-wrap .bo-top {
  background: rgba(243, 243, 243, 0.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 50px;
  border-bottom: 1px solid var(--gray07);
}
.view-wrap .bo-top h4 {
  font-size: var(--font22);
  font-weight: 700;
  padding-right: 10px;
}
.view-wrap .bo-top .bo-info {
  display: flex;
  gap: 24px;
}
.view-wrap .bo-top .bo-info dl {
  font-size: var(--font18);
  display: flex;
  gap: 20px;
  color: var(--black05);
}
.view-wrap .bo-top .bo-info dl dt {
  font-weight: 600;
}
.view-wrap .bo-txt {
  padding: 50px 100px 50px 50px;
  color: var(--black05);
  font-size: var(--font20);
  line-height: 1.4;
  word-break: keep-all;
  word-wrap: break-word;
}
.view-wrap .bo-attach {
  border-top: 1px solid var(--gray07);
  padding: 20px 50px;
}
.view-wrap .bo-attach dl {
  display: flex;
  gap: 24px;
  font-size: var(--font18);
  align-items: flex-start;
}
.view-wrap .bo-attach dl dd {
  color: var(--black06);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.view-wrap .bo-attach dl dd a {
  display: inline-flex;
  background: var(--black05);
  border-radius: 5px;
  color: var(--colorff);
  font-size: var(--font18);
  padding: 6px 18px;
  gap: 5px;
}
.view-wrap .bo-attach dl dd a img {
  width: 19px;
}
.view-wrap .bo-list {
  display: flex;
  justify-content: flex-end;
  margin: 50px 0;
}
.view-wrap .bo-list a {
  display: inline-flex;
  align-items: center;
  padding: 8px 26px;
  border-radius: 5px;
  border: 1px solid var(--gray07);
  font-size: var(--font20);
  font-weight: 500;
}
.view-wrap .bo-list a img {
  width: 24px;
  margin-right: 8px;
}
.view-wrap .bo-page {
  border-top: 1px solid var(--gray07);
  border-bottom: 1px solid var(--gray07);
}
.view-wrap .bo-page > li:nth-child(1) {
  border-bottom: 1px solid var(--gray07);
}
.view-wrap .bo-page > li > a {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 18px 30px;
  font-size: var(--font18);
  color: var(--black06);
}
.view-wrap .bo-page > li > a img {
  width: 16px;
}
.view-wrap .bo-answer {
  border-top: 2px solid var(--color00);
  border-bottom: 1px solid var(--gray07);
  margin-top: 100px;
}
.view-wrap .bo-answer .answer-tit {
  padding: 20px 50px;
  background: rgba(195, 213, 253, 0.5);
  border-bottom: 1px solid var(--gray07);
  font-size: var(--font22);
  font-weight: 700;
}
.view-wrap .bo-answer .answer-con {
  padding: 50px 100px 50px 50px;
  font-size: var(--font20);
  color: var(--black05);
  line-height: 1.5;
}
.view-wrap .bo-list2 {
  justify-content: space-between;
}
.view-wrap .bo-list2 .btn-wrap, .bo-answer .btn-wrap {
  display: flex;
  gap: 24px;
}
.view-wrap .bo-list2 .btn-wrap button {
  background: var(--blue01);
  color: var(--colorff);
  width: 119px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font20);
  font-weight: 500;
  border-radius: 5px;
}
.view-wrap .bo-list2 .btn-wrap button:nth-child(2), .bo-answer .btn-wrap button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font20);
  font-weight: 500;
  border-radius: 5px;
  border: 1px solid var(--gray07);
  color: var(--color00);
  background: transparent;
}

.bo-answer .btn-wrap button {
  width: 119px;
  height: 40px;
  border: 1px solid var(--gray07);
  color: var(--color00);
  background: transparent;
}

/*청구내역*/
.bill-wrap table th:nth-child(1) {
  width: 10%;
}
.bill-wrap table th:nth-child(2) {
  width: 54%;
}
.bill-wrap table th:nth-child(3) {
  width: 12%;
}
.bill-wrap table th:nth-child(4) {
  width: 12%;
}
.bill-wrap table th:nth-child(5) {
  width: 12%;
}

/*팝업*/
.popup {
/*  display: none;*/
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
}
.popup .alert-wrap {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 84px 0;
  width: 622px;
  border-radius: 10px;
  text-align: center;
}
.popup .alert-wrap h3 {
  font-size: var(--font30);
  font-weight: 700;
}
.popup .alert-wrap p {
  font-size: var(--font20);
  line-height: 1.5;
  margin: 20px 0 40px;
  min-height: 60px;
}
.popup .alert-wrap .btn-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
.popup .alert-wrap .btn-wrap a {
  display: inline-flex;
  padding: 10px 21px;
  border-radius: 5px;
  background: var(--gray01);
  color: var(--colorff);
  font-size: var(--font18);
  font-weight: 700;
}
.popup .alert-wrap .btn-wrap a:nth-last-child(1) {
  background: var(--blue01);
}
/*문의하기*/
.inquire-wrap {
  padding: 10vh 0 20vh;
}
.inquire-wrap .form-wrap {
  margin: 10vh auto 0;
  width: 74.5%;
  max-width: 910px;
  border-radius: 20px;
  border: 1px solid var(--gray08);
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 66px 80px;
  box-sizing: border-box;
}
.inquire-wrap .form-wrap .input-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inquire-wrap .form-wrap .input-wrap p {
  font-size: var(--font20);
  font-weight: 600;
  color: var(--black05);
}
.inquire-wrap .form-wrap .input-wrap input {
  width: 100%;
  height: 52px;
  border-radius: 5px;
  border: 2px solid var(--gray08);
  font-size: var(--font20);
  font-weight: 600;
  box-sizing: border-box;
  padding: 0 30px;
}
.inquire-wrap .form-wrap .input-wrap input::placeholder {
  color: var(--gray08);
}
.inquire-wrap .form-wrap .input-wrap textarea {
  height: 400px;
  border-radius: 5px;
  border: 2px solid var(--gray08);
  font-size: var(--font20);
  font-weight: 600;
  box-sizing: border-box;
  padding: 12px 30px;
}
.inquire-wrap .form-wrap .input-wrap textarea::placeholder {
  color: var(--gray08);
}
.inquire-wrap .form-wrap button {
  width: 100%;
  height: 66px;
  border-radius: 5px;
  background: var(--blue01);
  color: var(--colorff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font25);
  font-weight: 700;
}
/*작성하기*/
.write-wrap {
  min-height: 100vh;
  padding: 10vh 0 32vh;
  box-sizing: border-box;
}
.write-wrap .bo-write {
  margin-top: 88px;
  box-shadow: 0px 5px 15px 0px rgba(45, 106, 237, 0.35);
  border-radius: 20px;
  padding: 62px 72px;
}
.write-wrap .write-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
}
.write-wrap .write-top .tit-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  width: calc(100% - 123px);
}
.write-wrap .write-top .tit-wrap p {
  font-size: var(--font24);
  font-weight: 600;
  width: 42px;
}
.write-wrap .write-top .tit-wrap input {
  width: calc(100% - 61px);
  height: 50px;
  border-radius: 5px;
  border: 2px solid #c9c9c9;
  background: #fff;
  padding: 0 16px;
  font-size: var(--font20);
  font-weight: 500;
}
.write-wrap .write-top .tit-wrap input::placeholder {
  font-size: var(--font20);
  font-weight: 500;
  color: var(--gray09);
}
.write-wrap .write-top .check-wrap {
  display: flex;
  align-items: center;
  font-size: var(--font20);
  font-weight: 500;
  position: relative;
  width: 92px;
}
.write-wrap .write-top .check-wrap label {
  padding-left: 40px;
  margin-bottom: 0;
}
.write-wrap .write-top .check-wrap input {
  width: 25px;
  height: 25px;
  border: 1px solid var(--blue01);
  border-radius: 5px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.write-wrap .write-top .check-wrap input:checked + label::after {
  content: "✔";
  font-size: 18px;
  width: 25px;
  height: 25px;
  text-align: center;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--colorff);
  font-family: "pretendard";
}
.write-wrap .write-top .check-wrap input:checked {
  background: var(--blue01);
}
.write-wrap .write-con {
  border-radius: 5px;
  border: 2px solid #c9c9c9;
  overflow: hidden;
  margin: 30px 0;
}
.write-wrap textarea {
  width: 100%;
  min-height: 450px;
  border: 0;
  padding: 20px;
}
.write-wrap textarea::placeholder {
  font-size: var(--font20);
  font-weight: 500;
  color: var(--gray07);
}
.write-wrap .write-bottom {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: space-between;
}
.write-wrap .write-bottom .left {
  width: calc(100% - 376px);
}
.write-wrap .write-bottom .right {
  width: 336px;
  height: 175px;
  border-radius: 20px;
  background: #ddd;
}
.write-wrap .write-bottom .img-attach {
  width: 100%;
  display: flex;
  gap: 20px;
  margin-bottom: 12px;
}
.write-wrap .write-bottom .img-attach > li {
  height: 120px;
  border-radius: 10px;
  border: 1px solid var(--gray01);
  padding: 5px;
  box-sizing: border-box;
  position: relative;
}
.write-wrap .write-bottom .img-attach > li img {
  height: 100%;
}
.write-wrap .write-bottom .img-attach > li img.close {
  height: auto;
  width: 30px;
  position: absolute;
  right: -16px;
  top: -16px;
  cursor: pointer;
}
.file-box {
  flex-direction: column;
  gap: 16px;
}
.file-box .file-info {
  color: var(--gray09);
  font-weight: 400;
  display: flex;
  gap: 4px;
  margin-top: 16px;
  line-height: 1.5;
}
.file-wrap {
  width: 100%;
  height: 39px;
  display: flex;
  flex-wrap: nowrap;
  box-sizing: border-box;
  gap: 16px;
}
.file-name {
  position: relative;
  width: calc(100% - 128px);
  height: 100%;
}
.filebox input[type="file"] {
  display: none;
}
.filebox label {
  display: flex;
  width: 122px;
  height: 38px;
  text-align: center;
  font-size: var(--font20);
  font-weight: 600;
  background: var(--black05);
  color: var(--colorff);
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.4s;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 5px;
}
.filebox label i {
  margin-left: 8px;
}
.file-name .file_del {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  cursor: pointer;
  display: none;
}
.file-name .file_del i {
  font-size: 14px;
  display: block;
}
.file-name.on .file_del {
  display: block;
}
.upload-name {
  display: inline-block;
  padding: 0px 8px;
  font-size: 0.8rem;
  line-height: 40px;
  color: #808080;
  vertical-align: middle;
  background-color: #f2f2f3;
  border: 0px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: calc(100% - 180px);
  box-sizing: border-box;
  display: none;
}
.upload-name.ver2 {
  background-color: transparent;
  width: auto;
  box-sizing: border-box;
  padding: 8px 23px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 100%;
  align-items: center;
  font-size: var(--font20);
  color: var(--gray07);
  font-weight: 500;
  display: flex;
  border-radius: 4px;
  border: 1px solid #cfd0d0;
}
.write-wrap .write-btn {
  margin-top: 42px;
  display: flex;
  justify-content: end;
  gap: 20px;
}
.write-wrap .write-btn button {
  width: 142px;
  height: 55px;
  border-radius: 10px;
  background: var(--gray01);
  color: var(--colorff);
  font-size: var(--font24);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.write-wrap .write-btn button:nth-last-child(1) {
  background: var(--blue01);
}
/*다운로드*/
.down-wrap {
  padding: 10vh 0 20vh;
}
.down-wrap .down-list {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
}
.down-wrap .down-list > li {
  border-radius: 10px;
  box-shadow: 0px 5px 15px 0px rgba(45, 106, 237, 0.35);
  padding: 60px 30px;
  text-align: center;
  width: calc(50% - 25px);
  box-sizing: border-box;
}
.down-wrap .down-list img {
  margin: auto;
  width: 60px;
}
.down-wrap .down-list h4 {
  font-size: var(--font30);
  font-weight: 600;
  margin: 36px 0 20px;
}
.down-wrap .down-list p {
  font-size: var(--font20);
  line-height: 1.5;
  color: var(--black05);
  min-height: 60px;
}
.down-wrap .down-list .btn-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}
.down-wrap .down-list .btn-wrap a {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 10px 30px;
  border-radius: 100px;
  background: var(--blue01);
  color: var(--colorff);
  font-size: var(--font16);
  font-weight: 700;
}
.down-wrap .down-list .btn-wrap a img {
  width: 20px;
}
.down-wrap .down-list > li:nth-child(1) .btn-wrap a {
  padding: 10px 15px;
}
.down-wrap .down-list > li:nth-child(1) .btn-wrap a:nth-child(2) {
  background: var(--blue08);
}
/*사용메뉴얼*/
.manual-wrap {
  padding: 10vh 0 25vh;
}
.manual-wrap .inner {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  align-items: flex-start;
}
.manual-wrap .manual-box {
  width: calc(50% - 25px);
  box-sizing: border-box;
  padding: 56px 36px 40px;
  border-radius: 10px;
  box-shadow: 0px 5px 15px 0px rgba(45, 106, 237, 0.35);
}
.manual-wrap .manual-box h4 {
  font-size: var(--font20);
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--gray09);
}
.manual-wrap .manual-list {
  display: flex;
  flex-direction: column;
}
.manual-wrap .manual-list > li > a {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 0 28px 0;
  border-bottom: 1px solid var(--gray08);
}
.manual-wrap .manual-list > li:nth-last-child(1) > a {
  border-bottom: 0;
}
.manual-wrap .manual-list .video-box {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  /*padding-bottom: 12.78%;*/
  border:  1px solid #E8E8E8;
}
.manual-wrap .manual-list .video-box img {
  /*position: absolute;*/
  /*height: 100%;*/
  left: 0;
  top: 0;
}
.manual-wrap .manual-list .video-box img video {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
}
.manual-wrap .manual-list dl {
  width: calc(100% - 130px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.manual-wrap .manual-list dl dt {
  font-size: var(--font30);
  font-weight: 600;
  color: var(--blue02);
  padding-bottom: 40px;
}
.manual-wrap .manual-list dl dd {
  font-size: var(--font18);
  color: var(--black06);
  line-height: 1.5;
  word-break: keep-all;
}

.manual-wrap .manual-list .youtube_player_wrapper {
  width: 100%;
}  
.manual-wrap .manual-list .youtube_player_wrapper .youtube_player {
  width: 100%; 
  aspect-ratio: 560 / 315; 
  border-radius: 10px;
}   
/*마이페이지*/
.mypage-wrap {
  padding: 22vh 0 16vh;
}
.mypage-wrap .mypage-con {
  display: flex;
  align-items: center;
  gap: 50px;
  margin-top: 50px;
}
.mypage-wrap .profile-wrap {
  width: 28%;
  border: 1px solid var(--gray08);
  border-radius: 10px;
  padding: 42px 0;
  text-align: center;
}
.mypage-wrap .profile-wrap .img-box {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  position: relative;
  margin: auto;
  overflow: hidden;
}
.mypage-wrap .profile-wrap .img-box img {
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.mypage-wrap .profile-wrap h4 {
  font-size: var(--font35);
  font-weight: 600;
  margin: 18px 0 12px;
}
.mypage-wrap .profile-wrap p {
  font-size: var(--font22);
  font-weight: 500;
  color: var(--blue01);
  margin-bottom: 24px;
}
.mypage-wrap .profile-wrap a {
  display: inline-flex;
  padding: 8px 24px;
  font-size: var(--font18);
  font-weight: 500;
  color: var(--black06);
  border-radius: 10px;
  border: 1px solid var(--gray08);
}
.mypage-wrap .plan-wrap {
  width: 72%;
  padding-top: 42px;
}
.mypage-wrap .plan-wrap h4 {
  font-size: var(--font24);
  font-weight: 600;
  margin-bottom: 28px;
}
.mypage-wrap .plan-wrap .plan-list {
  display: flex;
  gap: 70px;
}
.mypage-wrap .plan-wrap .plan-box {
  width: 30%;
}
.mypage-wrap .plan-wrap .plan-box1 {
  max-width: 256px;
  border-radius: 10px;
  border: 1px solid var(--gray08);
  box-sizing: border-box;
  overflow: hidden;
}
.mypage-wrap .plan-wrap .plan-box1 .img-box {
  position: relative;
}
.mypage-wrap .plan-wrap .plan-box1 .img-box h2 {
  font-size: var(--font50);
  color: var(--colorff);
  font-weight: 800;
  position: absolute;
  left: 25px;
  bottom: 14px;
}
.mypage-wrap .plan-wrap .plan-box1 .txt-box {
  padding: 40px 24px;
  box-sizing: border-box;
  height: 167px;
}
.mypage-wrap .plan-wrap .plan-box1 .txt-box h5 {
  font-size: var(--font20);
  font-weight: 700;
  margin-bottom: 8px;
}
.mypage-wrap .plan-wrap .plan-box1 .txt-box p {
  color: var(--black06);
  line-height: 1.5;
}
.mypage-wrap .plan-wrap .plan-box1 .txt-box a {
  margin-top: 20px;
  display: inline-flex;
  font-weight: 600;
  border: 1px solid var(--blue01);
  padding: 7px 30px;
  border-radius: 100px;
}
.mypage-wrap .plan-wrap .plan-box2 {
  position: relative;
}
.mypage-wrap .plan-wrap .plan-box2 h5 {
  font-size: var(--font20);
  font-weight: 600;
  margin-bottom: 50px;
}
.mypage-wrap .plan-wrap .plan-box2 .plan-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  font-size: var(--font18);
}
.mypage-wrap .plan-wrap .plan-box2 .plan-list > li {
  display: flex;
  align-items: center;
  gap: 17px;
}
.mypage-wrap .plan-wrap .plan-box2 .plan-list .box {
  position: relative;
  width: 16px;
  height: 16px;
  border: 1px solid var(--blue01);
}
.mypage-wrap .plan-wrap .plan-box2 .plan-list .box img {
  width: 23px;
  position: absolute;
  left: 0;
  bottom: 1px;
}
.mypage-wrap .plan-wrap .plan-box2 a {
  display: inline-flex;
  font-weight: 600;
  border: 1px solid var(--blue01);
  padding: 7px 30px;
  border-radius: 100px;
  position: absolute;
  left: 0;
  bottom: 5px;
  margin-left: 20px;
}
.mypage-wrap .plan-wrap .plan-box3 .price-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.mypage-wrap .plan-wrap .plan-box3 .price-list > li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.mypage-wrap .plan-wrap .plan-box3 .price-list img {
  width: 25px;
}
.mypage-wrap .plan-wrap .plan-box3 .price-list p {
  width: calc(100% - 33px);
  line-height: 1.5;
}
/*회원정보수정*/
.modify-wrap {
  padding: 22vh 0 10vh;
}
/*.modify-wrap .inner {
  border-radius: 20px;
  border: 1px solid var(--gray08);
  padding: 100px 120px;
  box-sizing: border-box;
}*/
.modify-wrap .page-tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modify-wrap .leave-button {
  display: inline-block;
  color: var(--gray09);
  text-decoration: underline;
  font-size: var(--font18);
  font-weight: 500;
}
.modify-wrap .form-wrap {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.modify-wrap .form-wrap .input-wrap {
  display: flex;
  gap: 50px;
  align-items: center;
  max-width: 780px;
  position: relative;
}
.modify-wrap .form-wrap .input-wrap p.tit {
  width: 120px;
  font-size: var(--font20);
  font-weight: 600;
  color: var(--black05);
}
.modify-wrap .form-wrap .input-wrap .input-box {
  width: 510px;
  height: 40px;
  position: relative;
}
.modify-wrap .form-wrap .input-wrap .input-box .alert {
  font-size: var(--font14);
  color: var(--red01);
  position: absolute;
  left: 0;
  bottom: -28px;
}
.modify-wrap .form-wrap .input-wrap .input-box p {
  font-size: var(--font20);
  color: var(--color00);
}
.modify-wrap .form-wrap .input-wrap .input-box input {
  width: 70%;
  height: 100%;
  border-radius: 5px;
  border: 2px solid var(--gray08);
  font-size: var(--font20);
  color: var(--black05);
  box-sizing: border-box;
  padding: 0 26px;
}
.modify-wrap .form-wrap .input-wrap .input-box input::placeholder {
  font-size: var(--font20);
  color: var(--black05);
}
.modify-wrap .form-wrap .input-wrap2 .input-box {
  display: flex;
  justify-content: space-between;
  font-size: var(--font25);
  color: var(--black05);
  font-weight: 500;
}
.modify-wrap .form-wrap .input-wrap2 .input-box input {
  width: 228px;
}
.modify-wrap .form-wrap .input-wrap2 .select-box {
  width: 228px;
  height: 100%;
}
.modify-wrap .form-wrap .input-wrap2 .select-box select {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  border: 2px solid var(--gray08);
  background: var(--colorff);
  font-size: var(--font20);
  color: var(--black05);
  box-sizing: border-box;
  padding: 0 26px;
  background: url("../img/icon/ic-down2.svg") calc(100% - 20px) center no-repeat;
  background-size: 12px;
}
.modify-wrap .form-wrap .input-wrap3 .input-box {
  display: flex;
  gap: 30px;
}
.modify-wrap .form-wrap .input-wrap3 .check-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.modify-wrap .form-wrap .input-wrap3 .check-wrap label {
  padding-left: 26px;
  font-size: var(--font20);
  color: var(--black04);
  cursor: pointer;
}
.modify-wrap .form-wrap .input-wrap3 .check-wrap input {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 2px solid var(--gray11);
  background: var(--gray12);
  padding: 0;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.modify-wrap .form-wrap .input-wrap3 .check-wrap input:checked + label::after {
  content: "✔";
  font-size: 12px;
  width: 16px;
  height: 16px;
  text-align: center;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--black06);
  font-family: "pretendard";
}
.modify-wrap .form-wrap .input-wrap3 .check-wrap input:checked {
  background: var(--gray11);
}
.modify-wrap .form-wrap button {
  width: 100%;
  height: 74px;
  border-radius: 5px;
  background: var(--blue01);
  color: var(--colorff);
  font-size: var(--font25);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5vh 0;
}

.modify-wrap .user-info {
  max-width: 752px;
  margin: auto;
  padding: 50px;
  box-shadow: 0px 5px 15px 0px rgba(45, 106, 237, 0.35);
  border-radius: 20px;
  margin-top: 50px;
}

.modify-wrap .input-wrap .input-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modify-wrap .change-button {
  width: 100px;
  max-width: 100px;
  height: 40px;
  border-radius: 5px;
  background: var(--gray01);
  color: var(--colorff)!important;
  font-size: var(--font20);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}

/*로그인*/
.login-wrap {
  height: 100vh;
  display: flex;
}
.login-wrap .left {
  width: 65%;
  background: url(/modules/images/home/sub/login-bg.png);
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.login-wrap .left .login-tit {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 12vh;
  color: var(--colorff);
  text-align: center;
}
.login-wrap .left .login-tit h1 {
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
  font-size: var(--font40);
  font-weight: 700;
  margin-bottom: 18px;
}
.login-wrap .left .login-tit p {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  font-size: var(--font30);
  line-height: 1.5;
  opacity: 0.9;
}
.login-wrap .right {
  width: 35%;
  position: relative;
}
.login-wrap .con-wrap {
  width: 370px;
}
.login-wrap .con-wrap .logo {
  width: 284px;
  margin: 0 auto 82px;
}
.login-wrap .login-input {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding-bottom: 70px;
  border-bottom: 2px solid var(--gray08);
  margin-bottom: 28px;
}
.login-wrap .login-input input {
  width: 100%;
  height: 50px;
  border-radius: 5px;
  border: 2px solid var(--gray11);
  padding: 0 22px;
  box-sizing: border-box;
}
.login-wrap .login-input input::placeholder {
  color: var(--gray13);
}
.login-wrap .login-input .check-box {
  display: flex;
  gap: 46px;
}
.login-wrap .login-input .check-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.login-wrap .login-input .check-wrap input {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
}
.login-wrap .login-input .check-wrap label {
  font-size: 14px;
  font-weight: 500;
  color: var(--black07);
  padding-left: 25px;
}
.login-wrap .login-input .check-wrap input:checked + label::after {
  content: "✔";
  font-size: 12px;
  width: 17px;
  height: 17px;
  text-align: center;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--black06);
  font-family: "pretendard";
}
.login-wrap .login-input .check-wrap input:checked {
  background: var(--gray11);
}
.login-wrap .login-input button {
  width: 100%;
  height: 60px;
  border-radius: 5px;
  background: var(--blue01);
  color: var(--colorff);
  font-size: var(--font25);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0;
}
.login-wrap .login-btn {
  display: flex;
  gap: 20px;
}
.login-wrap .login-btn > li > a {
  font-size: 14px;
  text-decoration: underline;
  display: block;
}
.login-wrap .login-btn > li:nth-child(1) > a {
  color: var(--blue01);
}
.login-wrap .login-btn > li:nth-child(1) {
  position: relative;
}
.login-wrap .login-btn > li:nth-child(1)::before {
  content: "";
  width: 1px;
  height: 16px;
  background: var(--gray14);
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
}
.login-wrap .customer-wrap {
  display: flex;
  justify-content: space-between;
}
.login-wrap .customer-wrap h3 {
  font-size: var(--font20);
  font-weight: 500;
}
.login-wrap .customer-wrap h3 span {
  font-weight: 300;
  color: var(--gray09);
  margin-bottom: 12px;
}
.login-wrap .customer-wrap h2 {
  color: var(--black08);
  font-size: var(--font30);
  font-weight: 700;
}
.login-wrap .customer-wrap .sns-btn {
  display: flex;
  gap: 13px;
}
.login-wrap .customer-wrap .sns-btn > li > a {
  display: block;
}
.login-wrap .customer-wrap .sns-btn > li > a img {
  width: 40px;
}
.login-wrap .right .copy {
  font-size: 12px;
  font-family: var(--noto);
  text-align: center;
  color: var(--gray09);
  position: absolute;
  left: 50%;
  bottom: 9vh;
  transform: translateX(-50%);
}
/*아이디 비밀번호찾기*/
.find-wrap {
  min-height: 100vh;
  padding: 22vh 0 20vh;
  box-sizing: border-box;
}
.find-wrap .inner {
  max-width: 752px;
}
.find-wrap .find-tab {
  margin-top: 50px;
}
.find-wrap .tab-nav {
  display: flex;
  border-bottom: 1px solid var(--gray06);
}
.find-wrap .tab-nav > li {
  width: 50%;
  padding-bottom: 15px;
  font-size: var(--font20);
  color: var(--black06);
  text-align: center;
  position: relative;
  transition: all 0.4s;
  cursor: pointer;
}
.find-wrap .tab-nav > li.on {
  color: var(--color00);
  font-weight: 600;
}
.find-wrap .tab-nav > li.on::before {
  content: "";
  width: 100%;
  height: 6px;
  position: absolute;
  left: 0;
  bottom: -4px;
  background: var(--color00);
}
.find-wrap .tab-con {
  padding-top: 50px;
}
.find-wrap .tab-con > div {
  display: none;
}
.find-wrap .tab-con > div.on {
  display: block;
}
.find-wrap .tab-con .tit h4 {
  font-size: var(--font25);
  font-weight: 700;
  margin-bottom: 10px;
}
.find-wrap .tab-con .tit p {
  font-size: var(--font20);
  line-height: 1.5;
  color: var(--gray15);
}
.find-wrap .form-wrap {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 50px;
}
.find-wrap .input-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.find-wrap .input-wrap .alert {
  font-size: var(--font14);
  color: var(--red01);
  position: absolute;
  left: 0;
  bottom: -28px;
}
.find-wrap .input-wrap.on input {
  border: 1px solid var(--red01);
  position: relative;
}
.find-wrap .input-wrap.on input {
  background: url("../img/icon/ic-alert.svg") calc(100% - 14px) center no-repeat;
  background-size: 24px;
}
.find-wrap .input-wrap p {
  font-size: var(--font20);
  font-weight: 600;
  color: var(--black05);
}
.find-wrap .input-wrap input {
  width: 100%;
  height: 52px;
  border-radius: 5px;
  border: 2px solid var(--gray08);
  font-size: var(--font20);
  font-weight: 600;
  padding: 0 20px;
  box-sizing: border-box;
}
.find-wrap .input-wrap input::placeholder {
  font-size: var(--font20);
  font-weight: 600;
  color: var(--gray08);
}
.find-wrap .input-wrap .pass {
  display: flex;
  gap: 50px;
}
.find-wrap .input-wrap .pass button {
  width: 200px;
  height: 50px;
  border-radius: 5px;
  background: var(--gray13);
  font-size: var(--font20);
  font-weight: 600;
  color: var(--colorff);
  display: flex;
  align-items: center;
  justify-content: center;
}
.find-wrap .input-wrap .pass input {
  width: calc(100% - 250px);
}
.find-wrap button.submit {
  width: 100%;
  height: 66px;
  background: var(--blue01);
  border-radius: 5px;
  color: var(--colorff);
  font-size: var(--font25);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60px;
}
.find-wrap .id-result {
  margin-top: 50px;
}
.find-wrap .id-result .id-find {
  width: 100%;
  padding: 58px 0;
  border-radius: 5px;
  border: 2px solid var(--gray08);
  font-size: var(--font30);
  text-align: center;
  font-weight: 600;
}
.find-wrap .id-result .btn-wrap {
  display: flex;
  margin-top: 100px;
  gap: 32px;
}
.find-wrap .id-result .btn-wrap a {
  width: 50%;
  height: 66px;
  background: var(--blue10);
  color: var(--colorff);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font25);
  font-weight: 700;
}
.find-wrap .id-result .btn-wrap a:nth-child(2) {
  background: var(--blue01);
}
.find-wrap .id-result .pass-find {
  width: 100%;
  padding: 75px 0;
  border-radius: 20px;
  border: 2px solid var(--gray08);
  text-align: center;
}
.find-wrap .id-result .pass-find img {
  width: 147px;
  margin: 0 auto 46px;
}
.find-wrap .id-result .pass-find p {
  font-size: var(--font25);
  font-weight: 700;
  line-height: 1.5;
}
.find-wrap .id-result .pass-find p span {
  font-size: var(--font22);
  font-weight: 400;
}
/*회원가입*/
.join-wrap {
  padding: 22vh 0 20vh;
}
.join-wrap .inner {
  max-width: 752px;
}
.join-wrap .join-tit {
  font-size: var(--font30);
  font-weight: 700;
}
.join-wrap .join-step {
  display: flex;
  justify-content: center;
  gap: 122px;
  margin: 50px 0;
  position: relative;
}
.join-wrap .join-step::before {
  content: "";
  width: 424px;
  height: 2px;
  background: var(--blue01);
  top: 30px;
  position: absolute;
  z-index: -1;
}
.join-wrap .join-step .num {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--blue01);
  font-size: var(--font40);
  font-weight: 700;
  color: var(--blue01);
  background: var(--colorff);
}
.join-wrap .join-step .tit {
  font-size: var(--font18);
  color: var(--gray01);
  font-weight: 500;
  margin-top: 12px;
}
.join-wrap .join-step > li.on .num {
  color: var(--colorff);
  background: var(--blue01);
}
.join-wrap .join-step > li.on .tit {
  color: var(--color00);
  font-weight: 600;
}
.join-wrap .check-list {
  border: 2px solid var(--gray11);
  border-radius: 20px;
  padding: 46px 60px;
  gap: 34px;
  display: flex;
  flex-direction: column;
}
.join-wrap .check-list .check-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.join-wrap .check-list .check-wrap label {
  display: flex;
  align-items: center;
}
.join-wrap .check-list .check-wrap label span {
/*  text-decoration: underline;*/
}
.join-wrap .check-list .check-wrap label img {
  width: 16px;
  margin-left: 10px;
}
.join-wrap .check-list .check-wrap input {
  width: 21px;
  height: 21px;
  border: 1px solid var(--gray07);
  border-radius: 50%;
  position: relative;
}
.join-wrap .check-list .check-wrap input:checked::after {
  content: "✔";
  font-size: 12px;
  width: 21px;
  height: 21px;
  text-align: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--colorff);
  font-family: "pretendard";
}
.join-wrap .check-list .check-wrap input:checked {
  background: var(--blue01);
  border: var(--blue01);
}
.join-wrap .check-list .check-wrap1 {
  padding-bottom: 32px;
  border-bottom: 2px solid var(--gray08);
}
.join-wrap .check-list .check-wrap1 label {
  font-size: var(--font20);
  font-weight: 700;
}
.join-wrap .check-list .alert {
  color: var(--red01);
  margin-top: 16px;
}
.join-wrap .next-btn {
  width: 100%;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue01);
  color: var(--colorff);
  font-size: var(--font25);
  font-weight: 700;
  margin-top: 100px;
  border-radius: 5px;
}
.join-wrap .form-wrap {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.join-wrap .form-wrap .input-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
}
.join-wrap .form-wrap .input-wrap p {
  font-size: var(--font20);
  font-weight: 600;
  color: var(--black05);
}
.join-wrap .form-wrap .input-wrap input {
  width: 100%;
  height: 52px;
  border-radius: 5px;
  border: 2px solid var(--gray08);
  font-size: var(--font20);
  font-weight: 600;
  box-sizing: border-box;
  padding: 0 20px;
}
.join-wrap .form-wrap .input-wrap input::placeholder {
  color: var(--gray08);
}
.join-wrap .form-wrap .input-wrap .info {
  position: absolute;
  left: 0;
  bottom: -22px;
  font-size: var(--font14);
  color: var(--gray09);
  font-weight: 400;
}
.join-wrap .form-wrap .input-wrap .alert {
  display: none;
}
.join-wrap .form-wrap .input-wrap .input-box2 {
  display: flex;
  gap: 20px;
}
.join-wrap .form-wrap .input-wrap .input-box2 input {
/*  width: calc(100% - 250px);*/
  flex: 1;
}
.join-wrap .form-wrap .input-wrap .input-box2 a {
  width: 120px;
  height: 52px;
  background: var(--gray13);
  border-radius: 5px;
  color: var(--colorff);
  font-size: var(--font20);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.join-wrap .form-wrap .input-wrap .input-box3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font25);
  font-weight: 500;
  color: var(--black05);
}
.join-wrap .form-wrap .input-wrap .input-box3 input {
  width: 100%;
}
.join-wrap .form-wrap .input-wrap .input-box3 select {
  height: 52px;
  border-radius: 5px;
  border: 2px solid var(--gray08);
  font-size: var(--font20);
  font-weight: 600;
  box-sizing: border-box;
  padding: 0 20px;
  background: url("../img/icon/ic-down2.svg") calc(100% - 20px) center no-repeat;
  background-size: 12px;
  color: var(--gray08);
}
.join-wrap .form-wrap .input-wrap .input-box3 select::placeholder {
  color: var(--gray08);
}
.join-wrap .form-wrap .input-wrap .input-box4 {
  position: relative;
}
.join-wrap .form-wrap .input-wrap .input-box4 img {
  width: 27px;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.join-wrap .form-wrap .input-wrap input.on {
  border: 1px solid var(--red01);
}
.join-wrap .form-wrap .input-wrap select.on {
  border: 1px solid var(--red01);
}
.join-wrap .form-wrap .input-wrap input.on {
  background: url("../img/icon/ic-alert.svg") calc(100% - 14px) center no-repeat;
  background-size: 24px;
}
.join-wrap .form-wrap .input-wrap .input-box4 img.on {
  right: 58px;
}
.join-wrap .form-wrap .input-wrap .info.on {
  display: none;
}
.join-wrap .form-wrap .input-wrap.on .alert {
  display: block;
  position: absolute;
  left: 0;
  bottom: -22px;
  font-size: var(--font14);
  color: var(--red01);
  font-weight: 400;
}
.join-wrap .join-end {
  border-radius: 20px;
  box-shadow: 0px 5px 15px 0px rgba(45, 106, 237, 0.35);
  padding: 68px 0;
  text-align: center;
}
.join-wrap .join-end img {
  width: 130px;
  margin: 0 auto 26px;
}
.join-wrap .join-end p {
  font-size: var(--font22);
  line-height: 1.5;
}
.join-wrap .join-end p span {
  font-weight: 700;
}
.join-wrap .btn-wrap {
  display: flex;
  gap: 32px;
  margin-top: 100px;
}
.join-wrap .btn-wrap a {
  width: 50%;
  height: 66px;
  border-radius: 5px;
  background: var(--blue10);
  color: var(--colorff);
  font-size: var(--font25);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.join-wrap .btn-wrap a:nth-child(2) {
  background: var(--blue01);
}
/*무료체험신청*/
.free-wrap {
  padding: 22vh 0 20vh;
}
.free-wrap .inner {
  max-width: 1000px;
}
.free-wrap .tit h1 {
  font-size: var(--font50);
  font-weight: 700;
  margin-bottom: 16px;
}
.free-wrap .tit p {
  font-size: var(--font30);
  word-break: keep-all;
}
.free-wrap .free-box {
  border-radius: 20px;
  box-shadow: 0px 5px 15px 0px rgba(45, 106, 237, 0.35);
  margin-top: 80px;
  overflow: hidden;
  display: flex;
}
.free-wrap .free-box .left {
  width: 45%;
  background: rgba(147, 177, 243, 0.1);
  padding: 66px 56px;
  box-sizing: border-box;
}
.free-wrap .free-box .left h3 {
  font-size: var(--font30);
  font-weight: 700;
  margin-bottom: 30px;
}
.free-wrap .free-box .left .free-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.free-wrap .free-box .left .free-list > li {
  position: relative;
  padding-left: 20px;
}
.free-wrap .free-box .left .free-list > li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue01);
  position: absolute;
  left: 0;
  top: 7px;
}
.free-wrap .free-box .right {
  width: 55%;
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: 64px 58px 48px 76px;
  box-sizing: border-box;
}
.free-wrap .free-box .right .input-wrap {
  display: flex;
  gap: 16px;
  flex-direction: column;
}
.free-wrap .free-box .right .input-wrap p {
  font-size: var(--font18);
  font-weight: 600;
}
.free-wrap .free-box .right .input-wrap input,
.free-wrap .free-box .right .input-wrap textarea {
  width: 100%;
  height: 40px;
  border: 1px solid var(--gray08);
  border-radius: 10px;
  font-size: var(--font14);
  line-height: 1.4;
  box-sizing: border-box;
  padding: 0 16px;
}
.free-wrap .free-box .right .input-wrap input::placeholder,
.free-wrap .free-box .right .input-wrap textarea::placeholder {
  font-size: var(--font14);
  line-height: 1.4;
  color: var(--gray09);
}
.free-wrap .free-box .right .input-wrap textarea {
  height: 158px;
  padding: 16px;
}
.free-wrap .free-box .right button {
  width: 100%;
  height: 50px;
  border-radius: 10px;
  background: var(--blue01);
  color: var(--colorff);
  font-size: var(--font20);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 9px 0 0;
}
.free-wrap .free-box .right .free-nav {
  display: flex;
  justify-content: center;
  gap: 35px;
}
.free-wrap .free-box .right .free-nav > li > a {
  font-size: 14px;
  text-decoration: underline;
  color: var(--gray10);
}
.free-wrap .copy {
  font-size: 10px;
  color: var(--gray09);
  text-align: center;
  margin-top: 26px;
}
/*신청완료*/
.apply-wrap {
  padding: 22vh 0 20vh;
}
.apply-wrap .tit h1 {
  font-size: var(--font50);
  font-weight: 700;
  margin-bottom: 16px;
}
.apply-wrap .tit p {
  font-size: var(--font30);
}
.apply-wrap .apply-tit {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font25);
  font-weight: 600;
}
.apply-wrap .apply-tit img {
  width: 33px;
}
.apply-wrap .apply-list {
  padding: 70px 0 90px;
}
.apply-wrap table {
  table-layout: fixed;
  font-size: var(--font20);
  text-align: center;
  margin-top: 46px;
}
.apply-wrap table th {
  padding: 14px 0;
  background: rgba(147, 177, 243, 0.1);
  font-weight: 600;
}
.apply-wrap table td {
  padding: 14px 0;
  border-bottom: 1px solid var(--blue10);
}
.apply-wrap .apply-info .apply-txt {
  margin: 40px 0 90px;
  font-size: var(--font24);
  line-height: 1.5;
}
.apply-wrap .apply-info .apply-txt span {
  font-weight: 700;
  color: var(--blue01);
}
.apply-wrap .apply-info .apply-ul {
  display: flex;
  gap: 80px;
}
.apply-wrap .apply-info .apply-ul > li {
  width: 33.333%;
  border-radius: 20px;
  box-shadow: 0px 5px 15px 0px rgba(45, 106, 237, 0.35);
  padding: 60px 24px 46px;
  text-align: center;
}
.apply-wrap .apply-info .apply-ul img {
  width: 97px;
  margin: auto;
}
.apply-wrap .apply-info .apply-ul h5 {
  font-size: var(--font30);
  font-weight: 700;
  margin: 30px 0 20px;
}
.apply-wrap .apply-info .apply-ul p {
  font-size: var(--font18);
  line-height: 1.5;
  color: var(--black02);
  height: 90px;
}
.apply-wrap .apply-info .apply-ul a {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 20px 28px;
  border-radius: 100px;
  background: var(--blue01);
  color: var(--colorff);
  font-size: var(--font22);
  font-weight: 700;
  margin-top: 34px;
}
.apply-wrap .apply-info .apply-ul a img {
  width: 22px;
}
/*구독결제*/
.subscribe-wrap {
  padding: 22vh 0 20vh;
}
.subscribe-wrap .tit {
  text-align: center;
  margin-bottom: 100px;
}
.subscribe-wrap .tit h1 {
  font-size: var(--font50);
  font-weight: 700;
  margin-bottom: 16px;
}
.subscribe-wrap .tit p {
  font-size: var(--font30);
}
.join-wrap2 .form-wrap .input-wrap {
  gap: 20px;
}
.join-wrap2 .check-wrap {
  display: flex;
  gap: 30px;
}
.join-wrap2 .check-wrap .check-box {
  width: 116px;
  height: 52px;
  font-size: var(--font20);
  font-weight: 500;
  position: relative;
}
.join-wrap2 .check-wrap .check-box input {
  width: 100%;
  height: 100%;
  border: 2px solid var(--gray08);
  border-radius: 5px;
}
.join-wrap2 .check-wrap .check-box label {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.join-wrap2 .check-wrap .check-box input:checked {
  background: var(--blue01);
  border: 2px solid var(--blue01);
}
.join-wrap2 .check-wrap .check-box input:checked + label {
  color: var(--colorff);
}
.join-wrap2 .input-wrap .select-box select {
  width: 118px;
  height: 52px;
  border: 2px solid var(--gray08);
  padding: 0 30px;
  border-radius: 5px;
  box-sizing: border-box;
  background: url("../img/icon/ic-down2.svg") calc(100% - 16px) center no-repeat;
  background-size: 12px;
  font-size: var(--font20);
  font-weight: 500;
}
.join-wrap2 .input-wrap .select-box2 select {
  width: 215px;
}
.join-wrap2 .benefit-wrap {
  margin-top: 78px;
  padding-top: 78px;
  border-top: 1px solid #ebf1ff;
}
.join-wrap2 .benefit-wrap .benefit-box {
  width: 518px;
  border-radius: 20px;
  box-shadow: 0px 5px 15px 0px rgba(45, 106, 237, 0.35);
  padding: 56px 58px 80px;
  box-sizing: border-box;
  margin: auto;
}
.join-wrap2 .benefit-wrap .benefit-box h3 {
  font-size: var(--font24);
  font-weight: 700;
}
.join-wrap2 .benefit-wrap .benefit-box p {
  font-size: var(--font18);
  margin: 16px 0 32px;
}
.join-wrap2 .benefit-wrap .benefit-box .check-box {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 34px;
  margin-bottom: 78px;
}
.join-wrap2 .benefit-wrap .benefit-box .check-box input {
  width: 19px;
  height: 19px;
  border-radius: 5px;
  border: 2px solid var(--gray07);
  background: var(--gray06);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.join-wrap2 .benefit-wrap .benefit-box .check-box input:checked::after {
  content: "✔";
  font-size: 12px;
  width: 19px;
  height: 19px;
  text-align: center;
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--black05);
  font-family: "pretendard";
}
.join-wrap2 .benefit-wrap .benefit-box dl {
  display: flex;
  justify-content: space-between;
  margin-bottom: 28px;
}
.join-wrap2 .benefit-wrap .benefit-box dt {
  font-size: var(--font20);
}
.join-wrap2 .benefit-wrap .benefit-box dd {
  font-size: var(--font25);
  font-weight: 500;
  color: var(--black05);
}
.join-wrap2 .benefit-wrap .benefit-box dd span {
  color: var(--blue01);
  font-size: var(--font30);
  font-weight: 700;
}
.join-wrap2 .benefit-wrap .benefit-box dl.line {
  margin-bottom: 0;
  margin-top: 49px;
  padding-top: 50px;
  border-top: 2px solid var(--blue01);
}
.join-wrap2 .confirm-list {
  margin-top: 72px;
}
.join-wrap2 .confirm-list h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font25);
  font-weight: 600;
  margin-bottom: 28px;
}
.join-wrap2 .confirm-list h4 img {
  width: 32px;
}
.join-wrap2 .confirm-list .confirm-ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.join-wrap2 .confirm-list .confirm-ul > li {
  padding-left: 16px;
  font-size: var(--font14);
  color: var(--black05);
  position: relative;
}
.join-wrap2 .confirm-list .confirm-ul > li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  position: absolute;
  top: 7px;
  left: 0;
  background: var(--black05);
}
.join-wrap3 .form-tit {
  background: var(--gray08);
  font-size: var(--font20);
  font-weight: 600;
  padding: 12px 24px;
}
.join-wrap3 .input-wrap p {
  display: flex;
  align-items: center;
}
.join-wrap3 .input-wrap p span {
  font-size: 16px;
  font-weight: 600;
  color: var(--blue01);
  margin-left: 4px;
}
.join-wrap4 .join-end {
  margin-bottom: 50px;
}
.join-table {
  margin-bottom: 66px;
}
.join-table .pdf-btn {
  display: flex;
  justify-content: end;
  margin-bottom: 16px;
}
.join-table .pdf-btn a {
  font-size: var(--font14);
  text-decoration: underline;
  display: inline-block;
}
.join-table .table-tit {
  background: var(--gray06);
  font-size: var(--font18);
  font-weight: 700;
  padding: 6px 24px;
  margin-bottom: 18px;
}
.join-table .table-wrap {
  display: flex;
  flex-wrap: wrap;
  border-top: 2px solid var(--color00);
}
.join-table .table-wrap dl {
  display: flex;
  height: 42px;
  border-bottom: 1px solid var(--color00);
  width: 100%;
}
.join-table .table-wrap dl dt {
  width: 132px;
  font-weight: 500;
  background: var(--gray06);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.join-table .table-wrap dl dd {
  width: calc(100% - 132px);
  font-size: var(--font14);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.join-table .table-wrap dl dd span {
  color: var(--blue01);
}
.join-table .table-wrap dl.wid-50 {
  width: 50%;
}
.join-wrap4 .table-last {
  margin-bottom: 0;
}
.join-wrap4 .pay-btn {
  display: flex;
  justify-content: flex-end;
  margin: 20px 0 86px;
}
.join-wrap4 .pay-btn a {
  display: inline-flex;
  padding: 9px 42px;
  border-radius: 5px;
  background: var(--blue01);
  color: var(--colorff);
  font-size: var(--font14);
  font-weight: 700;
}
.join-wrap4 .pay-info h3 {
  font-size: var(--font20);
  font-weight: 500;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--gray08);
  margin-bottom: 12px;
}
.join-wrap4 .pay-info .info-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.join-wrap4 .pay-info .info-list > li {
  color: var(--black09);
  padding-left: 16px;
  position: relative;
}
.join-wrap4 .pay-info .info-list > li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--black09);
  position: absolute;
  left: 0;
  top: 7px;
}




.modal-header {
  background-color: #FFF;
  border-bottom: none;
}
.modal-header-title {
  color: black;
  margin-top: 10px;
  font-weight: bold;
}