@charset "UTF-8";
@import "./tokens.css";


/* ** MAIN 공통 설정 ** */
/* 메인 - 컨텐츠 - 타이틀 */
.main-tit-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  gap: var(--gap-2) var(--gap-5);
  flex-wrap: wrap;
}

.main-tit-wrap .btn.text {
  gap: var(--gap-2);
  height: 3.2rem;
}

.main-tit-wrap:hover .btn.text .svg-icon {
  transform: rotate(90deg);
}

.main-tit-wrap h2.tit {
  font-size: 1.675rem;
}

@media (max-width: 767px) {
  .main-tit-wrap h2.tit {
    font-size: var(--mobile-fs-heading-large);
  }
}

/* 메인 - 컨텐츠 - 공통 */
.main-sect {
  margin-top: var(--gap-9);
}

.main-sect>.inner,
.main-sect>.wrap {
  display: flex;
  align-items: normal;
  justify-content: flex-start;
  flex-direction: column;
  gap: var(--pc-gap-title-body-large);
}

@media (max-width: 767px) {
  .main-sect>.inner,
  .main-sect>.wrap {
    gap: var(--mobile-gap-title-body-large);
  }
}

/* 메인 - 컨텐츠 - 배경 있는 경우 */
.main-sect.bg {
  padding-top: var(--gap-9);
  padding-bottom: var(--gap-10);
  background-color: #f5f9ff;
}

/* 메인 - 컨텐츠 - 탭 */
.main-sect .tab-area {
  gap: var(--gap-5);
}

.main-sect .tab-area .basic_tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
}

@media (max-width: 900px) {
  .main-sect .tab-area .basic_tab {
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .main-sect .tab-area {
    gap: var(--gap-4);
  }
}

/* 메인 - 컨텐츠 - 컨텐츠 박스 - 한 줄에 두 개의 컨텐츠 */
.main-box-row {
  display: grid;
  grid-template-columns: 1fr 23.5rem;
  gap: var(--gap-7);
}


/* ** cts01 : 검색 / 배너 & 바로가기 ** */
/* -- 레이아웃 -- */
@media (max-width: 1300px) {
  #cts01.main-box-row {
    display: block;
  }
}

/* -- 검색 영역 -- */
/* 검색 타이틀 탭 */
#cts01 .tab-area .main-tit-wrap ul {
  gap: var(--gap-8);
  width: fit-content;
  overflow-x: visible;
}
#cts01 .tab-area .main-tit-wrap ul li {
  transition: all 0.3s;
  position: relative;
}
#cts01 .tab-area .main-tit-wrap ul li:first-child:after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background: var(--gray-30);
  position: absolute;
  top: 50%;
  margin-top: -2.5px;
  right: -1.2rem;
}
#cts01 .tab-area .main-tit-wrap ul li:not(.active) {
  opacity: 0.6;
}
#cts01 .tab-area .main-tit-wrap ul li:hover {
  opacity: 1;
}

/* 반응형 타이틀 탭 */
@media (max-width: 900px) {
  #cts01 .tab-area .main-tit-wrap ul {
    width: 100%;
  }
}
@media (max-width: 767px) {
  #cts01 .tab-area .main-tit-wrap ul {
    gap: var(--gap-7);
  }
  #cts01 .tab-area .main-tit-wrap ul li:first-child:after {
    right: -1rem;
  }
}

/* 인증 종류 선택 영역 */
#cts01 .main-tit-wrap .form-group {
  width: auto;
}
#cts01 .main-tit-wrap .check-area.chk-column {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--gap-5);
}
#cts01 .form-check.large {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  vertical-align: middle;
}

#cts01 .form-check.large input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  flex-shrink: 0;
}

#cts01 .form-check.large label {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  margin: 0;
  padding: 0;
}

#cts01 .form-check.large label span {
  display: inline-block;
  line-height: 1.2;
  color: var(--gray-80);
  transform: translateY(2px);  /* 수직 위치 조정  */
}



/* 인증번호 인풋 */
#cts01 .sch-input .custom-input {
  border-color: var(--primary);
  border-width: 2px;
  font-size: var(--number-10);
  height: var(--size-height-9);
  vertical-align: middle;
}
#cts01 .sch-input .custom-input::placeholder {
  font-weight: 500;
  color: var(--gray-60);
}

/* 검색 섹션 전체 */
.main-sect.search {
  display: flex;
  flex-direction: column;
  gap: var(--gap-7);
}
@media (max-width: 900px) {
  #cts01 .main-tit-wrap .form-group {
    width: 100%;
  }
  #cts01 .main-tit-wrap .check-area.chk-column {
    justify-content: flex-start;
  }
}
@media (max-width: 767px) {
  .main-sect.search {
    margin-top: var(--gap-5);
  }
  #cts01 .sch-input .custom-input {
    height: var(--size-height-9);
    font-size: var(--custom-input--pc-fs-large);
    padding: 0 3.2rem 0 1.6rem;
  }
  #cts01 .btn.icon.xlarge {
    width: var(--size-height-5);
    height: var(--size-height-5);
  }
}
@media (max-width: 520px) {
  #cts01 .main-tit-wrap {
    gap: var(--gap-3);
  }
  #cts01 .main-tit-wrap .check-area.chk-column {
    align-items: flex-start;
    padding-left: var(--gap-2);
    gap: var(--gap-1) var(--gap-3);
  }
  #cts01 .main-tit-wrap .check-area.chk-column .form-check.large {
    width: 48%;
  }
}
@media (max-width: 360px) {
  #cts01 .main-tit-wrap .check-area.chk-column .form-check.large {
    width: calc((100% - 0.5rem) / 2);
  }
}



/* 배너 */
#cts01.main-box-row .main-sect .wrap {
  display: grid;
  grid-template-columns: 540px 1fr;
  gap: var(--gap-7);
}

#cts01 .banner {
  height: 300px;
  border-radius: var(--radius-xlarge1);
  overflow: hidden;
  position: relative;
}

.banner-swiper-in {
  border-radius: var(--radius-xlarge1);
  overflow: hidden;
}

#cts01 .banner .swiper-indicator {
  position: absolute;
  bottom: var(--number-12);
  right: var(--number-12);
}

@media (max-width: 1300px) {
  #cts01.main-box-row .main-sect .wrap {
    grid-template-columns: 1.5fr 1fr;
  }
  /* 배너 전체 구조 */
  #cts01 .banner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
  }

  /* 슬라이드 전체를 꽉 채우게 */
  #cts01 .banner .swiper {
    width: 100% !important;
    height: 100%;
  }

  #cts01 .banner .swiper-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
  }

  /* swiper-slide 고정 폭 제거 + 퍼지게 */
  #cts01 .banner .swiper-slide {
    width: 100% !important;
    height: 100%;
    flex-shrink: 0;
  }

  /* 이미지 퍼지게 */
  #cts01 .banner .swiper-slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }

}



@media (max-width: 930px) {
  #cts01.main-box-row .main-sect .wrap {
    display: flex;
    flex-direction: column;
    gap: var(--gap-7);
  }
}

@media (max-width: 480px) {
  #cts01 .banner {
    display: flex;
    flex-direction: column;
    gap: var(--gap-5);
    overflow: visible;
  }

  #cts01 .banner .swiper-indicator {
    position: relative;
    bottom: unset;
    right: unset;
  }
}

/* 발급문서 진위확인 */
#cts01 .verify {
  border-radius: var(--radius-xlarge1);
  background: #EEF6FF;
  padding: 40px var(--padding-9);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}

#cts01 .verify h3 {
  font-size: 25px;
  line-height: 1.3;
}

#cts01 .verify .searchWr {
  margin-top: var(--number-8);
  position: relative;
  width: 100%;
}

#cts01 .verify .searchWr:before {
  content: '';
  width: 115px;
  height: 100px;
  background: url(../img/main/verify_img.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: -5px;
  top: -90px;
}

#cts01 .verify .searchWr input {
  font-size: var(--custom-input--pc-fs-small);
  padding: 0 var(--padding-6) 0 var(--padding-6);
  font-weight: var(--font-weight-bold);
}

#cts01 .verify .btn.primary {
  width: 100%;
  margin-top: var(--number-5);
}

#cts01 .verify .btn.primary .svg-icon {
  filter: brightness(10);
}

@media (max-width: 1300px) {
  #cts01 .verify {
    padding: var(--padding-1) var(--padding-10) var(--padding-10) var(--padding-10);
  }

  #cts01 .verify h3 {
    font-size: 1.875rem;
  }

  #cts01 .verify .searchWr:before {
    width: 297px;
    height: 208px;
    right: -50px;
    top: -200px;
  }
}

@media (max-width: 1200px) {
  #cts01 .verify .searchWr:before {
    width: 247px;
    height: 150px;
    right: -60px;
    top: -140px;
  }
}

@media (max-width: 1024px) {
  #cts01 .verify .searchWr:before {
    width: 180px;
    height: 120px;
    right: -30px;
    top: -115px;
  }
}

@media (max-width: 930px) {
  #cts01 .verify {
    padding: var(--pc-padding-card-medium);
    padding-top: var(--pc-padding-card-large);
  }
}

@media (max-width: 767px) {
  #cts01 .verify h3 {
    font-size: var(--mobile-fs-heading-large);
  }

  #cts01 .verify .searchWr:before {
    width: 160px;
    height: 100px;
    right: -20px;
    top: -95px;
  }

  #cts01 .verify .searchWr input {
    font-size: var(--custom-input--pc-fs-large);
  }
}

@media (max-width: 480px) {
  #cts01 .verify {
    padding: var(--pc-padding-card-small);
    padding-top: var(--pc-padding-card-large);
  }
}

@media (max-width: 360px) {
  #cts01 .verify .searchWr:before {
    right: -40px;
  }
}

@media (max-width: 300px) {
  #cts01 .verify .searchWr:before {
    width: 130px;
    height: 80px;
    right: -40px;
    top: -75px;
  }
}

/* -- 바로가기 -- */
#cts01 .direct .in {
  display: flex;
  align-items: normal;
  justify-content: space-between;
  flex-direction: column;
  height: 100%;
  padding: var(--pc-padding-card-medium);
  padding-top: var(--pc-padding-card-small);
  border-radius: var(--radius-xlarge2);
  background-color: var(--surface-secondary-subtler);
}

#cts01 .direct .main-tit-wrap .tit {
  font-size: var(--pc-fs-heading-small);
}

#cts01 .direct-links {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  flex-direction: column;
  gap: var(--gap-6);
}

#cts01 .direct-links .swiper-in {
  display: table;
  table-layout: fixed;
  width: 100%;
  padding: var(--padding-4) 0;
}

#cts01 .main-d-links {
  display: flex;
  align-items: normal;
  justify-content: flex-start;
  flex-direction: column;
  gap: var(--gap-4);
}

#cts01 .main-d-links .btn.text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  flex: 1;
  padding: 15px var(--padding-8);
  background-color: var(--white);
  font-weight: var(--font-weight-bold);
  font-size: var(--pc-fs-heading-xsmall);
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}


#cts01 .main-d-links .btn.text:focus {
  z-index: 10; 
  outline: none;
  outline-offset: -2px; 
  border-radius: var(--radius-xlarge1);
}
/* 포커스 */
#cts01 .main-d-links .btn.text:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--primary);
  border-radius: var(--radius-xlarge1);
  position: relative; 
  z-index: 2;
}

#cts01 .main-d-links {
  overflow: visible;
}

#cts01 .main-d-links .btn.text .svg-icon {
  vertical-align: top;
  margin-bottom: 0;
}

#cts01 .main-d-links .btn.text:hover .svg-icon {
  transform: translateX(10px);
}

#cts01 .main-d-links .btn.text .organization {
  display: flex;
  align-items: center;
  gap: var(--gap-4);
  line-height: normal;
}



@media (max-width: 1300px) {
  #cts01 .direct .in {
    gap: var(--gap-6);
  }
}

@media (max-width: 480px) {
  #cts01 .direct .in {
    padding: var(--pc-padding-card-small);
  }

  #cts01 .main-d-links .btn.text {
    padding: 10px var(--padding-6);
  }

  #cts01 .main-d-links .btn.text .organization {
    gap: var(--gap-3);
  }
}

@media (max-width: 360px) {
  #cts01 .main-d-links .btn.text {
    flex-direction: column;
  }

  #cts01 .main-d-links .btn.text .organization {
    flex-direction: column;
  }
}


/* ** cts02 : 자주 신청하는 메뉴 ** */
#cts02.main-sect .menu-list ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap-7);
}

#cts02.main-sect .menu-list ul li {
  width: calc((100% - 7.5rem) / 6);
  border-radius: var(--radius-xlarge1);
  background: var(--white);
  box-sizing: border-box;
  border: 1px solid var(--white);
  transition: all 0.3s;
  height: 100%;       
  
}

#cts02.main-sect .menu-list ul li a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  gap: var(--gap-4);
  padding: var(--padding-7) var(--padding-5);
  
}

#cts02.main-sect .menu-list ul li .ico {
  flex: 0 0 auto; 
  transition: all 0.3s;
}

#cts02.main-sect .menu-list ul li .tit {
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  text-align: center;
  min-height: 2.6em;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

#cts02.main-sect .menu-list ul li:hover .ico {
  transform: translateY(-6px);
}

#cts02.main-sect .menu-list ul li:hover {
  border: 1px solid var(--primary);
}

@media (max-width: 1300px) {
  #cts02.main-sect .menu-list ul li {
    width: calc((100% - 3rem) / 3);
  }
}

@media (max-width: 767px) {
  #cts02.main-sect .menu-list ul {
    gap: var(--gap-5);
  }

  #cts02.main-sect .menu-list ul li {
    width: calc((100% - 1rem) / 2);
  }

  #cts02.main-sect .menu-list ul li .tit {
    min-height: 3.2em;
  }
}

@media (max-width: 480px) {
  #cts02.main-sect .menu-list ul li {
    width: 100%;
  }

}


/* ** cts03 : 공지사항 & 시스템 이용안내 / 부정유통신고 ** */
/* -- 레이아웃 -- */
#cts03 {
  margin-bottom: var(--number-17);
}

@media (max-width: 930px) {
  #cts03.main-box-row {
    display: block;
  }
}

/* -- 공지사항 -- */
#cts03 .main-box-responsive>div {
  flex: 1;
  display: flex;
  align-items: normal;
  justify-content: flex-start;
  flex-direction: column;
}

#cts03 .main-box-responsive .in {
  height: 100%;
  padding: var(--pc-padding-card-small) var(--pc-padding-card-medium);
  border-radius: var(--radius-xlarge2);
  background-color: var(--light-color-surface-secondary-subtler);
}

#cts03 .main-box-responsive .in.outline {
  display: flex;
  flex-direction: column;
  gap: var(--gap-7);
  border: var(--width-variable-regular) solid var(--border-gray);
}

#cts03 .main-sect.notice .main-box-responsive .in.outline {
  min-height: 273.5px;
}

#cts03 .main-sect .news-tbl-list {
  display: flex;
  align-items: normal;
  justify-content: flex-start;
  flex-direction: column;
  gap: var(--gap-2);
}

#cts03 .main-sect .news-tbl-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: row;
  padding: var(--padding-3) 0;
  gap: var(--gap-5);
}

#cts03 .main-sect .news-tbl-list li .tit {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

#cts03 .main-sect .news-tbl-list li .date {
  flex-shrink: 0;
  color: var(--gray-50);
}

@media (max-width: 480px) {
  #cts03 .main-box-responsive .in.outline {
      padding: var(--pc-padding-card-small);
  }
}

/* -- 이용안내 / 부정유통신고 -- */
#cts03 .main-sect.number {
  display: flex;
  flex-direction: column;
  gap: var(--gap-7);
}

#cts03 .main-sect.number>div {
  width: 100%;
  height: 125px;
  border-radius: var(--radius-xlarge1);
  padding: var(--padding-9) 2.6rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#cts03 .main-sect.number>div.call {
  background: url(../img/main/call_before01.svg) #E5F2FF;
  background-position: -40px -95px;
  background-repeat: no-repeat;
}

#cts03 .main-sect.number>div.report {
  height: 193.5px;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  background: url(../img/main/call_before02.svg) #EFF0FF;
  background-position: -90px -40px;
  background-repeat: no-repeat;
}

#cts03 .main-sect.number>div .flexSt {
  width: 100%;
}

#cts03 .main-sect.number>div .txt {
  display: flex;
  flex-direction: column;
  color: #2642A1;
  font-weight: 600;
  font-size: 1.125rem;
  position: relative;
}

#cts03 .main-sect.number>div.report .txt {
  color: #4331A9;
  text-align: right;
}

#cts03 .main-sect.number>div .txt span {
  font-family: 'SB Aggro';
  font-size: 1.75rem;
  font-weight: 700;
  z-index: 2;
}

#cts03 .main-sect.number>div .txt:before {
  content: '';
  width: 100%;
  height: 1rem;
  background: rgba(23, 139, 255, 0.16);
  position: absolute;
  left: 0;
  bottom: 6px;
  z-index: 0;
}

#cts03 .main-sect.number>div.report .txt:before {
  background: rgba(23, 35, 255, 0.14);
}

#cts03 .main-sect.number>div.call .img {
  transform: translateX(-10px);
}

#cts03 .main-sect.number>div.report .img {
  transform: translateY(-10px) translateX(15px);
}

#cts03 .main-sect.number>div.report .numTxt {
  text-align: right;
  color: #7970AC;
  padding-top: 5px;
  font-size: var(--number-7);
}

@media (max-width: 930px) {
  #cts03 .main-sect.number {
    margin-top: var(--gap-7);
    flex-direction: row;
  }

  #cts03 .main-sect.number>div {
    height: 160px !important;
    padding: var(--padding-7) 2.6rem;
  }
}

@media (max-width: 790px) {
  #cts03 .main-sect.number>div {
    padding: var(--padding-7) 2rem;
  }
}

@media (max-width: 767px) {
  #cts03 .main-sect.number>div .flexSt {
    flex-direction: column;
    gap: var(--gap-4);
  }

  #cts03 .main-sect.number>div.call {
    background-position: -40px -50px;
  }

  #cts03 .main-sect.number>div.call .img {
    order: 1;
    transform: unset;
    width: 30%;
  }

  #cts03 .main-sect.number>div.call .txt {
    order: 2;
  }

  #cts03 .main-sect.number>div.report {
    background-position: -130px -40px;
  }

  #cts03 .main-sect.number>div.report .img {
    transform: unset;
    width: 30%;
  }

  #cts03 .main-sect.number>div,
  #cts03 .main-sect.number>div.report {
    height: auto !important;
    align-items: center;
  }

  #cts03 .main-sect.number>div .txt,
  #cts03 .main-sect.number>div.report .txt {
    text-align: center;
  }

  #cts03 .main-sect.number>div.report .numTxt {
    align-items: center;
  }

  #cts03 .main-sect.number>div.report .numTxt span {
    display: block;
    text-align: center;
  }
}

@media (max-width: 580px) {
  #cts03 .main-sect.number {
    flex-direction: column;
  }

  #cts03 .main-sect.number>div.call .img,
  #cts03 .main-sect.number>div.report .img {
    width: 20%;
  }
}