@charset "utf-8";
/****************************************/
/* Name: 부산영어방송
/* PART: LAYOUT STYLE 
/* Version: 1.0 / day: 2019-07-
/* Author: imtec 
/****************************************/


#wrapper{width: 100%;position: relative;}

/* 상단영역 */
#header{width: 100%;position: absolute;z-index: 100;top: 0;}
.header_box{margin: 0 auto;position: relative;}
.top_link{width: 100%;padding-top: 22px;text-align: right;line-height: 1;padding-right: 150px;color: rgba(0,0,0,0.8);}

.top_link > ul{display: inline-block;}
.top_link .language{padding-left: 26px;position: relative;}
/*.top_link .language::before{content: "";display: inline-block;width: 18px;height: 18px;position: absolute;top: 0px;left: 0;background: url(../../img/com_img.png) -33px 0px no-repeat;}
*/.top_link .language li{margin-right: 22px;position: relative;float: left;}
.top_link .language li::after{content: "";display: inline-block;width: 3px;height: 3px;background: #a9a9a9;border-radius: 50%;position: absolute;right: -11px;top: 7px;}
.top_link .language li:last-child{margin-right: 9px;}
.top_link .language li:last-child::after{display: none;}
.top_link .language a.on{display: inline-block;padding: 0 15px 0 1px;color: rgba(0,0,0,0.9);font-weight:bold; }
.top_link .language a.on::after{content: "";display: inline-block;width: 8px;height: 5px;position: absolute;top: 6px;right: 1px;background: url(../../img/com_img.png) 0px 0px no-repeat;}
.top_link .language a.on::before{content: "";display: inline-block;width: 100%;height: 1px;position: absolute;left: 0;bottom: -3px;background-color: rgba(0,0,0,0.9);}

/*구글 외국어 */
.top_link .btnLang{position: relative;width: 80px;height:19px;display:inline-block;}
.top_link .btnLang button{float: left;padding: 0 14px 0 1px;border-radius: 15px;font-family: 'GmarketSans';font-size: 16px;color: #555;letter-spacing: 0.1px;background: url('https://befm.or.kr/img/common/ico_lang.png') no-repeat left center;width: 100px;}
.top_link .btnLang button::after{position: absolute;top: 10px;right: 0;width: 0;height: 0;content: '';border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 5px solid #000;}
.top_link .btnLang button span{position: relative;}
.top_link .btnLang button span::after{position: absolute;bottom: -2px;left: -4px;width: calc(100% + 8px);height: 8px;content: '';background-color: #eee;border-radius: 4px;opacity: 0;z-index: -1;transition: 0.2s;}
.top_link .btnLang button:hover,
.top_link .btnLang button.on{color: #000;font-weight: 500;letter-spacing: 0px;}
.top_link .btnLang button:hover span::after,
.top_link .btnLang button.on span::after{opacity: 1;}
.top_link .btnLang button.on::after{transform: rotate(180deg);}
.top_link .btnLang ul{position: absolute;top: 29px;left: 50%;padding:10px 0;width: 120px;background-color: #fff;border:2px solid #79468b;border-radius: 10px;transform: translateX(-50%);z-index: 100;}
.top_link .btnLang ul li a{display: block;padding: 0 10px;font-size: 15px;color: #555;line-height: 32px;text-decoration: none;text-align:left}
.top_link .btnLang ul li a:hover,
.top_link .btnLang ul li a:focus{background-color: #ededed;}
.top_link .btnLang ul li .g_lang_txt{display: inline-block;padding-left: 20px;background: url('https://befm.or.kr/img/common/icon-google.png') no-repeat left center;}


.top_link .login li{margin-left: 26px;position: relative;float: left;}
.top_link .login li::before{content: "";display: inline-block;width: 5px;height: 11px;position: absolute;top: 4px;left: -17px;background: url(../../img/com_img.png) -18px 0px no-repeat;}

.top_link .insta{position:relative; display:inline-block; margin-right:5px; vertical-align:middle;}
.top_link .insta a{display:block; width:30px; height:30px; text-indent:-9999px; font-size:0; overflow:hidden; background-image:url('/img/program/sub/top_sns_ic.png'); background-repeat:no-repeat; background-position:4px 2px; border-radius:50%; transition:all 0.2s ease; -webkit-transition:all 0.2s ease}


/* .header_box .top_logo{display: inline-block;width: 275px;height: 54px;background: url(../../img/top_logo2025.png) no-repeat;position: absolute;left: 0;text-indent: -9999px} */
.header_box .top_logo{display: inline-block;width: 275px;height: 54px;background: url(../../img/top_logo202504.png) no-repeat;position: absolute;left: 0;text-indent: -9999px}

.btn_on_air{position: absolute;text-align: left;right: 0;top: 0;width: 130px;height: 60px;text-indent: -9999px;background: #cf4833 url(../../img/m_onair_txt.png) 19px center no-repeat;}
.btn_on_air::before{content: "";display: inline-block;width: 18px;height: 18px;background: url(../../img/on_air_arrow.png) center center no-repeat;top:21px;right: 17px;position: absolute;}

/* 상단메뉴 */
#gnb{width: 100%;height:65px;position: absolute;display: flex;justify-content: center;background:linear-gradient(140deg, rgba(75,104,186,0.93), rgba(161,129,189,0.93));left: 0;top: 420px}
#gnb > li{position: relative;}
#gnb > li > a{display:inline-block;font-size: 18px;height:100%;line-height:65px;font-family: 'NanumSquare';font-weight: bold;color: #fff;padding: 0 20px;position: relative;}
#gnb > li.has-sub > a{padding-right: 40px;transition: all 0.2s;}
#gnb > li.has-sub > a::after{content: "";display: inline-block;width: 14px;height: 8px;position: absolute;top: 31px;right: 10px;background: url(../../img/com_img.png) -294px -30px no-repeat;}
#gnb > li > a:hover,
#gnb > li > a:focus{background: rgba(51,51,51,0.44);}

#gnb .depth_2{position: absolute;border:1px solid #333;left: 0;top: 65px;display: flex;width: 300px;flex-direction: column;display: none;box-shadow: 2px 2px 10px rgba(0,0,0,0.3)}
#gnb .depth_2 > li{width: 100%;}
#gnb .depth_2 > li > a{display: inline-block;width:100%;height: 50px;line-height: 50px;padding-left: 24px;color: #333;background: #fff;border-bottom: 1px solid #dfe2e5;}
#gnb .depth_2 > li:last-child > a{border-bottom: none}
#gnb .depth_2 > li > a span{display: inline-block;padding-right: 21px;position: relative;}
#gnb .depth_2 > li > a:hover,
#gnb .depth_2 > li > a:focus{background: #ededed;font-weight: bold;}
#gnb .depth_2 > li > a:hover span::after,
#gnb .depth_2 > li > a:focus span::after{content: "";display: inline-block;width: 6px;height: 10px;position: absolute;top: 21px;right: 0;background: url(../../img/com_img.png) -318px -30px no-repeat;}

#gnb .depth_2.prg_list{display:inline-block;width: 560px;left: -400px;background: #fff}
#gnb .depth_2.prg_list > li{width: 33.33%;float: left;}

#gnb .home{width: 70px;position: absolute;left:0;}
#gnb .home a{width: 100%;background: #3d5497 url(../../img/program/ic_home.png) center center no-repeat;text-indent: -9999px;}
#gnb > li.home > a:hover,
#gnb > li.home > a:focus{background: #253973 url(../../img/program/ic_home.png) center center no-repeat;}


#total_m_lay{display:inline-block;position:fixed;top:0;left:0;width:265px;height:100%;overflow:auto;background:#233551;z-index:500;transition: all 0.3s;-ms-transition: all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s; -o-transition: all 0.3s;left:-265px;}



/* 서브header */
.sub_header #gnb{top: 215px}

/*.old_header .header_box .top_logo{background-image: url(../../img/old_top_logo.png);width: 283px;height: 62px}*/
.old_header .header_box .top_logo{background-image: url(../../img/top_logo2025.png);width: 283px;height: 33px}
.sub_visual.old{background: url(../../img/sub/sub_old_visual.jpg) center center no-repeat;}
.old_header #gnb{background: linear-gradient(140deg, rgba(75,104,186,1), rgba(161,129,189,1))}



/* 중간영역 */
#container{width: 100%;position: relative;overflow:hidden;}
.content_box{width: 1200px;margin: 0 auto;position: relative;}

.sub_visual{width: 100%;height: 268px;overflow: hidden;position: relative;background-position: center center;background-repeat: no-repeat;background-size: cover;}

.sub_visual.old .tit_box{width: 100%;display: flex;justify-content: center;color: #fff;align-items: center;position: absolute;top: 126px;left: 0;}
.sub_visual.old .tit_box .tit{font-family: 'NanumSquare';font-size: 36px;font-weight: bold;margin-right: 15px;display: inline-block;}
.sub_visual.old .tit_box .prg{display: inline-block;width: 112px;height: 44px;line-height:44px;background-color: #3473bc;box-shadow: 4px 4px 8px rgba(0,0,0,0.13);font-weight: bold;text-align: center;}

#subContainer::after{content: "";display: block;width: 100%;height: 0;clear: both;}
#subContainer #content{position:relative;padding-bottom:50px;width: 100%;}


.locaInfor{padding-top: 66px;padding-bottom: 18px;background: url(../../img/sub/location_bd.jpg) left bottom repeat-x;position: relative;margin-bottom: 45px}
.location{display: flex;justify-content: flex-end;align-items: center;}
.location .home{padding-top: 9px}
.location .home a{display: inline-block;width: 18px;height: 18px;background: url(../../img/com_img.png) -225px -30px no-repeat;text-indent: -9999px}
.location ul{display: flex;margin-right: 8px}
.location ul li{margin-left: 28px;color: #666;line-height: 1;position: relative;}
.location ul li::after{content: "";display: inline-block;width: 6px;height: 10px;position: absolute;top: 4px;left: -15px;background: url(../../img/com_img.png) -252px -30px no-repeat;}
.location ul li:last-child{font-weight: bold;}

.locaInfor .btn_print{width: 36px;height: 36px;border-radius: 50%;border: 1px solid #777;text-indent: -9999px;transition: all 0.2s;position: relative;}
.locaInfor .btn_print::after{content: "";display: inline-block;width: 16px;height: 17px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);background: url(../../img/com_img.png) -268px -30px no-repeat;}
.locaInfor .btn_print:hover{background-color: #f3f3f3}
#content h1.title{font-size: 34px;color: #333;font-family: 'NanumSquare';font-weight: bold;position: absolute;top: 58px;left: 0;}



/* 하단영역 */
#footer{width: 100%;background: #383a4a;}
#footer .content_box{padding: 40px 0 28px 0;}
#footer .btn_top{width: 80px;height: 80px;padding-top: 24px;color: #fff;background: linear-gradient(140deg,#4b68ba ,#a181bd);position: absolute;top: 0;right: 0;box-shadow: 4px 4px 10px rgba(0,0,0,0.25);z-index: 10;}
#footer .btn_top::before{content: "";display: inline-block;width: 20px;height: 11px;position: absolute;top: 24px;left: 30px;background: url(../../img/com_img.png) -102px -30px no-repeat;}
.foot_link{display: flex;}
.foot_link li{margin-right: 38px;position: relative;line-height: 1;}
.foot_link li::after{content: "";display: inline-block;background: rgba(179,179,179,0.4);width: 1px;height: 10px;position: absolute;top:3px;right: -21px;}
.foot_link li:last-child{margin-right: 0;}
.foot_link li:last-child::after{display: none;}
.foot_link a{color: #b2b2b8;}
.foot_link a.color{color: #cab6e3;}
.foot_link a:hover{text-decoration: underline;}

#footer .logo_box{margin: 30px 0;text-align: center;}
/*#footer .foot_logo{display: inline-block;width: 128px;height: 48px;background: url(../../img/foot_logo.png) no-repeat;background-size: cover;text-indent: -9999px;text-align: left;}*/
#footer .foot_logo{display: inline-block;width: 128px;height: 33px;background: url(../../img/foot_logo2025.png) no-repeat;background-size: cover;text-indent: -9999px;text-align: left;}

#footer .txt_box{color: #b2b2b8;}
#footer .call{display: inline-block;}
#footer .call span{display: inline-block;margin-left: 38px}
#footer .copyright{margin-top: 15px}





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

.btn_m_menu_close{display:none}
@media all and (max-width: 1200px){
.content_box{width:100%;}
}

@media all and (min-width: 1025px){
	#total_m_lay, .btnMenu, .header_box .sms_link{display: none;}
    .btn_m_menu_close{display:none !important}

/* 흰글자 */
.top_link.white{color: rgba(255,255,255,0.8);}
.top_link.white .language::before{background-position: -33px -62px}
.top_link.white .language a.on::before{background-color: rgba(255,255,255,0.9);}
.top_link.white .language a.on::after{background-position: 0 -62px}
.top_link.white .language a.on{color: rgba(255,255,255,0.9);}
.top_link.white .language li::after{background-color: rgba(255,255,255,0.9);}
.top_link .btnLang.white button{color: #ffffff;} /*흰색배경일때 번역 3줄 */
.top_link .btnLang.white button {background: url('/img/common/ico_lang_w.png') no-repeat left center;}
.top_link .btnLang.white button::after{border-top: 5px solid #ffffff;}
.top_link .btnLang.white button span::after{background-color: #f1f8c5}
.top_link .btnLang.white button.on span::after{opacity: 0.5 !important;}

.top_link.white .login li::before{background-position: -18px -62px}
 /*.header_box .top_logo.white{background: url(/img/top_logo_w.png) no-repeat;} 기존 로고 */
 .header_box .top_logo.white{background: url(/img/top_logo2025-2.png) no-repeat;}

}
/* tablet device */
@media all and (max-width: 1024px){
#wrapper{padding-top: 44px}
.content_box{width: 740px;}
#gnb{display: none;}

.top_link{padding-top: 14px;height: 44px;padding-right: 140px}
.header_box .sms_link{display: inline-block;width: 147px;height: 18px;background: url(../../img/m_sms_txt.png) no-repeat;position: absolute;top: 14px;left: 0;text-indent: -9999px;text-align: left;}
.btn_on_air{height: 44px;}
.btn_on_air::before{top:13px;}
/*.header_box .top_logo{top: 58px;width: 297px;height: 100px;background-size: cover;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);background-image: url(../../img/top_m_logo.png);}*/
/*.header_box .top_logo{top: 68px;width: 170px;height: 83px;background-size: cover;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);background-image: url(../../img/top_m_logo2025.png);}*/
.header_box .top_logo{top: 68px;width: 170px;height: 83px;background-size: cover;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);background-image: url(../../img/top_m_logo202504.png);}
.top_link .login{display: none;}
.old_header .header_box .top_logo{top: 88px;width: 130px;height:33px;background-size: cover;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);background-image: url(../../img/top_logo2025.png);}


#subContainer aside{display: none;}
#subContainer #content{width:100%;max-width: 740px;margin: 0 auto}
.sub_visual{height: 217px;}
.locaInfor{padding-top: 86px;}
.location{justify-content: center;}
#content h1.title{left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);top: 40px}

/* 모바일메뉴 */
.btnMenu{width: 55px;height: 55px;background: rgba(255,255,255,0.5);position: absolute;top: 83px;left: 0;text-indent: -9999px;}
.btnMenu span{width: 24px;height: 18px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);border-top: 2px solid #000;}
.btnMenu span::before{content: "";display: inline-block;width: 15px;height: 2px;background: #000;position: absolute;left: 0;top: 6px;}
.btnMenu span::after{content: "";display: inline-block;width: 19px;height: 2px;background: #000;position: absolute;left: 0;bottom: 0;}

#total_m_lay.mOpen{left:0}
#total_m_lay .mbTopLink{position:relative;padding-top:82px;height:130px;border-bottom:1px solid #455e8d;background: linear-gradient(to right, #4b68ba, #a181bd);text-align: center;}
#total_m_lay .mbTopLink::before{display:block;width:114px;height:41px;content:'';background:url(../../img/m_left_logo.png) no-repeat;position: absolute;left: 50%;margin-left: -57px;top: 20px;}
#total_m_lay .mbTopLink .btn_box{display: flex;justify-content: center;width: 100%;}
#total_m_lay .mbTopLink a{position:relative;display:inline-block;margin-right: 5px;width:70px;height:34px;line-height:30px;font-size:15px;color:#fff;font-weight:bold;border:1px solid rgba(255,255,255,0.2);text-align: center;}
#total_m_lay .mbTopLink a:last-child{margin-right:0}
#total_m_lay .total_m > ul{background:#fff}
#total_m_lay .total_m li{position:relative}
#total_m_lay .total_m li a{display:block}
#total_m_lay .total_m li button{position:absolute;top:0;left:0;width:100%;height:100%;text-indent:-999px;overflow:hidden;}
#total_m_lay .total_m > ul > li{width:auto !important;font-size:18px;border-bottom:1px solid #e0e0e0}
#total_m_lay .total_m > ul > li.has-sub > a::after{position:absolute;top:24px;right:27px;width:8px;height:14px;content:'';background:url(../../img/com_img.png) no-repeat -132px -30px}
#total_m_lay .total_m > ul > li.has-sub.open > a::after,#total_m_lay .total_m > ul > li > a.on1::after{background-position:-150px -30px;width: 14px;height: 8px;right: 24px;top: 27px;}
#total_m_lay .total_m > ul > li > a{display:block;font-family:'NanumSquare';color:#333;padding:17px 45px 17px 30px;font-weight:bold;text-decoration:none;word-break: keep-all;}
#total_m_lay .total_m > ul > li.open > a,#total_m_lay .total_m > ul > li > a.on1{color:#fff;background:#223450;}
#total_m_lay .total_m > ul > li > ul{display:none;padding:20px 30px;background:#f4f4f4;}
#total_m_lay .total_m > ul > li > ul > li{font-size:16px;}
#total_m_lay .total_m > ul > li > ul > li.has-sub{}
#total_m_lay .total_m > ul > li > ul > li.has-sub.open{background-color:#fff;}
#total_m_lay .total_m > ul > li > ul > li > a{padding:6px 0 6px 15px;color:#555;display: inline-block;}
#total_m_lay .total_m > ul > li > ul > li.open > a{color:#3473bc;font-weight:bold;position: relative;}
#total_m_lay .total_m > ul > li > ul > li > a::before{position:absolute;top:14px;left:0;width:5px;height:7px;content:'';background:url(../../img/com_img.png) no-repeat -189px -30px}
#total_m_lay .total_m > ul > li > ul > li.open > a::before{background-position: -174px -30px}

.btn_m_menu_close{width: 52px;height: 52px;background-color: #333;box-shadow: 2px 2px 5px rgba(0,0,0,0.22);position: fixed;left: 258px;top: 75px;text-indent: -9999px;z-index: 550;}
.btn_m_menu_close::before{content: "";display: inline-block;width: 31px;height: 2px;background: #fff;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) rotate(45deg);-webkit-transform: translate(-50%,-50%) rotate(45deg);}
.btn_m_menu_close::after{content: "";display: inline-block;width: 31px;height: 2px;background: #fff;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) rotate(-45deg);-webkit-transform: translate(-50%,-50%) rotate(-45deg);}


.wra_box{position:fixed;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}

#footer .txt_box br{display: none;}
#footer .call{display: block;}
#footer .call span:first-child{margin-left: 0;}

}

/* small tablet device */
@media all and (max-width: 768px){
	.content_box{width: 100%;padding: 0 15px;} 
	.btnMenu{left: 15px}
	.header_box .sms_link{left: 15px;}

	.foot_link{padding-right: 100px;flex-wrap: wrap;padding-left: 15px}
	.foot_link li{margin-bottom: 10px}
	#footer .txt_box{padding: 0 15px}
}

@media all and (min-width: 641px){
    .mobile_on_air{display:none;}
}

/* mobile device */
@media all and (max-width: 640px){
#wrapper{padding-top: 110px}
.top_link{padding-right: 0}
.header_box .sms_link{top:20px; left:15px; width:120px; height:15px; background-size:contain;}
.top_link .insta{margin-right:0;}

.btn_on_air{display: none;}
.btnMenu{background: none;left: 15px;width: 24px;height: 18px;top: 76px}
/*.header_box .top_logo,.old_header .header_box .top_logo{width: 170px;height: 33px;background-image: url(../../img/top_logo.png);top: 65px}*/
/*.header_box .top_logo,.old_header .header_box .top_logo{width: 110px;height: 28px;background-image: url(../../img/top_logo2025.png);top: 65px}*/
.header_box .top_logo,.old_header .header_box .top_logo{width: 110px;height: 30px;background-image: url(../../img/top_logo202504.png);top: 65px}

.mobile_on_air{display:inline-block;position: absolute;right: 15px;top: 63px;width: 50px;height: 40px;text-indent: -9999px;background: #cf4833 url(../../img/m_onair_txt.png) center center no-repeat;background-size:35px auto}

#content h1.title{font-size: 24px;white-space: nowrap;}

.sub_visual{height: 113px;}
.sub_visual.old .tit_box{top: 20px;flex-direction: column;}
.sub_visual.old .tit_box .tit{font-size: 22px;margin-right: 0;margin-bottom: 5px;}
.sub_visual.old .tit_box .prg{width: 100px;height: 34px;line-height: 34px}
.locaInfor .btn_print{flex-shrink: 0;}

#footer .content_box{padding: 100px 15px 30px 15px;}
.foot_link{justify-content: center;padding: 0}
#footer .logo_box{margin: 5px 0 15px 0}
#footer .copyright{font-size: 14px;}

}


@media all and (max-width: 450px){

.top_link .insta{margin-right:-5px;}

.top_link .language::before{left: 5px}
.top_link .language li{margin-right:5px}
.top_link .language li:last-child{margin-right:0}
.top_link .language li::after{left: -10px}
 }