@import url('reset.css'); 

body { padding-top : 137px } 
body.active { padding-top : 91px }
body.active .navLinkBar { display : none !important }
body.active header nav div#topGmb.active > ul:after, 
body.active header nav div#topGmb > ul:hover:after, 
body.active header nav div#topGmb > ul.active:after { top : 91px }
.skip_menu a { overflow: hidden; display: block; position: absolute; top: 0; left: 0; width: 1px; height: 1px; background: #000; color: #fff; text-align: center; transition: none; z-index: 101; } 
.skip_menu a:focus,
.skip_menu a:active { position: relative; width: 100%; height: auto; padding: 10px; color: #fff; } 

.inner { max-width : 1470px; margin : 0 auto; padding : 0 15px } 
.relative { position : relative } 
.transition { transition: all .3s ease; } 
.tabcontent { display : none } 
.tabcontent:first-child { display : block } 
.hidden { display : block; opacity : 0; width : 0; height : 0; overflow : hidden } 
.overflow { overflow : hidden } 
.center { text-align : center !important } 
.flex { display : flex } 
.absr { position : absolute; top : 0; right : 0 } 

header { position : fixed; top : 0; left : 0; width : 100%; z-index : 12; background-color : #f2fbc1; padding : 0 15px; border-bottom : 1px solid #000F41 } 
header.rm { top : 0; transform : inherit } 
header nav { position : relative; width : 100%; max-width: 1700px; margin: 0 auto; padding : 0 150px } 
header #logo a { position : absolute; top : 0; left : 0; width : 190px; height : 100%; background : url('../img/common/logo_top.png') no-repeat top 20px left / 150px auto } 
header #headerSeachWrap { height : 90px; align-items: center; } 
header #headerSeachWrap a { display : inline-block; line-height: 60px; margin-left : 15px } 

header nav div#topGmb > ul { width : 100%; display : flex; align-items: flex-start; justify-content: center } 
header nav div#topGmb.active > ul:after,
header nav div#topGmb > ul:hover:after,
header nav div#topGmb > ul.active:after { content : ''; width : 100%; height : 1px; background-color : #eee; position :fixed; top : 80px; left : 0 } 
header nav div#topGmb { display : flex; align-items: flex-start; justify-content: center; overflow : hidden } 
header nav div#topGmb > ul { display : flex; align-items: flex-start; justify-content: center; overflow : hidden } 
header nav div#topGmb.active > ul:after,
header nav div#topGmb > ul:hover:after,
header nav div#topGmb > ul.active:after { content : ''; width : 100%; height : 1px; background-color : #000f41; position :fixed; top : 136px; left : 0 } 
header nav div#topGmb.active > ul ul,
header nav div#topGmb > ul:hover ul,
header nav div#topGmb > ul.active ul { display : block } 
header nav div#topGmb > ul > li { width : 25% } 
header nav div#topGmb > ul ul a { position : relative; display : block; padding : 5px 0 } 
header nav div#topGmb > ul > li > a { display : block; position : relative; font-size : 20px; line-height : 90px; text-align : center } 
header nav div#topGmb > ul > li:hover > a { color : #000F41 } 

header nav div#topGmb > ul ul { display : none; padding: 10px 0; height: 240px; } 
header nav div#topGmb > li:last-child ul { border-right: 1px solid #eee } 
header nav ul ul a { position : relative; text-align : center } 
header nav a:hover { text-decoration: underline; } 
header nav ul ul a span { position : relative; display : inline-block; background-color : #fff; padding : 5px; font-size : 16px; border-bottom : 1px solid transparent; z-index : 2 } 
header nav ul ul a:hover span { border-bottom : 1px solid #000 } 

#topSearchPanel { position : absolute; width : 100%; top : 137px; left : 0; background-color: #000f41; height : 0; opacity : 0; overflow : hidden; transition : all .3s ease } 
body.active #topSearchPanel { top : 90px }
#topSearchPanel.active { height : auto; opacity : 1; } 
.search_warp { max-width : 600px; margin : 0 auto; padding : 40px 0 } 
.search_warp p { border : 2px solid #fff; border-radius: 5px; padding : 0 25px } 
.search_warp p input { line-height : 70px; border : none; background : none; color : #fff } 
.search_warp p input::placeholder { font-size : 20px; color : #fff } 
.search_warp p button { width : 60px } 
.search_warp > a { display : inline-block; padding : 0 8px } 
#showTopSearchPanel { position : relative; top : 2px; width : 60px; height : 60px; background : #000F41 url('../img/common/ic_search_btn.png') no-repeat center center; border-radius : 5px } 
#topSearchPanel > p { text-align : center; font-size : 20px; color : #fff; padding : 0 0 30px 0 } 
#topSearchPanel > p span,
#topSearchPanel > p u { color : #F2FBC1; font-size : 20px; font-weight: bold; } 

.navLinkBar {background: #e1e9b5;margin: 0 -20px;}
.navLinkBar .inner { max-width : 1700px; margin : 0 auto; text-align: right;padding : 9px 10px }
.navLinkBar .inner a { position : relative; display : inline-block;font-size : 16px;color: #555;}
.navLinkBar .inner a:after { content : ''; display : inline-block; width : 1px; height : 9px; background-color : #BFBFBF; margin : 0 15px }
.navLinkBar .inner a:last-child:after { display : none }

.mobile_nav { display : none; position : absolute; padding : 10px; top : 23px; right : 10px; width : 41px; height : 38px; flex-direction: column; justify-content: space-between; } 
.mobile_nav span { width : 100%; height : 2px; background : #000; align-self: flex-end; } 
.mobile_close_btn { display : none; position : fixed; width : 50px; height : 50px; top : 0; right : -300px; background : #000F41; z-index: 9; opacity : 0 } 
header.mobile nav div#topGmb > ul > li:hover > a { color : #000F41 } 
header.mobile nav div#topGmb a:hover { color : #000F41 } 
header.mobile nav div#topGmb > ul ul a { padding : 15px; font-size : 16px } 
.mobile_close_btn.active { right : 300px; opacity : 1 } 
.mobile_close_btn span { display : block; position : absolute; width : 30px; height : 2px; top : 24px; left : 10px; background-color: #fff; } 
.mobile_close_btn span:first-child { transform : rotate(45deg) } 
.mobile_close_btn span:last-child { transform : rotate(-45deg) } 

header.mobile.active { top : 0; transform : inherit } 
header.mobile #logo { background-size : 120px auto; width : 140px } 
header.mobile #headerSeachWrap { right : 55px } 
header.mobile #headerSeachWrap #showTopSearchPanel { background-color : #000F41; width : 50px; height : 50px; background-size : 30px auto } 
header.mobile .mobile_nav { display : flex; cursor : pointer } 
header.mobile nav div#topGmb.active {display : block !important } 
header.mobile nav div#topGmb > ul { position : fixed; display : block; top : 0; right : -300px; width : 300px; height : 100%; background-color :#fff; z-index : 10; border-left : 1px solid #eee; opacity : 0; z-index : 99 } 
header.mobile nav div#topGmb.active > ul { right : 0; opacity : 1 } 
header.mobile nav:before { content : ''; position : fixed; display : none; top : 0; left : 0; width : 100%; height : 100%; background-color : rgba(0, 0, 0, 0.5); opacity : 0 } 
header.mobile nav.active:before { display : block; opacity : 1; z-index : 1 } 
header.mobile nav div#topGmb > ul > li { display : block; width : 100% } 
header.mobile ul ul { height : 0 } 
header.mobile nav div#topGmb > ul:hover ol { display : none; height : 0; overflow : hidden } 
header.mobile nav div#topGmb > ul:hover:after { display : none } 
header.mobile nav a { text-align : left !important; padding : 5px 25px } 

header.mobile nav div#topGmb > ul > li > a { line-height : 55px } 
header.mobile nav div#topGmb > ul > li > a:before { display : none } 
header.mobile nav div#topGmb > ul > li > a:after { content:''; background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8.5' y1='2.18557e-08' x2='8.5' y2='16' stroke='%23DDDDDD'/%3E%3Cline x1='16' y1='7.5' x2='-4.37114e-08' y2='7.5' stroke='%23DDDDDD'/%3E%3C/svg%3E%0A"); width:16px; height: 16px; background-repeat: no-repeat; background-position: 50%; display:inline-block; position: absolute; right: 26px; top: 50%; margin-top: -8px; background-color : #fff } 
header.mobile nav div#topGmb > ul > li > a.active:after,
header.mobile nav div#topGmb > ul > li:hover > a:after { background-image: url("data:image/svg+xml,%3Csvg width='16' height='1' viewBox='0 0 16 1' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='16' y1='0.5' x2='-4.37114e-08' y2='0.499999' stroke='%23DDDDDD'/%3E%3C/svg%3E%0A"); } 
header.mobile nav div#topGmb > ul > li >a { border-bottom : 2px solid transparent } 
header.mobile nav div#topGmb > ul > li:hover > a { border-bottom : 2px solid #000F41 } 
header.mobile nav div#topGmb > ul > li { border-bottom : 1px solid #eee } 
header.mobile nav div#topGmb > ul > li.active > ul,
header.mobile nav div#topGmb > ul > li:hover > ul { display : none; height : auto; padding : 0 } 


header.mobile nav div#topGmb > ul:hover ul,
header.mobile nav div#topGmb > ul.active ul { position : static } 
header.mobile nav div#topGmb > ul:hover:before,
header.mobile nav div#topGmb > ul.active:before { display: none; } 

header.mobile nav ul ul { display : none !important; padding : 0; background-color : #f9f9f9 } 
header.mobile nav div#topGmb > ul > li:hover ul { display : block !important }
header.mobile nav ul ul a { padding : 10px 0 } 
header.mobile nav ul ul a:before,
header.mobile nav ul ul a:after { display : none } 
header.mobile ul ul span { background : transparent } 
header.mobile nav ul ul li { border-bottom : 1px solid #ddd } 
header.mobile nav div#topGmb > ul:hover ul { display : none } 
header.mobile nav div#topGmb > ul > li:hover ul { display : block } 


header.mobile nav div#topGmb.active > ul:after,
header.mobile nav div#topGmb > ul:hover:after,
header.mobile nav div#topGmb > ul.active:after { display : none } 



.btn { display : inline-block; border-radius : 5px; text-align : center } 
.btn_border { border-radius :30px !important } 
.btn_xs { padding : 5px 15px; font-size : 14px } 
.btn_md { padding : 5px 15px; font-size : 16px } 
.btn_white { border : 1px solid #fff !important; color : #fff !important } 
.btn_default { color : #F2FBC1; border : 1px solid #F2FBC1; } 
.btn_inset { color : #000F41; background-color: #f2fbc1; } 
.btn_inset:hover { color : #f2fbc1; background-color : #000F41 } 
.btn_black { color : #000F41; border : 1px solid #000F41 } 
.btn_black:hover { color : #f2fbc1; background-color: #000F41; } 
.btn_black_bg { background: #000F41; color : #f2fbc1 } 
.more_btn { width : 130px; line-height : 60px } 
.list_btn { width : 130px; line-height : 50px } 

.container { position : relative; max-width : 1500px; margin : 0 auto; padding : 0 20px } 

.ellipsis { text-overflow : ellipsis; white-space: nowrap; overflow : hidden } 
.multiline { text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical } 

.center { text-align: center; } 
.mg0 { margin : 0 !important } 
.mgt10 { margin-top : 10px !important } 
.mgt20 { margin-top : 20px !important } 
.mgt30 { margin-top : 30px !important } 
.mgt40 { margin-top : 40px !important } 
.mgt50 { margin-top : 50px !important } 
.mgt60 { margin-top : 60px !important } 
.mgt70 { margin-top : 70px !important } 
.mgt80 { margin-top : 80px !important } 
.mgt90 { margin-top : 90px !important } 
.mgt100 { margin-top : 100px !important } 


footer { margin-top : 100px } 
.footer_top { border-top : 1px solid #000F41 } 
.footer_btm { background-color : #000F41; padding : 50px 0 } 
footer ul { display : inline-block } 
footer ul li { display : inline-block } 
footer ul li a { color : #2B2B2B; padding : 30px; font-weight: bold; } 
footer ul li:last-child a { padding-right : 0 } 
footer .btm { position : relative; font-size : 16px; margin-top : 50px; line-height : 200%; color : #fff } 
footer .btm a { display : inline-block } 
footer .btm a:first-child { margin-right : 20px } 


.bbs_paging { margin : 80px 0; text-align : center; display : flex; justify-content: center; align-items: center; } 
.paginate_input_wrap { display : flex; height : 40px; align-items: center; font-size : 20px; color : #787B6A } 
.paginate_input_wrap input { display : inline-block; width : 60px; line-height : 40px; text-align: center; border : 1px solid #ccc; font-size : 18px } 
.paginate_input_wrap * { margin : 0 10px } 
.bbs_paging a.paging_btn { margin : 0 20px } 
.bbs_paging a.paging_btn img { opacity: 0.5; } 
.bbs_paging a.paging_btn:hover img { opacity: 1; } 

.tab_content { display : none; padding-bottom : 100px } 
.tab_content.active { display : block } 
.font { font-family: "Cormorant Garamond", serif; } 
.katSiteMap { background : url('../img/common/bg_sitemap.png') no-repeat center center / cover; width : 100%; max-width : 100%; line-height : 180px; font-size : 44px !important; font-family: "Pretendard", "Malgun Gothic", "맑은고딕", "돋움", dotum, Helvetica, sans-serif !important; color : #fff !important; text-align : center; font-weight: bold; letter-spacing: 0 !important; } 

.sitemap_wrap > ul { display : flex; width : 100%; max-width : 1440px; margin : 0 auto; border-left : 1px solid #000F41; border-right : 1px solid #000f41; justify-content: space-between; align-items: stretch; } 
.sitemap_wrap > ul > li { width : 25%; text-align : center; border-left : 1px dotted #000F41; padding-bottom : 50px } 
.sitemap_wrap > ul > li:first-child { border-left : none } 
.sitemap_wrap > ul ul li { font-size : 20px; padding : 20px 0 } 
.sitemap_wrap button { display : block; font-size : 44px; font-family: "Cormorant Garamond", serif; padding : 20px 0; } 
.sitemap_wrap button span { display : none; } 
.katSiteMapFooter { margin-top : 0 } 


#section04 { margin : 100px 0 } 
#section04 .calendar_wrap { display : flex; justify-content: space-between; } 
#section04 .left,
#section04 .right { width : 48% } 


#section04 .calendar_head { position : relative } 
#section04 .calendar_head h2 { font-size : 32px } 
#section04 .calendar_head img { width : 40px; filter: brightness(0) saturate(100%) } 
#section04 .calendar_head .prevDay { margin-right : 20px } 

#section04 .calendar_data_head { border-radius : 5px; overflow : hidden } 
#section04 .calendar_data_head div { background: #000F41; color: #F2FBC1; text-align: center; line-height : 80px; font-size : 24px } 
#section04 .grid { display: grid; grid-template-columns: repeat(7, 1fr) } 
#section04 #calData div { display : flex; align-items: center; color: #222; font-weight: bold; height : 80px; text-align : center; position : relative } 
#section04 #calData div p { position : absolute; bottom : -5px; left : 0; width : 100%; text-align : center }
#section04 #calData div p i { display : inline-block; width : 10px; height : 10px; border-radius : 100% }
#section04 #calData div p i + i { margin-left : 3px }
#section04 #calData div p i.blue_bullet { background-color : #606AFF }
#section04 #calData div p i.green_bullet {background-color: #1c944e;}
#section04 #calData div p i.red_bullet {background-color: #a30000;}


#section04 #calData a { display : block; margin : 0 auto; width : 45px; line-height : 45px; } 
#section04 #calData div:nth-child(1) a,
#section04 #calData div:nth-child(7n) a,
#section04 #calData div:nth-child(7n) + div a { color : #C41212 } 
#section04 .today_count { width : 45px; line-height : 45px; background-color : #000F41; color : #fff; border-radius : 100%; text-align : center } 
#section04 .cal_btn { border-bottom : 2px solid transparent } 
#section04 .cal_btn.active { border-bottom : 2px solid #000F41 } 
#section04 .today_count.active { border-radius : 0; background : none; color : #121212 } 
#section04 #calendarInfoTxt { height : 500px; overflow : auto; border-top : 1px solid #000F41; font-size : 18px; color : #333333; padding-bottom : 1px } 
#section04 #calendarInfoTxt li a { display : block; border-bottom : 1px solid #000F41; padding : 15px 20px } 
#section04 #calendarInfoTxt li span { display : inline-block; font-size : 20px } 
#section04 #calendarInfoTxt li span:before { content : ''; width : 10px; height : 10px; border-radius : 100%; background-color: #1c944e; display : inline-block; margin-right : 10px; position : relative; top : -2px }
#section04 #calendarInfoTxt li.green_bullet span:before { background-color: #1c944e;}
#section04 #calendarInfoTxt li.red_bullet span:before { background-color: #a30000;}
#section04 #calendarInfoTxt li.blue_bullet span:before { background-color: #606AFF;}
#section04 #calendarInfoTxt h2 { font-size : 24px; margin : 8px 0; color : #101010; line-height : 130% } 










@media ( max-width : 1300px ) { 
footer ul li a { 
padding: 20px
 } 
 .footer_btm { padding : 30px 0 } 

footer .btm { 
font-size: 16px; 
padding-right: 200px
 } 
 } 

 @media ( max-width : 1200px ){
    .more_btn { width : 110px; line-height : 50px }
 }

@media ( max-width : 1100px ) { 
   body { padding-top : 126px }
 .mobile_close_btn { display : block } 
 header #logo img { width : 120px; height : auto !important } 
 header nav { padding : 10px; height : 80px } 
 .mobile_nav { display : flex } 
 #topSearchPanel.active { position : absolute; top : 125px; border-top : 1px solid #eee } 
 body.active #topSearchPanel.active{ top : 80px }
 header #headerSeachWrap > div { margin : 0; padding : 0 } 
 header.mobile nav a { padding : 5px 10px; transition: none; } 
 #mainSearchTop .search_warp>a { font-size: 16px !important; } 
 header #headerSeachWrap select { display : none } 
 } 

@media ( max-width : 900px ) { 
 .search_warp p input { line-height : 60px } 
 #topSearchPanel.active { height : auto } 
 #topSearchPanel .search_warp p input::placeholder { font-size : 17px } 
 header #headerSeachWrap > div.top_lang_wrap { display : none } 
 header .mypage_icon img { margin-top : 10px } 

footer .absl,
footer .absr,
footer .absl a,
footer .btm { 
 position: inherit; 
 text-align: center; 
 width: 100%; 
 } 

footer .absl a { 
 padding: 20px
 } 

footer .btm { 
 padding: 0
 } 
footer .btm .absr { display : none } 
.tab_content { padding : 0 20px }
 } 

@media ( max-width : 600px ) { 
 #topSearchPanel .search_warp { width : 85% } 
 .search_warp p input { line-height : 55px } 
 .search_warp > a { font-size : 15px } 
 }