@charset "utf-8";


/* 모바일 header */
#hd {width: 100%; position: relative;}
.hd_wrap {width: 100%; position: absolute; top: 0; left: 0; z-index: 60; transition: all 0.3s ease;}



@media screen and (max-width: 1510px) {
    .hd_wrap {padding: 0 40px;}
}

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

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

@media screen and (max-width: 1080px) {
    .hd_wrap {display: none;}
}

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

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




/* 메뉴 hover했을 때 변화 */
.hd_wrap.active {background: #fff; transition: none;}
.hd_wrap.active .main_logo_white {position: absolute; opacity: 0;}
.hd_wrap.active .main_logo_black {position: static; opacity: 1;}
.hd_wrap.active #gnb_01 .dep1_list > li > a {color: #000; filter: drop-shadow(0 0 0 transparent);}
.hd_wrap.active .total_search_btn img {filter: brightness(0);}
.hd_wrap.active .pc_menuAll_btn {filter: drop-shadow(0 0 0 transparent);}
.hd_wrap.active .pc_menuAll_btn span {background: #000;}
.hd_wrap.active .hd_top .login_box a  {color: #000;}
.hd_wrap.active .hd_top .login_box a.login_btn {filter: drop-shadow(0 0 0 transparent);}
.hd_wrap.active .hd_top .login_box a.logout_btn {filter: drop-shadow(0 0 0 transparent);}
.hd_wrap.active .hd_top .login_box a.join_btn {filter: drop-shadow(0 0 0 transparent);}


/* 메인에서 fixed 될때 bg변화 */
.hd_wrap.white {background: #fff; position: fixed; top: 0; transition: none;}
.hd_wrap.white .main_logo_white {position: absolute; opacity: 0;}
.hd_wrap.white .main_logo_black {position: static; opacity: 1;}
.hd_wrap.white #gnb_01 .dep1_list > li > a {color: #000;}
.hd_wrap.white .total_search_btn img {filter: brightness(0);}
.hd_wrap.white .pc_menuAll_btn span {background: #000;}
.hd_wrap.white .hd_top .login_box a  {color: #000;}



/* 서브페이지 헤더 */
.hd_wrap.sub {background: #fff; position: relative;}
.hd_wrap.sub .main_logo_white {position: absolute; opacity: 0;}
.hd_wrap.sub .main_logo_black {position: static; opacity: 1;}
.hd_wrap.sub #gnb_01 .dep1_list > li > a {color: #000; filter: drop-shadow(0 0 0 transparent);}
.hd_wrap.sub .total_search_btn img {filter: brightness(0);}
.hd_wrap.sub .pc_menuAll_btn span {background: #000;}
.hd_wrap.sub .hd_top .login_box a  {color: #000;}
.hd_wrap.sub #gnb_01 .dep1_list > li > a {color: #000;}
.hd_wrap.sub .total_search_btn img {filter: brightness(0);}
.hd_wrap.sub .hd_top .login_box a.login_btn {filter: drop-shadow(0 0 0 transparent);}
.hd_wrap.sub .hd_top .login_box a.logout_btn {filter: drop-shadow(0 0 0 transparent);}
.hd_wrap.sub .hd_top .login_box a.join_btn {filter: drop-shadow(0 0 0 transparent);}


/* 헤더 상단 */
.hd_top {display: flex; align-items: center; justify-content: space-between;}
.hd_top .familySite_link_wrap {/*width: 320px;*/width:420px; padding: 10px 5px; background: #035dc3; display: flex; justify-content: center; gap: 15px; border-bottom-right-radius: 8px;}
.hd_top .familySite_link_wrap > li {position: relative;}
.hd_top .familySite_link_wrap > li > a {color: #fff; font-size: 14px;}
.hd_top .familySite_link_wrap > li > a.fm_site_list::after {content: '\25BE'; margin-left: 3px;}
.hd_top .familySite_link_wrap > li ul li {border-bottom: 1px solid #ddd;}
.hd_top .familySite_link_wrap > li ul li:last-of-type {border-bottom: 0;}
.hd_top .familySite_link_wrap > li ul li a {display: block;font-size: 12px;padding: 5px 8px;text-align: center;letter-spacing: -1.5px;word-break: keep-all;}
.hd_top .login_box {display: flex; align-items: center; justify-content: flex-end; gap: 20px;}
.hd_top .login_box a {display: block; font-size: 14px; color: #fff;}
.hd_top .login_box a.login_btn {filter: drop-shadow(0 0 2px #33333365);}
.hd_top .login_box a.logout_btn {filter: drop-shadow(0 0 2px #33333365);}
.hd_top .login_box a.join_btn {filter: drop-shadow(0 0 2px #33333365);}
.hd_top .login_box .sns_list {display: flex; gap: 5px;}
.hd_top .login_box .sns_list a:where(:hover,:focus) {filter: brightness(0.8);}
.hd_top .familySite_link_wrap > li > a.fm_site_list {position: relative;}
.hd_top .familySite_link_wrap > li ul {background: #f1f3f8; position: absolute; display: none; z-index: 5;}

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

 }
 
 @media screen and (max-width: 1240px) {
     
 }
 
 @media screen and (max-width: 1080px) {

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



/* 헤더 하단 */
.hd_bt {display: flex; align-items: center; justify-content: space-between;}
.hd_bt .logo_box {position: relative;}
.hd_bt .logo_box img {transition: opacity 0.3s ease;margin-left:-5px;}
.hd_bt .logo_box img.main_logo_white {filter: drop-shadow(0 0 5px #333333d2);}
.hd_bt .main_logo_black {position: absolute; top: 0; left: 0; opacity: 0;}


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

   .hd_bt .logo_box {padding: 15px 0;}
   .hd_bt .logo_box img {/*width: 250px;*/height:41px;margin-left:-4px;}

}

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

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

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

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


/* PC 메인 메뉴 */
/* pc 검은색 바탕 */
#pc_menu_bg_black {display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(0,0,0, 0.6); z-index: 50;}

/* dep1 */
#gnb_01 {display: flex; align-items: center; gap: 95px;}
#gnb_01 .dep1_list {width: 100%; display: flex; justify-content: flex-end; margin-right: 20px;}
#gnb_01 .dep1_list > li {text-align: center; padding: 18px 30px; display: flex;}
#gnb_01 .dep1_list > li > a {position: relative; display: block; margin-top: 10px; font-family: 'GmarketSans'; font-size: 22px; padding: 20px 0px; color: #fff; line-height: 1.5; filter: drop-shadow(0 0 2px #333333c5);}

/* dep1 hover효과 */
#gnb_01 .dep1_list > li > a::after {content: ''; display: block; width: 0; height: 10px; position: absolute; left: 0; bottom: 25px; z-index: -1; background: rgba(210, 231, 255, 0.8);}
#gnb_01 .dep1_list > li:hover > a::after {width: 100%; transition: width 0.3s;}



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

    #gnb_01 .dep1_list > li {padding: 15px 15px;}
    #gnb_01 .dep1_list > li > a {font-size: 20px;}

}

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

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

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

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

/* dep2 */
#gnb_01 .dep2_list_wrap {width: 100%; border-top: 1px solid #ddd; position: absolute; top: 100%; left: 0; display: flex; background: #fff; text-align: left; border-bottom: 1px solid #ddd; z-index: 30; display: none;}
#gnb_01 .dep2_list_wrap .de2_left_box {width: 540px; background-color:#f6f6f6; background-size: cover; display: flex; flex-direction: column; align-items: flex-end; justify-content: center;}
#gnb_01 .dep2_list_wrap .de2_left_box .lb_con {margin-right: 80px;}
#gnb_01 .dep2_list_wrap .de2_left_box .lb_con p {font-size: 22px; font-weight: 600; margin-bottom: 10px;}
#gnb_01 .dep2_list_wrap .de2_left_box .lb_con span {font-size: 16px; color: #888888;}

#gnb_01 .dep2_list {/* width: calc(100% - 680px); */ width: 64%; padding: 2%  0% 2% 5%; display: flex; flex-wrap: wrap; align-items: center;}
#gnb_01 .dep2_list li {width: 30%; height: 45px; text-align: left; border: 1px solid #ddd; margin: 8px 12px; display: flex; align-items: center; justify-content: space-between;}
#gnb_01 .dep2_list li a {display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 5px 10px;}
#gnb_01 .dep2_list li a::after {content: '\002B'; font-size: 25px; color: #888888;}
#gnb_01 .dep2_list li a:hover {color: var(--com-main-color01);}

/* 0726 */
#gnb_01 .dep2_list li a[target=_blank] {background: url(/home/site/east/2023/img/icon/icon_link_btn.png) right 10px center no-repeat;}
#gnb_01 .dep2_list li a[target=_blank]::after {content: none;}
/* 0726 */



@media screen and (max-width: 1400px) {
    #gnb_01 .dep2_list_wrap .de2_left_box {width: 30%;}
    #gnb_01 .dep2_list {width: 70%; padding: 2%  0% 2% 1%;}
    #gnb_01 .dep1_list > li > a {padding: 15px 0;}

}

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

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

}

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

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



/* 통합검색 버튼 사이트맵 메뉴 */
.ect_box {display: flex; gap: 25px; align-items: center;}
.ect_box .total_search_btn img {transition: all 0.3s ease; filter: drop-shadow(0 0 2px #33333373);}
.pc_menuAll_btn {width: 30px; height: 25px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; filter: drop-shadow(0 0 2px #33333373);}
.pc_menuAll_btn span {display: block; height: 2px; background: #fff; transition: all 0.3s ease;}
.pc_menuAll_btn span:first-of-type, .pc_menuAll_btn span:last-of-type {width: 100%;}
.pc_menuAll_btn span:nth-of-type(2) {width: 80%;}
.pc_menuAll_btn:hover span:nth-of-type(2) {width: 100%; transition: 0.3s;}


@media screen and (max-width: 1080px) {
    .pc_menuAll_btn {width: 25px; height: 20px;}
    .pc_menuAll_btn span {background: #333; height: 3px;}
    
    .ect_box {gap: 10px;}
}


/* 통합검색 */
.total_search_box {opacity: 0; position: absolute; top: 100%; left: 0; z-index: 10; padding: 3% 0; background: #243f5e; width: 100%; margin: 0px auto; display: flex; align-items: center; justify-content: center; display: none; box-shadow: 0 10px 20px #11111194;} /* 1005 */
.total_search_box.active {display: flex; opacity: 1;  z-index: 100;} /* 1005 */
.total_search_box form {width: 870px; margin: 0px auto;}
.total_srchBox {width: 100%; padding: 10px; border-radius: 50px; background: #fff; display: flex; gap: 10px; align-items: center; justify-content: center;}
.total_srchBox label.total_tl {font-size: 18px; font-weight: 600;}
.total_srchBox input[type='text'] {width: 80%; border: 0px;}
.total_srchBox button.srchBtn {width: 30px; height: 30px; background: url(/home/site/east/2023/img/sub/searchBtn.png) no-repeat center center; background-size: cover;}

/* 통합검색창 닫기버튼 */
.srcBox_closeBtn {position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); font-size: 25px; font-weight: 900; color: #243d5e; background: #fff; width: 50px; height: 50px; border-radius: 50%; box-shadow: 0 10px 20px #1111115d;} /* 1005 */
.srcBox_closeBtn:hover {color: #979797;} /* 1005 */

@media screen and (max-width: 1400px) {
    .total_search_box form {width: 700px;}
    .total_srchBox {padding: 5px;}
    .total_srchBox label.total_tl {font-size: 16px;}
    .total_srchBox button.srchBtn {width: 25px; height: 25px;}
}

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

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

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

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




/* 팝업오픈 버튼 서브페이지에서 삭제 */
@media screen and (max-width: 1750px) {
    .top_slide_open_btn.sub {display: none;}
  
  }




/* 푸터 footer */
#ft {width: 100%; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; border-top: 1px solid #ddd;}

/* 푸터 상단 */
#ft .ft_top {width: 100%; border-bottom: 1px solid #ddd;}
#ft .ft_top_inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }

/* 이용안내 등 리스트 */
#ft .ft_top_lb {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 30px; padding: 12px 20px;}
#ft .ft_top_lb li a {display: block; font-weight: 600;}
#ft .ft_top_lb li a:hover {color: #0065b5;}

/* 관련사이트 */
#ft .ft_top_rb {position: relative; width: 260px; border-left: 1px solid #ddd; border-right: 1px solid #ddd;}
#ft .ft_top_rb > li {padding: 12px 20px; width: 100%; display: flex; align-items: center; justify-content: space-between; cursor: pointer;} /* 0720 */
#ft .ft_top_rb > li i {font-weight: 600;}
.related_site_list {height: 500px; overflow-y: auto; width: 100%; position: absolute; bottom: 100%; left: 0; display: none; z-index: 10;}
.related_site_list li {width: 100%; border: 1px solid #ddd; border-bottom: 0; background: #fff;}
.related_site_list li:hover {background: #f4f4f5;} /* 0720 */
.related_site_list li:last-of-type {border-bottom: 1px solid #ddd;}
.related_site_list li a {display: block; padding: 10px;}
#ft .ft_top_rb > li.active i {transform: rotate(180deg); transition: 0.3s;}
.related_site_list::-webkit-scrollbar {width: 7px;}
.related_site_list::-webkit-scrollbar-thumb { background: #c0c0c0; border-radius: 20px;}
.related_site_list::-webkit-scrollbar-track { background: #fff;}

/* 푸터 하단 */
#ft .ft_bt {display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 3% 0;}

/* 푸터 로고 */
.ft_bt .logo_box img {/*filter: grayscale(1) brightness(1.14); width: 265px; width:261px;*/margin: 0;} /* 0721 */

/* 주소 및 저작권 */
#ft .ft_bt p {display: block; width: 70%; font-size: 15px; line-height: 1.6;} /* 0720 */
#ft .ft_bt p span > span {font-weight: 600; margin-left: 8px;} /* 0721 */
#ft .ft_bt p span.copyright {display: block; font-weight: 400; color: #888888;}




@media screen and (max-width: 1510px) {
    #ft .ft_top_lb {margin-left: 20px;} /* 0720 */

    #ft .ft_bt {padding: 30px 15px;}
}

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

    .ft_bt .logo_box {padding: 15px 0;}
    .ft_bt .logo_box img {/*width: 250px;*/}
 
 }
 
 @media screen and (max-width: 1240px) {
     
 }
 
 @media screen and (max-width: 1080px) {
    #ft .ft_top_lb {gap: 15px; padding: 8px 0;}
     
    #ft .ft_bt {display: flex; flex-direction: column-reverse;}
    .ft_bt .logo_box {padding:0;}
    .ft_bt .logo_box img {/* width: 200px;*/height:23px;}
    #ft .ft_bt p {width: 90%; text-align: center;}
    #ft .ft_bt p > span {display: block;} /* 0720 */
   
    .related_site_list {height: 200px;}
    
}

@media screen and (max-width: 768px) {
    
    #ft .ft_top_inner {flex-direction: column-reverse;}
    #ft .ft_top_lb {width: 100%; margin-left: 0;}
    #ft .ft_top_lb li a {padding: 5px; font-size: 14px;}
    
    #ft .ft_top_rb {width: 100%; border: 0px; border-bottom: 1px solid #ddd;}
    #ft .ft_top_rb > li {font-size: 14px; padding: 10px 20px;} /* 0720 */
    .related_site_list li {border: none; border-top: 1px solid #ddd;} /* 0720 */
    .related_site_list li a {padding: 10px 20px;} /* 0720 */

    #ft .ft_bt p {font-size: 13px;}

 }
 
 @media screen and (max-width: 480px) {
    #ft .ft_top_lb {width: 100%; gap: 0;}
    #ft .ft_top_lb li {width: 50%; text-align: center;}

    #ft .ft_top_rb > li {font-size: 14px;}

    #ft .ft_bt p span > span {margin-left: 3px;} /* 0720 */

 }




/* 모바일 *********************************************************************************************/
/* 모바일 헤더 header */
.mobile_hd {width: 100%; padding: 20px 15px; background: #fff; display: flex; align-items: center; justify-content: space-between; display: none;}
.mobile_hd .logo_box {display: block;}

.mob_menu_toggle_btn {width: 30px; height: 25px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;}
.mob_menu_toggle_btn span {display: block; height: 3px; background: #000;}
.mob_menu_toggle_btn span {width: 100%;}


@media screen and (max-width: 1400px) {
    .mobile_hd .logo_box img {/*width: 250px;*/height:41px;}
}

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

@media screen and (max-width: 1080px) {
    .mobile_hd {display: flex;}
    .mobile_hd .logo_box img {/*width: 200px;*/height:32px;}
}

@media screen and (max-width: 768px) {
    .mob_menu_toggle_btn {width: 25px; height: 20px;}
}

@media screen and (max-width: 480px) {
    .mobile_hd {padding: 15px;}
    .mobile_hd .logo_box img {/*width: 150px;*/margin-left:-2px;}
}



/* 모바일 메뉴 */
#mob_gnb_bg_black {opacity: 0; z-index: 190; pointer-events: none; transition: opacity 0.5s var(--timing-function-easInOutQuad); width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); position: fixed; top: 0; left: 0;}
#mob_gnb_bg_black.active {display: none; opacity: 1; pointer-events: auto;}
#mob_gnb {width: min(90vw, 400px); height: 100%; transition: right 0.5s var(--timing-function-easInOutQuad); position: fixed; right: calc(0px - min(90vw, 400px)); top: 0; z-index: 200; background-color: #fff;}
#mob_gnb {background: #2f6aad;}
#mob_gnb.active {display: none; right: 0;}

.mob_gnb_hd {width: 100%; display: flex; flex-direction: column; align-items: flex-end; background: #fafbfd;}
.mob_gnb_hd .login_box {width: 100%; display: flex; border-top: 1px solid #fff; background: #2f6aad;}
.mob_gnb_hd .login_box a {display: block; width: 50%; text-align: center; padding: 10px 0px; color: #fff;}
.mob_gnb_hd .login_box a:first-of-type {border-right: 1px solid rgba(255, 255, 255, 0.5);}
.mob_gnb_hd .login_box a:hover {background: #6f8cad;}
.mob_gnb_hd .sns_list {width: 100%; display: flex; justify-content: space-evenly; padding: 10px; gap: 5px; background-color: #ddedff; border-top: 1px solid #c0d1e4;}
.mob_gnb_hd .sns_list a:where(:hover, :focus) {filter: brightness(0.8);}
.mob_gnb_close_btn {font-size: 30px; padding: 10px; color: #2f6aad;}

#mob_gnb .dep1_list {position: relative;}
#mob_gnb .dep1_list > li > a {display: block; width: 35%; padding: 10px 0; text-align: center;}
#mob_gnb .dep1 {color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.5);}
#mob_gnb .dep1.active {background: #fafbfd; color:var(--com-main-color01); font-weight: 600;}


#mob_gnb .dep2_list {background: #fafbfd; width: 65%; height: 100vh; position: absolute; right: 0; top: 0; z-index: 10; display: flex; flex-flow: column nowrap; display: none; padding-left: 3px;} /* 0720 */
#mob_gnb .dep2 {display: block; width: 100%; font-size: 15px;}
#mob_gnb .dep2_list.active {display: flex;}


#mob_gnb .dep2_list li a {border-bottom: 1px solid#ddd;}

#mob_gnb .dep2 {display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 16px;} /* 0720 */
#mob_gnb .dep2.active {color: #035dc3; font-weight: 600;}
#mob_gnb .dep2.active i {transform: rotate(180deg); transition: 0.3s; color: #035dc3; font-weight: 600;}

#mob_gnb .dep3_list {display: none; background: #f3f5f7;}
#mob_gnb .dep3_list li a {display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; font-size: 14px;} /* 1004 */
#mob_gnb .dep3_list li a:hover {color: #0a56ad; background: #ebedf0;}

/* 1004 */
#mob_gnb .dep3.active {color: #0a56ad; background: #ebedf0;}
#mob_gnb .dep3.active i {transform: rotate(180deg); transition: 0.3s; color: #035dc3;}
#mob_gnb .dep4_list {display: none; background: #e5e6e9;}
#mob_gnb .dep4_list li a {display: block; padding: 10px 16px; font-size: 13px;}
#mob_gnb .dep4_list li a:hover {color: #0a56ad; background: #eaebec;}
/* 1004 */

@media screen and (max-width: 1080px) {
    #mob_gnb_bg_black.active {display: block;}
    #mob_gnb.active {display: block;}
}

@media screen and (max-width: 480px) {
    .mob_gnb_hd .login_box a {font-size: 14px;}

    #mob_gnb .dep1 {font-size: 14px;}
    #mob_gnb .dep2 {font-size: 14px;}
}


/* 사이트 링크 슬라이드 */
.ft_bar {border-top: 1px solid #ddd;}
.site_link_wrap {display: flex; align-items: center; justify-content: space-between; padding: 20px 0;}
.site_link_slide_btn_box {width: 90px;}
.site_link_slide {width: calc(100% - 100px);}
.site_link_slide ul li {width: 200px;}
.site_link_slide ul li a {display: block; width: 100%; height: 100%;}
.site_link_slide ul li a:hover img {filter: grayscale(0.8);}

.site_link_slide_btn_box {display: flex; align-items: center; justify-content: flex-start;}
.site_link_slide_btn_box button {width: 30px; height: 30px; border: 1px solid #ddd;}
.site_link_slide_btn_box button.main_slide_play {display: none;}
.site_link_slide_btn_box button.main_slide_play, .site_link_slide_btn_box button.main_slide_pause {border-left: 0; border-right: 0;}
.site_link_slide_btn_box button:hover {color: #3992ff; font-weight: 600;}



@media screen and (max-width: 1510px) {
  .site_link_wrap {padding: 15px 20px;}
    
}






/* 0921 사이트 링크 배너 이미지 조절 */
@media screen and (max-width: 360px) {
    .site_link_slide ul li a img {width: 135px;}
    
}
/* 0921 사이트 링크 배너 이미지 조절 끝 */