@charset "utf-8";

/* 0527 추가 */
.sub-tap-list {display: flex; width: 100%;}
.sub-tap-wrap .sub-tap { flex: 1;}
.text-title {color: #202020; font-size: 35px; font-weight: 700; margin-bottom: 46px; }
.sub-contents {display: flex; flex-direction: column; /*gap: 100px;*/}
.process-wrap {position: relative; width: 100%; display: flex; flex-direction: column; gap: 48px;}
.process { display: flex; flex-wrap: wrap; padding: 0; gap: 56px; flex: 1;}
.process-list { display: flex; gap: 56px;}
.process-list:nth-child(2) {flex-direction: row-reverse;}
.process-list:nth-child(2) .process { flex-direction: row-reverse;}
.step {flex: 1; display: flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid #c3c3c3; background: #fff; padding: 34px 0 23px; position: relative; margin-top: 34px; transition: 0.3s all ease;}
.step.is-highlight {border: 1px solid #0e4ba7; box-shadow: 0 4px 4px 0 rgba(154, 154, 154, 0.25);}
.step.is-highlight .step-num {background: #0e4ba7;}
.step.is-highlight .step-name {color: #0e4ba7; font-weight: 700;}
.step::after { content: ""; position: absolute; background: url('../images/sub/icon_step_arrow.svg') no-repeat 50% 50%; width: 21px; height: 21px;}
.process-list:nth-child(1) .step::after {right: -40px;}
.process-list:nth-child(1) .is-second .step:nth-child(2)::after {transform: rotate(90deg); right: auto; bottom: -36px;}
.process-list:nth-child(2) .step::after {left: -40px; transform: rotate(180deg);}
.process-list:nth-child(2) .is-fourth .step:nth-child(2)::after {display: none;}
.step-num { border-radius: 500px; background: #77a0dd; color: #fff; text-align: center; font-size: 21px; font-weight: 800; padding: 12px 24px; position: absolute; top: -34px; left: 50%; transform: translateX(-50%); transition: 0.3s all ease; white-space: nowrap;}
.step-name {color: #3a3a3a; text-align: center; font-size: 24px; font-weight: 600; line-height: 28px; /* 116.667% */ width: 100%;}
.table { margin-bottom: 0;}
.table-scroll { min-width: 1000px;}
.table-wrap {overflow: auto; border-top: 2px solid #707070;}
.table-wrap th:not(:first-child),
.table-wrap td:not(:first-child) { border-left: 1px solid #dedede;}
.table-wrap th { background: #f5f8ff; padding: 22px; color: #3d3d3d; text-align: center; font-size: 24px; font-weight: 700; border-bottom: 1px solid #dedede;}
.table-wrap td { padding: 22px; color: #3b3b3b; font-size: 21px; font-weight: 500; text-align: center; border-bottom: 1px solid #dedede;}
.table-wrap td.left {text-align: left;}
.table-scroll-wrap { position: relative;}
.touch-help {background: url('../images/sub/table-scroll.png') no-repeat center center / contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; opacity: 1; transition: opacity 0.6s ease; z-index: 5;}
.info {font-size: 20px; font-weight: 600; line-height: 44px; /* 220% */ padding-left: 40px; position: relative;}
.info a {text-decoration: underline;}
.info::before { content: ""; display: inline-block; width: 21px; height: 21px; background: #1c60c5; position: absolute; left: 8px; top: 12px;}
.info.red {color: #d21a48;}
.info.red::before {background: url('../images/sub/icon_info_red.svg') 50% 50% no-repeat; background-size: contain;}
.info.orange {color: #f95757;}
.info.orange::before { background: url('../images/sub/icon_info_orange.svg') 50% 50% no-repeat; background-size: contain;}
.info.right-blue { color: #4265a5;}
.info.right-blue::before { background: url('../images/sub/icon_info_right_blue.svg') 50% 50% no-repeat; background-size: contain;}
.info.blue { color: #093466;}
.info.blue::before { background: url('../images/sub/icon_info_blue.svg') 50% 50% no-repeat; background-size: contain;}
.info.gray {color: #505050;}
.info.gray::before { background: url('../images/sub/icon_info_gray.svg') 50% 50% no-repeat; background-size: contain;}
.info.pink {color: #d7087a;}
.info.pink::before { width: 30px; height: 30px; background: url('../images/sub/icon_info_pink.svg') 50% 50% no-repeat; background-size: contain; left: 4px; top: 8px;}
.text-subtitle { color: #0c45ac; font-size: 24px; font-weight: 700; margin-bottom: 24px; }
.text-list {padding-left: 44px;}
.text-list li {position: relative; font-size: 20px; font-weight: 500; line-height: 37px; /* 176.19% */}
.text-list li strong {font-weight: 600;}
.text-list-line > li::before {content: "";display: inline-block; width: 10px; height: 3px; background: #3b3b3b; position: absolute; top: 18px; left: -28px;}
.text-list > li > ul {padding-left: 16px; padding-top: 12px;}
.text-list-dot > li::before { content: ""; display: inline-block; width: 7px; height: 7px; background: #636363; border-radius: 7px; position: absolute; top: 15px; left: -18px;}
.link-wrap {display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px;}
.list-link {border-radius: 100px; border: 1px solid #1c59a4; background: #fff; color: #1c59a4; font-size: 21px; font-weight: 700; padding: 15px 30px; border-radius: 100px; min-width: 306px; gap: 24px; display: flex; align-items: center; justify-content: space-between; }
.list-link.link:after {content: ""; display: block; width: 18px; height: 18px; background: url('../images/sub/icon_link.svg') no-repeat 50% 50%; background-size: contain;}
.list-link.download:after {content: ""; display: block; width: 22px; height: 22px; background: url('../images/sub/icon_link_download.svg') no-repeat 50% 50%; background-size: contain;}
.list-link:hover {background: #1d67c0; color: #fff;box-shadow: 1px 3px 4px 0 rgba(150, 150, 150, 0.32);}
.list-link:hover:after {filter: brightness(0) invert(1);}
.text-list-num-black {counter-reset: num-black;}
.text-list-num-black > li { counter-increment: num-black;}
.text-list-num-black > li::before {content: counter(num-black); display: inline-flex; align-items: center; justify-content: center;width: 30px; height: 30px; background: #3a3a3a; position: absolute; top: 4px; left: -45px; color: #fff; font-size: 16px; font-weight: 600; border-radius: 5px;}
.text-list-num-gray { counter-reset: num-gray;}
.text-list-num-gray > li {counter-increment: num-gray;}
.text-list-num-gray > li::before {content: counter(num-gray); display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; background: #ebebeb; position: absolute; top: 7px; left: -41px; color: #3c3c3c; font-size: 13px; font-weight: 500; border-radius: 100px;}
.text-list > li > ul.text-list-num-gray {padding-left: 34px;}
.info-box {padding: 24px 50px; border-radius: 15px 15px 30px 15px; background: #f8f9ff; display: flex; align-items: center;gap: 36px;} /* 상하 패딩 42→24: 안내 박스 슬림화 (2026-06-26) */
.info-img {width: 105px; height: 105px; border-radius: 200px; background: #fff; display: flex; align-items: center; justify-content: center;}
.info-box img { width: 53px;}
.info-text-wrap { display: flex; flex-direction: column; gap: 8px; flex: 1;}
.info-text { color: #242424; font-size: 20px; font-weight: 500; line-height: 32px; /* 160% */}
.info-text-wrap .info {line-height: 32px;}
.info-text-wrap .info::before {top: 5px;}

.main-btn {padding: 26px 44px; border-radius: 100px; background: #094d9f; box-shadow: 1px 4px 4px 0 rgba(74, 74, 74, 0.25); color: #fff; font-size: 24px; font-weight: 700; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px;}
.main-btn.link-btn::after { content: ""; display: block; width: 21px; height: 21px; background: url('../images/sub/icon_link.svg') no-repeat 50% 50%; background-size: contain;filter: brightness(0) invert(1);}

.favorites { padding: 11px 18px 11px 22px; border-radius: 10px; border: 1px solid #d3d3d3; background: #fff; display: flex; align-items: center; justify-content: space-between;}
.favorites-link-wrap {display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;}
.favorites-name { color: #3b3b3b;font-size: 22px; font-weight: 700; letter-spacing: -0.2px; display: flex; align-items: center; gap: 16px;}
.favorites-name::before {content: ""; display: inline-block; width: 40px; height: 40px; background: url('../images/sub/icon_favorites.svg') no-repeat 50% 50%; background-size: contain;}
.favorites-link-wrap a {padding: 14px 26px; border-radius: 100px; gap: 28px; color: #fff; font-size: 20px; letter-spacing: -0.2px; display: flex; align-items: center;}
.favorites-link {background: #547dca;}
.favorites-link::after { content: ""; display: inline-block; width: 20px; height: 20px; background: url('../images/sub/icon_link.svg') no-repeat 50% 50%; background-size: contain; filter: brightness(0) invert(1);}
.favorites-search {background: #3244a6;}
.favorites-search::after {content: ""; display: inline-block; width: 20px; height: 20px; background: url('../images/sub/icon_search.svg') no-repeat 50% 50%; background-size: contain; filter: brightness(0) invert(1);}
.favorites-download {background: #2a3676;}
.favorites-download::after {content: ""; display: inline-block; width: 20px; height: 20px; background: url('../images/sub/icon_download.svg') no-repeat 50% 50%; background-size: contain; filter: brightness(0) invert(1);}
.print + footer { margin-top: 200px;}


@media all and (max-width: 1200px) {
  .login-bottom-info { flex-direction: column; align-items: flex-start; gap: 24px;}
  .login-btn-wrap > img {display: none; }
}


@media all and (max-width: 1024px) {
  .sub-title-text h2:after { display: none; }
  .sub-title-text { flex-direction: column;}
  .sub-title-circle {left: 60%; width: 100px; }
  .sub-title-bg-wrap {width: calc(100vw); border-radius: 0 0 80px 0;}
  .sub-title-text {padding-top: 80px;}
  .sub-title-text h2 { font-size: 30px; line-height: 45px;}
  .sub-title-text p { font-size: 24px;line-height: 36px;}
  .sub-nav-dropdown {flex: 1;}
  .sub-nav-dropdown-btn { min-width: auto; height: 45px; padding: 0 16px; width: 100%; gap: 12px;}
  .sub-nav-dropdown-btn p { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}
  .sub-nav-dropdown-list { padding: 16px;}
  .sub-nav-dropdown-list a { padding: 0;}
  .sub-nav-dropdown-list a p { font-size: 13px; line-height: 33px;}
  .sub-nav-dropdown-list a img {width: 10px;}
  .sub-nav .home { width: 45px; height: 45px;}
  .sub-nav { margin-top: 36px; margin-right: 0; gap: 8px;}
  .sub-nav .home img { width: 16px;}
  .sub-title { height: 300px; }
  .sub-title { margin-top: 80px;}
  .sub-title-btns {display: none;}
  .login-wrap {grid-template-columns: 1fr; }
  .login-wrap > div { padding: 0; margin: 0 32px;}
  .login-wrap > div.login { border-right: none; border-bottom: 1px solid rgba(0, 0, 0, 0.18); padding-bottom: 40px;}
  .login-wrap > div.signup { padding-top: 40px;}
  .sub-sec-title {font-size: 32px; margin-bottom: 32px; line-height: 48px;}
  .sub-tap-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 65px; padding: 0 28px; background: #1c60c5; color: #fff; font-size: 18px; font-weight: 700; border-radius: 15px; transition: border-radius 0.3s ease; position: relative; z-index: 2; }
  .sub-tap-trigger-text {font-size: 18px; }
  .sub-tap-wrap.is-open .sub-tap-trigger { border-radius: 15px 15px 0 0;}
  .sub-tap-trigger img {transition: transform 0.3s ease; filter: invert(0); width: 13px;}
  .sub-tap-wrap.is-open .sub-tap-trigger img {transform: rotate(180deg);}
  .sub-tap-wrap {position: relative; flex-direction: column; padding: 0; border-radius: 15px; background: transparent; margin-bottom: 62px;}.sub-tap-list {display: none; position: absolute; top: 100%; left: 0; width: 100%;z-index: 1; flex-direction: column; border-radius: 0 0 15px 15px; overflow: hidden; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);}
  .sub-tap-wrap.is-open .sub-tap-list {display: flex;}
  .sub-tap-wrap .sub-tap {display: flex; width: 100%; justify-content: flex-start; align-items: center; padding: 12px 28px 12px 28px; font-size: 17px; font-weight: 500; background: #f9f7f7; color: #2d2d2d; border-radius: 0; position: relative;}
  .sub-tap-wrap .sub-tap::before {content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #929292; margin-right: 12px; flex-shrink: 0;}
  .sub-tap-wrap .sub-tap.is-active {background: #f9f7f7; color: #1c60c5; border-radius: 0; font-weight: 700;}
  .sub-tap-wrap .sub-tap.is-active::before {background: #1c60c5;}
  .sub-tap-wrap .sub-tap:last-child {border-bottom: none;}
  .login-title {font-size: 32px;}
  .login-label {font-size: 14px;}
  .login-label img {height: 16px;}
  .login-input {font-size: 16px; padding: 20px 24px 16px; height: auto;}
  .login-form-item > button {right: 20px; bottom: 28px; }
  .login-remember,
  .login-find-wrap a {font-size: 16px; }
  .btn-login-submit {width: 120px; height: 120px; font-size: 20px; line-height: 24px;}
  .login-sub-title {font-size: 16px; line-height: 21px; margin-bottom: 30px;}
  .process-list,
  .process-list:nth-child(2) {flex-direction: column;}
  /* 2 */
  .process-list:nth-child(1) .step:nth-child(2)::after { transform: rotate(90deg); right: auto; bottom: -36px;}
  .is-second {flex-direction: row-reverse;}
  /* 3 */
  .process-list:nth-child(1) .is-second .step:nth-child(1)::after {right: auto; left: -40px; transform: rotate(180deg);}
  /* 4 */
  .process-list:nth-child(1) .is-second .step:nth-child(2)::after {left: auto;}
  .process-list:nth-child(2) .process.is-third {flex-direction: row;}
  /* 5*/
  .process-list:nth-child(2) .is-third .step:nth-child(1)::after {left: auto; transform: rotate(0deg); right: -40px;}
  /* 6*/
  .process-list:nth-child(2) .is-third .step:nth-child(2)::after {transform: rotate(90deg); left: auto; bottom: -36px;}
  .favorites { flex-direction: column; gap: 15px;}
}


@media all and (max-width: 767px) {
  
  .sub-contents {gap: 40px;}
  .sub-title { margin-bottom: 20px;}
  .sub-sec-title { font-size: 22px; line-height: 30px;}
  .process {gap: 48px;}
  .process,
  .process-list:nth-child(2) .process,
  .process-list:nth-child(2) .process.is-third {flex-direction: column;}
  .process-wrap .process-list:nth-child(1) .process .step::after,
  .process-wrap .process-list:nth-child(2) .process .step::after {right: auto; left: auto; bottom: -36px; display: block; transform: rotate(90deg);}
  .process-list:nth-child(2) .is-fourth .step:nth-child(2)::after { display: none;}
  .text-title {font-size: 24px; margin-bottom: 20px;}
  .step-name {font-size: 20px;}
  .step-num {font-size: 16px; }
  .table-wrap th {font-size: 20px;}
  .table-wrap td {font-size: 18px;}
  .info-box {flex-direction: column;}
  .main-btn {width: 100%;}
  .info {font-size: 16px; line-height: 29px; padding-left: 38px;}
  .info::before {width: 16px; height: 16px; left: 8px; top: 6px;}
  .info.pink::before { width: 24px; height: 24px; left: 4px; top: 3px;}
  .text-subtitle {font-size: 24px;}
  .text-list {padding-left: 32px;}
  .text-list li {font-size: 18px; line-height: 30px;}
  .text-list-line > li::before {top: 13px;}
  .text-list-dot > li::before {top: 11px;}
  .text-list-num-black > li::before {width: 24px; height: 24px; top: 2px; left: -34px;font-size: 14px;}
  .text-list-num-gray > li::before {width: 20px; height: 20px; top: 6px; left: -30px;}
  .text-list > li > ul.text-list-num-gray { padding-left: 22px;}
  .info-box { padding: 32px;}
  .info-text {font-size: 16px; line-height: 28px; }
  .info-text-wrap .info { line-height: 20px;}
  .favorites-link-wrap a {padding: 10px 18px; gap: 8px; font-size: 16px;}
  .favorites-link-wrap {gap: 8px; justify-content: flex-start;}
  .favorites-link-wrap a::after {transform: scale(0.8); }
  .favorites-name {font-size: 20px;}
  .main-btn {padding: 20px 28px; font-size: 18px;}
  .list-link {padding: 12px 20px; font-size: 16px; min-width: 200px; flex: 1;}
}