@charset "UTF-8";

/*-------------------------------------------------------------------
    @font-face
-------------------------------------------------------------------*/
@font-face {
	font-family: 'ONE-Mobile-POP';
	font-weight: normal;
    font-style: normal;
	src: local('ONE-Mobile-POP'),
    url(../../../font/ONE-Mobile-POP.woff) format('woff');
}

:root {
    --fm-one : 'ONE-Mobile-POP', 'Pretendard', 'Noto Sans KR', sans-serif;
}
.fm-one {font-family: 'ONE-Mobile-POP', 'Pretendard', 'Noto Sans KR', sans-serif;}


/*-------------------------------------------------------------------
	분류이름: visual
	분류그룹: 메인
-------------------------------------------------------------------*/
#main {position:relative;}
#section01 {display: block; overflow: hidden; position: relative; width: 100%; min-height: 72rem; height: 767px; padding-top: 10rem; background: #005BAC;}
#section01 .inner {display: block; position: relative; max-width: 1480px; margin: 0 auto; padding: 0 2rem; height: 100%;}
#section01 .inner::before {content:""; opacity: 0.07; position: absolute; bottom: -24.34rem; right: -3.724rem; width: 162.6rem; height: 345.8rem; background: url(../../../images/site/kor/main/bg_visual.svg) no-repeat center / contain;}
#section01 .inner .con-box {display: block; position: relative; z-index: 1; padding-top: 10.45vh; color: #FFF;}
#section01 .inner .con-box .s-tit {display: block; margin-bottom: 6.4rem; line-height: 1.2; font-weight: 700; font-size: 2.8rem;}
#section01 .inner .con-box .tit {display: block; margin-bottom: 2.4rem; line-height: 1.2; font-weight: 400; font-size: 9rem; font-family: var(--fm-one);}
#section01 .inner .con-box .tit > em {position: relative; font-size: 10.6rem;}
#section01 .inner .con-box .tit > em::before {content:""; position: absolute; bottom: calc(100% + 0.4rem); left: -0.4rem; width: 7.6826rem; height: 3.4623rem; background: url(../../../images/site/kor/main/tit_deco.svg) no-repeat center / contain;}
#section01 .inner .con-box .btn-apply {display: flex; justify-content: space-between; width:100%; max-width:33rem; padding: 1.534rem 3rem; border-radius: 1.2rem; border: 1px solid var(--color-secondary-70); background-color: var(--color-secondary); line-height: 1.2; font-weight: 700; font-size: 2.8rem; color: #fff; gap: 2rem; align-items: center;}
#section01 .inner .con-box .btn-apply::after {content: ""; display: block; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: #fff url(../../../images/site/kor/main/btn_arr.svg) no-repeat center;}
#section01 .inner .con-box .btn-apply.st1 {background:#fff;}
#section01 .inner .con-box .btn-apply.st1::after{background:#E8E8E8 url(../../../images/site/kor/main/btn_arr2.svg) no-repeat center;}
#section01 .inner .con-box .btn-apply.st1 img{vertical-align: middle;}
#section01 .inner .con-box .btn-apply + .btn-apply{margin-top:2rem;}
#section01 .inner .img-box {display: block;}
#section01 .inner .img-box .item {position: absolute;}
#section01 .inner .img-box .item .name-box {display: block; position: absolute; color: #ABD7FF;}
#section01 .inner .img-box .item .name-box .s-tit {display: block; margin-bottom: 1rem; line-height: 1; font-weight: 500; font-size: 1.5rem;}
#section01 .inner .img-box .item .name-box .name {line-height: 1; font-weight: 700; font-size: 2.2rem;}
#section01 .inner .img-box .item > img {display: block; max-width: none;}

/*-------------------------------------------------------------------
    @variation
-------------------------------------------------------------------*/
#section01 .inner .img-box .group-1 {overflow: hidden; position: absolute; bottom: 6rem; right: 14px; width: 820px; height: 506px;}
#section01 .inner .img-box .group-1 .item-1 {bottom: -60px; left: 0;}
#section01 .inner .img-box .group-1 .item-1 .name-box {top: -25; left: 52px;}
#section01 .inner .img-box .group-1 .item-2 {bottom: -4px; right: 292px; z-index: 1;}
#section01 .inner .img-box .group-1 .item-2 .name-box {top: -38px; left: 27px; text-align: center;}
#section01 .inner .img-box .group-1 .item-3 {bottom: -17px; right: 0; z-index: 1;}
#section01 .inner .img-box .group-1 .item-3 .name-box {top: -27px; right: 25px; text-align: right;}
#section01 .inner .img-box .group-1 .item-4 {bottom: -90px; right: 182.61px; z-index: 2;}
#section01 .inner .img-box .group-1 .item-4 .name-box {top: -36px; right: 0; text-align: right;}

#section01 .inner .img-box .group-2 {position: absolute; bottom: 4.2rem; right: 335px; z-index: 2; width: 345px;}
#section01 .inner .img-box .group-2 .item-1 {position: relative;}
#section01 .inner .img-box .group-2 .item-1 .name-box {bottom: 98.5px; right: 47.46px; text-align: right;}
#section01 .inner .img-box .group-2 .item-1 .name-box::after {content: ""; display: block; position: absolute; top: 0; left: 0; z-index: -1; width: 131.181px; height: 68.22px; transform: rotate(10.269deg); background: rgba(0, 0, 0, 0.34); filter: blur(25px);}
#section01 .inner .img-box .group-2 .item-1 .name-box .name {font-weight: 400; font-family: var(--fm-one);}
#section01 .inner .img-box .group-2 .item-2 {bottom: 41.29px; left: -8px; }
#section01 .inner .img-box .group-2 .item-2 .name-box {bottom: 48.71px; left : -44.24px; text-align: left;}
#section01 .inner .img-box .group-2 .item-2 .name-box .name {font-weight: 400; font-family: var(--fm-one);}

/*-------------------------------------------------------------------
    @interaction
-------------------------------------------------------------------*/
#section01 .inner .con-box .btn-apply {background-image: linear-gradient(270deg,#07A33E,#4eb35e,#07A33E); background-size: 600% 100%; background-position: 100% 50%; transition: background-position .6s, box-shadow .3s ease-in-out;}
#section01 .inner .con-box .btn-apply:focus,
#section01 .inner .con-box .btn-apply:hover {background-position: 0% 50%; box-shadow: 0 0 20px 0 rgba(3, 66, 25, 0.3);}
#section01 .inner .con-box .btn-apply::after {transition: transform .3s ease-in-out;}
#section01 .inner .con-box .btn-apply:focus::after,
#section01 .inner .con-box .btn-apply:hover::after {transform: translateX(15%);}

#section01.finded .inner .con-box .s-tit {opacity: 0; animation: ani-opacity 0.3s 0.5s forwards;}
#section01.finded .inner .con-box .tit {animation: visual-title 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;}
#section01.finded .inner .con-box .btn-apply {opacity: 0; animation: ani-opacity 0.3s 0.5s forwards;}

#section01.finded .inner .img-box .group-1 .item-1 {animation: visual1-1 0.6s ease-in-out;}
#section01.finded .inner .img-box .group-1 .item-2 {animation: visual1-3 0.6s ease-in-out;}
#section01.finded .inner .img-box .group-1 .item-3 {animation: visual1-3 0.6s ease-in-out;}
#section01.finded .inner .img-box .group-1 .item-4 {animation: visual1-3 0.6s ease-in-out;}
#section01.finded .inner .img-box .group-2 {animation: visual2 0.6s ease-in-out;}

/* visual 타이틀 */
@keyframes visual-title {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

@keyframes ani-opacity {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes bg-pan-left {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* visual 이미지 */
@keyframes visual1-1 {
    0% {opacity: 0.6; transform: translate(10%, 10%);}
    100% {opacity: 1; transform: translate(0, 0);}
}
@keyframes visual1-2 {
    0% {opacity: 0.6; transform: translate(-50%, 10%);}
    100% {opacity: 1; transform: translate(-50%, 0);}
}
@keyframes visual1-3 {
    0% {opacity: 0.6; transform: translate(-10%, 10%);}
    100% {opacity: 1; transform: translate(0, 0);}
}
@keyframes visual2 {
    0% {opacity: 0.6; transform: translateX(10%);}
    100% {opacity: 1; transform: translateX(0);}
}

/*-------------------------------------------------------------------
    @media
-------------------------------------------------------------------*/
@media screen and (max-width: 1480px) {
    #section01 .inner .con-box .tit {font-size: 6.5rem;}
    #section01 .inner .con-box .tit > em {font-size: 8.1rem;}

    /* 이미지 위치 */
    #section01 .inner .img-box .group-1 {right: 10px; width: 653.92px; height: 390.44px;}
    #section01 .inner .img-box .group-1 .item-1 img {max-width: 281.84px;}
    #section01 .inner .img-box .group-1 .item-1 .name-box {top: 53px; left: 25px;}
    #section01 .inner .img-box .group-1 .item-2 {right: 240px;}
    #section01 .inner .img-box .group-1 .item-2 img {max-width: 278.88px;}
    #section01 .inner .img-box .group-1 .item-2 .name-box {left: 122px;}
    #section01 .inner .img-box .group-1 .item-3 img {max-width: 224.57px;}
    #section01 .inner .img-box .group-1 .item-3 .name-box {top: -28px; right: 32px;}
    #section01 .inner .img-box .group-1 .item-4 {right: 147.61px;}
    #section01 .inner .img-box .group-1 .item-4 img {max-width: 261.57px;}
    #section01 .inner .img-box .group-1 .item-4 .name-box {top: -17px; right: -2px;}
    #section01 .inner .img-box .item .name-box .s-tit {margin-bottom: 0.5rem;}

    #section01 .inner .img-box .group-2 {bottom: 4.5rem; right: 226px; width: 262.2px;}
    #section01 .inner .img-box .group-2 .item-1 img {max-width: 262.2px;}
    #section01 .inner .img-box .group-2 .item-2 {bottom: 31.3px; left: -4px;}
    #section01 .inner .img-box .group-2 .item-2 img {max-width: 71.44px;}
    #section01 .inner .img-box .group-2 .item-2 .name-box {bottom: 22px; left: -38px;}
}
@media screen and (max-width: 1024px) {
    #section01 {height: 48rem; min-height: 0; padding-top: 8.6rem;}
    #section01 .inner::before {bottom: -20rem; right: 3.7rem; width: 64.9rem; height: 137.9rem;}
    #section01 .inner .con-box {padding-top: 3.6rem;}
    #section01 .inner .con-box .s-tit {margin-bottom: 4.4rem; font-size: 1.8rem;}
    #section01 .inner .con-box .tit {margin-bottom: 1.6rem; font-size: 5.5rem;}
    #section01 .inner .con-box .tit > em {font-size: 6.8rem;}
    #section01 .inner .con-box .btn-apply {max-width:22rem; padding: 1.2rem 2rem; border-radius: 0.8rem; font-size: 1.8rem; gap: 1.2rem;}
    #section01 .inner .con-box .btn-apply::after {width: 3.2rem; height: 3.2rem; background-size: 0.66rem;}
    #section01 .inner .con-box .btn-apply.st1::after {background-size: 0.66rem;}
    #section01 .inner .con-box .btn-apply.st1 img{width:12.6rem;}
    #section01 .inner .img-box .item .name-box .s-tit {position: relative; z-index: 5; margin-bottom: 0; font-size: 1.2rem;}
    #section01 .inner .img-box .item .name-box .name {position: relative; z-index: 5; font-size: 1.4rem; }
    
    /* 이미지 위치 */
    #section01 .inner .img-box .group-1 {overflow: hidden; bottom: 1rem; right: -10px; width: 512px; height: 320.51px;}
    #section01 .inner .img-box .group-1 .item-1 {top: 127.3px;}
    #section01 .inner .img-box .group-1 .item-1 img {max-width: 172.795px;}
    #section01 .inner .img-box .group-1 .item-1 .name-box {top: 33px; left: 0;}
    #section01 .inner .img-box .group-1 .item-2 {bottom: -27px; right: 220px;}
    #section01 .inner .img-box .group-1 .item-2 img {max-width: 200.688px;}
    #section01 .inner .img-box .group-1 .item-2 .name-box {left: 12px; top: -13px; text-align: left;}
    #section01 .inner .img-box .group-1 .item-3 {bottom: -17px; right: 31px;}
    #section01 .inner .img-box .group-1 .item-3 img {max-width: 154.546px}
    #section01 .inner .img-box .group-1 .item-3 .name-box {top: 37px; right: -10px;}
    #section01 .inner .img-box .group-1 .item-4 {top: 89.2px; right: 140.61px;}
    #section01 .inner .img-box .group-1 .item-4 img {max-width: 184.546px;}
    #section01 .inner .img-box .group-1 .item-4 .name-box {top: -14px; right: -5px;}

    #section01 .inner .img-box .group-2 {bottom: -1px; right: 153px; width: 197.741px;}
    #section01 .inner .img-box .group-2 .item-1 img {max-width: 197.741px; position: relative;}
    #section01 .inner .img-box .group-2 .item-1 .name-box {bottom: 52px; right: 27px;}
    #section01 .inner .img-box .group-2 .item-1 .name-box .name {font-size: 1.8rem; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);}
    #section01 .inner .img-box .group-2 .item-1 .name-box .s-tit {text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);}
    #section01 .inner .img-box .group-2 .item-2 {bottom: 24px; left: -3px;}
    #section01 .inner .img-box .group-2 .item-2 img {max-width: 47.443px;}
    #section01 .inner .img-box .group-2 .item-2 .name-box {bottom: 12px; left: -32px;}
    #section01 .inner .img-box .group-2 .item-2 .name-box .name {font-size: 1.8rem;}
}
@media screen and (max-width: 767px) {
    #section01 {height: auto; padding-bottom: 1rem;}
    #section01 .inner .con-box {margin-bottom: 2rem; padding-top: 3rem;}
    #section01 .inner .con-box .s-tit {text-align: center;}
    #section01 .inner .con-box .tit {margin-bottom: 1rem; text-align: center;}
    #section01 .inner .con-box .btn-apply {margin: 0 auto;}
    #section01 .inner .con-box .btn-apply + .btn-apply{margin-top:1rem;}
    #section01 .inner .img-box {margin: 0 -2rem;}
    #section01 .inner .img-box .item .name-box .name {font-size: 1.3rem;}

    /* 이미지 위치 */
    #section01 .inner .img-box .group-1 {overflow: hidden; position: relative; bottom: auto; right: auto; max-width: 406px; width: 100%; height: 246px; margin: 0 auto;}
    #section01 .inner .img-box .group-1 .item-1 {top: 69.8px; left: 9px;}
    #section01 .inner .img-box .group-1 .item-1 img {max-width: 155.746px;}
    #section01 .inner .img-box .group-1 .item-1 .name-box {top: -11px; left: 5px;}
    #section01 .inner .img-box .group-1 .item-2 {top: 41px; right: 142px;}
    #section01 .inner .img-box .group-1 .item-2 img {max-width: 175.288px}
    #section01 .inner .img-box .group-1 .item-2 .name-box {left: 16px; top: -18px;}
    #section01 .inner .img-box .group-1 .item-3 {top: 69.8px; right: 0;}
    #section01 .inner .img-box .group-1 .item-3 img {max-width: 144.424px}
    #section01 .inner .img-box .group-1 .item-3 .name-box {top: -6px; right: 11px;}
    #section01 .inner .img-box .group-1 .item-4 {top: 35px; right: 88px;}
    #section01 .inner .img-box .group-1 .item-4 img {max-width: 165.546px;}
    #section01 .inner .img-box .group-1 .item-4 .name-box {top: -14px; right: 1px;}

    #section01 .inner .img-box .group-2 {bottom: -1rem; right: calc(50% - 84.681px); width: 169.362px;}
    #section01 .inner .img-box .group-2 .item-1 img {max-width: 169.362px;}
    #section01 .inner .img-box .group-2 .item-1 .name-box {right: 18px; bottom: 45px}
    #section01 .inner .img-box .group-2 .item-1 .name-box .name {font-size: 1.5rem;}
    #section01 .inner .img-box .group-2 .item-2 img {max-width: 40.636px;}
    #section01 .inner .img-box .group-2 .item-2 .name-box {bottom: 22px; left: -18px;}
    #section01 .inner .img-box .group-2 .item-2 .name-box .name {font-size: 1.5rem;}

    #section01 .inner .img-box .item .name-box .s-tit {line-height: 0.5;}
}
@media screen and (max-width: 600px) {
    #section01 .inner::before {bottom: -3.9rem; right: -2rem; width: 100%; height: 94.8rem;}
    #section01 .inner .con-box .tit {font-size: 3.6rem;}
    #section01 .inner .con-box .tit > em {font-size: 4.5rem;}
    #section01 .inner .con-box .btn-apply {max-width:18rem; padding: 1rem 1.4rem; border-radius: 0.6rem; font-size: 1.5rem; gap: 0.6rem;}
    #section01 .inner .con-box .btn-apply.st1 img{width:10.6rem;}
    #section01 .inner .con-box .btn-apply::after {width: 2.4rem; height: 2.4rem; background-size: 0.52rem;}
    #section01 .inner .con-box .btn-apply.st1::after{background-size:0.52rem;}
}
@media screen and (max-width: 500px) {
     /* 이미지 위치 */
    #section01 .inner .img-box .group-1 {max-width: 323px;}
    #section01 .inner .img-box .group-1 .item-1 {top: 88.8px; left: 9px;}
    #section01 .inner .img-box .group-1 .item-1 img {max-width: 135.746px;}
    #section01 .inner .img-box .group-1 .item-2 {top: 69px; right: 108px;}
    #section01 .inner .img-box .group-1 .item-2 img {max-width: 147.288px}
    #section01 .inner .img-box .group-1 .item-3 {top: 87.8px; right: 0;}
    #section01 .inner .img-box .group-1 .item-3 img {max-width: 123.424px}
    #section01 .inner .img-box .group-1 .item-4 {top: 68px; right: 72px;}
    #section01 .inner .img-box .group-1 .item-4 img {max-width: 133.546px;}
}




/*-------------------------------------------------------------------
	분류이름: notice
	분류그룹: 메인
-------------------------------------------------------------------*/
#section02 {display: block; position: relative; width: 100%; margin-top: -6rem; height: 12rem;}
#section02 .inner {display: flex; max-width: 1480px; margin: 0 auto; height: 100%; padding: 0 2rem;}
#section02 .inner .banner-area {display: flex; padding: 0 6rem; border-radius: 2rem 0 0 2rem; background: var(--color-primary) url(../../../images/site/kor/main/bg_sc02.svg) no-repeat top left; flex-grow: 1; align-items: center;}
#section02 .inner .banner-area::before {content: ""; display: block; width: 5.7rem; height: 4.7rem; margin-right: 3rem; background: url(../../../images/site/kor/main/bg_sc02_msg.png) no-repeat center / contain; flex-shrink: 0;}
#section02 .inner .banner-area .slide-container {display: block; overflow: hidden; max-width: 56.2rem; height: 3em; font-size: 2rem; flex-grow: 1;}
#section02 .inner .banner-area .slide-container .swiper-slide .item {display: flex; overflow: hidden; height: 100%; color: #fff; align-items: center;}
#section02 .inner .banner-area .slide-container .swiper-slide .item .tit {display: block; overflow: hidden; max-height: 3em; font-weight: 700; font-size: 2rem; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; flex-grow: 1;}
#section02 .inner .banner-area .slide-container .swiper-slide .item .date {display: block; padding-left: 2rem; font-weight: 400; font-size: 1.9rem; white-space: nowrap; flex-shrink: 0;}
#section02 .inner .banner-area .slide-control {display: flex; padding-left: 4rem; flex-shrink: 0; gap: 0.8rem;}
#section02 .inner .banner-area .slide-control .btn-ctrl {display: block; width: 3rem; height: 3rem; border-radius: 50%; background-color: #151515; background-size: 2.4rem; background-position: center;}

#section02 .inner .status-area {display: flex; position: relative;}
/* #section02 .inner .status-area::before {content: ""; position: absolute; top: 1.9rem; right: calc(100% - 1rem); width: 5.2rem; height: 8.3rem; background: url(../../../images/site/kor/main/bg_sc02_nayu.png) no-repeat center / contain;} */
#section02 .inner .status-area .item {display: flex; min-width: 19rem; padding: 0 2.4rem; flex-direction: column; justify-content: center;}
#section02 .inner .status-area .item:last-child {border-radius: 0 2rem 2rem 0;}
#section02 .inner .status-area .item .tit {display: block; margin-bottom: 0.8rem; line-height: 1.2; font-weight: 600; font-size: 2rem; color: #FFF;}
#section02 .inner .status-area .item .num {display: block; line-height: 1.2; font-weight: 600; font-size: 3.6rem; color: #FFF; letter-spacing: -0.02em;}
#section02 .inner .status-area .item .num small {padding-left: 0.2em; font-size: 1.8rem;}

/*-------------------------------------------------------------------
@variation
-------------------------------------------------------------------*/
#section02 .inner .banner-area .slide-control .btn-ctrl.btn-prev {background-image: url(../../../images/site/kor/common/layout.svg#i-arr-up-white);}
#section02 .inner .banner-area .slide-control .btn-ctrl.btn-next {background-image: url(../../../images/site/kor/common/layout.svg#i-arr-down-white);}

#section02 .inner .status-area .item.item-1 {background-color: var(--color-secondary);}
#section02 .inner .status-area .item.item-2 {background-color: var(--color-point);}
   
/*-------------------------------------------------------------------
    @interaction
-------------------------------------------------------------------*/
#section02 .inner .banner-area:hover::before {animation: jello-horizontal .5s;}

#section02 .inner .banner-area .slide-control .btn-ctrl {transition: background-color .3s ease-in-out;}
#section02 .inner .banner-area .slide-control .btn-ctrl:focus-visible,
#section02 .inner .banner-area .slide-control .btn-ctrl:hover {background-color: var(--color-secondary);}

@keyframes jello-horizontal {
  0% {transform: scale3d(1, 1, 1);}
  30% {transform: scale3d(1.15, 0.85, 1);}
  40% {transform: scale3d(0.85, 1.15, 1);}
  50% {transform: scale3d(1.05, 0.95, 1);}
  65% {transform: scale3d(0.95, 1.05, 1);}
  75% {transform: scale3d(1.05, 0.95, 1);}
  100% {transform: scale3d(1, 1, 1);}
}

/*-------------------------------------------------------------------
@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1480px) {
    #section02 .inner .banner-area {padding: 0 5rem; background-size: 8.23rem;}

    #section02 .inner .banner-area .slide-container .swiper-slide .item .tit {font-size: 1.7rem;}
    #section02 .inner .banner-area .slide-container .swiper-slide .item .date {font-size: 1.5rem;}
    #section02 .inner .status-area .item {min-width: 18rem;}
    #section02 .inner .status-area .item .tit {font-size: 1.7rem;}
    #section02 .inner .status-area .item .num {font-size: 3rem;}
    #section02 .inner .status-area .item .num small {font-size: 1.6rem;}
}
@media screen and (max-width: 1024px) {
    #section02 {margin-top: -1rem; height: auto;}
    #section02 .inner {display: block; padding: 0;}
    #section02 .inner .banner-area {height: 7.5rem; padding-right: 2rem; border-radius: 0;}
    #section02 .inner .banner-area::before {width: 4.3rem; height: 3.5rem;}
    #section02 .inner .banner-area .slide-control {margin-left: auto;}
    
    /* #section02 .inner .status-area::before {display: none;} */
    #section02 .inner .status-area .item {width: 50%; min-width: 0; height: 6rem; padding: 0 2rem; flex-direction: row; align-items: center; justify-content: space-between;}
    #section02 .inner .status-area .item:last-child {border-radius: 0;}
    #section02 .inner .status-area .item .tit {margin-bottom: 0;}
    #section02 .inner .status-area .item .num {margin-left: auto;}
}
@media screen and (max-width: 768px) {
    #section02 .inner .banner-area .slide-container {max-width: 44.8rem;}
}
@media screen and (max-width: 600px) {
    #section02 .inner .banner-area {padding-left: 2rem; background-size: 4.6579rem;}
    #section02 .inner .banner-area::before {display: none;}
    #section02 .inner .banner-area .slide-container .swiper-slide .item .date {display: none;}

    #section02 .inner .status-area {display: block;}
    #section02 .inner .status-area .item {width: 100%; height: 5rem;}
    #section02 .inner .status-area .item .tit {font-size: 1.4rem;}
    #section02 .inner .status-area .item .num {font-size: 2.6rem;}
    #section02 .inner .status-area .item .num small {font-size: 1.4rem;}
}



/*-------------------------------------------------------------------
	분류이름: 공통
	분류그룹: section03
-------------------------------------------------------------------*/
#section03 {display: block; padding: 9rem 0 15.3rem;}
#section03 .inner {display: flex; max-width: 1480px; margin: 0 auto; padding: 0 2rem; height: 100%; gap: 8rem;}
#section03 .inner > [class*="area"] .title-box {display: block; margin-bottom: 4.4rem;}
#section03 .inner > [class*="area"] .title-box .tit {display: flex; margin-bottom: 2rem;}
#section03 .inner > [class*="area"] .title-box .tit > a {display: block; position: relative; padding-right: 4.6rem; line-height: 1.2; font-weight: 800; font-size: 3.6rem; color: #151515;}
#section03 .inner > [class*="area"] .title-box .tit > a::after {content:""; display: block; position: absolute; top: calc(50% - 1.5rem); right: 0; width: 3rem; height: 3rem; border-radius: 50%; background: var(--color-primary) url(../../../images/site/kor/common/layout.svg#i-arr-right-white) no-repeat center / 2.4rem;}
#section03 .inner > [class*="area"] .title-box .txt {display: block; font-weight: 500; font-size: 1.8rem; color: #333;}

/*-------------------------------------------------------------------
    @interaction
-------------------------------------------------------------------*/
#section03 .inner > [class*="area"] {opacity: 0;}
#section03.finded .inner > [class*="area"] {animation: slide-right .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
#section03 .inner > [class*="area"] .title-box .tit > a::after {transition: transform .3s, box-shadow .15s; box-shadow: 0 0 0 0.4rem rgba(0, 91, 172, 0);}
#section03 .inner > [class*="area"] .title-box .tit > a:focus-visible::after,
#section03 .inner > [class*="area"] .title-box .tit > a:hover::after {transform: translateX(10%); box-shadow: 0 0 0 0.4rem rgba(0, 91, 172, 0.2);}

@keyframes slide-right {
    0% {opacity: 0; transform: translateX(-3rem);}
    100% {opacity: 1; transform: translateX(0);}
}

/*-------------------------------------------------------------------
    @media
-------------------------------------------------------------------*/
@media screen and (max-width: 1480px) {
    #section03 {padding-bottom: 12rem;}
    #section03 .inner {gap: 2rem;}
    #section03 .inner > [class*="area"] .title-box .txt {font-size: 1.6rem;}
}
@media screen and (max-width: 1024px) {
    #section03 {padding: 6rem 0 8rem;}
    #section03 .inner {display: block;}
    #section03 .inner > [class*="area"] .title-box {margin-bottom: 3rem;}
    #section03 .inner > [class*="area"] .title-box .tit {margin-bottom: 1.5rem;}
    #section03 .inner > [class*="area"] .title-box .tit > a {font-size: 3rem;}
    #section03 .inner > [class*="area"] + [class*="area"] {margin-top: 6rem;}
}
@media screen and (max-width: 600px) {
    
    #section03 .inner > [class*="area"] .title-box .tit > a {font-size: 2.6rem;}
    #section03 .inner > [class*="area"] .title-box .txt {font-size: 1.4rem;}
}

/*-------------------------------------------------------------------
	분류이름: 프로세스 안내
	분류그룹: section03
-------------------------------------------------------------------*/
#section03 .inner .guide-area {display: block; flex-grow: 1;}
#section03 .process-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.2rem 2.8rem;}
#section03 .process-list > li {display: block; position: relative;}
#section03 .process-list > li::after {content:""; position: absolute; top: calc(50% - 1.5rem); right: -2.8rem; width: 2.8rem; height: 3rem; background: url(../../../images/site/kor/main/sc03_process_arr.svg) no-repeat center / contain;}
#section03 .process-list > li:nth-child(3n)::after {display: none;}
#section03 .process-list > li .item {display: flex; overflow: hidden; position: relative; height: 17rem; padding: 0 2rem 2.8rem; border-radius: 2rem; background: #FAFAFA; align-items: flex-end;}
#section03 .process-list > li .item .num {position: absolute; top: 0; left: 0; z-index: 1; min-width: 6.8rem; height: 5.8rem; padding: 0 0.4rem; border-radius: 0 0 2rem 0; background-color: #999; background-repeat: no-repeat; background-position: center; background-size: 3.8rem;}
#section03 .process-list > li .item .tit {display: block; position: relative; width: 100%; margin-top: auto; line-height: 1.2; font-weight: 700; font-size: 2.2rem; text-align: center;  color: #212121;}
#section03 .process-list > li .item .tit::before {content:""; display: block; height: 6.6rem; margin-bottom: 1.6rem; background-repeat: no-repeat; background-position: center;}

/*-------------------------------------------------------------------
    @variation
-------------------------------------------------------------------*/
#section03 .process-list > li .item.item-1 .num {background-image: url(../../../images/site/kor/common/process_num.svg#i-num-1);}
#section03 .process-list > li .item.item-2 .num {background-image: url(../../../images/site/kor/common/process_num.svg#i-num-2);}
#section03 .process-list > li .item.item-3 .num {background-image: url(../../../images/site/kor/common/process_num.svg#i-num-3);}
#section03 .process-list > li .item.item-4 .num {background-image: url(../../../images/site/kor/common/process_num.svg#i-num-4);}
#section03 .process-list > li .item.item-5 .num {background-image: url(../../../images/site/kor/common/process_num.svg#i-num-5);}
#section03 .process-list > li .item.item-6 .num {background-image: url(../../../images/site/kor/common/process_num.svg#i-num-6);}

#section03 .process-list > li .item.item-1 .tit::before {background-image: url(../../../images/site/kor/main/sc03_process_01.png);}
#section03 .process-list > li .item.item-2 .tit::before {background-image: url(../../../images/site/kor/main/sc03_process_02.png);}
#section03 .process-list > li .item.item-3 .tit::before {background-image: url(../../../images/site/kor/main/sc03_process_03.png);}
#section03 .process-list > li .item.item-4 .tit::before {background-image: url(../../../images/site/kor/main/sc03_process_04.png);}
#section03 .process-list > li .item.item-5 .tit::before {background-image: url(../../../images/site/kor/main/sc03_process_05.png);}
#section03 .process-list > li .item.item-6 .tit::before {background-image: url(../../../images/site/kor/main/sc03_process_06.png);}

/*-------------------------------------------------------------------
    @interaction
-------------------------------------------------------------------*/
#section03 .process-list > li .item {transition: background-color 0.3s, box-shadow 0.3s; box-shadow: 0 0 0 0.4rem rgba(0,0,0, 0);}
#section03 .process-list > li .item:focus, 
#section03 .process-list > li .item:hover {background-color: var(--color-primary-5); box-shadow: 2px 2px 10px 0 rgba(0,0,0, 0.2);}

#section03 .process-list > li .item:focus .tit::before,
#section03 .process-list > li .item:hover .tit::before {animation: wobble-hor-bottom 0.8s both;}
#section03 .process-list > li .item .num {transition: background-color 0.3s;}
#section03 .process-list > li .item:focus .num,
#section03 .process-list > li .item:hover .num {background-color: var(--color-primary);}

@keyframes wobble-hor-bottom {
  0%,
  100% {transform: translateX(0%);transform-origin: 50% 50%;}
  15% {transform: translateX(-7.5px) rotate(-6deg);}
  30% {transform: translateX(3.75px) rotate(6deg);}
  45% {transform: translateX(-3.75px) rotate(-3.6deg);}
  60% {transform: translateX(2.75px) rotate(2.4deg);}
  75% {transform: translateX(-1.5px) rotate(-1.2deg);}
}

/*-------------------------------------------------------------------
    @media
-------------------------------------------------------------------*/
@media screen and (max-width: 1480px) {
    #section03 .process-list > li .item .num {min-width: 5.8rem; height: 4.9rem; background-size: 2.85rem;}
}
@media screen and (max-width: 1024px) {
    #section03 .process-list {gap: 3rem 2.8rem;}
    #section03 .process-list > li .item {height: 14rem; padding-bottom: 2.4rem;}
    #section03 .process-list > li .item .tit {font-size: 1.8rem;}
    #section03 .process-list > li .item .tit::before {margin-bottom: 1rem; height: 5.6rem;}
    
    #section03 .process-list > li .item.item-1 .tit::before {background-size: 5rem;}
    #section03 .process-list > li .item.item-2 .tit::before {background-size: 4.7rem;}
    #section03 .process-list > li .item.item-3 .tit::before {background-size: 4rem;}
    #section03 .process-list > li .item.item-4 .tit::before {background-size: 8.7rem;}
    #section03 .process-list > li .item.item-5 .tit::before {background-size: 3.3rem;}
    #section03 .process-list > li .item.item-6 .tit::before {background-size: 4.5rem;}
}
@media screen and (max-width: 600px) {
    #section03 .process-list {grid-template-columns: repeat(2, 1fr); gap: 2rem;}
    #section03 .process-list > li::after {top: calc(50% - 1rem); right: -2rem; width: 2rem; height: 2rem;}
    #section03 .process-list > li:nth-child(3n)::after {display: block;}
    #section03 .process-list > li:nth-child(2n)::after {display: none;}
    #section03 .process-list > li .item {height: 10.4rem; padding-bottom: 1.8rem; border-radius: 1.6rem;}
    #section03 .process-list > li .item .num {min-width: 4.4rem; height: 3.8rem; border-radius: 0 0 1.6rem 0; background-size: 2.375rem;}
    #section03 .process-list > li .item .tit {font-size: 1.5rem;}
    #section03 .process-list > li .item .tit::before {height: 4.1rem;}

    #section03 .process-list > li .item.item-1 .tit::before {background-size: 3.7rem;}
    #section03 .process-list > li .item.item-2 .tit::before {background-size: 3.5rem;}
    #section03 .process-list > li .item.item-3 .tit::before {background-size: 3rem;}
    #section03 .process-list > li .item.item-4 .tit::before {background-size: 6.4rem;}
    #section03 .process-list > li .item.item-5 .tit::before {background-size: 2.4rem;}
    #section03 .process-list > li .item.item-6 .tit::before {background-size: 3.4rem;}
}


/*-------------------------------------------------------------------
	분류이름: 자주 묻는 질문
	분류그룹: section03
-------------------------------------------------------------------*/
#section03 .inner .faq-area {display: block; max-width: 57rem; width: 40%; min-width: 41.4rem;}
#section03 .faq-list {display: block;}
#section03 .faq-list > li {display: block; position: relative; border-radius: 2rem; background-color: #FAFAFA;}
#section03 .faq-list > li + li {margin-top: 0.8rem;}
#section03 .faq-list > li > .btn-acr {display: flex; position: relative; width: 100%; padding: 2.4rem 5.8rem 2.4rem 2rem; background-color: transparent; font-weight: 600; font-size: 1.7rem; color: var(--color-gray-90); text-align: left; align-items: center;}
#section03 .faq-list > li > .btn-acr::before {content: ""; display: block; width: 3rem; height: 3rem; margin-right: 2rem; background: url(../../../images/site/kor/common/i_q.svg) no-repeat center / contain; flex-shrink: 0;}
#section03 .faq-list > li > .list {margin-left: var(--r-16);}
#section03 .faq-list > li > .acr-con {display: none; position: relative; padding: 0 2rem 3.2rem 7rem; font-weight: 500; font-size: 1.7rem;}
#section03 .faq-list > li > .acr-con::before {content: ""; display: block; position: absolute; top: 0; left: 2rem; width: 3rem; height: 3rem; margin-right: 2rem; background: url(../../../images/site/kor/common/i_a.svg) no-repeat center / contain;}

/* fold */
#section03 .faq-list > li > .btn-acr.fold::after {content:""; position: absolute; top: calc(50% - 1.5rem); right: 2rem; width: 3rem; height: 3rem; border-radius: 50%; background: #AAAAAA url(../../../images/site/kor/common/layout.svg#i-arr-down-white) no-repeat center / 2.4rem;}

/*------------------------------------------------------------------- 
	@interaction
-------------------------------------------------------------------*/
#section03 .faq-list > li > .btn-acr {transition: padding 0.3s, color 0.3s;}
#section03 .faq-list > li > .btn-acr:focus-visible {outline: 2px solid var(--color-primary); outline-offset: -0.4em;}

#section03 .faq-list > li > .btn-acr:focus-visible,
#section03 .faq-list > li > .btn-acr:hover,
#section03 .faq-list > li > .btn-acr.active {color: var(--color-primary);}
#section03 .faq-list > li > .btn-acr.active {padding-top: 3.2rem;}

#section03 .faq-list > li > .btn-acr::after {transition: background 0.3s;}
#section03 .faq-list > li > .btn-acr:focus-visible::after,
#section03 .faq-list > li > .btn-acr:hover::after,
#section03 .faq-list > li > .btn-acr.active::after {background-color: var(--color-gray-70);}

#section03 .faq-list > li > .btn-acr.active.fold::after {transform: rotate(180deg);}

/*-------------------------------------------------------------------
    @media
-------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
    #section03 .inner .faq-area {max-width: 100%; width: auto; min-width: 0;}
    #section03 .faq-list > li > .btn-acr.active {padding-top: 2rem;}
    #section03 .faq-list > li > .acr-con {padding-bottom: 2rem;}
}
@media screen and (max-width: 600px) {
    #section03 .faq-list > li > .btn-acr {font-size: 1.6rem;}
    #section03 .faq-list > li > .btn-acr::before {width: 2.4rem; height: 2.4rem; margin-right: 1.6rem;}
    #section03 .faq-list > li > .acr-con {padding-left: 6.2rem; font-size: 1.4rem;}
    #section03 .faq-list > li > .acr-con::before {width: 2.4rem; height: 2.4rem; margin-right: 1.6rem;}
}



/*-------------------------------------------------------------------
    #main_pop
-------------------------------------------------------------------*/
#main_pop{
    opacity: 0; visibility: hidden; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2rem; position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 0 2rem; z-index: 999; background-color: rgba(0,0,0,0.7);
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#main_pop.show{opacity: 1; visibility: visible; }
#main_pop .ins{display: block; position: relative; }
#main_pop .ins >.close{
    display: block; position: absolute; top: 2rem; right: 2rem; width: 2.5rem; height: 2.5rem; background: url(../../../images/site/kor/main/popup_close_white.svg) no-repeat center center / 100% auto; text-indent: -9999px;
    -webkit-transform: rotate(0); transform: rotate(0);
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#main_pop .ins >.close:hover{
    -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
#main_pop .ins .imgs{display: block; max-width: 100%;}
#main_pop .ins .imgs img{display: block; }
#main_pop .ins .bot{display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.8rem; margin-top: 2rem;}
#main_pop .ins .bot .close{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0.6rem; padding: 0.9rem 1.4rem; color: #333; font-size: 1.8rem; color: #333; font-weight: 600; background-color: #FFF; border-radius: 1rem;}
#main_pop .ins .bot .close:before{
    content: ""; display: block; width: 2rem; height: 2rem; background: url(../../../images/site/kor/main/popup_close.svg) no-repeat center center / 100% auto;
    -webkit-transform: rotate(0); transform: rotate(0);
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#main_pop .ins .bot .close:hover:before{
    -webkit-transform: rotate(180deg); transform: rotate(180deg);
}

@media screen and (max-width: 1024px){
    #main_pop .ins .bot{margin-top: 1.6rem; gap: 0.6rem;}
    #main_pop .ins .bot .close{gap: 0.5rem; padding: 0.8rem 1.3rem; font-size: 1.6rem; border-radius: 0.9rem;}
}
@media screen and (max-width: 640px){
    #main_pop .ins .bot{margin-top: 1.4rem; gap: 0.5rem;}
    #main_pop .ins .bot .close{gap: 0.4rem; padding: 0.7rem 1.2rem; font-size: 1.5rem; border-radius: 0.8rem;}
    #main_pop .ins .bot .close:before{width: 1.8rem; height: 1.8rem;}
}
@media screen and (max-width: 480px){
    #main_pop .ins .bot{margin-top: 0.8rem;}
    #main_pop .ins .bot .close{gap: 0.2rem; padding: 0.6rem 1rem; font-size: 1.4rem; border-radius: 0.7rem;}
}