.material-symbols-outlined { position : relative; display : inline-block; top : 4px } 
.material-symbols-outlined.fill { font-variation-settings:
 'FILL' 1,
 'wght' 700,
 'GRAD' 200,
 'opsz' 40 } 




 .header_wrap { width : 100%; align-items: center;     margin: 1px 0px 0px 0px;}
nav {border-bottom : 1px solid #EBEBEB;font-size : 2rem;max-width: 1440px;margin: 0 auto;width: 100%;} 
nav .inner { max-width : 1250px } 
nav a { display: block; } 
nav ul.flex > li { position : relative;  width : 16.66% } 
nav ul.flex > li:hover > ol { display: block; } 
nav ul.flex > li > ol { position: absolute; display: none; width : 180px; background-color : #fff; z-index : 2 } 
nav ul.flex > li > a { text-align: center } 
nav ul.flex > li li a { font-size : 1.6rem } 
nav ul.flex > li > a { display : inline-block; padding : 2rem 0; border-bottom : 2px solid transparent; } 
nav ul.flex > li:hover > a { color: var(--default); border-color : var(--default) } 
nav ol { border-radius : 5px; padding-top : 10px } 
nav ol a { border : 1px solid #ebebeb; padding : 5px 12px; margin-top : -1px } 
nav ol > li:first-child > a,
nav ul.flex ul li:first-child > a { border-radius : 5px 5px 0 0 } 
nav ol > li:last-child > a,
nav ul.flex ul li:last-child > a { border-radius : 0 0 5px 5px } 
nav ol li { position : relative } 
nav ul.flex ul { display : none; position : absolute; top : 0; left : 100%; width : 100% } 
nav ol li:hover > a { background-color : var(--default); color : #fff } 
nav ol li:hover i { color : #fff } 
nav ol li:hover ul { display : block; padding-left : 5px; background-color : #fff } 
nav ol i { position : absolute !important; top : 7px !important; right : 0; padding : 0 5px; font-size : 1.5rem !important } 





#topRolling { background-color: #F8F8F8; padding-right : 50px } 
#topRolling > a { position : absolute; top : 0; right : 0; line-height : 55px; padding : 0 15px } 
#topRolling .inner {display : flex;height : 50px; align-items: baseline; justify-content: space-between; width: 100%;max-width: 1440px;} 
#topRolling .inner > p { flex-shrink: 0; font-size : 15px; font-weight: bold; } 
#topRolling .inner p i { font-size : 2rem } 
#topRolling .swiper { width: 100%; height : 100%; padding : 0 20px; } 
#topRolling .swiper-slide { display: flex; align-items: center; justify-content: space-between; font-size : 14px } 
#topRolling .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } 

header { padding : 20px 70px 20px 20px } 
header .top_search_area input { display : block; border : none; width : 500px; border-radius : 30px; border : 3px solid var(--default) } 
header .top_search_area button { position : absolute; top : 2px; right : 20px; padding : 5px; color : var(--default) } 
header .top_search_area i { font-size : 3rem; font-weight: bold; } 
header button { position : absolute; top : 30px; right : 20px; width : 32px } 
header button span { display : block; height : 3px; background-color : #000; } 
header button span:nth-child(2) { width : 25px; margin : 7px 0 7px 7px; } 
header button:hover span { background-color : var(--default) } 
header button:hover span:nth-child(2) { width : 100%; margin : 7px 0 } 
.header_wrap .header_opt { width : 220px; padding-right : 1rem } 
.header_wrap .header_opt a { display : inline-block; border-radius : 30px; border : 1px solid #000; font-size : 1.2rem; padding : 0 10px; line-height : 30px } 
.header_wrap .header_opt a i { font-size : 1.5rem; margin : 0 2px } 



footer { border-top : 1px solid #D9DBDE } 
footer .footer_top { height : 85px; overflow : hidden } 
footer .footer_top .left a { display : inline-block; line-height : 85px; } 
footer .footer_top .left a:after { content : ''; display : inline-block; width : 1px; height : 20px; background-color : #dfdfdf; margin : 0 20px; position : relative; top : 4px } 
footer .footer_top .left a:last-child:after { display : none } 
footer .footer_top .right { display : flex; width : 420px } 
#footerSlide { position : relative; width : 260px; flex-shrink: 0; height : 85px; padding-left : 20px; border-left : 1px solid #D9DBDE } 
footer .footer_top select { border-top : none; border-bottom : none } 
/* #footerSlide .swiper-slide a { display : block; padding : 2rem } */
#footerSlide .swiper-slide a { display : block; padding : 1.5rem }
#footerSlide .swiper-slide a img { width : 100%; height : auto !important } 
footer .foot_control_wrap { position : absolute; top : 0; left : 0; width : 30px; display : flex; flex-direction: column; align-items: center; justify-content: space-between; height : 100%; border-right : 1px solid #D9DBDE } 
footer .foot_control_wrap * { position : static; } 
.footer_play_control i { color : #777; font-size : 14px } 
.footer_play_control #footPlay { display : block } 
.footer_play_control #footStop { display : none } 
.footer_play_control.active #footPlay { display : none } 
.footer_play_control.active #footStop { display : block } 
#footerSlide .swiper-button-next, 
#footerSlide .swiper-button-prev { margin-top : 0 } 
#footerSlide .swiper-button-next:after, 
#footerSlide .swiper-button-prev:after { font-size : 13px; transform : rotate(-90deg); color : #777 } 

footer .footer_btm { border-top : 1px solid #D9DBDE; background-color : #F8F8F8 } 
footer .footer_btm h1 { width : 250px; flex-shrink: 0; } 
footer .footer_btm p { font-size : 1.5rem; color : #666 } 
footer .footer_btm p + p { margin-top : 1rem } 
footer .footer_btm p br { display : none } 
footer .footer_btm .sns_link { position : absolute; top : 90px; right : 0 } 
footer .footer_btm .sns_link a { display : inline-block; width : 45px; line-height : 45px; background-color : #A0A0A0; border-radius: 100%; text-align : center } 
footer .footer_btm .sns_link a:hover { background-color : #434343 } 
footer .footer_btm .sns_link a img { position : relative; top : -3px } 


.ir_text { display : block; width : 0; height : 0; color : transparent; overflow : hidden } 
.container { max-width : 1440px; margin : 0 auto; padding : 3rem 0 } 
/* .banner__notice-wrap { position : absolute; top : 100px; left : 100px; max-width : 500px; min-width : 200px; background-color : #f1f1f1; z-index : 9 }*/
.banner__notice-wrap { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-height: 90%; max-width: 450px; background-color: #f1f1f1; z-index: 9; overflow-y: auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border-radius: 8px; }
 
.banner__notice-wrap img { display : block; width : 100%; height : auto !important } 
.banner__notice-wrap .banner_mobile { display : none } 

.popup_inner { position : relative; background-color : #000; padding : 8px; font-size : 12px; color : #fff; display : flex; justify-content: space-between; } 
.popup_inner > a { position : absolute } 
.popup_inner .banner__controller button.banner__close { color : #fff; font-size : 12px } 


#sitemapModal { display : none; position : fixed; top : 0; left : 0; width : 100%; height : 100%; overflow : hidden auto; background-color: #0C508E; z-index : 99 } 
.line { border-bottom : 1px solid rgba(255, 255, 255, 0.5) } 
#sitemapModal .inner > h2 { text-align : center; padding : 25px 0; font-size : 32px; color : #fff } 
#sitemapModal .inner > h2 a { position : absolute; top : 10px; right : 0; font-size: 42px; color: #fff; font-weight: 100; } 
#siteMapMenuDiv { display : flex; flex-wrap : wrap; justify-content: flex-start;} 
#siteMapMenuDiv > li { width : 23%; margin : 1% } 
#siteMapMenuDiv .site_sub_ul { display : none }
#siteMapMenuDiv .sitemap_target.active .site_sub_ul { display : block }

#siteMapMenuDiv * { color : #fff } 
#siteMapMenuDiv .sitemap_1depth_title { display : block; width : 100%; font-size : 20px; position : relative; line-height : 55px; background : #00284d;     border-radius: 5px; } 
#siteMapMenuDiv .sitemap_1depth_title span { position : absolute; top : 5px; right : 10px; display : block; color : transparent } 
#siteMapMenuDiv .sitemap_1depth_title span:after { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 24px; 
 line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; 
 color : #fff; } 
 #siteMapMenuDiv .sitemap_1depth_title span { display : none }
 #siteMapMenuDiv .sitemap_1depth_title span.open { display : block }
 #siteMapMenuDiv .sitemap_1depth_title.is-open span.open { display : none }
 #siteMapMenuDiv .sitemap_1depth_title.is-open span.close { display : block }
 #siteMapMenuDiv .sitemap_1depth_title span.close:after { content : '\e15b'; } 
 #siteMapMenuDiv .sitemap_1depth_title span.open:after { content : '\e145'; } 
 #siteMapMenuDiv a { display : block; padding : 10px }
 #siteMapMenuDiv .sitemap_2depth_item { border-top : 1px solid #3e78ad }
 #siteMapMenuDiv .sitemap_2depth_item:first-child { border-top : none }
 #siteMapMenuDiv .sitemap_2depth_item ul { background-color : #2d6ba3; padding : 10px; }
 #siteMapMenuDiv .sitemap_2depth_item i { display : none }
 #siteMapMenuDiv .sitemap_2depth_item ul a { font-size : 14px; padding-left : 15px }
 #siteMapMenuDiv .sitemap_2depth_item ul a:before {content : '';display : inline-block;width: 4px;height: 4px;background-color : #fff;position: relative;top: -3px;margin-right: 10px;border-radius: 100%;}
 #siteMapMenuDiv .sitemap_2depth_item > a { padding : 15px }

.no_img_wrap { position : relative; width : 150px; height : 150px; margin : 0 auto; border-radius : 100%; overflow : hidden }
.no_img_wrap img { position : absolute; top : 50%; left : 50%; transform: translate(-50%, -50%); object-fit: cover; }




@media ( max-width : 1400px ) { 
 .inner { padding-left : 20px !important; padding-right : 20px !important } 
 header .top_search_area input { width : 400px } 
 header .top_search_area button { right : 50px } 
 } 

@media ( max-width : 1200px ) { 
 .main_slide_area .txt_box dl { flex-wrap : wrap; width : 700px } 
 .main_slide_area .txt_box dl dt,
 .main_slide_area .txt_box dl dd { margin : 10px } 
 .main_slide_area .txt_box dl dd:nth-child(3) { width : 100%; margin : 0; } 
 .main_slide_area .txt_box dl dd:last-child { display : none } 
 } 


@media ( max-width : 1024px ) {
    .header_wrap { display : block !important }
 #topRolling .swiper-slide p { display : none } 
 
 
 .mobile_search_btn { position : absolute; top : 50%; transform: translateY(-50%); right : 70px } 
 .mobile_search_btn i { font-size : 30px; font-weight: bold; } 
 header .top_search_area { display : none; position : absolute; top : 100%; left : 0; width: 100%; padding : 3rem; background-color : #fff; z-index : 3; text-align : center; border-top : 1px solid #dbdbdb; border-bottom : 1px solid #dbdbdb; } 
 header .top_search_area.active { display : block } 
 header .top_search_area .inner { position : Relative; max-width : 500px; margin : 0 auto } 
 header .top_search_area .inner input { width : 100% } 

 header { border-bottom : 1px solid #dbdbdb } 
 nav { position : fixed; top : 0; right : -300px; width : 300px; height : 100%; background-color : #fff; z-index : 999 } 
 nav.active { right : 0 } 
 nav .inner { height: 100%; padding : 0 !important; overflow : hidden auto } 
 nav ul { flex-wrap : wrap; flex-direction: column; } 
 nav ul.flex > li { width : 100%; border-bottom : 1px solid #f1f1f1 } 
 nav ul a { display : block !important } 
 nav ul.flex > li > ol,
 nav ul.flex ul { position : static; width : 100%; padding : 0; margin : 0; border-radius : 0 } 
 nav ul.flex ol a,
 nav ul.flex ul a { border-radius : 0 !important; padding : 10px; border : none; border-bottom : 1px solid rgba(255, 255, 255, 0.5) } 
 nav ol li:hover ul { padding : 0; background-color : #0b7a8679 } 
 nav ol li:hover ul a { color : #fff } 
 nav ol li:hover ul a:hover { padding-left : 20px } 

 #openMenu { transition : all .3s ease } 
 #openMenu.active { top : -40px; right : 290px; background-color : var(--default); padding : 10px; width : 45px; height : 45px; z-index : 12 } 
 #openMenu.active span { background-color : #fff } 
 #openMenu.active span:nth-child(2) { display : none } 
 #openMenu.active span:first-child { transform : rotate(45deg) } 
 #openMenu.active span:last-child { position : relative; top : -3px; transform : rotate(-45deg) } 

 header #logoTop { width : 150px } 
 header #logoTop img { width : 100% } 

 .banner__notice-wrap .banner { display : none } 
 .banner__notice-wrap .banner_mobile { display : block } 

 #siteMapMenuDiv > li { width : 48% }
 } 

@media ( max-width : 600px ){
    #siteMapMenuDiv > li { width : 100%; margin : 1% 0 }
}