@charset "utf-8";

html {scroll-behavior: smooth; font-size: var(--font-size); word-break: keep-all; min-width: var(--min-width); overflow-x: hidden; overflow-y: auto;}
#wrap {width: 100%; font-size: var(--font-size-16);} a {color: var(--Raven);}
body, select, input,textarea, button {color: var(--Raven); font-family:'pretendard', sans-serif; font-size: var(--font-size-16);}
input {font-size: var(--font-size-16);}
input::placeholder {color: var(--Silver);}
.inner {padding: 0 var(--inner-padding); max-width: var(--inner); box-sizing: border-box;width: 100%; margin: 0 auto;}
html::-webkit-scrollbar {width: var(--scroll-bar-width-body);}
html::-webkit-scrollbar-thumb {background: var(--Mist); border-radius: 5px;}
body *::-webkit-scrollbar {width: var(--scroll-bar-width); height: var(--scroll-bar-height); background: var(--Phantom);}
body *::-webkit-scrollbar-thumb {background: var(--Mist); border-radius: 5px;}
*:focus-visible {outline: 2px solid var(--Secondary); border-radius: 3px;}


header {position: fixed; top: 0; left: 0; width: 100%; z-index: 90; box-sizing: border-box; padding-top: var(--padding-24); background: var(--Snow); border-bottom: 1px solid var(--Cloud); display: flex; flex-direction: column; gap: var(--gap-24);}
header .inner {display: flex; justify-content: space-between;}
header h1 {width: clamp(120px, 28vw, 192px); flex: none;}
header .nav-box {width: 100%;}
header .nav-box a {box-sizing: border-box; width: 100%; text-align: center;}
header .nav-box .dep {display: flex; justify-content: space-between;}
header .nav-box .dep > li {position: relative; box-sizing: border-box; transition: .5s ease;}
header .nav-box .dep > li > a {padding-bottom: var(--padding-24); font-size: var(--font-size-20); font-weight: 600; transition: color .5s ease;}
header .nav-box .dep > li > a.active {color: var(--Secondary);}
header .nav-box .dep2 {display: none;}
header .nav-box .dep2 a {font-size: var(--font-size-16); font-weight: 500; transition: color .5s ease;}
header .sitemap-btn {width: clamp(24px, 4vw, 32rem); height: clamp(24px, 4vw, 32rem); flex: none;}
header .sitemap-btn .icon {width: 100%; height: 100%;}
header:not(.open) .sitemap-btn .icon.ico-close {display: none;}
header.open .sitemap-btn .ico-dehaze {display: none;}
header .top-box .sitemap-btn {display: none;}
header .top-box .right {display: flex; gap: var(--gap-16); align-items: center;}
header .top-box .right .name {font-size: var(--font-size-14);}
header .top-box .right .btn.text {font-size: var(--font-size-14); font-weight: 500;}

footer {background: var(--Primary); color: #fff; padding: var(--padding-40) 0;}
footer a {color: #fff;}
footer .inner {display: flex; justify-content: space-between; align-items: center; font-size: var(--font-size-14);}
footer .inner > * {width: 100%;}
footer .inner .left {text-align: left; display: flex; flex-direction: column; gap: var(--gap-12); font-weight: 500;}
footer .inner .left .contact {display: flex; flex-wrap: wrap; gap: var(--gap-8);}
footer .inner .left .contact li {display: flex; gap: var(--gap-8);}
footer .inner .left .contact .tt1 {color: var(--Snow50);}
footer .inner .center {display: flex; flex-direction: column; gap: var(--gap-12); text-align: center; align-items: center;}
footer .inner .center .logo {max-width: clamp(120px, 28vw, 192px);}
footer .inner .center .copy {color: var(--Snow50); font-weight: 500;}
footer .inner .right .sns-box {display: flex; gap: var(--gap-16); justify-content: flex-end;}
footer .inner .right .sns-box > li {--size: clamp(36rem, 3vw, 48rem); width: var(--size); height: var(--size);}
footer .inner .right .sns-box a {width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; z-index: 1;}
footer .inner .right .sns-box a .icon {--size: clamp(20rem, 2vw, 26rem); width: var(--size); height: var(--size); background-color: var(--Primary);}
footer .inner .right .sns-box a .text {position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden;}
footer .inner .right .sns-box a:before, footer .inner .right .sns-box a:after {content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; transition: .5s ease;}
footer .inner .right .sns-box a:before {background: #fff; top: 0; left: 0;}
footer .inner .right .sns-box a:after {opacity: 0; z-index: -1; background: linear-gradient(324deg, var(--Look), var(--Secondary)); top: 3px; left: 3px;}


@media screen and (min-width: 1025px) {
	header .nav-box .dep2 {max-height: calc(100vh - clamp(130rem, 17vw, 180rem)); overflow-y: auto; overflow-x: hidden; z-index: 1;}
	header .nav-box .dep > li {width: 100%; display: flex; flex-direction: column; gap: var(--gap-24); padding: 0 5px;}
	header .nav-box .dep > li:not(:last-child) {border-color: var(--Cloud);}
	header.open .nav-box .dep > li:not(:last-child) {border-right-width: 1px; border-style: solid;}
	header.open .nav-box .dep2 {margin-top: calc(-1 * var(--padding-24)); padding-bottom: var(--padding-24);}
	header.open .nav-box .dep2 a {padding: var(--padding-8) 0; border-radius: var(--border-radius-12);}

	header .nav-box .dep2 a:hover {color: var(--Secondary); background: var(--BG);}

	header.open .nav-box .dep2 {animation: fade_in 1s ease both; display: block;}
	header:not(.open) .nav-box .dep > li.hover .dep2:after {animation: fade_in 1s .3s ease both;}
	header:not(.open) .nav-box .dep > li.hover .dep2 ul {animation: fade_in .5s ease both;}

	footer .inner .left .contact a.tt2:hover {color: var(--Look);}
	footer .inner .right .sns-box li:hover a:before {background: #ffffff30; backdrop-filter: blur(10px); box-shadow: inset 0 0 10px #ffffff40;}
	footer .inner .right .sns-box li:hover a:after {opacity: 1;}
}
@media screen and (max-width: 1024px) {
	header {--height: clamp(70rem, 15vw, 75rem); padding: 0; gap: 0;}
	header .top-box {height: var(--height); align-items: center; gap: var(--gap-8);}
	header .top-box .sitemap-btn {display: block;}
	header .bottom-box .sitemap-btn {display: none;}
	header:not(.open) .nav-box {display: none;}
	header .nav-box {position: fixed; top: calc(var(--height) - -1px); left: 0; width: 100%; height: calc(100% - var(--height)); overflow-y: auto; background: #fff;}
	header .nav-box a {text-align: left; padding: 0 var(--padding-16);}
	header .nav-box .dep {flex-direction: column; padding: var(--padding-16) 0 var(--padding-24);}
	header .nav-box .dep > li {padding: var(--padding-16); display: flex; flex-direction: column; gap: var(--gap-8);}
	header .nav-box .dep > li > a {padding-top: var(--padding-24);}
	header .nav-box .dep2 {background: var(--Input); padding: var(--padding-12); border-radius: var(--border-radius-14);}
	header .nav-box .dep2 a {font-weight: 400; padding-top: var(--padding-8); padding-bottom: var(--padding-8);}
	header .nav-box .dep > li:has(.dep2) > a {display: flex; justify-content: space-between;}
	header .nav-box .dep > li:has(.dep2) > a:after {content: ""; width: var(--icon-large); height: var(--icon-large); display: block; flex: none; background: url(../images/ico_plus.svg) no-repeat center / contain;}
	header .nav-box .dep > li:has(.dep2).open > a:after {background-image: url(../images/ico_minus.svg);}
	header .nav-box .dep > li:has(.dep2).open  .dep2 {animation: clip_path_height 1s ease both;}
}

@media screen and (max-width: 900px) {
	footer .inner {gap: var(--gap-40) var(--gap-12); flex-wrap: wrap;}
	footer .inner > * {text-align: left !important;}
	footer .inner > *:not(.center) {width: auto;}
	footer .inner .center {order: -1; align-items: flex-start;}
	footer .inner .right {margin-left: auto;}
}

@media screen and (max-width: 640px) {
	header .top-box .right .name {display: none;}
}


/* 서브 시작 ======================================================================================== */
.sub-body {padding-top: clamp(30rem, 5vw, 48rem); padding-bottom: clamp(80rem, 6vw, 96rem); display: flex; flex-direction: column; gap: var(--gap-32);}
.sub-body > *.aos-animate {animation: fade_up 1s .05s ease both;}
.sub-body .h4-title {font-size: var(--font-size-18); color: var(--Primary); font-weight: 700;}
.sub-body .aos-animate > .h4-title {animation: flip_up 1s ease both;}

/* flex */
*[class^="flex"] {display: flex;}
*[class^="flex"].column {flex-direction: column;}
*[class^="flex"].wrap {flex-wrap: wrap;}
*[class^="flex"] > .col1 {width: 100%;}
*[class^="flex"] > .col2 {width: calc(100% / 2 - var(--gap) / 2);}
*[class^="flex"] > .col3 {width: calc(100% / 3 - var(--gap) / 3 * 2);}
.flex-16 {--gap: var(--gap-16); gap: var(--gap);}
.flex-24 {--gap: var(--gap-24); gap: var(--gap);}
.flex-32 {--gap: var(--gap-32); gap: var(--gap);}


/* 브레드크럼 */
.bread-crumb-wrap {--size: clamp(48rem, 4vw, 56rem); position: relative;}
.bread-crumb-wrap > ul {display: flex; border-left: 1px solid var(--Cloud);}
.bread-crumb-wrap > ul > li {position: relative; border-right: 1px solid var(--Cloud); box-sizing: border-box;}
.bread-crumb-wrap > ul > li.home {flex: none;}
.bread-crumb-wrap > ul > li.home a {width: var(--size); height: var(--size); display: flex; align-items: center; justify-content: center;}
.bread-crumb-wrap > ul > li.home a .icon {background-color: var(--Primary);}
.bread-crumb-wrap > ul > li:not(.home) {width: 100%; max-width: 220rem;}
.bread-crumb-wrap > ul > li .now {width: 100%; height: var(--size); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--padding-16); box-sizing: border-box; font-size: var(--font-size-16); color: var(--Ash); font-weight: 500; cursor: pointer;}
.bread-crumb-wrap > ul > li:has(.other-list) .now:after {content: ""; width: var(--icon-medium); height: var(--icon-medium); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center center; mask-size: contain; -webkit-mask-image: url(../images/ico_keyboard_arrow_down.svg); mask-image: url(../images/ico_keyboard_arrow_down.svg); background-color: var(--Silver); transition: .5s ease;}
.bread-crumb-wrap > ul > li:last-child .now {color: var(--Primary); font-weight: 700;}
.bread-crumb-wrap > ul > li .other-list {position: absolute; z-index: 1; background: #fff; border: 1px solid var(--Cloud); width: calc(100% + 2px); box-sizing: border-box; border-top: none; left: -1px; top: 100%; max-height: calc(100vh - clamp(130rem, 17vw, 200rem)); overflow-y: auto; overflow-x: hidden; display: none;}
.bread-crumb-wrap > ul > li .other-list li a {padding: var(--padding-12) var(--padding-16); width: 100%; font-size: var(--font-size-14); box-sizing: border-box;}
.bread-crumb-wrap > ul > li .other-list li:not(:last-child) {border-bottom: 1px solid var(--Cloud);}
.bread-crumb-wrap > ul > li:has(.other-list).open .now:after {transform: rotateX(180deg);}
.bread-crumb-wrap > ul > li.open .other-list {display: block; animation: clip_path_height 1s ease both;}
.bread-crumb-wrap.sub-head {z-index: 1; animation: fade_in 1s .1s ease both;}
.bread-crumb-wrap.sub-head:after {content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: var(--100vw); height: 1px; background: var(--Mist);}


/* 페이지 타이틀 */
.sub-page-title {display: flex; flex-direction: column; gap: var(--gap-16);}
.sub-page-title .title {font-size: var(--font-size-28); font-weight: 800; color: var(--Primary); line-height: 1;}
.sub-page-title .title span {animation: text_letter_up 5s .3s ease both;}
.sub-page-title .text {font-size: var(--font-size-14); color: var(--Charcoal); font-weight: 500;}

/* 스텝 */
.step-wrap.style1 {max-width: 920px; width: 100%; margin: 0 auto; padding: var(--padding-8) 0; display: flex; flex-direction: column; gap: var(--gap-12);}
.step-wrap.style1 .list-box {display: flex; gap: clamp(1%, 1vw, 16rem);}
.step-wrap.style1 .list-box > li {position: relative; width: 100%; display: flex; align-items: center; justify-content: center; height: clamp(40rem, 5vw, 64rem); background: #fff; border-radius: var(--border-radius-16); border: 1px solid var(--Silver); font-size: var(--font-size-14); color: var(--Silver); font-weight: 600; text-align: center; padding: 4px; box-sizing: border-box; cursor: pointer; transition: .5s ease;}
.step-wrap.style1 .list-box > li:after {content: ""; position: absolute; width: 6px; height: 8px; background: url(../images/ico_step_now.svg) no-repeat center / contain; top: calc(100% - 2px); opacity: 0; transform: translateY(-3px); transition: .5s ease;}
.step-wrap.style1 .list-box > li.complete {background: var(--BG); color: var(--Primary); border: none;}
.step-wrap.style1 .list-box > li.now {background: var(--Secondary); color: #fff; border: none;}
.step-wrap.style1 .list-box > li.now:after {opacity: 1; transform: none;}
.step-wrap.style1 .line-box {width: 85.7%; margin: 0 auto; height: 8px; position: relative; background: var(--BG); border-radius: 15px;}
.step-wrap.style1 .line-box .line {position: absolute; left: 0; height: 100%; border-radius: 15px; background: var(--Secondary); width: 0%; transition: .5s ease;}
.step-wrap.style1.aos-animate .list-box > li {animation: fade_up 1s ease both;}

/* 폼 */
.form-table {display: flex; flex-wrap: wrap;}
.form-table > li {width: 100%; border-top: 1px solid var(--Mist); box-sizing: border-box;}
.form-table .th, .form-table .td {}
.form-table > li:has(.th+.td) {display: flex;}
.form-table .th {flex: none; display: flex; align-items: center; background: var(--Phantom); color: var(--Ebony); font-size: var(--font-size-14); font-weight: 600; padding: var(--padding-12) var(--padding-16); width: clamp(90rem, 5.5vw, 120rem); line-height: 1.4; box-sizing: border-box; border-right: 1px solid var(--Mist); border-left: 1px solid var(--Mist);}
.form-table .td {padding: var(--padding-12); width: 100%; border-right: 1px solid var(--Mist);}
.form-table .td:has(.input-box + .input-box), .form-table .td:has(.input-box + .btn) {display: flex; gap: var(--gap-12);}
.form-table .td:has(.input-box + .btn) > .btn {height: 100%; padding: 0 var(--padding-12);}
.form-table .td *[class^="font"] {margin-top: 4px;}
.form-table > li.title:first-child {border-top: 1px solid var(--Mist); border-top-left-radius: var(--border-radius-16); border-top-right-radius: var(--border-radius-16); border-left: 1px solid var(--Mist); border-right: 1px solid var(--Mist); padding: var(--padding-8) var(--padding-16); min-height: 48rem; display: flex; gap: var(--gap-16); justify-content: space-between; align-items: center;}
.form-table > li.title:first-child > h5 {font-size: var(--font-size-16); font-weight: 700;}

/* 인풋 */
.input-box.style1 {position: relative; display: block; height: 40rem; border-radius: 8px; border: 1px solid var(--Mist); box-sizing: border-box; width: 100%; overflow: hidden; background: var(--Input); transition: .5s ease;}
.input-box.style1 input {width: 100%; height: 100%; border: none; padding: var(--padding-12); box-sizing: border-box; outline: none; background: transparent;}
.input-box.style1:has(input:focus) {border-color: var(--Secondary50); background: var(--BG);}
.input-box.style1:has(.btn) input {padding-right: 74rem;}
.input-box.style1 .btn {position: absolute; top: 50%; transform: translateY(-50%); right: 6px; border-radius: 4px;}

/* 셀렉트 */
.select-box {height: 40rem;}
.select-box .nice-select {height: 100%; border-radius: 8px; border: 1px solid var(--Mist); box-sizing: border-box; width: 100%; background: var(--Input); font-size: var(--font-size-16); padding: var(--padding-8); align-items: center;}
.select-box .nice-select:after {background-image: url(../images/ico_arrow_drop_down.svg);}
.select-box .nice-select .list {background: var(--Snow); box-shadow: none; border: 1px solid var(--Mist); border-radius: 8px; padding: var(--padding-8) 0;}
.select-box .nice-select .list .option {font-size: var(--font-size-14); line-height: 1.2; padding: var(--padding-8) var(--padding-12); background: transparent;}


/* 파일 업로드  */
.file-upload {padding: var(--padding-12); display: flex; flex-direction: column; gap: var(--gap-8); box-sizing: border-box; border-radius: 8px; border: 1px solid var(--Mist); justify-content: space-between;}
.file-upload-top {display: flex; justify-content: space-between; gap: var(--gap-8); flex-wrap: wrap; align-items: center;}
.file-upload-top .font-12 {text-align: right; margin-left: auto;}
.file-upload-title {display: flex; gap: 6px; align-items: center; font-weight: 500; font-size: var(--font-size-16); color: var(--Ash);}
.file-upload-title .num {flex: none; background: var(--Tertiary); color: #fff; border-radius: 4px; font-size: 11px; width: 22px; height: 20px; display: flex; align-items: center; justify-content: center; font-weight: 600; letter-spacing: 1px;}
.file-upload-bottom {display: flex; justify-content: space-between; gap: var(--gap-8); align-items: center;}
.file-upload-btn.btn {position: relative; flex: none; width: clamp(68rem, 7vw, 76rem); height: clamp(28rem, 3vw, 32rem); font-size: var(--font-size-14); font-weight: 600; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #fff;}
.file-upload-btn input {opacity: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; margin: 0;}
.file-name-box {display: flex; align-items: center; gap: var(--gap-8);}
.file-name-box {font-size: var(--font-size-16); color: var(--Ash); padding-left: 8px;}
.file-name {overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all;}
.file-upload.complete {background: var(--Ghost);}
.file-upload.complete .file-upload-title .num {background: var(--Silver);}
.file-upload.complete .file-upload-top .font-12 {color: var(--Silver);}
.file-upload.complete .file-name {color: var(--Primary); font-weight: 500;}
.file-upload.complete .file-name-box .ico-close2 {background-color: var(--Ash);}
.file-upload.complete .file-upload-btn {border-color: var(--Silver); color: var(--Silver);}
.file-upload.complete .file-upload-btn {pointer-events: none;}


.slide-control {display: flex; gap: var(--gap-8); align-items: center;}
.slide-control .swiper-pagination {position: static; width: auto; font-size: var(--font-size-16); color: #BBB; font-weight: 500;}
.slide-control .swiper-pagination .swiper-pagination-current {font-weight: 700; color: #2F5DF4; width: 1.6em;}
.slide-control .arrow-btn.swiper-button-disabled {opacity: .3;}
.slide-control .play-btn {width: var(--icon-large); height: var(--icon-large); position: relative;}
.slide-control .play-btn .icon {position: absolute; width: 100%; height: 100%; top: 0; left: 0; transition: .5s ease;}
.slide-control .play-btn:not(.stop) .ico-play {opacity: 0;}
.slide-control .play-btn.stop .ico-pause {opacity: 0;}


/* 메인 */
body:has(.main) header {animation: header_move 1.5s ease both;}
@keyframes header_move {0% {top: -150rem;} 100% {top: 0;}}
.main .section01 {padding: 100rem 0;}
.main .section01 .inner {--gap: 5.7%; --right-width: clamp(320px, 40vw, 480px); display: flex; gap: 5.7%;}
.main .section01 .left-wrap {position: relative; width: calc(100% - var(--gap) - var(--right-width)); height: auto;}
.main .section01 .left-wrap .swiper {width: 100%; height: 100%;}
.main .section01 .left-wrap .swiper .swiper-slide {display: flex; background: #fff; position: relative;}
.main .section01 .left-wrap .swiper .text-box {display: flex; flex-direction: column; gap: var(--gap-16);}
.main .section01 .left-wrap .swiper .text-box .h2-title {font-size: var(--font-size-40); color: var(--Primary); font-weight: 800; line-height: 130%;}
.main .section01 .left-wrap .swiper .text-box .h3-text {color: var(--Ash); font-size: var(--font-size-20); font-weight: 500; line-height: 130%;}
.main .section01 .left-wrap .swiper .img-box {position: absolute; right: 0; bottom: 0; max-width: 42%; z-index: -1;}
.main .section01 .left-wrap .slide-control {position: absolute; bottom: 0; left: 0; z-index: 5; animation: fade_in 1s .1s ease both;}
.main .section01 .right-wrap {width: var(--right-width); flex: none;}
.main .section01 .right-wrap .h2-title {font-size: var(--font-size-22); font-weight: 700;}
.main .section01 .right-wrap .login-box a {width: 100%; height: clamp(64rem, 3vw, 80rem); border-radius: var(--border-radius-24); font-size: var(--font-size-20); gap: var(--gap-8); justify-content: center;}
.main .section01 .right-wrap .status-box .flex-box {border-radius: var(--border-radius-24); background: var(--BG); border: 1px solid var(--Primary10);}
.main .section01 .right-wrap .status-box .flex-box > li {width: 100%;}
.main .section01 .right-wrap .status-box .flex-box > li > a {position: relative; width: 100%; height: 80rem; padding: 0 clamp(0rem, 1.2vw, 20rem); box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: 4px;}
.main .section01 .right-wrap .status-box .flex-box > li:not(:last-child) > a:after {content: ""; position: absolute; width: 1px; height: 50%; background: linear-gradient(0deg, transparent, var(--Primary), transparent); right: 0; top: 50%; transform: translateY(-50%); opacity: .3;}
.main .section01 .right-wrap .status-box .flex-box > li > a .primary {font-size: var(--font-size-14); font-weight: 600; white-space: nowrap;}
.main .section01 .right-wrap .status-box .flex-box > li > a .secondary {font-size: var(--font-size-22); font-weight: 800;}
.main .section01 .right-wrap .list > li > a {width: 100%; display: flex; flex-direction: column; gap: var(--gap-8); align-items: center; text-align: center;}
.main .section01 .right-wrap .list > li > a .icon-box {aspect-ratio: 144 / 88; border-radius: var(--border-radius-24); background: var(--Ghost); display: flex; align-items: center; justify-content: center; width: 100%; transition: .5s ease;}
.main .section01 .right-wrap .list > li > a .icon-box img {filter: drop-shadow(0px 4px 4px rgba(0 0 0 / 25%));}
.main .section01 .right-wrap .list > li > a .title {font-size: var(--font-size-16); font-weight: 600;}
.main .section01 .right-wrap .list.aos-animate > li {animation: fade_up 1s ease both;} 
.main .section01 .right-wrap .list.aos-animate > li:nth-child(2) {animation-delay: .15s;}
.main .section01 .right-wrap .list.aos-animate > li:nth-child(3) {animation-delay: .3s;}
.main .section01 .right-wrap .list.aos-animate > li:nth-child(4) {animation-delay: .5s;}
.main .section01 .right-wrap .list.aos-animate > li:nth-child(5) {animation-delay: .75s;}
.main .section01 .right-wrap .list.aos-animate > li:nth-child(6) {animation-delay: .9s;}
.main .section01 .left-wrap .swiper .swiper-slide:not(.swiper-slide-active) {opacity: 0 !important;}
.main .section01 .left-wrap .swiper .swiper-slide-active .text-box > * {animation: fade_left 1.5s .1s ease both;}
.main .section01 .left-wrap .swiper .swiper-slide-active .text-box > *:last-child {animation-delay: .3s;}
.main .section01 .left-wrap .swiper .swiper-slide-active .img-box {animation: fade_scale 1.5s ease both;}
.main .section01 .right-wrap.aos-animate .h2-title {animation: flip_up 1s ease both;}
.main .section01 .right-wrap.aos-animate .h2-title + * {animation: fade_up 1s .2s ease both;}

.main .section02 {position: relative;}
.main .section02:before {content: ""; position: absolute; width: var(--100vw); height: 100%; left: 50%; top: 0; transform: translateX(-50%); background: var(--BG); z-index: -1;}
.main .section02 .list > li {width: 100%; transition: 1s .3s ease}
.main .section02 .list > li > a {--top: 48rem; width: 100%; display: flex; flex-direction: column; gap: var(--gap-16); padding: var(--top) clamp(10px, 1.5vw, 24px); box-sizing: border-box; border-radius: var(--border-radius-24);}
.main .section02 .list > li > a .icon-box {display: flex; justify-content: space-between; align-items: center;}
.main .section02 .list > li > a .icon-box .icon.hover {opacity: 0; width: 32rem; height: 32rem;}
.main .section02 .list > li > a .icon-box .icon {--size: clamp(40rem, calc(38rem + 0.80vw), 48rem); width: var(--size); height: var(--size);}
.main .section02 .list > li > a .text-box {display: flex; flex-direction: column; gap: var(--gap-14);}
.main .section02 .list > li > a .text-box .h2-title {font-size: var(--font-size-24); line-height: 130%;}
.main .section02 .list > li > a .text-box .h3-title {font-size: var(--font-size-14); font-weight: 500; line-height: 150%;}
.main .section02 .list > li > a .text-box .hash {font-size: var(--font-size-14); font-weight: 600; line-height: 130%;}
.main .section02 .list.ver2 > li.active > a {transform: translateY(calc(-1 * var(--top))); color: #fff; background: var(--Secondary);}
.main .section02 .list.ver2 > li.active > a .icon-box .icon {background: #fff; animation: fade_scale 1s ease both;}
.main .section02 .list.ver2 > li.active > a .text-box .h3-title {color: var(--Snow50);}
.main .section02 .list.ver2 > li.active > a .text-box > * {animation: fade_up 1.5s ease both;}
.main .section02 .list.ver2 > li.active > a .text-box > *:nth-child(2) {animation-delay: .15s;}
.main .section02 .list.ver2 > li.active > a .text-box > *:nth-child(3) {animation-delay: .3s;}

.main .section03 {padding: 80rem 0;}
.main .section03 .inner {display: flex; gap: 5.7%;}
.main .section03 .inner > div {width: 100%; display: flex; flex-direction: column; gap: 32rem;}
.main .section03 .title-box {display: flex; justify-content: space-between; align-items: center;}
.main .section03 .h2-title {font-size: var(--font-size-22); font-weight: 700;}
.main .section03 .list li > a {position: relative; width: 100%; font-size: var(--font-size-16); display: flex; align-items: center; gap: var(--gap-12); font-weight: 500;}
.main .section03 .list li > a:before {--size: calc(100% + 16rem); content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: var(--size); height: var(--size); background: var(--BG); left: -8rem; opacity: 0; z-index: -1; border-radius: 8px; transition: .5s ease;}
.main .section03 .list li > a .title {width: 100%;}
.main .section03 .list li > a .title p {overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all;}
.main .section03 .list li > a .title.new {display: flex; align-items: center; gap: 8px;}
.main .section03 .list li > a .title.new:after {content: ""; width: 18rem; height: 18rem; flex: none; display: block; background: url(../images/ico_new.svg) no-repeat center / contain;}
.main .section03 .list li > a .date {flex: none; width: 6em; text-align: right;}
.main .section03 .inner > div.aos-animate .h2-title {animation: flip_up 1s ease both;}
.main .section03 .inner > div.aos-animate .icon {animation: fade_scale 1s .1s ease both;}
.main .section03 .inner > div.aos-animate .list li {animation: fade_up 1s .1s ease both;}
.main .section03 .inner > div.aos-animate .list li:nth-child(2) {animation-delay: .2s;}
.main .section03 .inner > div.aos-animate .list li:nth-child(3) {animation-delay: .3s;}
.main .section03 .inner > div.aos-animate .list li:nth-child(4) {animation-delay: .4s;}
.main .section03 .inner > div.aos-animate .list li:nth-child(5) {animation-delay: .5s;}

@media screen and (min-width: 1201px) {
	header .nav-box .dep > li:hover > a {color: var(--Secondary);}

	.step-wrap.style1 .list-box > li:not(.now):hover {transform: translateY(-10px);}
	.step-wrap.style1 .list-box > li:not(.now):not(.complete):hover {background: var(--Ghost); border-color: transparent;}

	.main .section01 .right-wrap .list:has(li:hover) > li:not(:hover) > a {opacity: .6; filter: grayscale(1);}
	.main .section01 .right-wrap .list > li:hover > a {color: var(--Primary);}
	.main .section01 .right-wrap .list > li:hover > a .icon-box {background: var(--BG); box-shadow: inset 0 -4px 10px var(--Primary10);}

	.main .section02 .list > li:hover > a {transform: translateY(calc(-1 * var(--top))); color: #fff; background: var(--Secondary);}
	.main .section02 .list > li:hover > a .icon-box .icon {background: #fff; animation: fade_scale 1s ease both;}
	.main .section02 .list > li:hover > a .icon-box .icon.hover {opacity: 1; animation-name: fade_right;}
	.main .section02 .list > li:hover > a .text-box .h3-title {color: var(--Snow50);}
	.main .section02 .list > li:hover > a .text-box > * {animation: fade_up 1.5s ease both;}
	.main .section02 .list > li:hover > a .text-box > *:nth-child(2) {animation-delay: .15s;}
	.main .section02 .list > li:hover > a .text-box > *:nth-child(3) {animation-delay: .3s;}	
	.main .section02 .list.aos-animate > li:nth-child(1) {animation: fade_left 1s ease both; animation-delay: .3s;}
	.main .section02 .list.aos-animate > li:nth-child(2) {animation: fade_left 1s ease both; animation-delay: .2s;}
	.main .section02 .list.aos-animate > li:nth-child(3) {animation: fade_left 1s ease both; animation-delay: .1s;}
	.main .section02 .list.aos-animate > li:nth-child(4) {animation: fade_right 1s ease both; animation-delay: .1s;}
	.main .section02 .list.aos-animate > li:nth-child(5) {animation: fade_right 1s ease both; animation-delay: .2s;}
	.main .section02 .list.aos-animate > li:nth-child(6) {animation: fade_right 1s ease both; animation-delay: .3s;}

	.main .section03 .list li:hover > a {color: var(--Secondary);}
	.main .section03 .list li:hover > a .date {color: var(--Secondary50);}
	.main .section03 .list li:hover > a:before {opacity: 1;}
}

@media screen and (max-width: 1200px) {
	.main .section02 {padding: 40rem 0;}
	.main .section02 .list {flex-wrap: wrap; row-gap: var(--gap-40);}
	.main .section02 .list > li {width: calc(100% / 3);}
	.main .section02 .list.aos-animate > li {animation: fade_up 1s ease both;}
	.main .section02 .list.aos-animate > li:nth-child(2) {animation-delay: .1s;}
	.main .section02 .list.aos-animate > li:nth-child(3) {animation-delay: .2s;}
	.main .section02 .list.aos-animate > li:nth-child(4) {animation-delay: .3s;}
	.main .section02 .list.aos-animate > li:nth-child(5) {animation-delay: .4s;}
	.main .section02 .list.aos-animate > li:nth-child(6) {animation-delay: .5s;}

	.main .section02 .list.ver2 {row-gap: 60rem;}
	.main .section02 .list.ver2 > li > a {--top: 24rem;}
}

@media screen and (max-width: 900px) {
	.main .section01 {padding: 48rem 0;}
	.main .section01 .inner {--right-width: 100%; flex-direction: column; gap: 80rem;}
	.main .section01 .left-wrap {height: clamp(240rem, 60vw, 300rem); width: 100%;}
	.main .section01 .right-wrap .status-box .flex-box > li > a {padding: 0 var(--padding-20);}
	.main .section01 .right-wrap .list > li {width: calc(100% / 3 - var(--gap) / 3 * 2);}
	.main .section03 {padding: 48rem 0;}
	.main .section03 .inner {flex-direction: column; gap: 60rem;}
}

@media screen and (min-width: 769px) {
	.form-table > li.col1 {border-right: 1px solid var(--Mist);}
	.form-table > li.col1 .td {border-right: none;}
	.form-table > li.col2 {width: calc(100% / 2);}
	.form-table > li.col2 + li.col2 .th {border-left: none;}
	.form-table > li.col3 {width: calc(100% / 3);}
	.form-table > li.col3 + li.col3 .th {border-left: none;}
	.form-table > li.top-left {border-top: none;}
	.form-table > li.top-left .th {border-top-left-radius: var(--border-radius-16); border-top: 1px solid var(--Mist); border-left: 1px solid var(--Mist); overflow: hidden;}
	.form-table > li.top-left .td {border-top: 1px solid var(--Mist);}
	.form-table > li.top-right .td {border-top-right-radius: var(--border-radius-16); border-right: 1px solid var(--Mist); border-top: 1px solid var(--Mist);}
	.form-table > li.top-right {border-top: none;}
	.form-table > li.top-right .th {border-top: 1px solid var(--Mist);}
	.form-table > li.bottom-left .th {border-left: 1px solid var(--Mist) !important; border-bottom-left-radius: var(--border-radius-16); border-bottom: 1px solid var(--Mist);}
	.form-table > li.bottom-left .td {border-bottom: 1px solid var(--Mist);}
	.form-table > li.bottom-left.col3 + .col3 > * {border-bottom: 1px solid var(--Mist);}
	.form-table > li.bottom-right .td {border-bottom-right-radius: var(--border-radius-16); border-right: 1px solid var(--Mist); border-bottom: 1px solid var(--Mist);}
	.form-table > li.bottom-right .th {border-bottom: 1px solid var(--Mist);}
}
@media screen and (max-width: 768px) {
	*[class^="flex"] > .col2 {width: 100%;}
	*[class^="flex"] > .col3 {width: 100%;}
	.form-table > li:first-child {border-top: none;}
	.form-table > li:first-child .th {border-top-left-radius: var(--border-radius-16); border-top: 1px solid var(--Mist);}
	.form-table > li:first-child .td {border-top-right-radius: var(--border-radius-16); border-top: 1px solid var(--Mist);}
	.form-table > li:last-child .th {border-bottom: 1px solid var(--Mist); border-bottom-left-radius: var(--border-radius-16);}
	.form-table > li:last-child .td {border-bottom: 1px solid var(--Mist); border-bottom-right-radius: var(--border-radius-16);}
	.form-table .td:has(.input-box + .input-box) {flex-direction: column;}

	.main .section02 .list > li {width: calc(100% / 2);}	
}

@media screen and (max-width: 480px) {
	.main .section01 .right-wrap .status-box .flex-box {flex-wrap: wrap; padding: 3rem 0;}
	.main .section01 .right-wrap .status-box .flex-box > li {width: 50%;}
	.main .section01 .right-wrap .status-box .flex-box > li > a {height: 54rem;}
	.main .section01 .right-wrap .status-box .flex-box > li:nth-child(2) > a:after {display: none;}
}