/********** 공통 **********/
:root {
    --filter-white : brightness(0) invert(1);
    --filter-black : invert(1);

    --font-man: "Manrope", sans-serif;
    --font-out: "Outfit", sans-serif;

    --color-navy : #00287C;

}

.ta-l {text-align: left;}
.ta-c {text-align: center;}
.ta-r {text-align: right;}

.flex {display: flex; align-items: center;}
.flex-jb {display: flex; align-items: center; justify-content: space-between;}
.flex-jc {display: flex; align-items: center; justify-content: center;}
.flex-je {display: flex; align-items: center; justify-content: flex-end;}

.mt_10 {margin-top: .62rem;}
.mt_20 {margin-top: 1.25rem;}
.mt_30 {margin-top: 1.875rem;}
.mt_40 {margin-top: 2.5rem;}
.mt_50 {margin-top: 3.125rem;}
.mt_60 {margin-top: 3.75rem;}
.mt_70 {margin-top: 4.375rem;}
.mt_80 {margin-top: 5rem;}
.mt_100 {margin-top: 6.25rem;}
.mt_130 {margin-top: 8.125rem;}

.fs_20 {font-size: 1.25rem;}
.fs_70 {font-size: 4.375rem;}

body {position: relative;}
p, dd {word-break: keep-all !important;}
.pc {display:block !important;}
.pc2 {display:block !important;}
.mob {display:none !important;}
.mob2 {display:none !important;}
.inner {max-width:100rem; margin:0 auto; width: 100%;}


/********** HEADER **********/
.header {height:6.25rem; position:fixed; top:0; z-index:1000; width:100%;}
.header .inner {height:100%; position: relative;}
.header h1 a img {width: 5.7425rem; display: block;}
.header h1 a img.logo_on {display:none;}
.header .gnb_wrap {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.header .gnb {display:flex; gap:9.375rem;}
.header .gnb > li {position:relative;}
.header .gnb > li > a {font-size: 1.1875rem; color: #FFF; font-weight: 700; line-height: 6.25rem; display: block;}
.header .gnb > li > a:hover {color: var(--color-navy) !important;}
.header .gnb_2depth_bg {position:absolute; width:300vw; height: 21.875rem; opacity: 0.95; background: #FFF; top: 100%; left:50%; overflow: hidden; display: none; transform: translateX(-50%);}
.header .gnb_2depth {position:absolute; top:calc(100% + 2.5rem); min-width: max-content; width: 100%; left: 50%; transform:translateX(-50%); text-align: center; display: none;}
.header .gnb_2depth li + li {margin-top:0.9375rem;}
.header .gnb_2depth li a {font-size: 1.125rem; color: #6D6D6D; transition:all 0.3s; font-weight: 500; display: inline-block; line-height: 1.4; position: relative;}
.header .gnb_2depth li a:hover {color: var(--color-navy);}
.header .gnb_2depth li a::before {content: ""; width: 0; height: 1px; position: absolute; left: 0; bottom: 0; background: var(--color-navy); transition: all .3s;}
.header .gnb_2depth li a:hover::before {width: 100%;}
.header .gnb_wrap:hover .gnb_2depth {display:block;}
.header .gnb_wrap:hover .gnb_2depth_bg {display:block;}
.header .head_rt {gap:2.375rem;}
.header .lang {position: relative;}
.header #lang-btn {position:relative; display: flex; align-items: center; gap: .88rem;}
.header #lang-btn .flex-jb {width: 4.375rem; padding-bottom: .12rem; border-bottom: 1px solid #fff; color: #FFF; font-size: 1.125rem; font-weight: 700;}
.header #lang-btn .arrow {width: 0.625rem;}
.header #lang-btn.on .arrow {transform: rotate(180deg);}
.header .lang .lang-list {width:4.375rem; position:absolute; top:calc(100% + .5rem); right: 0; display:none;}
.header .lang .lang-list.on {display:block;}
.header .lang .lang-list a {font-size: .9rem; line-height: 2.5; display:block; text-align:center; background: #fff; font-weight: 500;}
.header .lang .lang-list a.on,
.header .lang .lang-list a:hover {background: var(--color-navy ); color:#fff; font-weight: bold;}
.header .head_rt .flex {gap: 1.13rem;}
.header .search img {width: 1.625rem; cursor: pointer;}
.header .search_close {display: none; cursor: pointer;}
.header .search_close img {filter: none !important;}
.all_menu_btn {width: 1.875rem; cursor:pointer;}
.head_mob_btn {display:none !important;}
.head_bg {display:none !important;}

@media screen and (min-width:1025px) {
	.header:hover {background: #FFF; border-bottom: 1px solid rgba(0, 0, 0, 0.10);}
	.header:hover h1 a img.logo {display:none;}
	.header:hover h1 a img.logo_on {display:block;}
	.header:hover #lang-btn .flex-jb,
	.header:hover .gnb > li > a {color: #000;}
	.header:hover .head_rt img {filter:invert(1);}
	.header:hover #lang-btn .flex-jb{border-color: #000;}
}

.header.fixed {background: #FFF; border-bottom: 1px solid rgba(0, 0, 0, 0.10);}
.header.fixed h1 a img.logo {display:none;}
.header.fixed h1 a img.logo_on {display:block;}
.header.fixed #lang-btn .flex-jb,
.header.fixed .gnb > li > a {color: #000;}
.header.fixed .head_rt img {filter:invert(1);}
.header.fixed #lang-btn .flex-jb{border-color: #000;}

.header.on {background: #FFF; border-bottom: 1px solid rgba(0, 0, 0, 0.10);}
.header.on h1 a img.logo {display:none;}
.header.on h1 a img.logo_on {display:block;}
.header.on #lang-btn .flex-jb,
.header.on .gnb > li > a {color: #000;}
.header.on .head_rt img {filter:invert(1);}
.header.on #lang-btn .flex-jb{border-color: #000;}


/********** all menu **********/
.all_menu {visibility: hidden; opacity: 0; position:fixed; width:100%; height:100%; z-index:5000; padding-top: 1.62rem; transition: all .5s ease;}
.all_menu .bg {position: absolute; top: 0; left: 0; width: 100%; height: 0; background: rgba(34, 34, 34, 0.80); backdrop-filter: blur(20px); transition: all .5s ease;}
.all_menu .cont {position: relative; z-index: 1;}
.all_menu_close {width:1.75781rem; cursor:pointer;}
.all_menu_close img {width:100%;}
.all_menu .logo {margin-top: 6.25rem; text-align: center;}
.all_menu .logo img {width: 7.1875rem;}
.all_menu_list {margin: 8.93rem auto 0; display:flex; max-width: 87.5rem;}
.all_menu_list dl {width:calc(100%/4); min-height: 25rem; opacity: 0; transform: translateY(50px); transition: all 0.5s ease-in-out;}
.all_menu_list dl + dl {border-left:1px solid rgba(255, 255, 255, 0.20); padding:0 5.62rem;}
.all_menu_list dl:last-child {padding-right: 0;}
.all_menu_list dt a {color: #FFF; font-size: 1.75rem; font-weight: 700; line-height: 1.29; letter-spacing: -0.025rem; margin-bottom: 1.875rem; display: block;}
.all_menu_list dd + dd {margin-top:1.25rem;}
.all_menu_list dd a {color: rgba(255, 255, 255, 0.70); font-size: 1.375rem; font-weight: 600; line-height: 1.45;}
.all_menu_list dd a:hover {color: #fff; text-decoration: underline; text-underline-offset: 4px;}

.all_menu.show {visibility: visible; opacity: 1;}
.all_menu.show .bg {height: 100%;}
.all_menu.show .all_menu_list dl {opacity: 1; transform: translateY(0);}
.all_menu.show .all_menu_list dl:nth-child(2) {transition-delay:0.15s;}
.all_menu.show .all_menu_list dl:nth-child(3) {transition-delay:0.3s;}
.all_menu.show .all_menu_list dl:nth-child(4) {transition-delay:0.45s;}


/********** hd_search_wrap **********/
.hd_search_wrap {position: fixed; top: 6.25rem; left: 0; width: 100%; height: 10rem; z-index: 1001; visibility: hidden;}
.hd_search_wrap::before {content: ""; width: 100%; height: 100vh; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.3); opacity: 0; transition: all .5s ease;}
.hd_search_wrap .bg {position: absolute; top: 0; left: 0; width: 100%; height: 0; background: #fff; transition: all .5s ease;}
.hd_search_wrap .cont {position: relative; z-index: 1; padding: 2.38rem 0; opacity: 0; transition: all .5s ease; transition-delay:0.15s;}
.hd_search_wrap .close img {width: 1.5rem; cursor: pointer;}
.hd_search_wrap .search_box {display: flex; align-items: center; justify-content: center;}
.hd_search_wrap .search_box .box {width: 50rem; height: 3.745rem; border-bottom: 1px solid #000; gap: .5rem; padding-right: 1.25rem}
.hd_search_wrap .search_box input {width: calc(100% - 1.3rem); height: 100%; border: 0; font-size: 1.1875rem; font-weight: 400; font-family: var(--font-man);}
.hd_search_wrap .search_box input::placeholder {color: #8E8E8E;}
.hd_search_wrap .search_box .btn {width: 1.125rem; padding: 0;}

.hd_search_wrap.show {visibility: visible;}
.hd_search_wrap.show::before {opacity: 1;}
.hd_search_wrap.show .bg {height: 100%;}
.hd_search_wrap.show .cont {opacity: 1;}
.hd_search_wrap.hide .cont {transition: all .3s ease;}

.header.zIndex {border-bottom: 0; z-index: 1002;}
.header.zIndex .head_rt > div:not(.search_close) {display: none;}
.header.zIndex .head_rt .search_close {display: block;}


/********** quick **********/
.quick {position: fixed; right: 3.75rem; bottom: 3.75rem; z-index: 100;}
.quick li {margin-top: 0.625rem;}
.quick .list li:first-child {margin-top: 0;}
.quick li span:last-child {display: flex; align-items: center; justify-content: center; width: 3.75rem; height: 3.75rem; border-radius: 100%; background: var(--color-navy); box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.10);}
.quick li a img {width: 1.875rem; position: relative; z-index: 1;}
.quick li .top_btn span {background: #FAFAFA;}
.quick li .top_btn img {width: 0.80981rem;}
.quick .list li a {position: relative; transition: width .3s;}
.quick .list li span:first-child {position: absolute; top: 50%; transform: translateY(-50%); right: 0; height: 100%; background: var(--color-navy); color: #FFF; font-size: 1rem; font-weight: 600; opacity: 0; visibility: hidden; transition: all .4s ease; border-radius: 31.25rem; display: flex; align-items: center; white-space: nowrap; overflow: hidden; height: auto; padding: 0.25rem 0.9375rem;}
.quick .list li:hover span:first-child {display: flex; opacity: 1; visibility: visible; right: calc(100% + .63rem);}


/********** footer **********/
.footer {background: #00287C; padding: 2.99rem 0 3.19rem;}
.footer * {color: #fff;}
.footer .ft_logo img {width: 5rem;}
.footer .ft_top {margin-top: 3.24rem; align-items: flex-start;}
.footer .ft_info li {display: flex; align-items: center; gap: 1.25rem;}
.footer .ft_info li + li {margin-top: 0.625rem;}
.footer .ft_info a,
.footer .ft_info li span {color: #BEBEBE; font-size: 1rem; line-height: 1.6; letter-spacing: -0.025rem; font-weight: 400;}
.footer .ft_info li em {color: #fff; font-weight: 500; margin-left: .2rem;}
.footer .ft_sns {display: flex; justify-content: flex-end; gap:0.625rem; opacity: 0.5;}
.footer .ft_sns a img {width: 1.875rem;}
.footer .ft_bot {margin-top: 2.31rem; padding-top: 2.5rem; border-top: 1px solid rgba(255, 255, 255, 0.2);}
.footer .copy {color: #BEBEBE; font-family: var(--font-out); font-size: 0.875rem; font-weight: 400;}
.footer .ft_use {display: flex; gap:1.625rem; align-items: center;}
.footer .ft_use a {color: #BEBEBE; font-size: 0.875rem; font-weight: 400; line-height: 1.5; letter-spacing: -0.025rem;}
.footer .ft_use a b {color: #fff; font-weight: 700;}


/********** main **********/
/* common */
.main_tit h2 {font-weight: 800; line-height: 1.15; word-break: keep-all;}
.main_tit p {font-weight: 500; color: #6D6D6D; line-height: 1.5; text-transform: uppercase; word-break: keep-all;}
.moreBtn {position: relative; overflow: hidden; display: inline-block; border-radius: 1.875rem; border: 1px solid var(--color-navy);}
.moreBtn span {gap: .62rem; height: 3.125rem; padding: 0 1.56rem; font-size: 1.125rem; font-weight: 600; transition: all .3s; color: var(--color-navy); display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 2;}
.moreBtn img {width: 1.125rem; transition: all .3s;}
.moreBtn::before {content: ""; width: 100%; height: 100%; background-color: var(--color-navy); transform: translateX(-102%); position: absolute; left: 0; top: 0; border-radius: 1.875rem; transition: .2s ease-out; z-index: 1;}
.moreBtn:hover span {color: #fff;}
.moreBtn:hover img {filter: var(--filter-white);}
.moreBtn:hover::before {transform: translateX(0);}
/* visual */
.main .visual {position: relative; overflow: hidden;}
.main .visual .swiper-slide {height: 59.375rem; position: relative;}
.main .visual .swiper-slide .vis_img {height: 100%;}
.main .visual .swiper-slide .vis_img img {width: 100%; height: 100%; object-fit:cover;}
.main .visual .swiper-slide .vis_txt {color: #FFF; position: absolute; left:50%; top: 18.22rem; transform:translateX(-50%);}
.main .visual .swiper-slide .vis_txt em {font-size: 1.25rem; font-weight: 800; text-transform: uppercase;}
.main .visual .swiper-slide .vis_txt h2 {font-size: 5rem; font-weight: 800; word-break: keep-all; letter-spacing: -0.09375rem;}
.main .visual .swiper-slide .vis_txt p {margin-top: 3.12rem; font-size: 1.4375rem; line-height: 1.45; word-break: keep-all; font-weight: 400;}
.main .visual .swiper-pagination {left:50% !important; transform:translateX(-50%); top: auto !important; right: auto; bottom: 4.06rem; display: flex; align-items: center; gap: 1.25rem;}
.main .visual .swiper-pagination span {width: 12.5rem; font-size: 1.125rem; font-weight: 800; color: rgba(255, 255, 255, 0.5); height: auto; background: transparent; border-radius: 0; padding-bottom: .94rem; border-bottom: 2px solid rgba(255, 255, 255, 0.5); margin: 0; text-align: left; position: relative; opacity: 1;}
.main .visual .swiper-pagination span:after {content: ""; width: 0; height: 2px; position: absolute; left: 0; bottom: -2px;}
.main .visual .swiper-pagination .swiper-pagination-bullet-active {color: #fff;}
.main .visual .swiper-pagination span.on:after {transition: width linear; transition-delay: unset; width: 100%; transition-duration: 4s; background: #fff;}
/* sec1 */
.main .sec1 {padding: 9.38rem 0 2rem; position: relative; overflow: hidden;}
.main .sec1::before {content: ""; width: 76.125rem; aspect-ratio: 1/1; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 69, 213, 0.29) 0%, rgba(0, 69, 213, 0.18) 36.54%, rgba(139, 170, 235, 0.15) 71.15%, rgba(255, 255, 255, 0.00) 100%); border-radius: 100%; position: absolute; top: -28.69rem; right: -3.31rem; z-index: -1;}
.main .sec1::after {content: ""; width: 60rem; aspect-ratio: 1/1; background: radial-gradient(50% 50% at 50% 50%, rgba(9, 219, 219, 0.30) 0%, rgba(150, 201, 203, 0.24) 50%, rgba(255, 255, 255, 0.00) 100%); border-radius: 100%; position: absolute; bottom: -24.19rem; left: -7.81rem; opacity: .5; z-index: -1;}
.main .sec1 .main_tit {align-items: flex-end;}
.main .sec1 .main_tit h2 {font-size: 4.375rem; letter-spacing: -0.09375rem;}
.main .sec1 .cont {margin-top: 5rem;}
.main .sec1 .list {display: flex; gap: 1.875rem;}
.main .sec1 .item a {width: 28.125rem; aspect-ratio: 28.125 / 34.375; padding: 3.25rem 1.25rem 1.25rem; border-radius: 1.25rem; border: 1px solid #E7E7E7; background: linear-gradient(145deg, #00287C 32.34%, #F2F4FA 152.57%), #00287C; transition: all .3s; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;}
.main .sec1 .item span {height: 2.5rem; background: #fff; padding: 0 .94rem; background: #fff; border-radius: 0.3125rem; transition: all .3s; font-size: 1.5rem; font-weight: 800; color: var(--color-navy); line-height: 1.5; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #fff;}
.main .sec1 .item p {margin-top: 0.9375rem; color: #FFF; font-size: 1.125rem; font-weight: 400; line-height: 1.5;}
.main .sec1 .item img {width: 100%;}
.main .sec1 .item:hover a {background: #fff; box-shadow: 0 4px 35px 0 rgba(1, 41, 124, 0.20);}
.main .sec1 .item:hover span {background: #fff; border-color: var(--color-navy); color: var(--color-navy);}
.main .sec1 .item:hover p {color: #8E8E8E;}
.main .sec1 .text {margin-top: 8.13rem; color: var(--color-navy); font-size: 7.5rem; font-weight: 800; letter-spacing: -0.125rem; white-space: nowrap; opacity: 0.05;}
/* sec2 */
.main .sec2 {padding: 9.75rem 0 9.38rem; background: url('/img/main/sec2_bg.jpg') no-repeat top/cover; background-attachment: fixed;}
.main .sec2 .inner {align-items: flex-start; position: relative;}
.main .sec2 .main_tit {width: calc(100% - 62.8125rem); /* position: sticky; top: 9.75rem; left: 0; */}
.main .sec2 .main_tit * {color: #fff;}
.main .sec2 .list {width: 62.8125rem; display: flex; gap: 3.81rem; align-items: center;}
.main .sec2 .item {width: 30rem; aspect-ratio: .69/1; overflow: hidden; border-radius: 1.25rem; position: relative; text-align: center; color: #fff; overflow: hidden; transform: translateY(30px); opacity: 0; transition: all 1s;}
.main .sec2 .item.on {opacity: 1; transform: translateY(0);}
.main .sec2 .item::before {content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; backdrop-filter: blur(10px); background: rgba(0, 0, 0, 0.20); z-index: 1; opacity: 0; transition: all .3s;}
.main .sec2 .item .txt,
.main .sec2 .item .hover {transition: opacity .3s ease}
.main .sec2 .item > img {width: 100%; height: 100%; object-fit: cover; object-position: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: all .3s;}
.main .sec2 .item + .item {margin-top: 10rem;}
.main .sec2 .item .txt {position: relative; z-index: 1; padding: 4.81rem 0;}
.main .sec2 .item .txt span {display: inline-flex; align-items: center; justify-content: center; height: 2.1875rem; padding: 0 1.25rem; border-radius: 12.5rem; border: 1px solid #fff; font-size: 1.125rem; font-weight: 800; text-transform: uppercase; line-height: 1.5;}
.main .sec2 .item .txt h2 {font-size: 2.3125rem; color: #F2F4FA; font-weight: 700; letter-spacing: -0.0625rem; line-height: 1.4;}
.main .sec2 .item .hover {/* opacity: 0; */ visibility: hidden; position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3.125rem; width: 100%; height: 100%; padding: 0 1.25rem;}
.main .sec2 .item .hover img {width: 6.25rem; position: relative; z-index: 1;}
.main .sec2 .item .hover p {font-size: 2rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.0625rem; color: #F2F4FA; word-break: keep-all; position: relative; z-index: 1;}
.main .sec2 .item:hover::before {opacity: 1;}
.main .sec2 .item:hover .txt {opacity: 0;}
.main .sec2 .item:hover .hover {visibility: visible;}

/* sec3 */
.main .sec3 {position: relative; padding: 9.44rem 0 9.38rem; overflow: hidden;}
.main .sec3::before {content: ""; width: 76.125rem; aspect-ratio: 1/1; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 69, 213, 0.29) 0%, rgba(0, 69, 213, 0.18) 36.54%, rgba(139, 170, 235, 0.15) 71.15%, rgba(255, 255, 255, 0.00) 100%); border-radius: 100%; position: absolute; top: -38.5rem; right: 5.06rem; z-index: -1;}
.main .sec3::after {content: ""; width: 60rem; aspect-ratio: 1/1; background: radial-gradient(50% 50% at 50% 50%, rgba(9, 219, 219, 0.30) 0%, rgba(150, 201, 203, 0.24) 50%, rgba(255, 255, 255, 0.00) 100%); border-radius: 100%; position: absolute; bottom: -31.69rem; left: -8.81rem; opacity: .5; z-index: -1;}
.main .sec3 .main_tit p {color: var(--color-navy); font-weight: 700;}
.main .sec3 .main_tit h2 {font-weight: 700; letter-spacing: -0.0625rem;}
.main .sec3 .swiper-wrapper {transition-timing-function: linear;}
.main .sec3 .swiper-slide {width: 21.875rem; aspect-ratio: 35/13; margin-right: 1.875rem; border-radius: 1.25rem; border: 1px solid #E7E7E7; overflow: hidden;}
.main .sec3 .swiper-slide a{display: block; height: 100%;}
.main .sec3 .swiper-slide img {width: 100%; height: 100%; object-fit: cover;}
/* sec4 */
.main .sec4 {padding: 9.5rem 0 9.88rem; background: #F2F4FA; overflow: hidden;}
.main .sec4 .main_tit p {text-transform: none;}
.main .sec4 .in {align-items: flex-start; position: relative;}
.main .sec4 .left {position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.main .sec4 .right {width: calc(100% - 35.65rem);}
.main .sec4 .swiper_cont {position: relative; height: 25rem;}
.main .sec4 .swiper-slide {transition: all .3s; margin-bottom: 4.37rem; margin-right: 1.875rem; width: 23.56rem; height: 25rem; background: #fff; border-radius: 1.25rem; backdrop-filter: blur(10px); overflow: hidden;}
.main .sec4 .swiper-slide a {display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; width: 100%; height: 100%; padding: 2.5rem 2.25rem; position: relative;}
.main .sec4 .swiper-slide a::before {content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background: linear-gradient(145deg, #00287C 3.62%, #F2F4FA 214.8%); opacity: 0; transition: all .3s;}
.main .sec4 .swiper-slide a > div {width: 100%; position: relative; z-index: 2;}
.main .sec4 .swiper-slide * {transition: all .3s;}
.main .sec4 .swiper-slide .cate {padding: 0.125rem 0.625rem 0.25rem 0.625rem; border-radius: 31.25rem; background: var(--color-navy); color: #fff; font-size: 1rem; font-weight: 600; line-height: 1.33;}
.main .sec4 .swiper-slide .subject {margin-top: 0.9375rem; font-size: 1.5rem; font-weight: 600; line-height: 1.33; letter-spacing: -0.0625rem;}
.main .sec4 .swiper-slide p {margin-top: 0.625rem; font-size: 1.125rem; font-weight: 400; line-height: 1.33; color: #6D6D6D;}
.main .sec4 .swiper-slide .date {color: #606060; font-size: 1.1875rem; font-weight: 400;}
.main .sec4 .swiper-slide .flex {gap: .43rem; color: #606060; font-size: 0.875rem; font-weight: 600; padding-bottom: .19rem; border-bottom: 1px solid transparent;}
.main .sec4 .swiper-slide .flex img {width: 0.25rem;}
.main .sec4 .swiper-slide:hover {box-shadow: 0 4px 35px 0 rgba(1, 41, 124, 0.30);}
.main .sec4 .swiper-slide:hover a::before {opacity: 1;}
.main .sec4 .swiper-slide:hover .cate {background: #fff; color: var(--color-navy);}
.main .sec4 .swiper-slide:hover .subject {color: #fff;}
.main .sec4 .swiper-slide:hover p,
.main .sec4 .swiper-slide:hover .date,
.main .sec4 .swiper-slide:hover .flex {color: #E7E7E7;}
.main .sec4 .swiper-slide:hover .flex {border-bottom: 1px solid #E7E7E7;}
.main .sec4 .swiper-slide:hover .flex img {filter: var(--filter-white);}
.main .sec4 .swiper-pagination {position: relative; top: auto; right: auto; bottom: auto; left: auto; /* width: 74.5rem; */ width: calc(100% - 9.53rem); height: 0.1875rem; background: #D9D9D9;}
.main .sec4 .swiper-pagination-progressbar-fill {background: var(--color-navy);}
#cursor_div{position: fixed; left: 0; top: 0; pointer-events: none; z-index:1000;}
.cursor{width: 0; height: 0; border-radius:100%; background: rgba(0, 40, 124, 0.10); backdrop-filter: blur(5px); transition:all 0.3s; transform: translate(-50%, -50%); padding: 0 0.25rem;}
.cursor.on{width: 8.125rem; height: 8.125rem;}
.cursor span{font-size: 0; font-weight: 600; color:var(--color-navy); transition:all 0.3s;}
.cursor.on span{font-size: 1.07263rem;}
.cursor img{width:0; transition:all 0.3s;}
.cursor.on img{width:1.28719rem;}
.main .sec4 .right.inner{display: flex; justify-content: flex-end; width: 100%;}
.main .sec4 .right.inner #cursor_div{display: none;}
.main .sec4 .right.inner .swiper{margin: 0; width: 70%;}
/* sec5 */
.main .sec5 { position: relative; background: url('/img/main/sec5_bg.jpg') no-repeat center/cover; overflow: hidden;}
.main .sec5 .inner {align-items: flex-start; position: relative; z-index: 2; padding: 9.37rem 0;}
.main .sec5 .bg {position: absolute; top: 0; left: 0; z-index: 1; overflow: hidden; width: 100%; height: 100%;}
.main .sec5 .circle {aspect-ratio: 1/1; border-radius: 100%; position: absolute; z-index: 1;}
.main .sec5 .circle01 {width: 76.125rem; top: -38.5rem; left: -8.19rem; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 69, 213, 0.29) 0%, rgba(0, 69, 213, 0.18) 36.54%, rgba(139, 170, 235, 0.15) 71.15%, rgba(255, 255, 255, 0.00) 100%);}
.main .sec5 .circle02 {width: 39.1875rem; bottom: -19.31rem; left: -1.69rem; opacity: .7; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 248, 183, 0.60) 0%, rgba(255, 248, 183, 0.48) 42.79%, rgba(255, 255, 255, 0.00) 100%);}
.main .sec5 .circle03 {width: 60rem; top: 10.5rem; right: -13.69rem; opacity: 0.5; background: radial-gradient(50% 50% at 50% 50%, rgba(9, 219, 219, 0.30) 0%, rgba(150, 201, 203, 0.24) 50%, rgba(255, 255, 255, 0.00) 100%);}
.main .sec5 .main_tit {position: sticky; left: 0; top: 9.37rem;}
.main .sec5 .main_tit p {color: var(--color-navy); font-weight: 700;}
.main .sec5 ul {width: 50%;}
.main .sec5 li {width: 43.75rem; height: 14.375rem; position: relative; overflow: hidden; padding: 3.31rem 4.38rem; align-items: flex-start; gap: 3.125rem; overflow: hidden; border-radius: 1.5rem;}
.main .sec5 li::before {content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; backdrop-filter: blur(10px); background: rgba(0, 0, 0, 0.20); z-index: 1; opacity: 0; transition: all .3s; z-index: 2;}
.main .sec5 li + li {margin-top: 1.5625rem;}
.main .sec5 li > img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: all .3s;}
.main .sec5 li .img {position: relative; z-index: 3;}
.main .sec5 li .img img {width: 5rem;}
.main .sec5 li strong {display: block; font-size: 2.1875rem; font-weight: 600; color: #fff; line-height: 1.3; position: relative; z-index: 3;}
.main .sec5 li p {margin-top: 1.25rem; font-size: 1.25rem; font-weight: 400; color: #fff; line-height: 1.45; position: relative; z-index: 3;}
.main .sec5 li:hover::before {opacity: 1;}



@media screen and (max-width:1740px) {
	/* sec2 */
	.main .sec2 .main_tit {width: calc(100% - 60%);}
	.main .sec2 .list {width: 60%;}
	.main .sec2 .list > div {width: 48%;}
	.main .sec2 .item {width: 100%;}
	.main .sec2 .item .hover p br {display: none;}
}

@media screen and (max-width:1640px) {
	.inner {max-width: calc(100% - (3.75rem * 2));}

	.fs_70 {font-size: 4rem;}

	/* sec1 */
	.main .sec1 .main_tit h2 {font-size: 4rem;}
	/* sec2 */
	.main .sec2 .item .txt h2 {font-size: 2rem; padding: 0 1rem; word-break: keep-all;}
	.main .sec2 .item .hover p {font-size: 1.7rem;}
}

@media screen and (max-width:1440px) {
	html {font-size: 80%;}
}

@media screen and (max-width:1240px) {
	.inner {max-width: calc(100% - (3rem * 2));}
	/* header */
	.header .gnb {gap: 6rem;}
	.header .head_rt {gap: 2rem;}
	.header #lang-btn .flex-jb {width: 4rem;}
	/* sec2 */
	.main .sec2 .item .txt h2 br {display: none;}
	.main .sec2 .list {gap: 2rem; justify-content: flex-end}
	.main .sec2 .list > div {width: 46%;}
	/* sec4 */
	.main .sec4 .right {width: calc(100% - 28.65rem);}
	/* .main .sec4 .swiper-pagination {width: calc(100% - 3rem);} */
	/* sec5 */
	.main .sec5 li {width: 100%; padding: 2.31rem 3.38rem;}
}

@media screen and (max-width:1024px) {
	html {font-size: 100%;}
	.pc {display:none !important;}
	.mob {display:block !important;}

	/********** 공통 **********/
	.mt_10 {margin-top: .62rem;}
	.mt_20 {margin-top: 1rem;}
	.mt_30 {margin-top: .75rem;}
	.mt_40 {margin-top: 1.875rem;}
	.mt_50 {margin-top: 2.5rem;}
	.mt_60 {margin-top: 3.125rem;}
	.mt_70 {margin-top: 3.75rem;}
	.mt_80 {margin-top: 4.375rem;}
	.mt_100 {margin-top: 2.5rem;}
	.mt_130 {margin-top: 3.75rem;}

	.fs_20 {font-size: 0.875rem;}
	.fs_70 {font-size: 1.75rem;}
	.inner {max-width:calc(100% - 2.5rem);}


	/********** HEADER **********/
	.header {height:3.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.30);}
	.header h1 a img {width: 3.82838rem;}
	.header .gnb_wrap,
	.header .gnb_2depth_bg,
	.header .gnb_2depth {display: none;}
	.header .head_rt {gap:0.75rem;}
	.header #lang-btn {gap: .88rem;}
	.header #lang-btn .flex-jb {display: none;}
	.header .lang .lang-list {width:3.125rem; top:calc(100% + .5rem); right: auto; left: 50%; transform: translateX(-50%);}
	.header .lang .lang-list a {font-size: 0.875rem;}
	.header .head_rt .flex {gap: 0.75rem;}
	.header .search img {width: 1.625rem;}
	.all_menu_btn {display: none;}
	.head_mob_btn {width: 1.5rem; display: block !important;}


	/********** sideMenu **********/
	.head_bg {position: fixed; right: 0; top: 0; z-index: 10000; width: 100%; height: 100vh; background: rgba(34, 34, 34, 0.80); backdrop-filter: blur(20px);}
	.head_bg.on {display: block !important;}
	.head_bg_inner {padding: 2.5rem 1.81rem; position: relative; height: 100%;}
	.head_bg_close {position: absolute; top: 1.56rem; right: 1.56rem;}
	.head_bg_close img {width: 2.5rem;}
	.head_bg_logo img {width: 5rem;}
	.head_bg .accordion {margin-top: 3.48rem; height: calc(100% - 7rem); overflow: hidden; overflow-y: auto;}
	.head_bg #accordion::-webkit-scrollbar {width: 2px;}
    .head_bg #accordion::-webkit-scrollbar-thumb {background: #fff;}
    .head_bg #accordion::-webkit-scrollbar-track {background: #878787;}
	.head_bg .accordion .link {color: #fff; font-size: 1.75rem; font-weight: 700; line-height: 1.29; letter-spacing: -0.025rem;}
	.head_bg .accordion > li + li {margin-top: 2rem;}
	.head_bg .submenu {margin-top: 1.25rem; display: none;}
	.head_bg .submenu li + li {margin-top: 0.75rem;}
	.head_bg .submenu a {font-size: 1rem; font-weight: 600; color: #fff; opacity: .7; line-height: 1.45;}


	/********** hd_search_wrap **********/
	.hd_search_wrap {top: 3.75rem; height: 6.25rem;}
	.hd_search_wrap .cont {padding: 1.5625rem 1.25rem;}
	.hd_search_wrap .search_box .box {width: 100%; height: 3.125rem; padding-right: 0;}
	.hd_search_wrap .search_box input {width: calc(100% - 1rem); font-size: 0.875rem;}
	.hd_search_wrap .search_box .btn {width: 1.25rem;}
	.header.zIndex {border-bottom: 1px solid rgba(0, 0, 0, 0.10);}
	.header.zIndex .search_close,
	.header.zIndex .lang {display: block !important;}
	.header.zIndex .flex {display: flex !important;}
	.header.zIndex .head_mob_btn {display: none !important;}


	/********** quick **********/
	.quick {right: .62rem; bottom: 1rem;}
	.quick li {margin-top: 0.52081rem;}
	.quick li span:last-child {width: 3.125rem; height: 3.125rem;}
	.quick li a img {width: 1.5625rem;}
	.quick li .top_btn img {width: 0.67481rem;}
	.quick .list li span:first-child,
	.quick .list li:hover span:first-child {display: none;}


	/********** footer **********/
	.footer {padding: 3.13rem 0 3.18rem;}
	.footer .ft_logo img {width: 3.75rem;}
	.footer .ft_top {margin-top: 1.875rem; flex-direction: column; align-items: flex-start; gap: 1.25rem;}
	.footer .ft_info li {gap: 0.5rem 0.75rem; flex-wrap: wrap;}
	.footer .ft_info li + li {margin-top: 0.5rem;}
	.footer .ft_info li .w100 {width: 100%;}
	.footer .ft_info a,
	.footer .ft_info li span {font-size: 0.875rem; letter-spacing: 0;}
	.footer .ft_info li em {margin-left: .2rem;}
	.footer .ft_bot {margin-top: 1.875rem; padding-top: 1.875rem;  flex-direction: column-reverse; align-items: flex-start; gap: 0.75rem;}
	.footer .ft_use {gap:1.25rem;}
	.footer .ft_use a {font-size: 0.8125rem; letter-spacing: 0;}


	/********** main **********/
	/* common */
	.moreBtn span {gap: 0.25rem; height: 2.25rem; padding: 0 1rem 0 1.25rem; font-size: 0.875rem;}
	.moreBtn img {width: 1.125rem;}
	.moreBtn::before {border-radius: 1.875rem;}
	/* visual */
	.main .visual .swiper-slide {height: 40.625rem;}
	.main .visual .swiper-slide .vis_txt {top: 50%; transform: translate(-50%,-50%);}
	.main .visual .swiper-slide .vis_txt em {font-size: 0.875rem;}
	.main .visual .swiper-slide .vis_txt h2 {font-size: 2rem; letter-spacing: 0;}
	.main .visual .swiper-slide .vis_txt p {margin-top: 1.25rem; font-size: 1rem;}
	.main .visual .swiper-pagination {bottom: 3.12rem; gap: 0.5rem;}
	.main .visual .swiper-pagination span {width: 6.8rem; font-size: 0.875rem; padding-bottom: 0.75rem;}
	.main .visual .swiper-pagination span:after {height: 0.125rem; bottom: -0.125rem;}
	/* sec1 */
	.main .sec1 {padding: 3.75rem 0 2rem;}
	.main .sec1::before {width: 47.125rem; top: -26.81rem; right: -30.12rem;}
	.main .sec1 .main_tit {flex-direction: column; align-items: flex-start; gap: 1.25rem;}
	.main .sec1 .main_tit h2 {font-size: 1.75rem; letter-spacing: 0;}
	.main .sec1 .cont {margin-top: 2.5rem;}
	.main .sec1 .list {gap: 1.25rem;}
	.main .sec1 .item a {width: 17.5rem; padding: 1.94rem .78rem .78rem; border-radius: 0.77775rem;}
	.main .sec1 .item span {height: 1.55556rem; padding: 0 .58rem; border-radius: 0.19444rem; font-size: 1rem;}
	.main .sec1 .item p {margin-top: 0.58331rem; font-size: 0.875rem;}
	.main .sec1 .text {margin-top: 3.75rem; font-size: 2.25rem;}
	/* sec2 */
	.main .sec2 {padding: 3.75rem 0;}
	.main .sec2 .inner {gap: 5rem; flex-direction: column; align-items: flex-start;}
	.main .sec2 .main_tit {width: 100%; top: 5.75rem; z-index: 3; position: relative; top: auto; left: auto;}
	.main .sec2 .list {width: 100%; gap: .97rem;}
	.main .sec2 .list > div {width: calc(50% - .5rem);}
	.main .sec2 .item {width: 100%; border-radius: 0.42969rem;}
	.main .sec2 .item + .item {margin-top: 1rem;}
	.main .sec2 .item .txt {padding: 5.9rem .37rem;}
	.main .sec2 .item .txt span {height: auto; padding: .3rem .75rem; border-radius: 4.29688rem; font-size: 1.1rem; line-height: 1;}
	.main .sec2 .item .txt h2 {font-size: 1.65rem; letter-spacing: 0; margin-top: .65rem;}
	.main .sec2 .item .txt h2 br {display: none;}
	.main .sec2 .item .hover {gap: 0.64456rem; padding: 0 .75rem;}
	.main .sec2 .item .hover img {width: 4rem;}
	.main .sec2 .item .hover p {font-size: 1.4rem; letter-spacing: 0; word-break: keep-all;}
	.main .sec2 .item .hover p br {display: none;}
	/* sec3 */
	.main .sec3 {padding: 3.75rem 0 3.79rem;}
	.main .sec3::before {width: 76.125rem; top: -38.5rem; right: auto; right: 6.69rem;}
	.main .sec3::after {width: 32.375rem; bottom: -17.625; left: -6.87rem;}
	.main .sec3 .main_tit h2 {letter-spacing: 0;}
	.main .sec3 .swiper-slide {width: 13.75rem; margin-right: 0.75rem;}
	/* sec4 */
	.main .sec4 {padding: 3.75rem 0;}
	.main .sec4 .in {flex-direction: column; align-items: flex-start; gap: 2.5rem;}
	.main .sec4 .main_tit p {margin-top: .75rem;}
	.main .sec4 .moreBtn {margin-top: 1.25rem;}
	.main .sec4 .left {position: relative; top: auto; left: auto; transform: none;}
	.main .sec4 .right {width: 100%;}
	.main .sec4 .swiper_cont {height: 18.75rem;}
	.main .sec4 .swiper {padding-left: 1.25rem;}
	.main .sec4 .swiper-slide {margin-bottom: 1.87rem; margin-right: 1.25rem; width: 18.75rem; height: 18.75rem;}
	.main .sec4 .swiper-slide a {padding: 1.875rem 1.25rem;	}
	.main .sec4 .swiper-slide .cate {padding: 0.25rem 0.75rem; font-size: 0.875rem;}
	.main .sec4 .swiper-slide .subject {font-size: 1rem; letter-spacing: 0;}
	.main .sec4 .swiper-slide p {font-size: 0.875rem;}
	.main .sec4 .swiper-slide .date {font-size: 0.875rem;}
	.main .sec4 .swiper-slide .flex {gap: 0.5rem; font-size: 0.75rem; padding-bottom: .19rem;}
	.main .sec4 .swiper-pagination {width: calc(100% - 2.5rem) !important; margin: 0 auto;}
	#cursor_div {display: none;}
	.main .sec4 .right.inner .swiper{width: 100%; padding-left: 0;}

    .main .sec4 .swiper-slide *,
    .main .sec4 .swiper-slide a::before {transition: none;}
	/* sec5 */
	.main .sec5 { overflow: hidden;}
	.main .sec5 .inner {padding: 3.75rem 0;}
	.main .sec5 .circle01 {width: 47.125rem; top: -35.56rem; left: -10.06rem;}
	.main .sec5 .circle02 {width: 26rem; bottom: -8.74rem; right: -9.19rem;}
	.main .sec5 .circle03 {width: 46rem; top: 6rem; left: 4.25rem;}
	.main .sec5 .inner {flex-direction: column; align-items: flex-start; gap: 2.5rem;}
	.main .sec5 .main_tit {top: auto; left: auto; position: relative;}
	.main .sec5 ul {width: 100%;}
	.main .sec5 li {width: 100%; height: 10.25rem; padding: 2.5rem 1.5rem; gap: 1rem; border-radius: 1.5rem;}
	.main .sec5 li .img img {width: 3.125rem;}
	.main .sec5 li strong {font-size: 1.5rem;}
	.main .sec5 li p {margin-top: 0.75rem; font-size: 0.875rem; word-break: keep-all;}
    .main .sec5 li p br {display: none;}

}

@media screen and (max-width:768px){

	.pc2 {display:none !important;}
	.mob2 {display:block !important;}
    /* sec2 */
    .main .sec2 .item .txt {padding: 3.9rem .37rem;}
    .main .sec2 .item .txt span {font-size: 0.75rem;}
    .main .sec2 .item .txt h2 {font-size: 1.2rem;}
    .main .sec2 .item .hover img {width: 3rem;}
    .main .sec2 .item .hover p {font-size: 1rem;}
}

@media screen and (max-width:500px){
    /* sec2 */
    .main .sec2 .item .txt {padding: 2.3rem .37rem;}
}