@charset "utf-8";

/* main visual */
.main-visual-wrap {display: flex; align-items: center; justify-content: center; background-image: url('/assets/image/main/main_visual_bg.png'); background-repeat: no-repeat; background-position: center; background-size: cover; aspect-ratio: 96 / 25;}
.main-visual-wrap p {font-size: 7.1rem; line-height: 9.1rem; color: #fff; text-align: center; letter-spacing: -1.375px;}
.main-visual-wrap p b {display: inline-block; background: linear-gradient(90deg, #1c3a88, #01aabe); -webkit-background-clip: text; font-weight: 500; animation: kairbScale 3s infinite ease-in-out; -webkit-text-fill-color: transparent; transform-origin: center;}

@keyframes kairbScale {
    0%, 100% {transform: scale(1); filter: drop-shadow(0 0 0px rgba(28, 58, 136, 0)); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 15px rgba(1, 170, 190, 0.4)); }
}

/* main contents */
.main-contents {padding: 80px 0 130px;}

/* section 01 */
.section01-wrap {}
.section01-wrap .title-wrap {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;}
.section01-wrap .title-wrap .left {display: flex; align-items: center;}
.section01-wrap .title-wrap .left .title {font-size: 3rem; color: #111; letter-spacing: -0.75px;}
.section01-wrap .title-wrap .left .category-wrap {margin: 0 0 0 20px; font-size: 0;}
.section01-wrap .title-wrap .left .category-wrap .category {display: inline-block; padding: 10px 25px; border: 1px solid #E3EBFF; border-radius: 30px; vertical-align: middle; font-size: 1.7rem; text-align: center;}
.section01-wrap .title-wrap .left .category-wrap .category + .category {margin: 0 0 0 8px;}
.section01-wrap .title-wrap .left .category-wrap .category.type1 {color: #1B3C87;}
.section01-wrap .title-wrap .left .category-wrap .category.type1.on {border-color: #1B3C87; background-color: #1B3C87; color: #fff;}
.section01-wrap .title-wrap .left .category-wrap .category.type2 {color: #01AABE;}
.section01-wrap .title-wrap .left .category-wrap .category.type2.on {border-color: #01AABE; background-color: #01AABE; color: #fff;}
.section01-wrap .title-wrap .right .btn-more {display: inline-flex; gap: 8px; align-items: center; font-size: 1.3rem; color: #9CA3AF;}
.section01-wrap .content-wrap {margin: 46px 0 0;}
.section01-wrap .content-wrap > ul {display: flex; gap: 32px;}
.section01-wrap .content-wrap > ul > li {display: inline-flex; gap: 32px; flex-direction: column; width: calc( (100% - 96px) / 4 ); min-height: 410px; padding: 33px; border: 1px solid #F3F4F6; border-radius: 32px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-sizing: border-box;}
.section01-wrap .content-wrap > ul > li .category {display: flex; align-items: center; justify-content: center; width: fit-content; padding: 6px 16px; border-radius: 12px; font-size: 1.3rem; color: #fff;}
.section01-wrap .content-wrap > ul > li .category.type1 {background-color: #1B3C87;}
.section01-wrap .content-wrap > ul > li .category.type2 {background-color: #01AABE;}
.section01-wrap .content-wrap > ul > li .title {margin: 19px 0 0; font-size: 2.3rem; font-weight: 600; line-height: 31.63px; color: #444655;}
.section01-wrap .content-wrap > ul > li .info-wrap {margin: 32px 0 0;}
.section01-wrap .content-wrap > ul > li .info-wrap p {display: flex; gap: 12px; align-items: center; font-size: 1.3rem; font-weight: 200; color: #666;}
.section01-wrap .content-wrap > ul > li .info-wrap p + p {margin: 12px 0 0;}
.section01-wrap .content-wrap > ul > li .info-wrap p i {flex-shrink: 1; color: #1B3C87; opacity: .6;}
.section01-wrap .content-wrap > ul > li .info-wrap p b {font-weight: 600; color: #1B3C87;}
.section01-wrap .content-wrap > ul > li .btn-more {display: flex; align-items: center; justify-content: center; height: 53px; margin: auto 0 0; border: 1px solid #f4f7ff; border-radius: 12px; background-color: #f4f7ff; font-size: 1.4rem; color: #444655; box-sizing: border-box;}
.section01-wrap .content-wrap > ul > li .btn-more i {width: 0; margin: 0; transition-property: all; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); opacity: 0;}

/* section 02 */
.section02-wrap {display: flex; align-items: center; height: 196px; margin: 104px 0 0; padding: 0 48px; border-radius: 40px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10); background: linear-gradient(90deg, var(--color-azure-32, #1B3C87) 0%, var(--color-azure-42, #254DB0) 100%);}
.section02-wrap .section02-inner {display: flex; gap: 56px; align-items: center;}
.section02-wrap .section02-inner .title {font-size: 2.8rem; font-weight: 600; color: #fff; letter-spacing: -0.7px;}
.section02-wrap .section02-inner .text {margin: 8px 0 0; font-size: 1.5rem; color: rgba(255, 255, 255, 0.70);}
.section02-wrap .btn-more {display: flex; align-items: center; justify-content: center; width: 190px; height: 52px; margin: 0 0 0 auto; border-radius: 30px; background: #fff; font-size: 1.6rem; font-weight: 600; color: #1B3C87; box-sizing: border-box;}
.section02-wrap .btn-more i {margin: 0 0 0 16px; transition-property: all; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);}

/* section 03 */
.section03-wrap {display: flex; gap : 64px; margin: 104px 0 0;}
.section03-wrap .news-wrap {width: calc(100% - 652px);}
.section03-wrap .news-wrap .main-tab-wrap {}
.section03-wrap .news-wrap .main-tab-wrap .main-tab-menu {display: flex; gap: 40px; border-bottom: 1px solid #E5E7EB;}
.section03-wrap .news-wrap .main-tab-wrap .main-tab-menu > li > a {display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 0 10px; font-size: 2.2rem; color: #D1D5DB; transition: 0.3s ease; box-sizing: border-box;}
.section03-wrap .news-wrap .main-tab-wrap .main-tab-menu > li.on > a {border-bottom: 4px solid #1B3C87; font-weight: 600; color: #1B3C87;}
.section03-wrap .news-wrap .main-tab-con {position: relative;}
.section03-wrap .news-wrap .main-tab-con {margin: 24px 0 0;}
.section03-wrap .news-wrap .main-tab-con ul li {display: flex; gap: 10px; align-items: center; justify-content: space-between; font-size: 1.6rem; font-weight: 200; color: #444655;}
.section03-wrap .news-wrap .main-tab-con ul li + li {margin: 33px 0 0;}
.section03-wrap .news-wrap .main-tab-con .btn-more {display: inline-flex; align-items: center; justify-content: center; position: absolute; top: -72px; right: 0; width: 32px; height: 32px; border: 1px solid #E5E7EB; border-radius: 100%; background-color: #fff; font-size: 1.2rem; box-sizing: border-box;}

.section03-wrap .journal-wrap {display: flex; gap: 26px; align-items: center; justify-content: space-between; flex-shrink: 1; width: 588px; padding: 40px; border-radius: 40px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); background-color: #F9FAFB; box-sizing: border-box;}
.section03-wrap .journal-wrap > img {width: 160px; box-shadow: 0 25px 25px 0 rgba(0, 0, 0, 0.15);     transition-property: all; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transform: rotate(-8deg); aspect-ratio: 50 / 67;}
.section03-wrap .journal-inner {display: flex; gap: 12px; align-items: center; flex-direction: column; width: calc(100% - 200px);}
.section03-wrap .journal-inner .btn-download {display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px; border: 2px solid #F3F4F6; border-radius: 12px; background-color: #fff; font-size: 1.5rem; color: #444655; box-sizing: border-box;}
.section03-wrap .journal-inner .btn-download i {transition-property: all; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); opacity: 0;}
.section03-wrap .journal-inner .btn-search {display: flex; align-items: center; justify-content: center; width: 100%; padding: 15px; border-radius: 12px; background-color: #444655; font-size: 1.5rem; color: #fff; box-sizing: border-box;}

/* quick menu */
.quick-menu-wrap {display: none; width: 130px; padding: 30px 0; border-radius: 40px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); background-color: #fff; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); pointer-events: none; box-sizing: border-box; transform: translateY(30px) scale(0.9);}
.quick-menu-wrap.active {display: inline-block; pointer-events: auto; transform: translateY(0) scale(1);}
.quick-menu-wrap .quick-list {display: flex; gap: 30px; align-items: center; flex-direction: column;}
.quick-menu-wrap a {display: block; text-align: center;}
.quick-menu-wrap a .img-wrap {display: inline-block; padding: 8px; border-radius: 12px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); background-color: #F9FAFB;}
.quick-menu-wrap a .img-wrap img.on {display: none;}
.quick-menu-wrap a p {margin: 7px 0 0; font-size: 10px; font-weight: 600; color: #666;}

.quick-menu-wrap a:hover .img-wrap {background-color: #1B3C87;}
.quick-menu-wrap a:hover .img-wrap img.off {display: none;}
.quick-menu-wrap a:hover .img-wrap img.on {display: inline-block;}
.quick-menu-wrap a:hover p {color: #1B3C87;}

.btn-quick-menu {display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 1; width: 64px; height: 64px; border: 4px solid #fff; border-radius: 50%; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10); background-color: #1b3c87; font-size: 3rem; font-weight: 900; color: #fff; animation: attention-pulse 2s infinite ease-in-out; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);}
.btn-quick-menu.active {background-color: #254db0; animation: none; transform: rotate(225deg) scale(1.1);}

/* 퀵 메뉴 드라마틱 & 상시 애니메이션 */
@keyframes attention-pulse {
    0% { box-shadow: 0 0 0 0 rgba(27, 60, 135, 0.7); transform: scale(1); }
    70% { box-shadow: 0 0 0 15px rgba(27, 60, 135, 0); transform: scale(1.08); }
    100% { box-shadow: 0 0 0 0 rgba(27, 60, 135, 0); transform: scale(1); }
}

/* only pc */
@media screen and (min-width: 1025px) {
    /* section 01 */
    .section01-wrap .title-wrap .left .category-wrap .category.type1:hover {border-color: #1B3C87; background-color: #1B3C87; color: #fff;}
    .section01-wrap .title-wrap .left .category-wrap .category.type2:hover {border-color: #01AABE; background-color: #01AABE; color: #fff;}
    .section01-wrap .title-wrap .right .btn-more:hover {color: #1B3C87;}
    .section01-wrap .content-wrap > ul > li:hover {box-shadow: 0 20px 40px rgba(0, 95, 200, 0.12); transform: translateY(-8px);}
    .section01-wrap .content-wrap > ul > li:hover .title {color: #254DB0;}
    .section01-wrap .content-wrap > ul > li:hover .btn-more {border-color: #254DB0; background-color: #254DB0; color: #fff;}
    .section01-wrap .content-wrap > ul > li:hover .btn-more i {margin: 0 0 0 12px; opacity: 1;}

    /* section 02 */
    .section02-wrap .btn-more:hover {border: 2px solid #fff; background: rgba(255, 255, 255, 0.00); color: #fff;}
    .section02-wrap .btn-more:hover i {transform: translateX(8px); opacity: 1;}

    /* section 03 */
    .section03-wrap .news-wrap .main-tab-con ul li a:hover {font-weight: 500; color: #1B3C87;}
    .section03-wrap .news-wrap .main-tab-con .btn-more:hover {border-color: #1E3A8A; background-color: #1E3A8A; color: #fff;}
    .section03-wrap .journal-wrap > img:hover {transform: rotate(-4deg);}
    .section03-wrap .journal-inner .btn-download:hover {border: 2px solid #1B3C87;}
    .section03-wrap .journal-inner .btn-download:hover i {font-size: 1.6rem; color: #1B3C87; opacity: 1;}
    .section03-wrap .journal-inner .btn-search:hover {box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10); background-color: #1B3C87;}
}

/* mobile */
@media screen and (max-width: 1250px) {
    /* section 01 */
    .section01-wrap .content-wrap > ul > li {width: calc( (100% - 64px) / 3 );}
    .section01-wrap .content-wrap > ul > li:nth-child(4) {display: none;}

    /* section 03 */
    .section03-wrap > div {width: calc( (100% - 64px) / 2 ) !important;}

}

@media screen and (max-width: 1024px) {
    /* main contents */
    .main-contents {padding: 29px 0 32px;}

    /* main visual */
    .main-visual-wrap p {font-size: 3rem; line-height: inherit;}

    /* section 01 */
    .section01-wrap .title-wrap {position: relative;}
    .section01-wrap .title-wrap .left { gap: 20px; align-items: flex-start;flex-direction: column;}
    .section01-wrap .title-wrap .left .title {font-size: 2rem;}
    .section01-wrap .title-wrap .left .category-wrap {margin: 0;}
    .section01-wrap .title-wrap .left .category-wrap .category {padding: 8px 15px; font-size: 1.7rem;}
    .section01-wrap .title-wrap .left .category-wrap .category + .category {margin: 0 0 0 7px;}
    .section01-wrap .title-wrap .right .btn-more {position: absolute; right: 0; bottom: 10px;}
    .section01-wrap .content-wrap {margin: 16px 0 0;}
    .section01-wrap .content-wrap > ul {gap: 20px;}
    .section01-wrap .content-wrap > ul > li {gap: 20px; width: calc( (100% - 20px) / 2 ); min-height: 360px; padding: 30px;}
    .section01-wrap .content-wrap > ul > li:nth-child(3) {display: none;}
    .section01-wrap .content-wrap > ul > li .title {margin: 18px 0 0;}
    .section01-wrap .content-wrap > ul > li .info-wrap {margin: 22px 0 0;}
    .section01-wrap .content-wrap > ul > li .btn-more {height: 40px;}

    /* section 02 */
    .section02-wrap {flex-direction: column; position: relative; width: 100vw; height: 229px; margin: 30px 0 0; padding: 39px 20px 36px; border-radius: 0; box-shadow: none; transform: translateX(-20px); box-sizing: border-box;}
    .section02-wrap img {position: absolute; bottom: 0; left: -60px; z-index: -1; width: 241px;}
    .section02-wrap .section02-inner {position: relative; z-index: 1;}
    .section02-wrap .section02-inner .text-wrap {text-align: center;}
    .section02-wrap .section02-inner .text-wrap .title {font-size: 2.2rem;}
    .section02-wrap .section02-inner .text-wrap .text {font-size: 1.5rem;}
    .section02-wrap .btn-more {margin: 18px 0 0;}
    
    /* quick menu */
    .quick-menu-wrap {display: none;}
    .btn-quick-menu {display: none;}

    /* section 03 */
    .section03-wrap { gap: 35px;flex-wrap: Wrap; margin: 27px 0 0;}
    .section03-wrap > div {width: 100% !important;}
    .section03-wrap .news-wrap .main-tab-wrap .main-tab-menu > li > a {font-size: 2rem;}
    .section03-wrap .news-wrap .main-tab-con ul li {font-size: 1.4rem;}
    .section03-wrap .news-wrap .main-tab-con ul li + li {margin: 29px 0 0;}
    .section03-wrap .news-wrap .main-tab-con .btn-more {top: -68px;}
    .section03-wrap .journal-wrap {padding: 25px;}
    .section03-wrap .journal-wrap > img {display: none;}
    .section03-wrap .journal-inner { gap: 0;width: 100%;}
    .section03-wrap .journal-inner > img {margin: 0 0 25px;}
    .section03-wrap .journal-inner .btn-download + .btn-download {margin: 12px 0 0;}
    .section03-wrap .journal-inner .btn-search {margin: 18px 0 0;}
}

@media screen and (max-width: 768px) {
    /* main visual */
    .main-visual-wrap {aspect-ratio: 36 / 25;}

    /* section 01 */
    .section01-wrap .content-wrap > ul > li:not(:nth-child(1)) {display: none;}
    .section01-wrap .content-wrap > ul > li {width: 100%}
}