@charset "utf-8";

/* @import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css); */
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&subset=korean);
@import url(https://fonts.googleapis.com/earlyaccess/nanumpenscript.css);
/* @import url(font.css); */


/* 1. Default Setting */

* {margin: 0; padding: 0;}

body {min-width: 1280px; line-height: 1.4; font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif; font-size: 14px; color: #666; letter-spacing: -0.5px; -webkit-text-size-adjust: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); *letter-spacing: -1px;}
body.auto {min-width: 0;}

header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {display: block;}

li {list-style: none;}

a {display: inline-block; color: #666; text-decoration: none; cursor: pointer; *display: inline; *zoom: 1;}
a:hover {text-decoration: underline;}

img {border: 0; vertical-align: top;}
em {font-style: normal; font-weight: bold;}

table {width: 100%;}
label {vertical-align: middle;}

input, select, textarea, button {vertical-align: middle; font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif; font-size: 14px; color: #666; letter-spacing: -0.5px; *letter-spacing: -1px;}
input[type="submit"], button {outline: none; cursor: pointer; -webkit-appearance: none;}

pre {font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif;}


/* 2. Shortcuts */

ul.float {*zoom: 1;}
ul.float:after {content: ""; display: block; clear: both;}
ul.float > li {float: left;}
ul.float > li:first-child {padding-left: 0 !important; background: none !important;}

div.float {*zoom: 1;}
div.float:after {content: ""; display: block; clear: both;}
div.float > .left {float: left;}
div.float > .right {float: right;}


/* 3. Common Styles */

.wrap {position: relative; width: 1280px; margin: 0 auto;}
.none {display: block; visibility: hidden; width: 0; height: 0; line-height: 0; font-size: 0;}


/* 4. Skip Navigation */

.skip {position: absolute; top: 0; left: 0; width: 100%; height: 0; padding: 0; background: #000; z-index: 200; overflow: hidden; text-align: center; line-height: 0; font-size: 0;}
.skip.on {height: auto; overflow: auto;}
.skip a {width: 50%; padding: 5px 0; line-height: 1.4; font-size: 14px; color: #fff; white-space: nowrap;}
.skip a:focus {background: #0053a1;}


/* 5. Header */

header {position: relative; z-index: 100;}

header .top {position: fixed; top: 0; left: 0; width: 100%; z-index: 150; text-align: center; line-height: 0; font-size: 0;}

header .top .nav {background: #242526;}
header .top .nav .wrap {height: 90px; overflow: hidden;}

header .top .nav ul {*zoom: 1;}
header .top .nav ul:after {content: ""; display: block; clear: both;}
header .top .nav li {float: left; width: 256px;}
header .top .nav li a {display: block; height: 88px; background-repeat: no-repeat; text-decoration: none; color: #fff;}
header .top .nav li a:hover {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=8)"; filter: alpha(opacity=80); opacity: .8;}

header .top .nav li a.i01 {background-image: url(../img/common/imgNavTop01.png);}
header .top .nav li a.i02 {background-image: url(../img/common/imgNavTop02.png);}
header .top .nav li a.i03 {background-image: url(../img/common/imgNavTop03.png);}
header .top .nav li a.i04 {background-image: url(../img/common/imgNavTop04.png);}
header .top .nav li a.i05 {background-image: url(../img/common/imgNavTop05.png);}

header .top .nav dl {padding: 23px 25px 0; text-align: left; line-height: 1;}
header .top .nav dt {font-size: 20px;}
header .top .nav dd {margin-top: 9px; font-size: 14px;}

header .top a.close {width: 94px; height: 16px; background: url(../img/common/btnNavTop.png) no-repeat 50% 0; line-height: 0; font-size: 0;}
header .top a.close.on {background-image: url(../img/common/btnNavTopOn.png);}

header .mid {padding-top: 90px;}
header .mid .wrap {height: 80px;}

header .mid h1 {padding-top: 10px; line-height: 0; font-size: 0;}

header .mid ul {*zoom: 1;}
header .mid ul:after {content: ""; display: block; clear: both;}
header .mid li {float: left;}

header .mid nav {position: absolute; top: 25px; left: 241px; line-height: 2; font-size: 18px; font-weight: 500;}
header .mid nav li {padding-left: 24px;}
header .mid nav li:first-child {padding-left: 0;}
header .mid nav li a {color: #333; text-decoration: none;}
header .mid nav li a:hover {color: #0053a1;}

header .mid .util {position: absolute; top: 30px; right: 191px; line-height: 2; font-size: 13px; font-weight: 500;}
header .mid .util li {padding-left: 16px; background: url(../img/common/objDivUtil.png) no-repeat 7px 11px;}
header .mid .util li:first-child {padding-left: 0; background: none;}
header .mid .util li a {color: #999;}

header .mid .btn {position: absolute; top: 0; right: 0; border-right: solid 1px #d1dae3; line-height: 0; font-size: 0;}
header .mid .btn li {width: 79px; border-left: solid 1px #d1dae3;}
header .mid .btn li a {display: block; height: 80px; background-color: #fff; background-repeat: no-repeat; background-position: 50%;}
header .mid .btn li a.search {background-image: url(../img/common/btnSearch.png);}
header .mid .btn li a.search:hover {background-image: url(../img/common/btnSearchOn.png);}
header .mid .btn li a.menu {background-image: url(../img/common/btnMenu.png);}
header .mid .btn li a.menu:hover {background-image: url(../img/common/btnMenuOn.png);}

header .bot {background: url(../img/common/bgHeaderBot.png); *zoom: 1;}
header .bot .wrap {height: 60px;}

header .bot .today {position: relative; padding-left: 82px; *zoom: 1;}
header .bot .today:after {content: ""; display: block; clear: both;}
header .bot .today .lb {position: absolute; top: 22px; left: 0; width: 65px; background: url(../img/common/objDivToday.png) no-repeat 100% 50%; line-height: 20px; font-size: 0;}

header .bot .today dl {float: left; margin-right: 21px; padding: 14px 0; line-height: 22px; font-size: 16px; *zoom: 1;}
header .bot .today dl:after {content: ""; display: block; clear: both;}
header .bot .today dt {padding: 5px 0; padding-right: 21px; font-weight: bold;}
header .bot .today dt,
header .bot .today dd {float: left;}
header .bot .today dd .txt {display: inline-block; max-width: 260px; padding: 5px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; *display: inline; *zoom: 1;}
header .bot .today dd .txt,
header .bot .today dd .btn {vertical-align: top;}
header .bot .today dd .btn {margin-left: 9px; padding: 5px 15px; border-radius: 10px; font-size: 16px; font-weight: 500; color: #fff;}

header .bot .today dl.tv dt {color: #0053a1;}
header .bot .today dl.tv dd .btn {background-color: #0053a1;}

header .bot .today dl.radio dt {color: #8666f1;}
header .bot .today dl.radio dd .btn {background-color: #8666f1;}

header .layer {position: absolute; bottom: 60px; left: 0; width: 100%; height: 0;}
header .layer section,
header .layer nav {position: absolute; top: 0; left: 0; width: 100%; height: 0; background: #e0e6ec; overflow: hidden; z-index: 150;}

header .layer .wrap {padding: 40px 0; *zoom: 1;}
header .layer .wrap:after {content: ""; display: block; clear: both;}


/* 5.1. Header : Partnership */

header .bot .partner {position: absolute; top: 0; right: 0; width: 320px; height: 60px; padding-left: 40px; overflow: hidden;}

header .bot .partner .head {position: relative; background: #0a4478;}
header .bot .partner .head .label {width: 260px; line-height: 60px; font-size: 16px; font-weight: bold; text-transform: uppercase; letter-spacing: 0;}
header .bot .partner .head .label a {display: block; padding: 0 30px; color: #fff; text-decoration: none;}
header .bot .partner .head .label a:hover {color: #fbb70c;}
header .bot .partner .head .close {position: absolute; top: 0; right: 0; width: 60px; height: 60px; background: url(../img/common/btnPartnerShow.png) no-repeat 50%; line-height: 0; font-size: 0;}
header .bot .partner .head .close:hover {background-image: url(../img/common/btnPartnerShowOn.png);}

header .bot .partner .pack {padding: 35px 0 35px 30px; background: #fff;}

header .bot .partner .list {width: 260px; height: 504px; overflow: hidden; *zoom: 1;}
header .bot .partner .list:after {content: ""; display: block; clear: both;}
header .bot .partner .list li {float: left; width: 260px; margin-bottom: 20px; margin-right: 30px; padding-bottom: 21px; background: url(../img/common/objDivPartner.png) repeat-x 0 100%;}
header .bot .partner .list li,
header .bot .partner .list li a {height: 64px;}
header .bot .partner .list li a {display: block; position: relative; padding-left: 105px; text-decoration: none;}
header .bot .partner .list li .thumb {position: absolute; top: 0; left: 0;}
header .bot .partner .list li .thumb,
header .bot .partner .list li .thumb img {width: 90px; height: 64px;}
header .bot .partner .list li .desc {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9c9c9c;}
header .bot .partner .list li .subject {height: 44px; overflow: hidden; line-height: 22px; font-size: 16px; font-weight: 500; color: #0053a1;}
header .bot .partner .list li a:hover .subject {text-decoration: underline;}

/* vai 추가 2018.11.05 */
header .bot .partner .list li.big,
header .bot .partner .list li.big a {height: 190px;}
header .bot .partner .list li.big a {padding-left: 0px;}
header .bot .partner .list li.big {margin-bottom: 14px; padding-bottom: 0px;}

header .bot .partner a.expand {display: none; position: absolute; top: 574px; left: 0; width: 40px; height: 40px; background: #687378 url(../img/common/btnPartnerExpand.png) no-repeat 50%; line-height: 0; font-size: 0;}
header .bot .partner a.expand:hover {background-color: #0053a1;}

header .bot .partner.on {height: 614px;}
header .bot .partner.on .head .close {background-image: url(../img/common/btnPartnerHide.png);}
header .bot .partner.on .head .close:hover {background-image: url(../img/common/btnPartnerHideOn.png);}

header .bot .partner.on.expand {width: 610px;}
header .bot .partner.on.expand a.expand {background-image: url(../img/common/btnPartnerExpandOn.png);}


/* 5.2. Header : Search Layer */

header .layer .search.on {height: 280px;}

header .layer .search h1 {text-align: center; line-height: 1; font-size: 30px; font-weight: 500; color: #333d49; letter-spacing: -2px;}

header .layer .search form {width: 394px; height: 50px; margin: 30px auto 0; padding: 0; border: solid 3px #333d49; line-height: 0; font-size: 0;}
header .layer .search form input[type="text"] {width: 250px; height: 29px; padding: 10px 20px 11px; border: 0; font-size: 20px; letter-spacing: -1px;}
header .layer .search form input[type="text"],
header .layer .search form input[type="submit"] {vertical-align: top;}
header .layer .search form input[type="submit"] {width: 104px; height: 50px; border: 0; background: #333d49; line-height: 1; font-size: 20px; color: #fff;}

header .layer .search dl.keyword {position: relative; width: 400px; margin: 16px auto 0;}
header .layer .search dl.keyword dt {padding-bottom: 5px; border-bottom: solid 3px #919fad; font-size: 20px; color: #546372; letter-spacing: -1px;}
header .layer .search dl.keyword dd.body {margin-top: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 500;}
header .layer .search dl.keyword dd.body,
header .layer .search dl.keyword dd.body a {color: #0053a1;}
header .layer .search dl.keyword dd.date {position: absolute; top: 9px; right: 0; font-size: 13px; color: #7588a0;}


/* 5.2. Header : Program Layer */

header .layer .program.on {height: 280px;}

header .layer .program h1 {text-align: center; line-height: 1; font-size: 30px; font-weight: 500; color: #333d49; letter-spacing: -2px;}




/* 5.3. Header : Navigation Layer */

header .layer .menu.on {height: 500px;}

header .layer .menu dl {float: left; margin-left: 50px;}
header .layer .menu dl:first-child {margin-left: 0;}
header .layer .menu dt {padding-bottom: 15px; border-bottom: solid 3px #919fad; font-size: 20px; color: #546372; letter-spacing: -1px;}
header .layer .menu dd a {display: block;}

header .layer .menu dl.icon {width: 528px; *zoom: 1;}
header .layer .menu dl.icon:after {content: ""; display: block; clear: both;}
header .layer .menu dl.icon dt {margin-bottom: 14px;}
header .layer .menu dl.icon dd {float: left; width: 50%; padding-top: 10px;}
header .layer .menu dl.icon dd a {height: 50px; padding-left: 63px; background-repeat: no-repeat; background-position: 0 0; line-height: 50px; font-size: 16px; font-weight: 500; color: #0053a1;}

header .layer .menu dl.icon dd.i01 a {background-image: url(../img/common/icnService01.png);}
header .layer .menu dl.icon dd.i02 a {background-image: url(../img/common/icnService02.png);}
header .layer .menu dl.icon dd.i03 a {background-image: url(../img/common/icnService03.png);}
header .layer .menu dl.icon dd.i04 a {background-image: url(../img/common/icnService04.png);}
header .layer .menu dl.icon dd.i05 a {background-image: url(../img/common/icnService05.png);}
header .layer .menu dl.icon dd.i06 a {background-image: url(../img/common/icnService06.png);}
header .layer .menu dl.icon dd.i07 a {background-image: url(../img/common/icnService07.png);}
header .layer .menu dl.icon dd.i08 a {background-image: url(../img/common/icnService08.png);}
header .layer .menu dl.icon dd.i09 a {background-image: url(../img/common/icnService09.png);}
header .layer .menu dl.icon dd.i10 a {background-image: url(../img/common/icon_joyntalk.png);}
header .layer .menu dl.icon dd.i11 a {background-image: url(../img/common/icon_news.png);}
header .layer .menu dl.icon dd.i12 a {background-image: url(../img/common/icnService12.png);}

header .layer .menu dl.text {width: 138px;}
header .layer .menu dl.text dt {margin-bottom: 22px;}
header .layer .menu dl.text dd {margin-top: 10px;}
header .layer .menu dl.text dd:first-child {margin-top: 0;}
header .layer .menu dl.text dd a {line-height: 1.2; color: #7588a0;}


/* 6. Footer */

footer {background: #333d49; text-align: center; line-height: 2; font-size: 13px;}
footer .wrap {/*padding: 32px 0;*/padding:0 0 32px;width:100%;}

footer nav{padding:32px 0;background-color:#272f39;}
footer nav li {display: inline-block; padding: 0 10px; background: url(../img/common/objDivFooter.png) no-repeat 0 50%; *display: inline; *zoom: 1;}
footer nav li,
footer nav li a {color: #fff;}
footer nav li:first-child {padding-left: 0; background: none;}

footer .info {margin-top: 12px;}
footer .info li {display: inline; padding: 0 10px; background: url(../img/common/objDivFooter.png) no-repeat 0 50%; *zoom: 1;}
footer .info li,
footer .info li a {color: #adb0b3;}
footer .info li:first-child,
footer .info li.break + li {padding-left: 0; background: none;}
footer .info li.break + li {*padding-left: 10px; *background: url(../img/common/objDivFooter.png) no-repeat 0 50%;}
footer .info li.break:after {content: "\A"; white-space: pre;}

footer .info1,
footer .info2{margin:12px auto 0;padding-left:90px;width:710px;text-align:left;}
footer .info1{margin-top:30px;background:url(../img/common/imgFtLogo01.png) 20px center no-repeat;}
footer .info2{background:url(../img/common/imgFtLogo02.png) 20px center no-repeat;}

footer .copy{margin-top:32px;}
footer .copy li{color:#6b7684;}

footer .view-mobile {display: none; margin: 32px 20px 0; padding: 10px 0 20px; border-radius: 10px; background: linear-gradient(#fff, #ddd); font-size: 4vw; font-weight: 700; color: #333d49; text-decoration: none;}


/* 7. Article */

article {margin-top: -60px; *zoom: 1;}

article.bg {background: #dfe9f3;}


/* 8. Layer Popup */

.popup {display: none; position: fixed; top: 0; left: 0; width: 980px; padding: 0 30px 40px; border: solid 5px #333d49; background: #fff; z-index: 400;}
.popup.on {display: block;}

.popup .head {position: relative; height: 74px; border-bottom: solid 1px #333d49;}
.popup .head .title {padding-right: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 74px; font-size: 30px; font-weight: 400; color: #333d49; letter-spacing: -2px;}
.popup .head .close {position: absolute; top: 24px; right: 0; width: 28px; height: 28px; background: url(../img/common/btnPopupClose.png) no-repeat 50%; line-height: 0; font-size: 0;}

.popup .body {margin-top: 25px; overflow-y: auto;}

.popupMask {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 300; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=5)"; filter: alpha(opacity=50); opacity: .5; cursor: pointer; *display: none !important;}
.popupMask.on {display: block;}

.popup_layer {display: none;}


/* 8.1. Layer Popup : Message Box */

.popup.msg {width: auto; padding: 20px 30px; text-align: center;}

.popup.msg > div {margin-top: 20px;}
.popup.msg > div:first-child {margin-top: 0;}

.popup.msg p {line-height: 1.3; font-size: 18px; font-weight: 500; color: #333d49; letter-spacing: -1px;}

.popup.msg dt {line-height: 1.2; font-size: 25px; font-weight: 500; color: #1c86ea; letter-spacing: -1.5px; *letter-spacing: -2px;}
.popup.msg dd {margin-top: 15px;}

.popup.msg a.btn {display: inline-block; padding: 10px 20px; border-radius: 5px; background: #333d49; vertical-align: middle; white-space: nowrap; font-size: 16px; font-weight: 500; color: #fff; text-decoration: none; *display: inline; *zoom: 1;}
.popup.msg a.btn.color {border-color: #1c86ea; background: #1c86ea;}


/* 9. Datepicker UI */

.ui-datepicker {z-index: 250 !important;}

.ui-datepicker .ui-datepicker-header {position: relative; height: 58px; border: solid 4px #333d49; border-bottom: 0; background: #fff;}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {position: absolute; top: 20px; width: 28px; height: 28px; line-height: 0; font-size: 0; cursor: pointer;}
.ui-datepicker .ui-datepicker-prev {left: 25px; background: url(../img/common/btnCalendarPrev.png) no-repeat;}
.ui-datepicker .ui-datepicker-next {right: 25px; background: url(../img/common/btnCalendarNext.png) no-repeat;}

.ui-datepicker .ui-datepicker-title {padding-top: 24px; text-align: center; line-height: 1; font-size: 20px; font-weight: 700; color: #333;}

.ui-datepicker .ui-datepicker-calendar {width: 268px; margin: 0 auto; border: solid 4px #333d49; border-top: 0; background: #fff; padding: 15px 15px; text-align: center;}

.ui-datepicker .ui-datepicker-calendar th {padding-bottom: 5px; font-size: 14px; font-weight: 700; color: #333d49;}
.ui-datepicker .ui-datepicker-calendar th,
.ui-datepicker .ui-datepicker-calendar td {width: 34px; height: 22px; line-height: 1;}
.ui-datepicker .ui-datepicker-calendar td {font-size: 13px;}
.ui-datepicker .ui-datepicker-calendar td > a {width: 22px; height: 12px; padding: 5px 0; color: #999; text-decoration: none;}

.ui-datepicker .ui-datepicker-current-day > a {background: #1c86ea; color: #fff !important;}


/* 10. AJAX Preloader */

.preload {display: none; text-align: center;}
.preload.on {display: block;}

.preload.default {position: fixed; top: 0; left: 0; width: 100%; z-index: 400;}

.preload.i1 {padding: 50px 0;}


/* 10. AJAX Preloader2 */

.preload2 {display: none; text-align: center; position:absolute; top:0; left:0;background-color: #000000; background-color: rgba( 255, 255, 255, 0.8 );}
.preload2.on {display: block;}

.preload2.default {position: fixed; top: 0; left: 0; width: 100%; z-index: 400;}

.preload2.i1 {padding: 80px 0;}


/* 11. System Popup */

.popupSys {padding: 20px; background: #333;}

.popupSys .head {position: relative; padding-bottom: 14px; border-bottom: solid 1px #fff;}
.popupSys .head .title {white-space: nowrap; line-height: 1; font-size: 30px; font-weight: normal; color: #fff; letter-spacing: -2px;}

.popupSys .head ul.func {position: absolute; top: 0; right: 0; border: solid 1px #999; border-radius: 5px; overflow: hidden; *zoom: 1;}
.popupSys .head ul.func:after {content: ""; display: block; clear: both;}
.popupSys .head ul.func li {float: left;}
.popupSys .head ul.func li a {display: block; min-width: 60px; padding: 0 20px; border-left: solid 1px #999; text-align: center; line-height: 30px; font-size: 15px; font-weight: 500; color: #ccc; text-decoration: none;}
.popupSys .head ul.func li a:hover {color: #fff;}
.popupSys .head ul.func li:first-child a {border-left: 0;}
.popupSys .head ul.func li.on a {background: #fff; color: #000;}

.popupSys .body {position: relative; margin-top: 20px;}

.popupSys .onairProg {position: relative; height: 48px; margin-bottom: 15px; padding: 10px 15px; padding-right: 110px; border: solid 1px #999; background: #444; color: #ccc;}
.popupSys .onairProg .title {overflow: hidden; line-height: 1.1; font-size: 22px; font-weight: 500; color: #fff; letter-spacing: -1px;}
.popupSys .onairProg .title,
.popupSys .onairProg .subtitle {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.popupSys .onairProg .subtitle {margin-top: 5px;}
.popupSys .onairProg .move {position: absolute; top: 17px; right: 15px; width: 80px; border-radius: 5px; background: #f4b518; text-align: center; line-height: 36px; font-size: 16px; font-weight: 500; color: #000; text-decoration: none; letter-spacing: -1px;}


/* 12. Keyword List */

.listKeyword {display: none; position: absolute; height: 110px; border: solid 1px #bdc7d1; background: #fff; overflow-y: scroll; z-index: 250;}
.listKeyword ul {padding: 5px 0;}
.listKeyword li {line-height: 25px; font-size: 13px;}
.listKeyword li a {display: block; padding: 0 10px;}
.listKeyword li em {font-weight: 500 !important; color: #ff0000 !important;}


/* 13. Radio On-Air [Obsolete] */

.onairRadio {height: 370px; overflow: hidden; line-height: 0; font-size: 0;}

.onairRadio iframe {width: 100%; height: 150px;}

.onairRadio .app {position: relative; padding: 20px 20px; background: #6d6d6d; text-align: right;}
.onairRadio .app p.lb {position: absolute; top: 10px; left: 20px; padding-left: 58px; background: url(../img/main/icnApp02.png) no-repeat 0 50%; line-height: 51px; font-size: 15px; color: #ccc;}
.onairRadio .app a.btn {width: 70px; margin-left: 5px; border-radius: 5px; background: #222; text-align: center; line-height: 30px; font-size: 15px; font-weight: 700; color: #c6d73a;}

.radioAnnounce {height: 95px; padding: 20px 0 25px; text-align: center;}
.radioAnnounce p {padding-top: 75px; background: url(../img/player/icnRadio.png) no-repeat 50% 0; line-height: 20px; font-size: 18px; color: #c5c5c5; letter-spacing: -1px;}
.radioAnnounce p em {color: #fff;}

.radioAnnounce .eq {position: relative; width: 230px; margin: 0 auto;}
.radioAnnounce .eq .left,
.radioAnnounce .eq .right {position: absolute; top: 5px;}
.radioAnnounce .eq .left {left: 0;}
.radioAnnounce .eq .right {right: 0;}


/* 13. On-Air (2018-01-09) */

.popupOnair {background: #222;}

.popupOnair .head {height: 50px; padding: 0 10px; text-align: right;}
.popupOnair .head li {display: inline-block; *display: inline; *zoom: 1;}
.popupOnair .head li a {padding: 0 20px; line-height: 50px; font-size: 16px; font-weight: 400; color: #98a1ab; text-decoration: none;}
.popupOnair .head li.on a,
.popupOnair .head li a:hover {color: #fff;}

.popupOnair .radio {position: relative; line-height: 0; font-size: 0;}

.popupOnair .radio .primary {position: relative; height: 440px; padding: 25px 0 35px; background: #182437;}
.popupOnair .radio .primary .title {text-align: center; line-height: 1.5; font-size: 20px; color: #8c929b;}
.popupOnair .radio .primary .title em {font-size: 40px; font-weight: 400; color: #fff; letter-spacing: -2px;}

.popupOnair .radio .primary .channel {position: relative; height: 300px; margin-top: 10px;}
.popupOnair .radio .primary .channel .prev,
.popupOnair .radio .primary .channel .next {position: absolute; top: 105px; width: 32px; height: 58px; background-repeat: no-repeat; background-position: 50%; z-index: 10;}
.popupOnair .radio .primary .channel .prev {left: 50px; background-image: url(../img/onair_radio/btnPrev.png);}
.popupOnair .radio .primary .channel .next {right: 50px; background-image: url(../img/onair_radio/btnNext.png);}

.popupOnair .radio .primary .channel .list {position: relative; width: 277px; height: 277px; margin: 0 auto;}
.popupOnair .radio .primary .channel .list li {display: none;}
.popupOnair .radio .primary .channel .list li.on {display: block;}
.popupOnair .radio .primary .channel .list .cover,
.popupOnair .radio .primary .channel .list .cover img {width: 277px; height: 277px;}
.popupOnair .radio .primary .channel .list .label {position: absolute; bottom: -18px; left: 0; width: 100%; z-index: 10; text-align: center; line-height: 1.2; font-size: 22px; color: #fff;}
.popupOnair .radio .primary .channel .list .media audio {visibility: hidden;}

.popupOnair .radio .primary .volume {position: relative; width: 400px; height: 7px; margin: 13px auto 0; padding: 10px 0; padding-left: 40px;}
.popupOnair .radio .primary .volume .mute {position: absolute; top: 0; left: 0; width: 23px; height: 26px; background: url(../img/onair_radio/icnVolume.png) no-repeat 50%;}
.popupOnair .radio .primary .volume .mute.off {background-image: url(../img/onair_radio/icnVolumeOn.png);}
.popupOnair .radio .primary .volume .seek {position: relative; height: 7px; background: #98a1ab; cursor: pointer;}
.popupOnair .radio .primary .volume .seek > span {position: absolute; top: 0; left: 0; height: 7px; background: #3d4e68;}

.popupOnair .radio .button {padding: 16px 30px 25px; background: #3d4e68; text-align: center; *zoom: 1;}
.popupOnair .radio .button:after {content: ""; display: block; clear: both;}
.popupOnair .radio .button li {float: left; width: 25%; padding-top: 9px;}
.popupOnair .radio .button li a {display: block; border-left: solid 1px #3d4e68; background: #73839b; line-height: 50px; font-size: 18px; color: #b9c1cd; text-decoration: none;}
.popupOnair .radio .button li.on {background: url(../img/onair_radio/objPointButton.png) no-repeat 50% 0;}
.popupOnair .radio .button li.on a,
.popupOnair .radio .button li a:hover {background: #152030; color: #fff;}
.popupOnair .radio .button li:first-child a {border-left: 0;}

.popupOnair .radio .app {position: relative; height: 100px;}
.popupOnair .radio .app .icon {position: absolute; top: 20px; left: 30px;}
.popupOnair .radio .app .text {position: absolute; top: 25px; left: 110px; line-height: 25px; font-size: 22px; color: #c4c9cf;}
.popupOnair .radio .app .link {position: absolute; top: 33px; right: 30px; text-align: center; *zoom: 1;}
.popupOnair .radio .app .link:after {content: ""; display: block; clear: both;}
.popupOnair .radio .app .link li {float: left; width: 80px;}
.popupOnair .radio .app .link li a {display: block; border-left: solid 1px #222; background: #d4dde7; line-height: 36px; font-size: 14px; color: #222; text-decoration: none;}
.popupOnair .radio .app .link li a:hover {background: #fff;}

.popupOnair .radio .announce {display: none; position: absolute; top: 0; left: 0; width: 100%; height: 700px; background: url(../img/onair_radio/bgMask.png); text-align: center; z-index: 10;}
.popupOnair .radio .announce .text {padding-top: 145px;background: url(../img/onair_radio/icnCaution.png) no-repeat 50% 50px;}
.popupOnair .radio .announce .text dt {line-height: 38px; font-size: 30px; font-weight: 500; color: #fff; letter-spacing: -2px;}
.popupOnair .radio .announce .text dd {margin-top: 25px; line-height: 25px; font-size: 18px; letter-spacing: -1px;}
.popupOnair .radio .announce .link {margin-top: 30px;}
.popupOnair .radio .announce .link a {width: 185px; margin-left: 10px; background: #d4dde7; line-height: 45px; font-size: 18px; font-weight: 500; color: #222; letter-spacing: -1px; text-decoration: none;}
.popupOnair .radio .announce .link a:first-child {margin-left: 0;}
.popupOnair .radio .announce .link a:hover {background: #fff;}


/* CodeIgniter Profiler */

#codeigniter_profiler {display: none;}


/* ui-autocomplete */
.ui-autocomplete-loading {background: white url("../img/common/input_loading_16x16.gif") right center no-repeat;}
* html .ui-autocomplete {height:100px;} /* without this, the menu expands to 100% in IE6 */

/****** jQuery Autocomplete CSS *************/
.ui-autocomplete {position: absolute; top: 0; left: 0; cursor: default; max-height: 100px; overflow-y: auto; overflow-x: hidden;}
.ui-widget.ui-widget-content {border: 1px solid #c5c5c5;}
.ui-widget-content {border: 1px solid #dddddd; background: #ffffff; color: #333333;}
.ui-menu {list-style: none; padding: 0; margin: 0; display: block; outline: 0;}
.ui-menu .ui-menu {position: absolute;}
.ui-menu .ui-menu-item {margin: 0; cursor: pointer; list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");line-height:25px; font-size:13px; padding:0 10px;}
.ui-menu .ui-menu-item-wrapper {position: relative; padding: 3px 1em 3px .4em;}
.ui-menu .ui-menu-divider {margin: 5px 0; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0;}
.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {margin: -1px; border: 1px solid #cccccc; background: #ededed; font-weight: normal; color: #2b2b2b;}
/* icon support */
.ui-menu-icons {position: relative;}
.ui-menu-icons .ui-menu-item-wrapper {padding-left: 2em;}
/* left-aligned */
.ui-menu .ui-icon {position: absolute; top: 0; bottom: 0; left: .2em; margin: auto 0;}
/* right-aligned */
.ui-menu .ui-menu-icon {left: auto; right: 0;}
.ui-front {z-index: 100;}

#newsKeywordSearch {position:relative;}