@charset "euc-kr"; /* TITLE : sbs onair , sbs 온에어 * UPDATE: 20120910 * AUTHOR: 김혜미 */ /*초기화*/ * { margin:0; padding:0;} html, body { margin:0; padding:0; height:100%;} body {font-family: "돋움", sans-serif, Arial; font-size:12px; position:relative;} table, div {border-collapse:collapse;} select, textarea,input {font-family:"돋움", Arial, Helvetica, sans-serif; font-size:12px; color:#000; vertical-align:top;} form, ul, ol, dl, table, div, h1, h2, h3 ,h4 {margin:0;padding:0;} h1, h2, h3 ,h4, h5, h6{font-size:12px; text-decoration:none;} img, fieldset {border:0; margin:0; padding:0; } select, input, li, img {vertical-align:top; } ul, li, dl, dt, dd{list-style-type : none; } caption { text-indent:-5000px; line-height:0; font-size:0;} legend{ text-indent:-5000px; line-height:0; font-size:0; position:absolute; top:0; left:0;} hr {display:none;} button {border:0px;} /*온에어 공통*/ #onair_wrap {width:911px; height:496px; background:#eee; overflow:hidden; position:relative; display:block; overflow-x:none; overflow-y:none;} .frameBd {display:inline-block;float:left;border:1px solid #ccc} .ir {z-index:-1; position:relative; display:block; width:100%; font-size:9px; text-align:center; white-space:nowrap; overflow:hidden;} .blind {visibility:hidden; overflow:hidden; position:absolute; width:0; height:0; font-size:0; line-height:0;} /*영상 영역*/ #onair_wrap #air_area {width:641px; height:496px; float:left; background:#2b2c2c; color:#9f9e9e;} #onair_wrap #air_area .title_wrap {height:22px; line-height:22px; border:1px solid #1d1d1d; border-width:1px 1px 0px 1px; padding:14px 16px 14px 13px; clear:both;} #onair_wrap #air_area .title {float:left; position:relative;} #onair_wrap #air_area .title h1 {float:left;} #onair_wrap #air_area .title h1 img {vertical-align:bottom; float:left;} #onair_wrap #air_area .title h2 {vertical-align:bottom; height:19px; margin:6px 8px 0 10px; float:left; font:bold 12px/1.2em dotum; color:#e4e4e4; padding-right:10px; background:url(http://img.sbs.co.kr/sw11/sbs/onair/images/bar_gray.gif) no-repeat right -2px;} #onair_wrap #air_area .title .air_info {margin-top:4px; font:11px/1.2em dotum; color:#bbb; letter-spacing:-0.05em; float:left;} #onair_wrap #air_area .title .air_info span {color:#b6b6b6; margin-left:8px; font:11px verdana;} #onair_wrap #air_area .air_img {float:right; margin-top:6px;} #onair_wrap #air_area .onair {border-right:1px solid #373739;} #onair_wrap #air_area .prolist_wrap {background:#1f1f1f; border-bottom:1px solid #1d1d1d; padding:15px 18px; height:11px; width:605px; position:relative; overflow:hidden;} #onair_wrap #air_area .prolist_wrap .btn_left a {position:absolute; left:0px; top:0px; display:inline-block; background:url(http://img.sbs.co.kr/sw11/sbs/onair/images/arrow_left.gif) no-repeat 18px 16px #1f1f1f; text-indent:-1000em; width:42px; height:41px; z-index:2;} #onair_wrap #air_area .prolist_wrap .btn_left a:hover {background:url(http://img.sbs.co.kr/sw11/sbs/onair/images/arrow_left_on.gif) no-repeat 18px 16px #1f1f1f;} #onair_wrap #air_area .prolist_wrap .btn_right a {position:absolute; right:0px; top:0px; float:right; display:inline-block; background:url(http://img.sbs.co.kr/sw11/sbs/onair/images/arrow_right.gif) no-repeat 18px 16px #1f1f1f; text-indent:-1000em; width:42px; height:41px; z-index:2;} #onair_wrap #air_area .prolist_wrap .btn_right a:hover {background:url(http://img.sbs.co.kr/sw11/sbs/onair/images/arrow_right_on.gif) no-repeat 18px 16px #1f1f1f;} #onair_wrap #air_area .list {float:left; overflow:hidden; width:840px; height:16px; margin:-1px 24px 0 24px; position:absolute; z-index:1;} #onair_wrap #air_area .list li {display:inline; display:inline; word-break:break-all; float:left; font:11px/1.3em dotum; text-decoration:none; color:#9f9e9e; padding-right:26px; background:url(http://img.sbs.co.kr/sw11/sbs/onair/images/bar_gray.gif) no-repeat right 1px; letter-spacing:-0.05em; margin-right:25px; word-break:break-all;} #onair_wrap #air_area .list li span {padding-right:5px; font:11px/1.2em verdana; color:#616161;} #onair_wrap #air_area .notice {height:10px; border-top:1px solid #393939; background:#2b2c2c; padding:16px 16px; font-size:11px; letter-spacing:-0.05em; color:#bbb; position:relative; border-right:1px solid #404142;} #onair_wrap #air_area .notice span {position:absolute; right:12px; top:10px;} /*리스트 영역*/ #onair_wrap #list_area {color:#6f6e6e; position:relative; float:left;} #onair_wrap #list_area h3.tab1 {text-indent:-1000em; position:absolute; left:0px; top:0px; display:block;} #onair_wrap #list_area h3.tab1 a {background:url(http://img.sbs.co.kr/sw11/sbs/onair/images/tab_tv_off.gif) no-repeat 59px 19px #dedede; display:block; width:134px; height:49px; border-right:1px solid #cdcdcf; border-top:1px solid #dedede; border-bottom:1px solid #cdcdcf; } #onair_wrap #list_area h3.tab1 a.on {background:url(http://img.sbs.co.kr/sw11/sbs/onair/images/tab_tv_on.gif) no-repeat 59px 19px #eee; border-bottom:1px solid #eee; border-top:1px solid #cdcdcf; } #onair_wrap #list_area h3.tab2 {text-indent:-1000em; position:absolute; left:135px; top:0px; display:block;} #onair_wrap #list_area h3.tab2 a {background:url(http://img.sbs.co.kr/sw11/sbs/onair/images/tab_radio_off.gif) no-repeat 48px 19px #dedede; display:block; width:134px; height:49px; border-right:1px solid #cdcdcf; border-top:1px solid #dedede; border-bottom:1px solid #cdcdcf; } #onair_wrap #list_area h3.tab2 a.on {background:url(http://img.sbs.co.kr/sw11/sbs/onair/images/tab_radio_on.gif) no-repeat 48px 19px #eee; border-bottom:1px solid #eee; border-top:1px solid #cdcdcf; } #onair_wrap #list_area .list {position:absolute; top:55px; left:12px; width:258px; height:365px; overflow-y:scroll; scrollbar-3dlight-color:#f9f9f9;/* 스크롤아웃라인 */ scrollbar-arrow-color:#ddd;/* 화살표 */ scrollbar-base-color:#f9f9f9;/* 스크롤아웃라인속아웃라인 */ scrollbar-darkshadow-color:#f9f9f9;/* 스크롤아웃라인속아웃라인 */ scrollbar-face-color:#f9f9f9;/* 스크롤바전체컬러 */ scrollbar-highlight-color:#ddd;/* 스크롤아웃라인속아웃라인 */ scrollbar-shadow-color:#ddd;/* 스크롤아웃라인 */ } #onair_wrap #list_area .list.after {top:140px;height:281px;} #onair_wrap #list_area .list li {padding:8px 0; border-bottom:1px solid #d9d9d9; width:228px; position:relative; overflow:hidden;} #onair_wrap #list_area .list li .thumb {position:relative; margin-right:8px; float:left; width:100px;} #onair_wrap #list_area .list li .text {float:left; width:120px; font:normal 11px doutm;} #onair_wrap #list_area .list li:hover .text strong.title a {text-decoration:underline;} #onair_wrap #list_area .list li .text strong.title a {overflow:hidden; white-space:nowrap; text-overflow:ellipsis; width:100%; color:#595959; display:block; height:16px; font:bold 12px dotum; padding-top:1px; text-decoration:none; letter-spacing:-0.05em;} #onair_wrap #list_area .list li .text strong.title a:hover {text-decoration:underline;} #onair_wrap #list_area .list li .text p { font:normal 11px verdana;} #onair_wrap #list_area .list li .text p.ep {color:#6c6c6c; height:14px; font:normal 11px dotum;} #onair_wrap #list_area .list li .text p.time {color:#6c6c6c; font-size:10px; margin-top:-4px;} #onair_wrap #list_area .list li .text p.pro {color:#6c6c6c; margin-top:4px;} #onair_wrap #list_area .ad {position:absolute; top:424px; border-top:1px solid #e3e3e3;} /*쏘티 영역*/ #soty_area {width:288px; background:url(http://img.sbs.co.kr/sw11/sbs/onair/images/soty_bg.jpg) no-repeat left top; position:relative; float:left; height:496px;} #soty_area h3 {text-align:center; padding-top:16px; height:35px;} #soty_area .layer_img {background:#000; width:257px; height:227px; margin:26px 15px 0px 16px;} #soty_area .soty_cont input.input1 {width:51px; height:10px; border:1px solid #ccc; padding:5px;} #soty_area .soty_cont input.input2 {width:204px; height:10px; border:1px solid #ccc; padding:5px; margin-bottom:2px;} #soty_area .soty_cont select {width:50px; height:22px;} #soty_area .soty_cont .tel {margin:9px 0px 9px 22px; vertical-align:middle; line-height:27px;} #soty_area .soty_cont .tel span {padding:0 6px;} #soty_area .soty_cont {margin:5px 18px 16px 18px; border:1px solid #e5e5e5; background:#fff; height:169px;} #soty_area .soty_cont .soty_phone {margin-top:25px; overflow:hidden;} #soty_area .soty_cont .agree {margin-left:16px; height:13px;} #soty_area .soty_cont .agree label {margin:0 12px 0px 8px;} #soty_area .soty_cont button {width:102px; height:29px; background:none; margin:0; padding:0; margin:10px 0 0 74px; cursor:pointer;} #soty_area .soty_cont p.info {text-align:center; color:#333; font:11px/1.3em dotum; letter-spacing:-0.08em;} #soty_area .soty_cont .soty_address {margin-top:10px; overflow:hidden;} #soty_area .soty_cont .soty_address .add {margin:6px 0 -9px 22px;} #soty_area .soty_cont .soty_address .agree {margin-top:-5px;} #soty_area .layer_wrap {position:absolute; top:0px; left:0px; background:url(http://img.sbs.co.kr/sw11/sbs/onair/images/bg_layer.png) no-repeat left top; z-index:2; width:258px; height:466px; padding:15px;} #soty_area .layer_wrap .layer_cont {background:#fff; height:425px;} #soty_area .layer_wrap .layer_cont .layer {overflow-y:scroll; height:366px; padding:15px 10px; letter-spacing:-0.03em;} #soty_area .layer_wrap .layer_cont .layer strong {margin-bottom:15px; display:block;} #soty_area .layer_wrap .layer_cont .closed {text-align:center; width:58px; margin:0 auto;} #soty_area .layer_wrap .layer_cont .closed a.btn {display:block; padding:9px;} /*cnbc list타입2*/ #onair_wrap.cnbc_onair {background:#f8f8f8;} #onair_wrap.cnbc_onair #air_area {height:493px;} #onair_wrap #list_area2 {color:#6f6e6e; position:relative; float:left;} #onair_wrap #list_area2 h3 {margin:0 10px 0 11px; padding:21px 0 13px 0 ; border-bottom:2px solid #515151; width:247px;} #onair_wrap #list_area2 .list {position:absolute; top:55px; left:12px; width:258px; height:365px;} #onair_wrap #list_area2 .list li {padding:8px 0; border-bottom:1px solid #d9d9d9; width:247px; position:relative; overflow:hidden;} #onair_wrap #list_area2 .list li .thumb {position:relative; margin-right:8px; float:left; width:100px;} #onair_wrap #list_area2 .list li .thumb .frameBd {width:98px; height:54px;; border:1px solid #ccc; position:absolute; top:0; left:0;} #onair_wrap #list_area2 .list li .text {float:left; width:120px; font:normal 12px doutm; margin-top:15px;} #onair_wrap #list_area2 .list li:hover .text strong.title a {text-decoration:underline;} #onair_wrap #list_area2 .list li .text strong {overflow:hidden; width:100%; color:#595959; display:block; height:28px; text-decoration:none; letter-spacing:-0.05em;} #onair_wrap #list_area2 .list li .text a {display:block; text-decoration:none;} #onair_wrap #list_area2 .list li a:hover .text strong {text-decoration:underline;} #onair_wrap #list_area2 .list li .text p { font:normal 11px verdana;} #onair_wrap #list_area2 .list li .text p.ep {color:#6c6c6c; height:14px; font:normal 11px dotum;} #onair_wrap #list_area2 .list li .text p.time {color:#6c6c6c; font-size:10px; margin-top:-4px;} #onair_wrap #list_area2 .list li .text p.pro {color:#6c6c6c; margin-top:4px;} #onair_wrap #list_area2 .ad {position:absolute; top:424px; border-top:1px solid #e3e3e3;} #onair_wrap #list_area2 .more {position:absolute; top:22px; left:219px; font-size:11px; background:url(images/icon_arrow.gif) no-repeat right 2px; padding-right:7px; letter-spacing:-0.08em;} #onair_wrap #list_area2 .more a {color:#666; text-decoration:none;} #onair_wrap #list_area2 .more a:hover {text-decoration:underline;} #onair_wrap #list_area2 .list li .thumb .play {position:absolute; bottom:0; right:0;} #onair_wrap #list_area2 .list li.last {border-bottom:none;} #onair_wrap #list_area2 p.ad2 {position:absolute; top:423px;} #onair_wrap #air_area .notice2 {height:8px; background:#2b2c2c; padding:13px 16px 16px 16px; font-size:11px; letter-spacing:-0.05em; color:#bbb; position:relative; border-right:1px solid #404142;} #onair_wrap #air_area .notice2 span {position:absolute; right:12px; top:8px;} /* 온에어 서비스 종료 문구 리스트*/ .onair_notice {width:258px;margin-top:65px;} .onair_notice p {width:224px;margin:0 12px;padding:8px 10px 6px;border:1px solid #d6d6d6;background:#fafafa;font-weight:bold;color:#595959;line-height:17px;} /* 온에어 서비스 종료 알림팝업*/ .poponair_notice {position:absolute;top:0;left:0;z-index:255;width:100%;height:100%;background:url('http://img.sbs.co.kr/sw11/sbs/onair/images/bgblack_onairlogin.png') repeat;} .poponair_notice_inner {position:absolute;top:50%;left:50%;width:540px;height:241px;margin:-145px 0 0 -270px;background:#fff;} .poponair_notice_inner>strong {display:block;padding-left:20px; height:50px; line-height:50px; font-size:16px; color:#fff; background-color:#6dabf8} .poponair_notice_inner p {padding:20px 18px 20px;font-size:12px;color:#444;line-height:28px;} .poponair_notice_inner p.login {padding:35px 18px 20px;font-size:14px;text-align:center;} .poponair_notice_inner p strong.block {display:block;margin-top: -10px;} .poponair_notice_inner p>strong>span {font-weight:normal;} .btn_closepop {display:block;width:30px;height:33px;padding:0 10px;margin:0 auto;line-height:33px; color:#fff !important; font-size:13px;background:#999fa6;text-decoration:none;text-align:center;} .btn_closepop.after {width:50px;} /* 온에어 서비스 종료 후 리스트 */ #onair_wrap #list_area .list.after2 {top:4px;overflow:hidden;width:246px;height:225px;} #onair_wrap #list_area .list.after2 li {width:100%;} #onair_wrap #list_area .list.after2 li .text {width:132px;} #onair_wrap #list_area .list.after2 li .text .pro.sbs {color:#008dd0;font-weight:bold;} #onair_wrap #list_area .list.after2 li .text .pro.love {color:#fe8ab0;font-weight:bold;} #onair_wrap #list_area .list.after2 li .text .pro.power {color:#40b4ed;font-weight:bold;} /**/ .pon_login {position:absolute;top:50%;left:50%;width:450px;height:234px;margin:-117px 0 0 -225px;background:#fff;color:#fff;font-size:14px;} .pon_tit {display:block;height:13px;padding:13px 18px;background:#6dabf8;line-height:13px;} .pon_cont {padding:52px 0 54px 169px;color:#444;background:url('http://img.sbs.co.kr/sw11/sbs/onair/images/bg_onairlogin.gif') no-repeat 20px 30px;} .pon_cont_txt {line-height:20px;letter-spacing:-1px;} .txtc_blue {color:#6dabf8;letter-spacing:0;} .btn_pon_login {display:block; width:129px;height:38px;margin-top:10px;border-top:1px solid #d1e3f9;border-right:1px solid #4b83c8;border-bottom:1px solid #4b83c8;border-left:1px solid #d1e3f9;background:#6dabf8;text-align:center;color:#fff;line-height:38px;text-decoration:none;}