/* 공통 */
:root{
	--main-color : #3EB8DD;
}
p, dd{word-break:keep-all;}
.pc{display:block !important;}
.mob{display:none !important;}
.inner{width: 100%; max-width:87.5rem; margin:0 auto;}
.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;}


/* HEADER */
.header{height:6.25rem; position:fixed; top:0; z-index:1000; width:100%;}
.header .inner{height:100%; display:flex; align-items:center; justify-content:space-between;}
.header h1 a img{width: 9.375rem; display: block;}
.header h1 a img.logo_on{display:none;}
.header .gnb{display:flex; gap:4.6875rem;}
.header .gnb > li{position:relative;}
.header .head_rt > a,
.header .gnb > li > a{font-size: 1rem; color: #FFF; font-weight: 700; letter-spacing: -0.0625rem;}
.header .gnb_2depth_bg {position:absolute; width:100%; height: 14.0625rem; background: #F9F9F9; bottom:-14.0625rem; left:0; overflow: hidden; display: none;}
.header .gnb_2depth_bg .inner{position:relative;}
.header .gnb_2depth{position:absolute; top:6.25rem; width: 200%; 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: 1rem; color: #6D6D6D; transition:all 0.3s;}
.header .gnb_2depth li a:hover{color: #3EB8DD; font-weight: 600; text-decoration: underline;}
.header .head_rt{display:flex; align-items:center; gap:1.875rem;}
.header .member{display: flex; align-items: center; gap:1.25rem;}
.header .member a{font-size: 0.875rem; font-weight: 500; color: #FFF;}
.header .member .line{width: 0.0625rem; height: 0.625rem; background: rgba(255, 255, 255, 0.50); display: inline-block;}

.all_menu_btn{width: 1.875rem; cursor:pointer;}
.head_mob_btn{display:none !important;}
.head_bg{display:none !important;}

.header:hover{background: #FFF;}
.header:hover h1 a img.logo{display:none;}
.header:hover h1 a img.logo_on{display:block;}
.header:hover .head_rt > a,
.header:hover .gnb > li > a{color: #000;}
.header:hover .gnb_2depth{display:block;}
.header:hover .gnb_2depth_bg{display:block;}
.header:hover .all_menu_btn{filter:invert(1);}
.header:hover .member a{color: #000;}
.header:hover .member .line{background: rgba(0, 0, 0, 0.50);}

.header.fixed{background: #FFF;}
.header.fixed h1 a img.logo{display:none;}
.header.fixed h1 a img.logo_on{display:block;}
.header.fixed .head_rt > a,
.header.fixed .gnb > li > a{color: #000;}
.header.fixed .all_menu_btn{filter:invert(1);}
.header.fixed .member a{color: #000;}
.header.fixed .member .line{background: rgba(0, 0, 0, 0.50);}

.header.on{background: #FFF;}
.header.on h1 a img.logo{display:none;}
.header.on h1 a img.logo_on{display:block;}
.header.on .head_rt > a,
.header.on .gnb > li > a{color: #000;}
.header.on .all_menu_btn{filter:invert(1);}
.header.on .member a{color: #000;}
.header.on .member .line{background: rgba(0, 0, 0, 0.50);}


/* all menu */
.all_menu{display: none; position:fixed; width:100%; height:100%; z-index:5000; background: rgba(255, 255, 255, 0.90);}
.all_menu_close{position:absolute; right:3.4375rem; top:3.4375rem; width:1.875rem; cursor:pointer;}
.all_menu_close img{width:100%;}
.all_menu .logo{padding-top:7.5rem; text-align: center;}
.all_menu .logo img{width: 12.5rem;}
.all_menu_list{margin-top:3.9375rem; display:flex; flex-wrap: wrap;}
.all_menu_list dl{width:25%; min-height: 13.75rem; margin-bottom: 4.375rem;}
.all_menu_list dl + dl{border-left:0.0625rem solid #D8D8D8; padding-left:2.5rem;}
.all_menu_list dl:nth-of-type(5){padding-left: 0; border-left: none;}
.all_menu_list dt{font-size:1.5625rem; font-weight:700; margin-bottom:1.875rem; transition:all 0.3s;}
.all_menu_list dd + dd{margin-top:0.625rem;}
.all_menu_list dd a{font-size:1rem; color: #6D6D6D; transition:all 0.3s;}
.all_menu_list dl:hover{color: #3EB8DD;}
.all_menu_list dl dd a:hover{color: #3EB8DD; font-weight: 600; text-decoration: underline;}


/* visual */
.visual{position: relative;}
.visual .swiper-slide{height: 59.375rem; position: relative;}
.visual .swiper-slide .vis_img{height: 100%;}
.visual .swiper-slide .vis_img img{width: 100%; height: 100%; object-fit:cover;}

/* 비디오 배너 추가 테스트 - 병수 202602023 */
.visual .swiper-slide .vis_img.vis_video{position: relative;}
.visual .swiper-slide .vis_img.vis_video .pc,
.visual .swiper-slide .vis_img.vis_video .mob{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.visual .swiper-slide .vis_img.vis_video iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none;}

.visual .swiper-slide .vis_txt{color: #FFF; max-width: 87.5rem; position: absolute; margin: 0 auto; left:0; right: 0; top: 50%; transform:translateY(-50%);}
.visual .swiper-slide .vis_txt em{font-size: 1.25rem; font-weight: 900; word-break: keep-all;}
.visual .swiper-slide .vis_txt h2{font-size: 3.4375rem; margin-top: 1.0625rem; font-weight: 800; word-break: keep-all;}
.visual .swiper-slide .vis_txt p{font-size: 1.5rem; line-height: 1.4; margin-top: 0.9375rem; word-break: keep-all;}
.visual .swiper-slide .vis_txt a{font-size: 1.125rem; letter-spacing: -0.0625rem; font-weight: 600; color: #FFF; display: inline-block; padding: 0.625rem 1.25rem 0.625rem 1.875rem; border: 0.0625rem solid rgba(255, 255, 255, 0.50); margin-top: 2.875rem;}
.visual .swiper-slide .vis_txt a i{display: inline-block; vertical-align: middle; width: 1.5rem; height: 1.5rem; background: url("/img/main/main_btn_arrow.svg") no-repeat center / 100%; margin: -0.125rem 0 0 0.9375rem;}
.vis_arrow div{position: absolute; top: 50%; transform:translateY(-50%); width: 3.75rem; cursor: pointer; z-index: 10;}
.vis_arrow div img{width: 100%;}
.vis_arrow .prev{left: 4.0625rem;}
.vis_arrow .next{right: 4.0625rem;}
.vis_bt{position: absolute; bottom: 2.9375rem; left: 50%; transform:translateX(-50%); z-index: 10; display: flex; align-items: center; justify-content: center; gap:1.5rem; width: 17.6875rem;}
.vis_slider.on .vis_bt{display: none;}
.vis_bt .page{font-size: 0.875rem; font-weight: 700; letter-spacing: -0.05rem; color: #FFF; display: flex; justify-content: space-between; width: 100%;}
.vis_bt .scroll{width: 12.5rem; height: 0.125rem; background: rgba(255,255,255,0.2); position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%);}
.vis_bt .scroll .swiper-scrollbar-drag{background: #fff;}


/* quick menu */
.quick{position: fixed; right: 1.875rem; bottom: 2.5rem; z-index: 100;}
.quick .top_btn{display: block; width: 3.75rem; height: 3.75rem; border-radius:50%; background: #FAFAFA url("/img/main/q_top_ic.svg") no-repeat center / 1.1875rem; box-shadow: 0rem 0.4375rem 1.8125rem 0rem rgba(100, 100, 111, 0.20);}

/* common */
.main_tit{margin-bottom: 3.125rem;}
.main_tit em{font-size: 1rem; font-weight: 600; color: #3EB8DD;}
.main_tit .tit{margin: 0.625rem 0 1.25rem; font-size: 2.5rem; letter-spacing: -0.02em; font-weight: 700;}
.main_tit p{font-size: 1.125rem; letter-spacing: -0.02em; font-weight: 500; color: #6d6d6d;}
.no_data{width: 100% !important; border-top: 0.125rem solid #000; border-bottom: 0.0625rem solid #000; height: 29.375rem !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; margin: 0 !important; aspect-ratio: initial !important;}
.no_data .icon{width: 2.375rem;}
.no_data p{font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; text-align: center;}

/* sec1 */
.main .sec1{padding: 6.25rem 0;}
.main .sec1 .swiper{margin: 0 -0.9375rem;}
.main .sec1.on .swiper{margin: 0 !important;}
.main .sec1 .swiper-slide{margin: 0 0.9375rem; width: 27.8125rem;}
.main .sec1 .swiper-slide a{display: block;}
.main .sec1 .swiper-slide .img{aspect-ratio: 1/1; display: block;}
.main .sec1 .swiper-slide .img img{width: 100%; height: 100%; object-fit: cover;}
.main .sec1 .swiper-slide .txt{display: flex; flex-direction: column; margin-top: 1.5625rem;}
.main .sec1 .swiper-slide .txt .cate{font-size: 1rem; font-weight: 600; color: #3EB8DD;}
.main .sec1 .swiper-slide .txt .tit{margin: 0.625rem 0; font-size: 1.375rem; letter-spacing: -0.02em; font-weight: 700; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.main .sec1 .swiper-slide .txt .desc{font-size: 1.125rem; letter-spacing: -0.02em; font-weight: 500; color: #6d6d6d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.main .sec1 .swiper-slide .txt .date{margin-top: 1.25rem;font-size: 1rem; letter-spacing: -0.02em; color: #8e8e8e; display: block;}
.main .sec1 .control{display: flex; align-items: center; justify-content: space-between; margin-top: 1.875rem;}
.main .sec1 .control .scrollbar{width: 77.5rem; height: 0.125rem; background: #DDD;}
.main .sec1 .control .scrollbar .swiper-scrollbar-drag{background: #000;}
.main .sec1 .control .arrow{display: flex; align-items: center; gap: 0.625rem;}
.main .sec1 .control .arrow div{width: 3.125rem; aspect-ratio: 1/1; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 0.0625rem solid #e3e3e3; cursor: pointer; transition: all 0.3s;}
.main .sec1 .control .arrow div img{filter: invert(1); width: 1.25rem; transition: all 0.3s;}
.main .sec1 .control .arrow div:hover{background: #000; border-color: #000;}
.main .sec1 .control .arrow div:hover img{filter: invert(0);}


/* footer */
.footer{background: #000; padding: 3.875rem 0 3.125rem;}
.footer *{color: #fff;}
.footer .inner{display: flex; justify-content: space-between;}
.footer .ft_left{display: flex; gap:3.125rem;}
.footer .ft_left *{font-size: 1rem; line-height: 1.6; letter-spacing: -0.028125rem;}
.footer .ft_logo{width: 9.375rem;}
.footer .ft_logo img{width: 100%;}
.footer .ft_use{display: flex; gap:1.25rem; align-items: center;}
.footer .ft_use .line{display: inline-block; width: 0.0625rem; height: 0.9375rem; background: #FFF;}
.footer .ft_info{margin-top: 1.5rem;}
.footer .ft_info li + li{margin-top: 0.3125rem;}
.footer .ft_info li span{font-weight: 500; display: inline-block; margin-right: 0.9375rem;}
.footer .ft_info li strong{display: inline-block; margin-right: 0.9375rem;}
.footer .copy{margin-top: 1.25rem;}
.footer .ft_sns{display: flex; justify-content: flex-end; gap:0.625rem; opacity: 0.6;}
.footer .ft_sns a{width: 1.875rem;}
.footer .ft_sns a img{width: 100%;}
.footer .ft_site{margin-top: 2.3125rem; position: relative; width: 11.875rem;}
.footer .ft_site .open{font-size: 0.9375rem; font-weight: 600; padding: 1rem 1.5rem; width: 100%; display: flex; align-items: center; justify-content: space-between; border: 0.0625rem solid #FFF; cursor: pointer;}
.footer .ft_site .open img{width: 0.5625rem; transition: all 0.3s;}
.footer .ft_site.on .open img{transform:rotate(-180deg);}
.footer .ft_site ul{position: absolute; width: 100%; bottom: 3.4375rem; padding: 0.9375rem 1.5rem; background: #000; display: none;}
.footer .ft_site ul li + li{margin-top: 0.9375rem;}
.footer .ft_site ul li a{font-size: 0.875rem; color: #D9D9D9; line-height: 1.7;}
.footer .ft_site ul li a:hover{color: #FFF; text-decoration: underline; text-underline-offset: 0.1875rem;}



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

    .inner {max-width: calc(100% - (2rem * 2));}
    .visual .swiper-slide .vis_txt {max-width: calc(100% - (2rem * 2));}
}

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

    /* 공통 */
    .inner{padding: 0 0.75rem; max-width: 100%;}
    .pc{display:none !important;}
    .mob{display:block !important;}


    /* HEADER */
    .header{height:3.6875rem;}
    .header h1 a img{width: 6.125rem;}
    .header .gnb,
    .header .gnb_2depth_bg{display: none !important;}
    .all_menu_btn{display: none;}
    .head_mob_btn{display:block !important; width: 1.5625rem; cursor: pointer;}
    .header:hover .head_mob_btn img{filter:invert(1);}
    .header.on .head_mob_btn img,
    .header.fixed .head_mob_btn img{filter:invert(1);}
    .header .member{display: none;}

    /* sideMenu */
    .head_bg {position: fixed; right: 0; top: 0; z-index: 10000; width: 100%; height: 100vh;}
    .head_bg.on{display: block !important;}
    .head_bg .head_bg_inner {position: relative; background: #fff; padding-top: 2.9375rem; width: 100%; height: 100%; display: inline-block; text-align: left;}
    .head_bg .head_bg_close {position: absolute; top: 1.0625rem; right: 0.625rem;}
    .head_bg .head_bg_close img {width: 1.4375rem;}
    .head_bg .head_bg_logo a{display: block; text-align: center;}
    .head_bg .head_bg_logo img {width:9.125rem;}
    .head_bg .member{padding: 2.1875rem 1.3125rem 0; display: flex; align-items: center; gap:0.8125rem;}
    .head_bg .member a{font-size: 0.875rem; color: #6D6D6D; line-height: 1.7;}
    .head_bg .member .line{width: 0.0625rem; height: 0.75rem; background: #6D6D6D; display: inline-block;}
    .head_bg #accordion{margin-top: 1.0625rem; overflow-y: auto; max-height: 80%;}
    .head_bg #accordion::-webkit-scrollbar {width: 0.25rem; /* 스크롤바의 너비 */ border-radius:0.3125rem;}
    .head_bg #accordion::-webkit-scrollbar-thumb {height: 30%; /* 스크롤바의 길이 */ background: #878787; /* 스크롤바의 색상 */ border-radius:0.3125rem;}
    .head_bg #accordion::-webkit-scrollbar-track {background: #D9D9D9; /*스크롤바 뒷 배경 색상*/ border-radius:0.3125rem;}
    .head_bg #accordion li > div {position: relative; font-size: 1rem; padding: 1.125rem 1.3125rem; border-bottom: 0.0625rem solid #E3E3E3; cursor: pointer; font-weight: 500;}
    .head_bg #accordion li:first-child > div{border-top: 0.0625rem solid #E3E3E3;}
    .head_bg #accordion li > div::after {content: ""; background: url("/img/main/accordion_arrow.svg") no-repeat center / contain; position: absolute; top: 50%; transform: translateY(-50%); right: 1.3125rem; width: 0.625rem; height: 0.375rem; transition:all 0.3s;}
    .head_bg .submenu {display: none; padding: 1.0625rem 1.3125rem; border-bottom: 0.0625rem solid #E3E3E3; background: #F9F9F9;}
    .head_bg .submenu a {display: block; font-size: 0.875rem; font-weight: 500; color: #8E8E8E; line-height: 2.14;}
    .head_bg .submenu a:hover {text-decoration: underline; text-underline-offset: 0.125rem; text-decoration-thickness: 0.0625rem; color: #003D8B;}
    .head_bg #accordion li.on > div{background: #003D8B; color: #fff; border-color: #003D8B;}
    .head_bg #accordion li.on > div::after {transform: translateY(-50%) rotate(-180deg); filter:invert(1);}


    /* all menu */
    .all_menu{display: none !important;}


    /* visual */
    .visual .swiper-slide{height: 39.6875rem;}
    .visual .swiper-slide .vis_txt{padding: 0 0.75rem; top: 11.0625rem; transform:translateY(0); max-width: 100%;}
    .visual .swiper-slide .vis_txt em{font-size: 0.875rem;}
    .visual .swiper-slide .vis_txt h2{font-size: 2.1875rem; margin-top: 0.9375rem;}
    .visual .swiper-slide .vis_txt p{font-size: 1rem; margin-top: 0.8125rem;}
    .visual .swiper-slide .vis_txt a{font-size: 1rem; letter-spacing: -0.0625rem; padding: 0.625rem 1.25rem 0.5rem 1.8125rem; margin-top: 1.5rem;}
    .visual .swiper-slide .vis_txt a i{width: 1.4375rem; height: 1.4375rem; margin: -0.125rem 0 0 1.5rem;}
    .vis_arrow{display: none;}
    .vis_bt{bottom: 2.125rem; gap:7.9375rem; width: 9.9375rem;}
    .vis_bt .page{font-size: 0.875rem; letter-spacing: -0.0625rem;}
    .vis_bt .scroll{width: 6.125rem;}


    /* quick menu */
    .quick{right: 0.9375rem; bottom: 1.25rem;}
    .quick .top_btn{width: 2.75rem; height: 2.75rem; background-size: 0.8125rem; box-shadow: 0 0.1875rem 0.875rem 0 rgba(100, 100, 111, 0.20);}

    /* common */
    .main_tit{margin-bottom: 1.8125rem;}
    .main_tit em{font-size: 0.75rem;}
    .main_tit .tit{margin: 0.625rem 0 0.9375rem; font-size: 1.5rem;}
    .main_tit p{font-size: 0.875rem;}
    .no_data{height: 14.375rem !important; gap: 1rem;}
    .no_data .icon{width: 1.5rem;}
    .no_data p{font-size: 0.875rem;}

    /* sec1 */
    .main .sec1{padding: 3.6875rem 0;}
    .main .sec1 .swiper{margin: 0 -0.75rem 0 0;}
    .main .sec1 .swiper-slide{margin: 0 1rem 0 0; width: 14.75rem;}
    .main .sec1 .swiper-slide .txt{margin-top: 1.25rem;}
    .main .sec1 .swiper-slide .txt .cate{font-size: 0.75rem;}
    .main .sec1 .swiper-slide .txt .tit{margin: 0.4375rem 0; font-size: 1.25rem;}
    .main .sec1 .swiper-slide .txt .desc{font-size: 0.875rem;}
    .main .sec1 .swiper-slide .txt .date{margin-top: 0.875rem; font-size: 0.75rem;}
    .main .sec1 .control{margin-top: 1.8125rem;}
    .main .sec1 .control .scrollbar{width: 15.3125rem;}
    .main .sec1 .control .arrow{gap: 0.4375rem;}
    .main .sec1 .control .arrow div{width: 2.4375rem;}
    .main .sec1 .control .arrow div img{width: 0.9375rem;}


    /* footer */
    .footer{padding: 3.1875rem 0;}
    .footer .inner{display: block;}
    .footer .ft_left{gap:2.4375rem; flex-direction: column;}
    .footer .ft_left *{font-size: 0.875rem; letter-spacing: 0;}
    .footer .ft_logo{width: 7.875rem;}
    .footer .ft_use{gap:0.875rem;}
    .footer .ft_use .line{height: 0.5625rem;}
    .footer .ft_info{margin-top: 0.75rem;}
    .footer .ft_info li{line-height: 1.7;}
    .footer .ft_info li + li{margin-top: 0;}
    .footer .ft_info li + li span:last-child{margin-top: 0;}
    .footer .ft_info li strong, .footer .ft_info li span{margin-right: 0.4375rem;}
    .footer .copy{margin-top: 0.9375rem;}
    .footer .ft_right{display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; margin-top: 2.9375rem;}
    .footer .ft_sns{gap:0.5rem;}
    .footer .ft_sns a{width: 2rem;}
    .footer .ft_site{margin-top: 0; width: 9.125rem;}
    .footer .ft_site .open{font-size: 0.875rem; padding: 0.625rem 0.875rem;}
    .footer .ft_site .open img{width: 0.5rem;}
    .footer .ft_site ul{bottom: 2.625rem; padding: 0.6875rem 0.875rem;}
    .footer .ft_site ul li + li{margin-top: 0.4375rem;}
    .footer .ft_site ul li a{font-size: 0.875rem;}
    .footer .ft_site ul li a:hover{text-underline-offset: 0.0625rem;}
}