@charset "utf-8"; #wrap{ }
 .group:after {clear: none; content: ""; display: block; height: 0; visibility: hidden;}
 .inner { width: 1400px; margin:0 auto;}
 #header {width:100%;height: 164px; position:relative;}
 #header .inner {width:1400px; margin:0 auto;}
 #header .header_top { border-bottom: 1px solid #ebeeef;}
 #header .header_top { height:58px;}
 #header .header_top ul { margin-top:14px;}
 #header .header_top ul > li { float:left;}
 #header .header_top ul > li > a { color:#000; display: inline-block}
 #header .header_top ul > li > a:hover{ color: #4484c7;}
 #header .header_top ul.left_link { float:left; margin-top: 21px;}
 #header .header_top ul.left_link li { margin-right:13px;}
 #header .header_top ul.left_link li a:before{content: ''; display: inline-block; vertical-align: middle; width: 1px; height: 10px; background-color: #eaeaeb; margin-right: 13px;}
 #header .header_top ul.left_link li:first-child a:before{content: none;}
 #header .header_top ul.right_link { float:right;}
 #header .header_top ul.right_link li{margin-right: 5px;}
 #header .header_top ul.right_link li:last-child{ margin-right: 0;}
 #header .header_top ul.right_link li a{display: inline-block; background: url("/images/mayor2/common/layout_sp_2022.png?build_20250706001") 0 -72px no-repeat; text-indent: -99999px; width: 31px; height: 31px;}
 #header .header_top ul.right_link .facebook a{ background-position: 0 -72px;}
 #header .header_top ul.right_link .blog a{ background-position: -36px -72px;}
 #header .header_top ul.right_link .youtube a{ background-position: -73px -72px;}
 #header .header_top ul.right_link .instagram a{ background-position: -109px -72px;}
 #header .header_top ul.right_link .kakao_c a{ background-position: -146px -72px;}
 #header .header_bottom { background-color:#fff; height:105px; position:relative;}
 #header .header_bottom .logo{ display:block; width:290px; height: 49px; background: url("/images/mayor2/common/layout_sp_2022.png?build_20250706001") 0 0 no-repeat; position: absolute; top:25px; left:0; text-indent: -99999px; }
 #header .header_bottom .logo a{display: block; width:280px; height: 49px;}
 #header .header_bottom .sitemap a{ position: absolute; display: block; top:42px; right: 0; width:22px; height: 20px; background: url("/images/mayor2/common/layout_sp_2022.png?build_20250706001") -261px -120px no-repeat; text-indent: -99999px; }
 #header .header_bottom .sitemap a:hover{ background-position:-229px -120px;}
  #header .header_bottom .search {position: absolute; top:42px; right: 37px;}
 #header .header_bottom .search a span { display: inline-block; width:22px; height:22px; background: url("/images/mayor2/common/layout_sp_2022.png?build_20250706001") -163px -120px no-repeat; text-indent: -99999px; }
 #header .header_bottom .search a:hover span{ background-position: -194px -120px; }
 #header .header_bottom .search_box { display:none; z-index:5; background-color:#2c5c9f; height:55px; width:340px; float:right; position:absolute; top:25px; right:57px;}
 #header .header_bottom #smart_search { width:330px;}
 #header .header_bottom #smart_search .search_word_lavel { position:absolute; top:24px; left:22px; color:#fff;}
 #header .header_bottom #smart_search input[type="text"] { float:left; border:none; background-color:#2c5c9f; height:33px; width:240px; padding:0 10px; margin:12px; line-height:33px; color:#fff;}
 #header .header_bottom #smart_search input[type="submit"] { float:left; background: url("/images/mayor/common/sprite.png?build_20250706001") no-repeat scroll -79px -20px; text-indent:-99999px; border:none; width:33px; height:33px; margin-top:19px; cursor:pointer;}
 #header .header_bottom .search_box .close { position:absolute; right:-63px; top:0; display:block; width:63px; height:38px; padding-top:17px; float:right; background-color:#62ad38; }
 #header .header_bottom .search_box .close span { display:block; margin:0 auto; width:22px; height:22px; background: url("/images/mayor/common/sprite.png?build_20250706001") no-repeat scroll -138px -25px; text-indent:-99999px;}
 #header .header_bottom .search_box .close:hover{background-color: #77d046; transition: ease-in-out 0.3s;}
 #smart_search > label{position: absolute;top: 0;left: 0;padding: 13px 20px;color: #fff;height: 45px;line-height: 45px;cursor: text;text-indent: -999em;}
 #smart_search button#quick_search_btn{background: none; border: 0; cursor: pointer; width: 46px; height: 72px;}
 #smart_search button#quick_search_btn > span{display:block;margin:0 auto;background: url("/images/mayor/common/sprite.png?build_20250706001?build_20221221006") no-repeat -79px -20px;text-indent: -999em;width: 100%;height: 50px;margin-top: 0;}
 #header .header_bottom #smart_search input::placeholder{color:#fff}
  .gnb_bg{position: absolute; top:163px; left: 0; width: 100%; height: 0; background-color: #fff; transition: cubic-bezier(0.78, 0.15, 0, 1) 0.35s;z-index:10;}
 .gnb_box{position:absolute;z-index:20;}
 .gnb {position: relative;  margin-left:490px; z-index: 5}
 .gnb > li { position:relative; float:left;}
 .gnb > li > a {position: relative; display:block; line-height: 105px; height: 105px; color:#000; font-size:22px; margin-right: 54px;}
 .gnb > li:last-child > a{ margin-right: 0px;}
 .gnb > li.on > a { color:#214873;}
 .gnb > li > a span{position: relative;}
 .gnb > li.on > a span:before{content: ''; position: absolute; top: 50%; left: -12px; width: 6px; height: 2px; background-color: #214873;}
 .gnb > li.on > a span:after{content: ''; position: absolute; top: 50%; right: -12px; width: 6px; height: 2px; background-color: #214873;}
 .gnb > li > .gnbB_wrap {display: none; position: relative; padding: 17px 0; width: 90%; margin:0 5%; top: -80px; opacity: 0;  transition: cubic-bezier(0.58, 0, 0.13, 1) 0.35s;}
 .gnb > li > a .gnb_dot{position: absolute; bottom: -2px; right: 0; width: 0; height: 2px; margin: 0 10%; overflow: hidden; transition: width 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940);}
 .gnb > li > a .gnb_dot:before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background-color: #cfcfcf;}
 .gnb > li > a .gnb_dot:after{content: ''; position: absolute; top: 0; left: auto; right: 0; width: 0; height: 2px; background: rgb(35,95,176); background: linear-gradient(90deg, rgba(35,95,176,1) 0%, rgba(69,163,23,1) 55%); transition: width 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940);}
 .gnb .gnbB li a { display:block; padding:3px 0; color:#616161; font-size:17px; transition:all 0.3s ease 0s;}
 .gnb .gnbB li a:hover { color:#000;}
 .gnb .gnbB li.on a { color:#2c5c9f; text-decoration:underline;}
 .gnb .gnbC{display: none;}
 .gnb_hover .gnb_bg{transition: cubic-bezier(0.58, 0, 0.13, 1) 1s;}
 .gnb_hover .gnb > li > .gnbB_wrap{display: block; top: 0; opacity: 1; animation: gnbB_wrap cubic-bezier(0.58, 0, 0.13, 1) 1s;}
 .gnb_hover .gnb > li > a .gnb_dot{width: 80%; left: 0; right: auto; animation: gnb_dot cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s;}
 .gnb > li.on > a .gnb_dot:after, .gnb > li:hover > a .gnb_dot:after{left: 0; right: auto; width: 100%;}
 @keyframes gnbB_wrap{ 0%{top: -180px; opacity: 0;}
 100%{top: 0; opacity: 1;}
 }
 @keyframes gnb_dot{ 0%{width: 0;}
 60%{width: 0;}
 100%{width: 80%; left: 0; right: auto;}
 }
  .footer_top { width:100%; height:72px; border-top:1px solid #d8d8d8; font-size: 17px;}
 .footer_top .footer_link { float:left; margin-top:14px;}
 .footer_top .footer_link li { float:left;}
 .footer_top .footer_link li a { display:block; padding:10px 15px;}
 .footer_top .footer_link li:first-child a { padding-left:0;}
 .footer_top .footer_link li a:hover{}
 .footer_top .family_site { float:right; width:200px; height:72px; position:relative; border-left:1px solid #d8d8d8; border-right:1px solid #d8d8d8; z-index: 2;}
 .footer_top .family_site > a { display:block; line-height: 72px; padding: 0 25px; transition:all 0.3s ease 0s; }
 .footer_top .family_site a:hover{}
 .footer_top .family_site a span { display:block; float:right; margin:30px 0; width:12px; height:7px; text-indent:-99999px; background:url("/images/mayor2/common/layout_sp_2022.png?build_20250706001") no-repeat scroll; }
 .footer_top .family_site a span.open { background-position:-10px -148px;}
 .footer_top .family_site a span.close { background-position:-40px -148px;}
 .footer_top .family_site_box { background-color:#fff; border:1px solid #d8d8d8; position:absolute; bottom:72px; left:-1px; width:100%; display:none; padding: 10px 0;}
 .footer_top .family_site_box li {padding:8px 15px;}
 .footer_top .family_site_box li a:hover { color:#4182c7}
 .footer_bottom { background-color:#42474a; height:112px; padding-top:35px; padding-bottom:15px;}
 .footer_bottom .inner{position: relative;}
 .footer_bottom .address_box { color:#fff; font-size:15px; font-weight: 100;}
 .address_box p { font-size:14px;}
 .footer_bottom .go_top {}
 .footer_bottom .go_top a { display:block; position: absolute; width:60px; height:60px; top:0; right: 0; border-radius: 50%; color:#fff; background-color: #2196f5; text-align:center; font-size:13px; overflow: hidden;}
 .footer_bottom .go_top a span.icon { display:block; width:9px; height:7px; margin:17px auto 0; background: url("/images/mayor2/common/layout_sp_2022.png?build_20250706001") no-repeat scroll -102px -146px; position: relative; top:0}
 .footer_bottom .go_top a:hover span.icon{animation: top_bounce ease 0.5s infinite alternate;}
 @keyframes top_bounce{ 0%{top: 0px;}
 100%{top: -5px;}
 }