@charset "utf-8";
@import url("font.css");
a:focus-visible,
button:focus-visible{outline-style: dashed; outline-width: 2px;outline-offset: -3px;}
.btn_search:focus-visible{outline-offset: -5px;}
.sub_con_tab li.on a:focus-visible, .sub_con_tab li:hover a:focus-visible,
.board_tab .tab_box> li.active > a:focus-visible{outline-color: #fff;}
/* Default Layout */
#wrap {width:100%; /* min-width:1250px; */ height: 100%;}
body {padding: 0 !important; margin: 0 !important;}
body#main {overflow-x:auto;}
body#main .midarea * {font-family: 'ng';}
.toparea {position:relative; width:100%; height: 128px; padding: 0; border-bottom: 1px solid #c1c1c1;}

.floating_top {z-index: 999; position: fixed; right: 20px; bottom: 20px; width: 50px; height: 50px; }
.floating_top span {display: block; border-radius:100%; height: 100%; font-size: 0; text-indent: -999px; background: url('../../images/web/icon_top.png') center center no-repeat;}

/*탑메뉴*/
body#main .toparea .all_box {width: 1250px; margin: 0 auto; overflow: hidden; text-align: right;}
body#main .toparea .all_box .top_box {display: inline-block; padding: 10px 0;}
body#main .toparea .all_box .top_box ul.list {display: inline-block; overflow: hidden; position: relative; top: 5px;}
body#main .toparea .all_box .top_box ul.list li {float: left;}
body#main .toparea .all_box .top_box ul.list * {color: #848282; font-size: 13px;}
body#main .toparea .all_box .top_box ul.list li a {padding: 0 10px;}
body#main .toparea .all_box .top_box fieldset {position: relative; display: inline-block; margin-left: 15px;}
body#main .toparea .all_box .top_box fieldset input {position: relative; z-index: 1; padding: 0 35px 0 10px; width: 200px; height: 30px; color: #666; border: 1px solid #b7b7b7; border-radius: 20px;}
body#main .toparea .all_box .top_box fieldset button {position: absolute; top: 6px; right: 15px; z-index: 3; width: 17px; height: 17px; background: url('../../images/web/icon_search.png') 0 0 no-repeat;}
body#main .toparea .all_box .mobile {display: none;}

/*메뉴*/
body#main .toparea .gnb {width: 1250px; margin: 0 auto; display: block; top: 5px; overflow: inherit;}
body#main .toparea .gnb h1 {z-index: 3;  float: left; position: relative; }
body#main .toparea .gnb h1 > a {display:block; width:192px; height:49px;}
body#main .toparea .gnb h1 > a img {width: 100%;}
.toparea .gnb .topmenu { float: right; top: 0;right: 0;}
.toparea .topmenu > ul > li {float:left; margin-left: 50px;}
.toparea .topmenu > ul > li > a {display:block; width:100%; text-align:center; font-size:18px; color:#000000;font-weight: 600; padding: 10px 0 38px;}
.toparea .topmenu > ul > li.on > a, .toparea .topmenu > ul > li > a:hover {color:#0468e2;}
.toparea .topmenu > ul > li > .smenu {display:none; position:absolute; left:0px; top:128px; z-index:90; width: 100%;height:auto; background: #f6f8fa;}
.toparea .topmenu > ul > li > .smenu ul li {}
.toparea .topmenu > ul > li > .smenu .smenu_box {overflow: hidden; width: 1250px; margin: 0 auto;}
.toparea .topmenu > ul > li > .smenu .smenu_box h3 {float: left; padding: 30px 0 0 40px; color: #025ac6; font-size: 30px;}
.toparea .topmenu > ul > li > .smenu .smenu_box h3 span {padding-bottom: 10px; border-bottom: 1px solid #025ac6;}
.toparea .topmenu > ul > li > .smenu .smenu_box > ul {overflow: hidden;display:flex;display:-webkit-flex;flex-wrap:wrap;-webkit-flex-wrap:wrap; float: right; width: 1000px; padding: 20px 0;}
.toparea .topmenu > ul > li > .smenu .smenu_box > ul > li {float: left; width: 180px; margin: 10px 0 10px 20px;}
.toparea .topmenu > ul > li > .smenu .smenu_box > ul > li > a {display: block; color:#025fd1; font-size:14px; line-height: 35px; font-weight: 600; padding-left: 10px; border: 1px solid #1572e4; background: url('../../images/web/icon_smenu.png') right 10px center no-repeat;}
.toparea .topmenu > ul > li > .smenu .smenu_box > ul > li > a.link {background: url('../../images/web/icon_smenu_link.png') right 7px center no-repeat;}
.toparea .topmenu > ul > li > .smenu .smenu_box > ul > li > ul {padding: 10px 0 0 18px;}
.toparea .topmenu > ul > li > .smenu .smenu_box > ul > li > ul > li {}
.toparea .topmenu > ul > li > .smenu .smenu_box > ul > li > ul > li > a {padding-left: 7px; color: #6b6b6b; font-size: 14px; font-weight: 600; line-height: 26px; background: url('../../images/web/icon_dot2.png') 0 center no-repeat;}
.top_mobile_search {display: none;}
.toparea .mobile-category {display:none}

.mobild_menu {position: relative; z-index: 999;}
.mobild_menu .top_menu {overflow: hidden; height: 50px;}
.mobild_menu .top_menu > button {position: relative;top: 15px; left: 10px; width: 18px; height: 18px; background: url(../../images/web/icon_category_c.png) 0 0 no-repeat; background-size: 18px;}
.toparea .mobile-category > div.mobild_menu::-webkit-scrollbar {display:none;}
.toparea .mobile-category > div.mobild_menu:-moz-scrollbar {display:none;}
.toparea .mobile-category > div.mobild_menu::-moz-scrollbar {display:none;}
.toparea .mobile-category > div.mobild_menu button {margin:0 0 0 10px; font-size: 0; text-indent: -9999px;}
.toparea .mobile-category > div.mobild_menu .mobild_log {float: right; padding-left: 12px; min-height: 50px !important;}
.toparea .mobile-category > div.mobild_menu .mobild_log li {float: left; margin-right: 22px;}
.toparea .mobile-category > div.mobild_menu .mobild_log li a {color: #fff; font-size: 15px; line-height: 50px;}
#MobileTopMenu h3 + div { height: 0px; padding: 0px; overflow: hidden; background: #000; display: block!important; -webkit-transform: translateZ(0); -webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;-ms-transition:all 0.3s ease;transition: all 0.3s ease;}
#MobileTopMenu .content { padding: 10px;}
#MobileTopMenu h3.open + div { height: auto !important; background: #aaffff;}

.mobile_gnb {height: auto; min-height: auto !important;}
.mobile_gnb > li {display: block; margin: 0; border-bottom: 1px solid #987e5b;}
.mobile_gnb > li > a {display: block; padding: 0 30px; height: 50px; line-height: 50px; font-size: 18px; font-weight: 600; color: #fff; background: url('../../images/web/menu_down.png') no-repeat right 14px center; background-size: 15px;}
.mobile_gnb > li.active > a {color: #fff; background: url('../../images/web/menu_up.png') no-repeat right 14px center; background-size: 15px;}
.mobile_gnb > li > a > span{display: none;}
.mobile_gnb ul.smenu {display: none; overflow: hidden; background-color: #fff;}
.mobile_gnb ul.smenu > li {height: auto; border-bottom: 1px solid #e0e0e0;}
.mobile_gnb ul.smenu > li.last {border-bottom: 0px;}
.mobile_gnb ul.smenu > li > a {position: relative; display: block; padding-left: 30px; height: 42px; line-height: 42px; font-size: 14px; color: #626262;}
/* .mobile_gnb ul.smenu > li > a span {position: absolute; right: 15px; top: 15px;; width: 11px; height: 11px; background: url('../../images/web/menu_down2.png') no-repeat 0 0; font-size: 0; text-indent: -999;} */
.mobile_gnb ul.smenu > li > a span {position: absolute; right: 15px; top: 15px;; width: 11px; height: 11px; background: url('../../images/web/menu_down2.png') no-repeat 0 0; font-size: 0; text-indent: -999px;}
.mobile_gnb ul.smenu > li.active > a span {background: url('../../images/web/menu_up2.png') no-repeat 0 0;}
.mobile_gnb ul.smenu > li ul.ssmenu {display: none; padding: 15px 0; position: relative; background: #eeebe7; border-top: 1px solid #e0e0e0;}
.mobile_gnb ul.smenu > li ul.ssmenu li a {display: block; padding: 0 20px 0 40px; line-height: 30px; font-size: 14px; color: #736859;}

.maincontents {width:100%;}
.maincontents .main_tit {width:1250px; margin: 80px auto 40px; text-align: center;}
.maincontents .main_tit h2 {color: #222; font-size: 34px; padding-bottom: 24px; margin-bottom: 15px; background: url('../../images/web/main_title.png') center bottom no-repeat;}
.maincontents .main_tit p {color: #777; font-size: 18px;}
.maincontents .section2, .maincontents .section4 {width:1250px;margin: 0 auto; overflow: hidden;}
.maincontents .section1 {position: relative; width: 100%; height: 545px; text-align: center; background: url('../../images/web/main_img.png') 0 0 no-repeat; background-size: cover;}
.maincontents .section1 .relativesite {overflow: hidden; display: inline-block; margin-top: 88px; text-align: left;}
.maincontents .section1 .relativesite > li {position: relative; float: left; width: 500px; height: 370px; margin: 0 12px; padding: 30px;}
.maincontents .section1 * {color: #fff;}
.maincontents .section1 .left {background: #b79164;}
.maincontents .section1 .right {background: #378fde;}
.maincontents .section1 .relativesite > li > h3 {margin-bottom: 30px; font-size: 28px; font-weight: 600;}
.maincontents .section1 .banner_slide ul {display:flex;display:-webkit-flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;}
.maincontents .section1 .banner_slide ul:after {display:block;clear:both;content:"";}
.maincontents .section1 .banner_slide ul li {float: left; position: relative;}
.maincontents .section1 .banner_slide .img {overflow: hidden; width: 160px; padding: 0 10px 10px 0; margin: 0 10px 10px 0;}
.maincontents .section1 .banner_slide .img > img {max-width: 100%; max-height: 208px; width: auto; height: auto; display: inline-block; box-shadow: 10px 10px 0px rgba(0, 0, 0, 0.2);}
.maincontents .section1 .banner_slide .contents {width: calc(100% - 190px);}
.maincontents .section1 .banner_slide .contents h4 {overflow: hidden; max-height: 60px; padding-bottom: 10px; margin-bottom: 20px; font-size: 20px; font-weight: 600; line-height: 28px; border-bottom: 1px solid #fff;}
.maincontents .section1 li .banner_slide .contents p {overflow: hidden; max-height: 118px; line-height: 20px;}
.maincontents .section1 li button.more {position: absolute; right: 30px; bottom: 30px; width: 90px; height: 30px; text-align: center; font-weight: 600; background: #fff; border-radius: 30px;}
.maincontents .section1 li.left button.more {color: #b26f1f;}
.maincontents .section1 li.right button.more {color: #177cd7;}
.maincontents .section1 .banner_slide .slick-arrow {position: absolute; top: 30px; width: 24px; height: 24px; font-size: 0; text-indent: -999px;}
.maincontents .section1 .banner_slide .slick-prev {right: 60px; background: url('../../images/web/icon_pre1.png') 0 0 no-repeat;}
.maincontents .section1 .banner_slide .slick-next {right: 30px; background: url('../../images/web/icon_next1.png') 0 0 no-repeat;}
.maincontents .section2 {margin-bottom: 45px;}
.maincontents .section2 .main_tab {position: relative; height: 650px; }
.maincontents .section2 .main_tab .tab_box > li {float: left; width: 33.3%; border: 1px solid #cfcfcf; border-left: 0;}
.maincontents .section2 .main_tab .tab_box > li:first-child {border-left: 1px solid #cfcfcf;}
.maincontents .section2 .main_tab .tab_box li.active {border: 1px solid #1572e4; border-left: 0;}
.maincontents .section2 .main_tab .tab_box li > a.title {display: block; height: 52px; line-height: 52px; color: #555; font-size: 22px; font-weight: 600; text-align: center;}
.maincontents .section2 .main_tab .tab_box li.active > a.title {color: #fff; background: #1572e4;}
.maincontents .section2 .main_tab .tab_box li .tab-content {display: none; position: absolute; margin-top: 20px; left: 0; width: 100%; padding: 0 25px;}
.maincontents .section2 .main_tab .tab_box li.active .tab-content {display: block;}
.maincontents .section2 .main_tab .tab_box li .tab-content ul * {overflow: hidden; color: #000; font-size: 18px;}
.maincontents .section2 .main_tab .tab_box li .tab-content ul li {overflow: hidden; padding: 22px 0; border-bottom: 1px solid #cacaca;}
.maincontents .section2 .main_tab .tab_box li .tab-content ul li .date {float: left; width: 225px; text-align: center;}
.maincontents .section2 .main_tab .tab_box li .tab-content ul li a {float: right; width: calc(100% - 225px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.maincontents .section2 .btn_box {text-align: center; margin-top: 50px;}
.maincontents .section2 .btn_box button {width: 160px; height: 44px; color: #000; font-size: 18px; padding-right: 14px; background: url('../../images/web/icon_more.png') right 27px center no-repeat; border: 2px solid #cccccc; border-radius: 45px;}
.maincontents .section3 {width: 100%; padding: 48px 0; text-align: center; background: #f0f0f0;}
.maincontents .section3 > ul {display: inline-block;}
.maincontents .section3 > ul > li {float: left; padding: 0 45px;}
.maincontents .section3 > ul > li > a {color: #333; font-size: 16px;}
.maincontents .section3 > ul > li > a > div {width: 136px; height: 136px; border-radius: 136px; margin-bottom: 20px;}
.maincontents .section3 > ul > li > a .icon1 {background: url('../../images/web/main_icon1.png') center center no-repeat #fff;}
.maincontents .section3 > ul > li > a .icon2 {background: url('../../images/web/main_icon2.png') center center no-repeat #fff;}
.maincontents .section3 > ul > li > a .icon3 {background: url('../../images/web/main_icon3.png') center center no-repeat #fff;}
.maincontents .section3 > ul > li > a .icon4 {background: url('../../images/web/main_icon4.png') center center no-repeat #fff;}
.maincontents .section4 {position: relative; padding: 10px 0;}
.maincontents .section4 .left {float: left; width: calc(100% - 400px);}
.maincontents .section4 .right {float: right; width: 400px; padding-left: 20px;}
.maincontents .section4 .banner_slide {position: relative;}
.maincontents .section4 .left .banner_slide {padding: 0 30px; }
.maincontents .section4 .banner_slide .slick-arrow {position: absolute; top: 50%; width: 28px; height: 28px; margin-top: -14px; font-size: 0; text-indent: -999px;}
.maincontents .section4 .banner_slide .slick-prev {left: 0px; background: url('../../images/web/icon_pre2.png') 0 0 no-repeat;}
.maincontents .section4 .banner_slide .slick-next {right: 0px; background: url('../../images/web/icon_next2.png') 0 0 no-repeat;}
.maincontents .section4 .banner_slide .slick-slide div {display: table; width: 100%;}
.maincontents .section4 .banner_slide .slick-slide div li {display: table-cell !important; height: 98px; vertical-align: middle; text-align: center;}
.maincontents .section4 .banner_slide .slick-slide div li a {display: inline-block;}
.maincontents .section4 .right .banner_slide .slick-list {border: 1px solid #c2c2c2;}
.maincontents .section4 .banner_slide .slick-dots {position: absolute; z-index: 99; right: 8px; bottom: 8px;}
.maincontents .section4 .banner_slide .slick-dots li {float: left; padding: 0 3px;}
.maincontents .section4 .banner_slide .slick-dots li button {width: 8px; height: 8px; background: #999; border-radius: 10px; font-size: 0; text-indent: -999px;}
.maincontents .section4 .banner_slide .slick-dots li.slick-active button {background: #cb2727;}
.maincontents .section4 .slick-pause {position: absolute; right: 54px; bottom: 20px; width: 8px; height: 8px; background: url('../../images/web/icon_stop.png') 0 0 no-repeat; font-size: 0; text-indent: -999px;}


.bottomarea {background: #363636;}
.bottomarea .all_box {position: relative; width: 1250px; margin: 0 auto; padding: 48px 0 48px 130px;}
.bottomarea .all_box * {color: #ffffff;} /* color: #767676; */
.bottomarea .all_box .pribox {overflow: hidden; margin-bottom: 25px;}
.bottomarea .all_box .pribox li {float: left; margin-right: 15px;}
.bottomarea .all_box .pribox li a {padding-right: 15px;}
.bottomarea .all_box h2 {position: absolute; left: 0; top: 40px; width:93px; height: 112px; font-size: 0; text-indent: -999px; background: url('../../images/web/logo_copy.png') 0 0 no-repeat;}
.bottomarea .all_box .address address {line-height: 24px;}
.bottomarea .all_box .right {position: absolute; right: 0; top: 40px; text-align: right; }
.bottomarea .all_box .right .sns {overflow: hidden; display: inline-block; margin-bottom: 10px;}
.bottomarea .all_box .right .sns li {float: left; text-align: right; width: 36px; margin-left: 5px;}
.bottomarea .all_box .right .sns li img {display: inline-block;}
.bottomarea .all_box .right > img {display: block;}


.bottomarea .all_box .right .snsNew {overflow: hidden; display: inline-block; margin-bottom: 10px;}
.bottomarea .all_box .right .snsNew li {float: left; text-align: right;  margin-left: 5px;}
.bottomarea .all_box .right .snsNew li a{display:block; width:32px; height:32px; overflow: hidden; border-radius:10px;}
.bottomarea .all_box .right .snsNew li.facebook a{background: url('../../images/webNew/facebook.png') 0 0 no-repeat; background-size:32px;}
.bottomarea .all_box .right .snsNew li.twitter a{background: url('../../images/webNew/twitter.png') 0 0 no-repeat; background-size:32px;}
.bottomarea .all_box .right .snsNew li.instagram a{background: url('../../images/webNew/instagram.png') 0 0 no-repeat; background-size:32px;}
.bottomarea .all_box .right .snsNew li.kakaostory a{background: url('../../images/webNew/kakao.png') 0 0 no-repeat; background-size:32px;}

.snsNewTop {overflow: hidden;}
.snsNewTop li {float: left; text-align: right;  margin-left:5px;}
.snsNewTop li a{display:block; width:30px; height:30px; overflow: hidden; border-radius:10px;}
.snsNewTop li.facebook a{background: url('../../images/webNew/facebook.png') 0 0 no-repeat; background-size:30px;}
.snsNewTop li.twitter a{background: url('../../images/webNew/twitter.png') 0 0 no-repeat; background-size:30px;}
.snsNewTop li.instagram a{background: url('../../images/webNew/instagram.png') 0 0 no-repeat; background-size:30px;}
.snsNewTop li.kakaostory a{background: url('../../images/webNew/kakao.png') 0 0 no-repeat; background-size:30px;}
.snsNewTop li.printer a{background: url('../../images/webNew/printer.png') 0 0 no-repeat; background-size:30px;}


.bottomarea .sub_bttom {height: 50px; background: #616161;}
.bottomarea .sub_bttom .bottom_top {overflow: hidden; width: 1250px; margin: 0 auto;}
.bottomarea .sub_bttom .bottom_top li.left {float: left;}
.bottomarea .sub_bttom .bottom_top li > ul {overflow: hidden;}
.bottomarea .sub_bttom .bottom_top li > ul > li {float: left;}
.bottomarea .sub_bttom .bottom_top li.left ul > li * {color: #bfbfbf; font-size: 14px; line-height: 50px;}
.bottomarea .sub_bttom .bottom_top li.left ul > li > a {display: inline-block;}
.bottomarea .sub_bttom .bottom_top li.left ul > li > span {margin-right: 5px;}
.bottomarea .sub_bttom .bottom_top li.left ul > li.dot {width: 20px; height: 50px; background: url('../../images/web/bottom_dot.png') center center no-repeat;}
.bottomarea .sub_bttom .bottom_top li.right {float: right; padding-top: 9px;}
.bottomarea .sub_bttom .bottom_top li.right > ul > li {margin-left: 5px;}
.bottomarea .sub_bttom .bottom_top li.right > ul > li > a {display: block; height: 34px; padding: 0 27px 0 15px; color: #e5e4e4; line-height: 34px; border: 1px solid #919191; background: url('../../images/web/bottom_arrow.png') right 15px center no-repeat;}

.mobileoff {display: block !important;}
.mobileon {display: none !important;}
.mobileoff_in {display: inline-block !important;}
.mobileon_in {display: none !important;}
.web_only {display: block !important;}
.mobile_only {display: none !important;}

/*팝업*/
.modal {display: none; overflow: hidden; position: fixed; top: 100px; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 11050; -webkit-overflow-scrolling: touch; outline: 0; }
.modal .popup {position: absolute; left: 50%; transform: translateX(-50%); top: 50%; margin-top: -280px; width: 700px; height: 575px;}
.modal .popup .con {padding: 15px;}
.modal .popup .con h4.h4 {padding: 0 0 0 12px; margin-bottom: 12px; color: #222222; font-size: 16px; font-weight: 600; background: url('../../images/web/sub/icon_h4.png') 0 7px no-repeat;}
.modal .popup .con .table_box {padding: 10px; border: 1px solid #e1e1e1;}
.modal .popup .con .table_box > div {color: #333; margin-top: 20px; line-height: 20px; }
.modal .popup .con .table_box > div span {display: block; font-weight: 600; margin-bottom: 10px;}

#popup_wrap{ width:100%; height:100%; display:none; position:fixed; z-index:999; top:0; bottom:0; right:0; left:0; background: rgba(0,0,0,.8);}
#popup_wrap.on{	display:block}
.popup {position: absolute; left: 50%; transform: translateX(-50%); top: 50%; margin-top: -250px; width: 670px; height: 500px; overflow: hidden; border: 1px solid #acacac; background: #fff;}
.popup1 {position: absolute; left: 40px; width: 90%; overflow: hidden; background: #fff;}
.popup.on {display:block;}
.popup.type2 {margin-top: -120px; width: 400px; height: 240px;}
.popup_inner{position:relative; top:0px; max-height:100%; overflow-y: auto;}
.popup_inner > .title {position: relative; padding-left: 30px; height: 80px; line-height:20px; color: #fff;background: url('../../images/web/bg_pop_title.png') 0 0 repeat-x #1471c0;}
.popup_inner > .title h3 {color: #fff; text-align: left; font-size: 22px; line-height: 80px;}
.popup .con{padding: 20px;}
.popup.memeber .con{height: 405px; overflow-y: scroll;}
.popup.memeber1 .con{width: 90%; overflow-y: scroll;}
.popup.type2 .con{padding: 40px;}
.popup .boardwrite table th {width: 140px; padding:0 10px 0 20px;}
.popup .boardwrite table td {padding:10px; background:#fff; border-bottom:1px solid #e4e4e4; color:#666;}
.popup .text_box {display: table; width: 100%; font-size: 13px;}
.popup .text_box .d_cell {width: 100%; height: 100px; text-align: center; vertical-align: middle; font-size: 13px;}
.popup .text_box .inpbox {margin: 20px auto 0; width: 200px; height: 30px; border: 1px solid #d2d2d2;}
.popup .con .text {padding: 20px; color: #333333; font-size: 16px; }
.popup .con .file {overflow: hidden; padding: 15px; font-size: 14px; color: #333333; border-top: 1px dashed #dcdcdc;}
.popup .con .file dt {float: left; width: 70px; font-weight: 600;}
.popup .con .file dd {float: right; width: calc(100% - 70px);}
.popup .con .file dd a {display: block;}
.popup .con .close {text-align: right; padding: 12px 15px; border-top: 1px solid #dcdcdc;}
.popup .con .close .check {display: inline-block; margin-right: 5px; color: #333333; font-weight: 400;}
.popup .con .close .check input[type=checkbox] { display: none;}
.popup .con .close .check input[type=checkbox] + label { display: inline-block; font-size: 13px; cursor: pointer; color: #333333; margin-left: 3px;}
.popup .con .close .check input[type=checkbox]+ label:before {position: relative; top: 4px; content: ""; display: inline-block; color: #fff; text-align: center; width: 14px; height: 14px; line-height: 14px; background-color: #fff; border:1px solid #dcdcdc; margin-right: 5px;}
.popup .con .close .check input[type=checkbox]:checked + label:before {background: url('../../images/web/icon_check_on.png') center center no-repeat;}
.popup .con .close button {color: #333333; font-size: 13px; line-height: 16px;}
.popup .con .close button span {border-bottom: 1px solid #333;}

.popup2 {position: absolute; left: 50%; transform: translateX(-50%); top: 50%; margin-top: -250px; width: 50%; height: 900px; overflow: hidden; border: 1px solid #acacac; background: #fff;}

/*에러페이지*/
.error {overflow: hidden; width: 100%; height: auto; margin-top: -125px; position: absolute; top: 50%; background: #f8f8f9; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;}
.error .error_box {width: 640px; margin: 0 auto; padding: 50px;}
.error .error_box h3 {color: #333; padding-bottom: 20px; font-size: 18px;}
.error .error_box .text {color: #515151; font-size: 15px; line-height: 25px;}
.error .error_box button {padding: 5px 15px; color: #fff; font-size: 13px;}

/* 20240118수정 */
@media screen and (max-width:1266px){
 .bottomarea .sub_bttom .bottom_top { width: 100%; padding: 0 10px; } 
 }
/* //20240118수정 */

@media screen and (min-width:320px) and (max-width:1017px){
	.mobileoff {display: none !important;}
	.mobileon {display: block !important;}
	.mobileon_in {display: block !important;}
	.web_only {display: none !important;}
	.mobile_only {display: block !important; width:100%;}
	
	body#main {overflow-x:visible;}
	#wrap {width:100%; min-width:100%; overflow-x:visible;}
	.toparea {position:relative; width:100%; height: 60px;padding: 0;}
	
	.floating_top {z-index: 999; position: fixed; right: inherit; bottom: 0; width: 100%; height: 40px; text-align: center; background: #be9765;}
	.floating_top > span {display: inline-block; padding-left: 25px; font-size: 15px; color: #fff !important; line-height: 40px; text-indent: 0; background: url('../../images/web/icon_top_m.png') left center no-repeat; background-size: 12px;}

	/*탑메뉴*/
	body#main .toparea .all_box {width: 100%;}
	body#main .toparea .all_box .top_box {display: none;}
	body#main .toparea .all_box .mobile {display: block;}
	body#main .toparea .all_box .mobile .btn_search {position:absolute; top:15px;right: 5px; z-index:101; width:30px; height:30px; background: url('../../images/web/icon_search.png') center center no-repeat; border: 1px solid #c9c9c9; font-size:0; text-indent:-99999px; border-radius: 30px;}
	body#main .toparea .all_box .mobile .btn_eng {position:absolute; top:15px;right: 38px; z-index:101; width:30px; height:30px; border: 1px solid #c9c9c9; font-size:12px; line-height: 30px; border-radius: 30px;}
	body#main .toparea .gnb {position: absolute; display: inline-block; top: 5px; left: 0; transform: translateX(0); width: 100%; height: 60px; text-align: center;}
	body#main .toparea .gnb h1 { float: none;}
	body#main .toparea .gnb h1 > a {margin: 0 auto;}
	.toparea .gnb .menu {display: none;}
	.toparea .mobile-category {z-index: 999; display:block; position:relative; top:0; width: 100% !important;}
	.toparea.mobileOpen .mobile-category {position:fixed; height: 100%; background: rgba(0, 0, 0, 0.5);}
	.toparea .mobile-category .btn-category-holder {position:absolute; top:23px; left: 15px; z-index:101; width:20px; height:14px; background: url('../../images/web/icon_category_m.png') center center no-repeat; background-size: 100%; font-size:0; text-indent:-99999px;}
	.toparea .mobile-category > div.mobild_menu {display: none; top:0;width:100%; height:auto !important; background:#be9765; overflow-y: scroll;-ms-overflow-style: none;}
	.toparea.mobileOpen .mobile-category > div.mobild_menu {display: block;}	
	
	.maincontents .main_tit {width:100%; margin: 60px auto 40px; padding: 0 10px;}
	.maincontents .main_tit h2 {font-size: 18px;}
	.maincontents .main_tit p {font-size: 11px;}
	.maincontents .section2, .maincontents .section4 {width:100%;}
	.maincontents .section1 {height: auto; padding: 20px 30px;}
	.maincontents .section1 .relativesite {display: block; margin-top: 0;}
	.maincontents .section1 .relativesite > li {float: none; width: 100%; height: 370px; margin: 0;}
	.maincontents .section1 .relativesite > li.left {margin-bottom: 10px;}
	.maincontents .section1 * {color: #fff;}
	
	.maincontents .section2 .main_tab {margin: 0 10px; height: 510px; border-top: 1px solid #cfcfcf; }
	.maincontents .section2 .main_tab .tab_box > li {width: 50%; border-top: 0;}
	.maincontents .section2 .main_tab .tab_box > li:nth-child(2n-1) {border-left: 1px solid #cfcfcf;}
	.maincontents .section2 .main_tab .tab_box li.active {border-top: 0;}
	.maincontents .section2 .main_tab .tab_box li > a.title {font-size: 16px;}
	.maincontents .section2 .main_tab .tab_box li .tab-content {position: absolute; top: 110px; margin-top: 0px; padding: 0;}
	.maincontents .section2 .main_tab .tab_box li .tab-content ul * {overflow: hidden; color: #000; font-size: 14px;}
	.maincontents .section2 .main_tab .tab_box li .tab-content ul li {padding: 15px 0;}
	.maincontents .section2 .main_tab .tab_box li .tab-content ul li .date {width: 100px; font-size: 12px;}
	.maincontents .section2 .main_tab .tab_box li .tab-content ul li a {width: calc(100% - 100px);}
	.maincontents .section2 .btn_box {margin-top: 20px;}
	
	.maincontents .section3 {padding: 25px 0 0;}
	.maincontents .section3 > ul > li {float: left; width: 50%; padding: 0 0 25px;}
	.maincontents .section3 > ul > li > a > div {display: inline-block;}
	
	.maincontents .section4 {padding: 10px;}
	.maincontents .section4 .left .banner_slide {padding: 0 40px; }
	.maincontents .section4 .slick-pause {right: 64px;}
	
	.bottomarea .all_box {width: 100%; padding: 20px 10px 60px;}
	.bottomarea .all_box .pribox {padding-right: 75px;}
	.bottomarea .all_box h2 {position: relative; top: 0; width:93px; height: 112px; margin: 0 auto 25px;}
	.bottomarea .all_box .address address {text-align: center;}
	.bottomarea .all_box .right {position: absolute; right: 10px; top: 20px;}
	.bottomarea .all_box .right > img {display: none;}
	
	.bottomarea .sub_bttom {height: auto; padding: 10px;}
	.bottomarea .sub_bttom .bottom_top {width: 100%;}
	.bottomarea .sub_bttom .bottom_top li {text-align: center;}
	.bottomarea .sub_bttom .bottom_top li.left {float: none;}
	.bottomarea .sub_bttom .bottom_top li > ul {display: inline-block;}
	.bottomarea .sub_bttom .bottom_top li > ul > li {float: none; display: inline-block;}
	.bottomarea .sub_bttom .bottom_top li.left ul > li * {line-height: 25px;}
	.bottomarea .sub_bttom .bottom_top li.left ul > li.dot {height: 15px;}
	.bottomarea .sub_bttom .bottom_top li.right {float: none; padding-top: 0;}
	.bottomarea .sub_bttom .bottom_top li.right > ul > li {margin-left: 5px; margin-top: 5px;}
	
	.mobileoff {display: none;}
	.mobileon {display: block;}
	.mobileoff_in {display: none;}
	.mobileon_in {display: inline-block;}
	.web_only {display: block;}
	
}
@media screen and (min-width:320px) and (max-width:784px){
	.maincontents .section4 {background: #f0f0f0;}
	.maincontents .section4 .left {float: none; width: 100%; padding: 0 10px; border: 1px solid #b4b4b4; background: #fff; margin-bottom: 10px;}
	.maincontents .section4 .right {float: none; width: 100%; padding-left: 0;}
	.maincontents .section4 .right .banner_slide .slick-slide div li {height: auto;}
	.maincontents .section4 .right img {width: 100%;}
	
	
	.popup {width: 95%; height: 500px;}
	.modal .popup {margin-top: -260px; width: 95%; height: 540px;}
	.popup_inner > .title {padding-left: 20px; height: 50px; color: #fff;background: url('../../images/web/bg_pop_title.png') 0 center repeat-x #1471c0;}
	.popup_inner .title h3 {line-height: 50px;}
	.popup .con{padding: 10px;}
	.popup .boardwrite table th {width: 70px; padding:0 5px;}
	.popup .boardwrite table td {padding:10px 5px;}
	
	/*에러페이지*/
	.error {overflow: hidden; width: 100%; height: auto; margin-top: -65px; position: absolute; top: 50%; background: #f8f8f9; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;}
	.error .error_box {width: 100%; margin: 0 auto; padding: 30px 20px;}
	.error .error_box h3 {color: #333; padding-bottom: 20px; font-size: 18px;}
	.error .error_box .text {color: #515151; font-size: 15px; line-height: 25px;}
	.error .error_box button {padding: 5px 15px; color: #fff; font-size: 13px;}
}
@media screen and (min-width:320px) and (max-width:640px){
	.maincontents .section1 .relativesite > li {height: auto; padding: 20px 20px 10px}
	.maincontents .section1 .relativesite > li > h3 {margin-bottom: 15px; font-size: 18px; text-align: center;}
	.maincontents .section1 .banner_slide ul li {float: none;}
	.maincontents .section1 .banner_slide .img {width: 100%; text-align: center;}
	.maincontents .section1 .banner_slide .img > img {display: inline-block; width: 80px;}
	.maincontents .section1 .banner_slide .contents {width: 100%;}
	.maincontents .section1 .banner_slide .contents h4 {margin-top: 20px; max-height: 24px; padding: 0 20px; margin-bottom: 0; font-size: 13px; text-align: center; text-overflow: ellipsis; white-space: nowrap; border: 0px solid #fff;}
	.maincontents .section1 li .banner_slide .contents p {display: none;}
	.maincontents .section1 li button.more {display: none;}
	.maincontents .section1 .banner_slide .slick-arrow {top: 50%; margin-top: -12px;}
	.maincontents .section1 .banner_slide .slick-prev {left: 24px;}
	.maincontents .section1 .banner_slide .slick-next {right: 24px;}

	/*에러페이지*/
	.error {width: 100%; height: auto; margin: -150px auto 0; padding: 0 10px; position: absolute; left: 0; top: 50%; transform: translateX(0);}
}
@media screen and (min-width:320px) and (max-width:480px){
	body#main .toparea .gnb h1 {top: 6px;}
	body#main .toparea .gnb h1 > a {width: 150px; height: 38px;}
	
	.bottomarea .all_box .pribox li {margin-right: 10px;}
	.bottomarea .all_box .pribox li a {padding-right: 10px;}
}