@charset "utf-8";
/****************************************/
/* Name: 부산광역시 수영구 미디어센터
/* PART: LAYOUT STYLE 
/* Version: 1.0 / day: 2019-07-
/* Author: imtec 
/****************************************/


/*
=========================================================================
pc 레이아웃 css
=========================================================================
*/

#wrapper{min-width: 1280px;}
#wrapper, #container{width: 100%;position: relative;}
.content_box{width: 1200px;margin: 0 auto;position: relative;}

/* 상단영역 */
#header{width: 100%;position: absolute;top: 0;left: 0;z-index:150;}

/* 패밀리 링크 */
.top_link_box{width: 100%;height: 45px;line-height: 45px;padding-left: 70px;transition: background-color 0.2s, color 0.2s;z-index: 150;position: relative;}
.top_link_box .family_link li{float: left;margin-right: 28px;position: relative;}
.top_link_box .family_link li::after{content: "";display: inline-block;width: 5px;height: 11px;position: absolute;top: 19px;right: -15px;background: url(/img/common/com_img.png) -386px -33px no-repeat;}
.top_link_box .family_link li:last-child::after{display: none;}
.top_link_box .family_link a{display: inline-block;padding-left: 25px;position: relative;color: #fff;font-size: 14px}
.top_link_box .family_link .ic04{padding-left: 28px}
.top_link_box .family_link a::before{content: "";display: inline-block;background: url(/img/common/com_img.png) no-repeat;position: absolute;}
.top_link_box .family_link .ic00::before{width: 22px;height: 20px;background-position: -320px -186px;top: 13px;left: 0;}
.top_link_box .family_link .ic01::before{width: 18px;height: 20px;background-position: -185px -54px;top: 13px;left: 0;}
.top_link_box .family_link .ic02::before{width: 21px;height: 20px;background-position: -223px -54px;top: 12px;left: 0;}
.top_link_box .family_link .ic03::before{width: 21px;height: 20px;background-position: -264px -54px;top: 12px;left: 0;}
.top_link_box .family_link .ic04::before{width: 22px;height: 16px;background-position: -305px -54px;top: 14px;left: 0;}
.top_link_box .family_link .ic05::before{width: 19px;height: 19px;background-position: -348px -54px;top: 13px;left: 0;}
.top_link_box .family_link .ic06::before {width:19px; height:17px; background-position:0px -221px; top:14px; left:0;}


/*
================================================================================
상단메뉴
================================================================================
*/

/* 상단메뉴 */
.gnboverarea{position: relative;width:100%;height:90px;z-index:150;border-bottom: 1px solid rgba(255,255,255,0.2);left: 0;top: 0;}
.on .gnboverarea{border-bottom:1px solid #e8e8e8;background-color: #fff}
.gnb_wrap{position:relative;width:640px; height:100%;margin:0 auto;}

#gnb{position:relative;width:100%;height:100%; }
#gnb > ul{width:100%;height: calc(100% + 1px);display: flex;}
#gnb > ul > li{position:relative;flex:1;height:100%;text-align: center;}
#gnb > ul > li > h2{width: 100%; height: 100%;font-size:18px; display:inline-block; font-weight:bold; color:#333;font-family: 'NanumSquare';}
#gnb > ul > li > h2 a{display:block; width: 100%; height:100%; line-height: 1;padding-top: 43px;}
#gnb > ul > li > h2 > a{float:left;color: #fff}
#gnb > ul > li > h2 > a span{display: inline-block;position: relative;line-height: 1;}
#gnb > ul > li > h2 > a span::after{content:'';transition: opacity 0.3s ease 0s;opacity: 0;height: 0;}
#gnb > ul > li > h2 > a.on span::after,#gnb > ul > li:hover > h2 > a span::after{position:absolute;left:0;bottom:-28px;width:100%;height:4px;background:#294baa;opacity: 1;}
#gnb > ul > li .gnbSub{position:absolute; z-index:100;	top:90px; left:0; display:none;width: 100%; height: 0;padding: 27px 8px 0 30px;background: #fff; border-bottom: 1px solid #eee}
#gnb > ul > li .gnbSub.on{display:inline-block;}
#gnb > ul > li .gnbSub li{width: 100%; text-align: left;margin-bottom: 9px;}
#gnb > ul > li .gnbSub li a{display:block;padding-left: 11px; color: #555;line-height: 1.4; position: relative;word-break: break-all;}
#gnb > ul > li .gnbSub li a::before{content: ""; display: inline-block; position: absolute;top: 9px; left: 0px;width: 3px; height: 3px;background: #9d9ea6}
#gnb > ul > li .gnbSub li a:hover,
#gnb > ul > li .gnbSub li a:focus{color: #333; text-decoration: underline;font-weight: bold;}
#gnb > ul > li .gnbSub li a:hover::before,
#gnb > ul > li .gnbSub li a:focus::before{background: #383a4a}
#gnb_Bg{position:absolute;top:90px; left:0;width:100%; height:0px;
background:#fff; overflow: hidden;}
#gnb_Bg.on{border-bottom: 1px solid #383a4a;}

.gnboverarea .top_logo{display: inline-block; position: absolute;text-indent: -9999px;left: 70px;top: 15px; width: 236px; height: 72px;background: url(/img/media/top_logo2020.png) no-repeat;}

.gnboverarea .bg_box{position: absolute; top: 0; left: 0; margin-left: -360px;background: #f3f6fc;width: 50%; height: 100%;}
.gnboverarea .bg_box::after{content: "";display: inline-block;width: 517px;height: 254px;background-repeat: no-repeat;position: absolute;top: 0;right: 28px;}

.top_right_box{position: absolute;top: 40px;right: 70px;z-index: 200;}

.btn_logout{float: left;color: #fff;display: inline-block;padding-left: 25px;margin-right: 30px}
.btn_logout::before{content: "";display: inline-block;width: 14px;height: 20px;background: url(/img/common/com_img.png) -241px -186px no-repeat;position: absolute;left: 0;top: 0;}
.top_right_box .hover_txt{display:none}

/* 상단검색 */
.top_right_box .sy_link{display: inline-block;float: left;color: #fff;padding-left: 29px;position: relative;margin-right: 30px;}
.top_right_box .sy_link::before{content: "";display: inline-block;position: absolute;left: 0;top: 0;background: url(/img/common/com_img.png) -320px -186px;width: 22px;height: 20px}
.top_right_box .top_search_box{position: relative;float: left;}
.top_right_box .btn_top_search{display: inline-block;padding-left: 28px;color: #fff;margin-top: -2px}
.top_right_box .btn_top_search::before{content: "";display: inline-block;width: 18px;height: 20px;background: url(/img/common/com_img.png) -357px -24px no-repeat;position: absolute;left: 0;top: 0;}
.top_search_on{display: none;width: 340px;height: 230px;position: absolute;top: 25px;left: -255px;background: #07998d;padding: 20px;box-shadow: 5px 5px 10px rgba(0,0,0,0.15)}
.top_search_on .btn_search_close{width: 96px;height: 34px;line-height: 34px;font-size: 14px;padding-left: 48px;color: #fff !important;position: relative;position: absolute;right: 0;top: -34px;background: #07998d;text-align: left;z-index: 1}
.top_search_on .btn_search_close::before{content: "";display: inline-block;width: 16px;height: 16px;background: url(/img/common/com_img.png) -302px -28px no-repeat;position: absolute;left:22px;top: 10px;}
.on_search_input{width: 100%;height: 45px;background: #fff;padding: 0 45px 0 100px;position: relative;}
.on_search_input::before{content: "";display: inline-block;width: 22px;height: 45px;position: absolute;left: 78px;top: 0;background: #fff;z-index: 5;}
.on_search_input::after{content: "";display: inline-block;width: 0;height: 0;position: absolute;left: 82px;top: 21px;border-top: 4px solid #037b71;border-left: 4px solid transparent;border-right: 4px solid transparent;background: #fff;z-index: 10;}
.on_search_input #top_search{width:100px;height: 45px;line-height: 45px;padding-left:12px;color: #037b71;position: absolute;left:0;top: 0;border:none;font-size: 14px}
.on_search_input .top_search_txt{width: 100%;height: 44px;line-height: 45px;border:none;padding: 0 10px;font-size: 14px}
.on_search_input .top_search_submit{width: 45px;height: 45px;position: absolute;right: 0;top: 0;border:none;text-indent: -9999px}
.on_search_input .top_search_submit::after{content: "";display: inline-block;width: 18px;height: 20px;background: url(/img/common/com_img.png) -330px -24px no-repeat;position: absolute;left: 14px;top: 13px;}
.on_search_input .top_search_submit input{display: inline-block;width: 100%;height: 100%;cursor: pointer;z-index: 5;position: absolute;left: 0;top: 0;background: none;-webkit-appearance:none;text-indent: -9999px;border:none;}
.top_search_keyword{width: 100%;margin-top: 30px;border:1px solid rgba(255,255,255,0.5);padding: 25px 20px 15px 20px;position: relative;}
.top_search_keyword h3{font-size: 16px;position: absolute;color: #fff;left: 50%;top: -11px;padding: 0 10px;background: #07998d;transform: translateX(-50%);-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);}
.top_search_keyword li{float: left;width: 50%;color: #fff;position: relative;padding-left: 25px;margin-bottom: 5px}
.top_search_keyword li span{width: 17px;height: 17px;line-height: 17px;position: absolute;left: 0;top: 0;color: #037b71;background: #fff;text-align: center;font-weight: bold;font-size: 13px;}

.btn_sitemap{display: inline-block;padding-left: 30px;color: #fff;position: relative;margin: 0 30px;float: left;}
.btn_sitemap::before{content: "";display: inline-block;width: 21px;height: 16px;background: url(/img/common/com_img.png) -388px -54px no-repeat;position: absolute;left: 0;top: 2px;}

.btnMenu{display: none;}


/* 상단메뉴 on */
.on .top_link_box{background: #f6f6f6}
.on .top_link_box .family_link li::after{background-position: -224px -33px}
.on .top_link_box .family_link a{color: #555;}
.on .top_link_box .family_link .ic00::before{background-position: -352px -186px;}
.on .top_link_box .family_link .ic01::before{background-position: -185px -84px;}
.on .top_link_box .family_link .ic02::before{background-position: -223px -84px;}
.on .top_link_box .family_link .ic03::before{background-position: -264px -84px;}
.on .top_link_box .family_link .ic04::before{background-position: -305px -84px;}
.on .top_link_box .family_link .ic05::before{background-position: -348px -84px;}
.on .top_link_box .family_link .ic06::before{background-position: 0px -251px;}


#header.on{background-color: #fff}
.on .top_logo{background-image: url(/img/media/top_logo_on2020.png);}
.on #gnb > ul > li > h2 > a{color: #333;}
.on .top_right_box .sy_link,
.on .top_right_box .btn_top_search,
.on .btn_sitemap{color: #555}
.on .top_right_box .sy_link::before{background-position: -352px -186px}
.on .btn_sitemap::before{background-position: -386px -84px}
.on .top_right_box .btn_top_search::before{background-position: -486px -54px}

/* 모바일메뉴 */
#total_m_lay{display:none;position:fixed;top:0;width:340px;height:100%;overflow:auto;z-index:500;transition: all 0.2s;-webkit-transition: all 0.2s;background: #2a313e;padding-top: 70px}
.mbTopLink{width: 100%;position: absolute;left:0;top:0; height: 70px;background: #294baa;}
.mbTopLink .ic_home{display: inline-block;width: 30px;height: 27px;position: absolute;left: 25px;top: 22px;background: url(/img/common/com_img.png) -116px -115px no-repeat;text-indent: -9999px;}
.mbTopLink .btn_menu_close{display: inline-block;width: 22px;height: 22px;position: absolute;right: 20px;top: 24px;background: url(/img/common/com_img.png) -195px -115px no-repeat;text-indent: -9999px;}

.total_m{position: relative;height: 100%;background: #fff;}
.total_m .depth_1 ul{display: none;}
.total_m .depth_2 li{position: relative;}

.total_m .depth_1{width:100px;height: 100%;background: #2a313e}
.total_m .depth_1 > li > a{display:block;width: 100px;height: 60px;line-height: 60px;border-bottom: 1px solid rgba(0,0,0,0.2);text-align: center;color: #fff;font-size: 16px;}
.total_m .depth_1 > li.open > a{background: #fff;color: #294baa;font-weight: bold;}

.total_m .depth_1 > li > ul{width: calc(100% - 100px);position: absolute;left: 100px;top:0;background: #fff;padding-left: 20px;z-index: 10;}
.total_m .depth_2 > li.has-sub::before{content: "";display: inline-block;width:15px;height: 1px;background: #c1c2c4;position: absolute;right: 17px;top: 26px;}
.total_m .depth_2 > li.has-sub::after{content: "";display: inline-block;width:1px;height: 15px;background: #c1c2c4;position: absolute;right: 24px;top: 19px;}
.total_m .depth_2 > li > a{display: inline-block;width: 100%;padding: 15px 35px 15px 13px;border-bottom: 1px solid #e5e5e5;font-size: 16px;}
.total_m .depth_2 > li.open > a{color: #294baa;border-bottom: 3px solid #294baa;}
.total_m .depth_2 > li.open::before{background: #294baa}
.total_m .depth_2 > li.open::after{display: none;}

.total_m .depth_3{padding: 12px 0 12px 20px;background: #f7f7f7;}
.total_m .depth_3 > li{padding-right: 35px;}
.total_m .depth_3 > li.has-sub::before{content: "";display: inline-block;width:15px;height: 1px;background: #c1c2c4;position: absolute;right: 17px;top: 9px;}
.total_m .depth_3 > li.has-sub::after{content: "";display: inline-block;width:1px;height: 15px;background: #c1c2c4;position: absolute;right: 24px;top: 2px;}
.total_m .depth_3 > li > a{padding-left: 11px;position: relative;}
.total_m .depth_3 > li > a::before{content: "";display: inline-block;width: 3px;height: 3px;background: #9d9ea6;position: absolute;left: 0;top: 7px;}
.total_m .depth_3 > li.open > a{font-weight: bold;text-decoration: underline;color: #333;}
.total_m .depth_3 > li.has-sub.open::after{display: none;}

.total_m .depth_4{padding: 10px 0 10px 20px;}
.total_m .depth_4 > li > a{font-size: 14px;display: inline-block;padding-right: 12px;position: relative;}
.total_m .depth_4 > li > a::after{content: "";display: inline-block;position: absolute;width: 4px;height: 5px;top: 8px;right: 0;background: url(/img/common/com_img.png) -514px -54px no-repeat;}
.total_m .depth_4 > li.open > a{color: #294baa;font-weight: bold;}
.total_m .depth_4 > li.open > a::after{background-position: -514px -69px}

.wra_box{position:fixed !important;top:0;left:0;height:auto;z-index:200}
.fix_bg{display: none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.7;z-index:450}
.wrap_Bg{display: none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);z-index:100}


.suyoeng_title{display: inline-block;padding: 80px 230px 0 0;position: relative;}
.suyoeng_title p{color: #fff;font-family: 'NanumSquare';font-size: 32px;font-weight: bold;text-shadow: 1px 1px 4px rgba(15,110,190,0.55);text-align: right;line-height: 1.2;}
.suyoeng_title .txt_img{display: inline-block;width: 156px;height: 117px;background: url(/img/common/suyeong_calli.png) no-repeat;position: absolute;right: 70px;bottom: 0;text-indent: -9999px;}
.suyoeng_title .txt_img::after{content: "";display: inline-block;width: 114px;height: 95px;background: url(/img/common/suyeong_calli_bg.png) no-repeat;position: absolute;right: -65px;top: -12px;}


/* ---- 중간영역 ---- */
#container{position:relative;background:#fff;overflow: hidden;}
#container #content{position:relative;width:100%;}
#container #content::after{display:block;clear:both;content:''}
#subContainer{position:relative;width: 100%;}
#subContainer::after{display:block;clear:both;content:''}
#subContainer aside{float:left;margin-bottom:100px;width:240px}
#subContainer aside .left_title{padding-top:37px;height:100px;background:#4b68ba;margin-bottom: 15px}
#subContainer aside .left_title h2{margin-bottom:10px;font-family:'NanumSquare';font-size:24px;color:#fff;text-align:center;line-height:30px;}
#subContainer aside .left_title p{font-size:14px;color:#fff;text-align:center;}
#subContainer #content{position:relative;float:right;padding-bottom:50px;width:900px;}
.sub_visual{width: 100%;height: 340px;background: url(/img/media/sub_visual.jpg) center center no-repeat;padding-top: 197px;}
.sub_visual h1{text-align: center;font-size: 38px;font-family: 'NanumSquare';color: #fff;}

h1.title{margin-bottom:25px;font-family:'NanumSquare';font-size:34px;color:#333;line-height:1;}
.locaInfor{width: 100%;padding-bottom: 20px;border-bottom: 1px solid #dadada;font-size: 14px;color: #666;position: relative;margin-bottom: 30px}
.locaInfor .home{float: left;padding-top: 1px;}
.locaInfor .home a{display: inline-block;width: 17px;height: 15px;background: url(/img/common/com_img.png) -528px -54px no-repeat;text-indent: -9999px;}
.location ul li{float: left;margin-left: 20px;position: relative;}
.location ul li::before{content: "";display: inline-block;background: url(/img/common/com_img.png) -555px -54px no-repeat;width: 6px;height: 9px;position: absolute;left: -13px;top: 6px;}
.location ul li:last-child{font-weight: bold;color: #333;}

.locaInfor .btnEtc{position: absolute;right: 0;bottom: 20px;}
.locaInfor .btnEtc > li{float: left;margin-left: 6px;}
.locaInfor .btnEtc > li > button{width: 34px;height: 34px;border:1px solid #c1c1c1;border-radius: 50%;text-indent: -9999px;position: relative;}
.locaInfor .btnEtc .btnSns::after{content: "";display: inline-block;width: 14px;height: 17px;background: url(/img/common/com_img.png) -571px -54px no-repeat;position: absolute;left: 8px;top: 8px;}
.locaInfor .btnEtc .btnSns:hover::after{background-position: -547px -81px;}
.locaInfor .btnEtc .btnSns.on::after{background-position: -571px -82px;left: 9px;top: 9px}
.locaInfor .btnEtc .btnSnsclose{ display: none; }
.locaInfor .btnEtc .btnSnsclose::after{content: "";display: inline-block;width: 14px;height: 17px; border-color: #000; background: url(/img/common/com_img.png) -571px -82px no-repeat  ; position: absolute;left: 8px;top: 8px;}
.locaInfor .btnEtc .btnPrint::after{content: "";display: inline-block;width: 16px;height: 17px;background: url(/img/common/com_img.png) -595px -54px no-repeat;position: absolute;left: 8px;top: 8px;}
.locaInfor .btnEtc .btnPrint:hover::after{background-position: -595px -81px;}
.locaInfor .btnEtc > li > button.on,
.locaInfor .btnEtc > li > button:hover{border-color: #383a4a;background-color: #383a4a}
.locaInfor .snsView{position: absolute;right: 74px;top:0;width: 195px;display: none;}
.locaInfor .snsView.on{display: inline-block;}
.locaInfor .snsView li{margin-right: 5px;float: left;}
.locaInfor .snsView li a{display: inline-block;width: 34px;height: 34px;border-radius: 50%;text-indent: -9999px;position: relative;}
.locaInfor .snsView .ic1 a{background-color: #3162a8}
.locaInfor .snsView .ic2 a{background-color: #2999e4}
.locaInfor .snsView .ic3 a{background-color: #3eb11f}
.locaInfor .snsView .ic4 a{background-color: #97c800}
.locaInfor .snsView .ic5 a{background-color: #f3cb00}
.locaInfor .snsView li a::after{content: "";display: inline-block;background-image: url(/img/common/com_img.png); background-repeat: no-repeat;position: absolute;}
.locaInfor .snsView .ic1 a::after{width: 8px;height: 15px;top: 9px;left: 13px;background-position: -621px -54px;}
.locaInfor .snsView .ic2 a::after{width: 17px;height: 13px;top: 11px;left: 9px;background-position: -644px -54px;}
.locaInfor .snsView .ic3 a::after{width: 17px;height: 16px;top: 10px;left: 8px;background-position: -671px -54px;}
.locaInfor .snsView .ic4 a::after{width: 15px;height: 18px;top: 8px;left: 10px;background-position: -699px -54px;}
.locaInfor .snsView .ic5 a::after{width: 10px;height: 18px;top: 9px;left: 12px;background-position: -729px -54px;}

.content_wrap{margin-top: 50px;}

/*
================================================================================
왼쪽메뉴
================================================================================
*/
#lnb li{position:relative;font-size:16px;border:1px solid #e8e8e8;margin-bottom: 5px;}
#lnb li a{position:relative;display:block;word-break: keep-all;}
#lnb > li.has-sub > a{}
#lnb > li > a{display:block;color:#333;padding:14px 35px 14px 20px;text-decoration:none;background-color:#fff;}
#lnb > li > a:hover{text-decoration:underline;font-weight: bold;}
#lnb > li.open > a, #lnb > li.on_2 > a{color:#fff;background:#383a4a;border:1px solid #383a4a;font-weight: bold;}
#lnb > li.has-sub > a::after{position:absolute;top:25px;right:19px;width:14px;height:2px;content:'';background:#aeaeae;display: inline-block;}
#lnb > li.has-sub > a::before{position:absolute;top:19px;right:25px;width:2px;height:14px;content:'';background:#aeaeae;display: inline-block;}
#lnb > li.has-sub.open > a::after{background: #fff}
#lnb > li.has-sub.open > a::before{display: none;}
#lnb > li > ul{display:none;padding:10px 0;background:#f7f7f7;}
#lnb > li > ul > li{margin-bottom:5px;font-size:15px;line-height:18px;border:0}
#lnb > li > ul > li > a{padding:5px 10px 5px 30px;}
#lnb > li > ul > li > a:hover{color:#333;text-decoration:underline}
#lnb > li > ul > li > a:hover::before{background-color: #383a4a}
#lnb > li > ul > li > a::before{position:absolute;top:11px;left:20px;width:3px;height:3px;content:'';background:#9d9ea6;}
#lnb > li > ul > li.has-sub::before{position:absolute;top:7px;right:25px;width:2px;height:14px;content:'';background:#aeaeae;display: inline-block;}
#lnb > li > ul > li.has-sub::after{position:absolute;top:13px;right:19px;width:14px;height:2px;content:'';background:#aeaeae;display: inline-block;}
#lnb > li > ul > li.has-sub.open::before{display: none;}
#lnb > li > ul > li.open > a,#lnb > li > ul > li.on_3 > a{color:#333;font-weight:bold;text-decoration: underline;}
#lnb > li > ul > li.open > a::before{background: #383a4a}
#lnb > li > ul > li.has-sub.open::before{background-position:-141px -240px;}
#lnb > li > ul > li > ul{display:none;padding:8px 0 3px 0;margin-left: 20px}
#lnb > li > ul > li > ul > li{margin-bottom:5px;font-size:14px;font-weight:normal;border:0}
#lnb > li > ul > li > ul > li a{padding:1px 12px 1px 20px;display: inline-block;}
#lnb > li > ul > li > ul > li.open a,
#lnb > li > ul > li > ul > li.on_4 a,
#lnb > li > ul > li > ul > li a:hover{color:#294baa;font-weight:bold;text-decoration: underline;}
#lnb > li > ul > li > ul > li a::after{content: "";display: inline-block;position: absolute;width: 4px;height: 5px;top: 8px;right: 0;background: url(/img/common/com_img.png) -514px -54px no-repeat;}
#lnb > li > ul > li > ul > li a:hover::after,
#lnb > li > ul > li > ul > li.open a::after,
#lnb > li > ul > li > ul > li.on_4 a::after{background-position: -514px -69px}



/* 하단영역 */
footer#footer{width: 100%;background: #383a4a;padding: 35px 0 30px 0;color: #b2b2b8}
.footer_wrap{width: 1200px;margin: 0 auto;position: relative;}
.btn_top_move{display: inline-block;width: 80px;height: 80px;background: linear-gradient(to right bottom, #195c9f, #1b9d6e);position: absolute;box-shadow: 4px 4px 10px rgba(0,0,0,0.25);text-align: center;color: #fff;padding-top: 25px;line-height: 1;}
.btn_top_move::before{content: "";display: inline-block;width: 20px;height: 11px;background: url(/img/common/com_img.png) -690px -84px no-repeat;position: absolute;left: 50%;top: 24px;margin-left: -10px;}
.footer_link a{display: inline-block;float:left;margin-right: 38px;position: relative;}
.footer_link a:hover,
.footer_link a:focus{text-decoration: underline;}
.footer_link a::after{content: "";display: inline-block;width: 1px;height: 10px;position: absolute;right: -20px;top: 5px;background: rgba(255,255,255,0.4);}
.footer_link a:last-child::after{display: none;}
.footer_wrap .logo_box{width: 100%;padding: 25px 0;text-align: center;}
.footer_logo{width: 120px;height: 42px;display: inline-block;background: url(/img/suyeong/footer_logo.png) no-repeat;text-indent: -9999px}

.foot_sns_box{position: absolute;}

.foot_sns_box li{float: left;margin-right: 10px}
.foot_sns_box li:last-child{margin-right: 0;}
.foot_sns_box li a{display: inline-block;width: 38px;height: 38px;background: #d7d8db;border-radius: 50%;text-indent: -9999px;position: relative;}
.foot_sns_box li a::after{content: "";display: inline-block;background: url(/img/common/com_img.png) no-repeat;position: absolute;}
.foot_sns_box li a:hover,.foot_sns_box li a:focus{background: #fff;}
.foot_sns_box li .ic1::after{width: 22px;height: 16px;background-position: 0 -115px;top: 11px;left:7px;}
.foot_sns_box li .ic2::after{width: 10px;height: 20px;background-position: -33px -115px;top: 9px;left:14px;}
.foot_sns_box li .ic3::after{width: 20px;height: 20px;background-position: -53px -115px;top: 9px;left:9px;}

.foot_txt_box li{float: left;margin-right: 40px;}
.foot_txt_box li:last-child{margin-right: 0;}
.foot_txt_box p{margin-top: 4px;}
.foot_txt_box .copyright{margin-top: 20px;}


@media all and (min-width: 1025px){
	.btn_family_link{display: none;}
	.foot_sns_box{right: 0;top: 90px;}
	.btn_top_move{top: -55px;right: 0;}
	.fix_bg{display: none !important;}
	#total_m_lay{left: -340px !important;}
}

/*
=========================================================================
반응형 레이아웃 css
=========================================================================
*/


/* tablet device */
@media all and (max-width: 1024px){
	#wrapper{min-width: 100%;}
	#subContainer,.footer_wrap,.top_link_box .content_box,#subContainer .content_box{width: 100%}
	#subContainer{overflow: hidden;}
	#gnb{display: none;}
	#subContainer aside{display: none;}
	#subContainer #content{padding: 0 30px 40px 30px;float: none;margin: 0 auto;max-width: 900px;width: 100%;}
	
	.btnMenu{display: inline-block;width: 26px;height: 20px;position: absolute;top: 75px;left: 30px;background: url(/img/common/com_img.png) -228px -115px no-repeat;text-indent: -9999px;z-index: 200;}

	#total_m_lay{left:-340px;}
	#total_m_lay.mOpen{left:0}	
	
	.top_link_box{z-index: 250;position: relative;height: 40px;padding-left: 0;}
	.top_link_box .family_box{position: relative;height: 40px;line-height: 40px;width: 50%;float: left;}
	.btn_family_link{width: 100%;height: 100%;display: inline-block;font-size: 14px;color: #fff;background: #294baa;float: left;}
	.btn_family_link::before{content: "";display: inline-block;width: 16px;height: 16px;background: url(/img/common/com_img.png) -264px -115px no-repeat;position: absolute;left: 23px;top: 12px;}
	.btn_family_link::after{content: "";display: inline-block;width: 8px;height: 5px;background: url(/img/common/com_img.png) -290px -130px no-repeat;position: absolute;right: 23px;top: 18px;}
	.btn_family_link.on::after{background-position: -290px -115px}
	.top_link_box .family_link{display: none;position: absolute;left: 0;top: 40px;width: 100%;box-shadow: 5px 5px 10px rgba(0,0,0,0.15)}
	.top_link_box .family_link li{margin: -1px 0 0 0;width: 100%;height: 30px;line-height: 30px;}
	.top_link_box .family_link li a{width: 100%;padding: 0 !important;background: #fff;color: #555;text-align: center;font-size: 14px;border-top: 1px solid #eff3f8;line-height:30px}
	.top_link_box .family_link li a span{padding: 0;}
	.top_link_box .family_link li a span::before{display: none;}
	.top_link_box .family_link li a:hover{color: #294baa;font-weight: bold;background: #eff3f8}
	.top_link_box .family_link li a:hover span{text-decoration: none;}

	.btn_sitemap,.top_right_box .sy_link{display: none;}
	.top_right_box{right: 30px}
	.top_right_box .top_search_box{position: absolute;top: 0;right: 0;}
	.top_right_box .btn_top_search{width: 23px;height: 27px;padding: 0;text-indent: -9999px;font-size:0;background: url(/img/common/com_img.png) -83px -115px no-repeat;}
	.top_right_box .btn_top_search .hover_txt,.btn_logout{display:none;}
	.top_right_box .btn_top_search::before{display: none;}
	.top_search_on{left: -307px}
	.gnboverarea .top_logo{left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%)}
	
	.gnb_wrap{padding: 0;width: 100%}

	.sub_visual > .content_box{padding: 0 30px;}

	.footer_wrap{padding: 0 30px;}
	.footer_link{max-width: calc(100% - 90px)}

}


@media all and (min-width: 641px) and (max-width: 1024px){
	.foot_sns_box{top: 70px;right: 30px}
	.btn_top_move{right: 30px;top: -55px}
}
/* mobile device */
@media all and (max-width: 640px){

	#header .content_box{text-align: center;}
	
	.gnboverarea{height: 80px;}

	.gnboverarea .top_logo{width: 178px;height: 47px;background-size: contain;}
	.btnMenu{left: 20px;top:70px;}
	.top_right_box{top: 30px}

	#subContainer #content{padding: 0 20px 30px 20px}

	#subContainer #content{padding: 0 20px 30px 20px}
	.location{padding-right: 38px;}
	.locaInfor .btnEtc{bottom: 15px}
	.locaInfor .btnEtc > li > button.btnPrint{display: none;}
	.locaInfor .snsView{right: 40px}

	footer#footer{padding: 30px 0 120px 0;}
	footer#footer::after{content: "";display: inline-block;width: 100%;height: 1px;background: rgba(255,255,255,0.2);bottom: 88px;left: 0;position: absolute;}
	.footer_wrap{padding: 0 20px;}
	.footer_link{text-align: center;max-width: 100%;}
	.footer_link a{width: calc(50%);margin: 0;}
	.footer_link a::after{right: -5px}
	.footer_link a:nth-child(even)::after{display: none;}
	.foot_sns_box{bottom: -85px;left: 33px;}
	.btn_top_move{bottom: -85px;right: 20px;z-index: 10;}
	
	.sub_visual{height: 200px;padding-top: 120px;}
	.sub_visual > .content_box{padding: 0 20px;}
	h1.title{margin-bottom: 10px;padding-bottom: 0}

	.content_wrap{margin-top: 30px}

}

@media all and (max-width: 360px){
	#total_m_lay{left:-100%;width: 100%}
	#total_m_lay.mOpen{left:0}

	.top_search_on{left: -340px;}
	
}