﻿/*
라이브 - 메인
/m/html/TV_live_main_podoal.asp
*/

.CSS_podoal {padding-bottom: 0;}
.CSS_podoal .txtAreaWrap {bottom: 0;padding: 0 10px 70px;background: linear-gradient(0deg, rgba(0,0,0,.7), transparent);}
.CSS_podoal .txtAreaWrap .txtChat .ChatLine {line-height: 20px;}
.CSS_podoal .txtAreaWrap .txtChat .ChatLine .lineIn {font-size: 13px;letter-spacing: -0.28px;background: none;height: 20px;line-height: 20px;}
.CSS_podoal .txtAreaWrap .txtChat .ChatLine .nic {color: rgba(255,255,255,.5);font-size: 13px;}

.CSS_podoal .txtAreaWrap .shotChat {bottom: 260px;}
.CSS_podoal .liveTvWrap .top_fix_profile .btnSplitDOM {top: 70px;left: auto;right: 0;}

.CSS_podoal .footListWrap .fl-right li.ulist .liveBag {display: none;}

.CSS_podoal .subTopDOM {display:flex;justify-content:space-between;align-items:center;height: 50px;border-bottom:1px solid #efefef;}
.CSS_podoal .subTopDOM .btnLeft {width: 50px;text-align: center;}
.CSS_podoal .subTopDOM .btnLeft object {width: 20px;}
.CSS_podoal .subTopDOM .btnLeft .btn_back_pst {font-size: 16px;color: #000;display: flex;align-items: center;justify-content: center;}
.CSS_podoal .subTopDOM .btnLeft .btn_home_sub {font-size: 16px;color: #000;display: flex;align-items: center;justify-content: center;}
.CSS_podoal .subTopDOM .btnRight {width: 50px;display: flex;align-items: center;justify-content: center;}
.CSS_podoal .subTopDOM .btnRight object {width: 20px;}
.CSS_podoal .subTopDOM .sub_title {font-size: 16px;color: #000;text-align: left;flex-grow: 1;}


.CSS_podoal .topFlowDOM {position: relative;padding:20px 10px;box-sizing:border-box;}
.CSS_podoal .topFlowDOM:after {content:"";position: absolute;top: 50%;left: 50%;transform:translate(-50%,calc(-50% - 11px));width: calc(100% - 50px);height: 1px;background: #c3c3c3;z-index:1;}
.CSS_podoal .topFlowDOM ul {display:flex;justify-content:space-around;position: relative;z-index: 2;}
.CSS_podoal .topFlowDOM li {text-align: center;}
.CSS_podoal .topFlowDOM li span {display: inline-block;border:1px solid #c3c3c3;border-radius:100%;width: 44px;height: 44px;line-height:44px;color: #9b9b9b;background: #fff;}
.CSS_podoal .topFlowDOM li p {color: #9b9b9b;}
.CSS_podoal .topFlowDOM li._on span {display: inline-block;border:1px solid #ff3ca0;border-radius:100%;width: 44px;height: 44px;line-height:44px;color: #ff3ca0;}
.CSS_podoal .topFlowDOM li._on p {color: #ff3ca0;}

.CSS_podoal .sectorCont {display: none;border-top:6px solid #f1f2f3;padding:0 15px 15px;}
.CSS_podoal .sectorCont._on {display: block;}
.CSS_podoal .sectorCont dl {box-sizing:border-box;}
.CSS_podoal .sectorCont dt {position: relative;font-weight: 700;font-size: 16px;letter-spacing: -0.35px;color: #373c40;padding: 15px 0 5px;}
.CSS_podoal .sectorCont dt .rightNum {position: absolute;right: 0;font-size: 12px;color: #c3c3c3;font-weight: 100;}
.CSS_podoal .sectorCont dd {text-align: center;}
.CSS_podoal .sectorCont dd select {display: block;border: 1px solid #dbdbdb;width: 100%;border-radius: 5px;background: url(/m/images/svg/prev-arrow-down.svg) no-repeat right 10px center transparent;padding: 0 5px;height: 40px;box-sizing:border-box;}
.CSS_podoal .sectorCont dd input {display: block;border: 1px solid #dbdbdb;width: 100%;border-radius: 5px;background: transparent;-webkit-appearance: auto;padding: 0 10px;height: 40px;box-sizing:border-box;}
.CSS_podoal .sectorCont dd input.dis {background: #f6f6f6;}
.CSS_podoal .sectorCont dd .payIco {position: relative;}
.CSS_podoal .sectorCont dd .payIco input {padding:0 30px 0 10px;}
.CSS_podoal .sectorCont dd .payIco.pay-won:before {content:"원";position: absolute;right: 12px;top: 9px;color: #373c40;}
.CSS_podoal .sectorCont dd .payIco.pay-per:before {content:"%";position: absolute;right: 12px;top: 9px;color: #373c40;}
.CSS_podoal .sectorCont dd .payIco.pay-al:before {content:"알";position: absolute;right: 12px;top: 9px;color: #373c40;}
.CSS_podoal .sectorCont dd .underTxt {text-align: left;padding-left:14px;box-sizing:border-box;position: relative;color: #9b9b9b;}
.CSS_podoal .sectorCont dd .underTxt:after {content:"※";position: absolute;left: 0;color: #9b9b9b;}
.CSS_podoal .sectorCont dd .liveTime {display:flex;justify-content:space-between;margin-top:10px;}
.CSS_podoal .sectorCont dd .liveTime li {width: 31%;}

.CSS_podoal .labelDOM {display: block;border: 1px solid #dbdbdb;width: 100%;border-radius: 5px;background: transparent;-webkit-appearance: auto;padding: 0 5px;height: 40px;box-sizing:border-box;display: flex;align-items: center;}
.CSS_podoal .labelDOM label {display: flex;align-items: center;margin-left:10px;}
.CSS_podoal .labelDOM label + label {margin-left:15px;}
.CSS_podoal .labelDOM label input[type=radio] + span {background: url(/m/images/svg/ic-check-box-off.svg) no-repeat center center;}
.CSS_podoal .labelDOM label input[type=radio]:checked + span {background: url(/m/images/svg/ic-check-box-on.svg) no-repeat center center;}

.CSS_podoal .btnDOM {padding:15px;box-sizing:border-box;background: #f1f2f3;}
.CSS_podoal .btnDOM a {display: block;border-radius:5px;background: #c3c3c3;color: #fff;text-align: center;height: 48px;line-height: 48px;font-size: 16px;}
.CSS_podoal .btnDOM a._on {background: #111617;}

.CSS_podoal .btn_img_add {display:inline-block;width: calc( 33% - 4px ); border: 1px solid #e6e6e6;border-radius: 3px;position:relative;margin:10px 2px 4px 2px;}
.CSS_podoal .btn_img_add .ph{width:100%;padding-top:100%;}
.CSS_podoal .btn_img_add .con{position:absolute;width:100%;height:100%;text-align:center;cursor:pointer;border-radius:5px;}
.CSS_podoal .btn_img_add .con:before {content:"";display:inline-block;vertical-align:middle;height:100%;}
.CSS_podoal .btn_img_add .con .plus{vertical-align: middle;width: 24px;height: 24px;line-height: 17px;font-size: 30px;display: inline-block;border: 1px solid #e6e6e6;background: #eee;border-radius: 100%;color: #fff;}

/* 포토알 라이브 */
.CSS_podoal .liveTvWrap .bodyDOM {}
.CSS_podoal .liveTvWrap .bodyDOM:before {content:"";background:linear-gradient(180deg,rgba(0,0,0,.7),rgba(0,0,0,.2) 50%,transparent);height:200px;position:absolute;top:0;left:0;width:100%;z-index:1}}
.CSS_podoal .liveTvWrap .top_fix_close {width: auto;height: auto;line-height: initial;top: 25px;}
.CSS_podoal .liveTvWrap .top_fix_close span {background: url(/m/images/svg/header_top_close-w.svg) no-repeat center center;width: 24px;height: 24px;display: inline-block;}
.CSS_podoal .liveTvWrap .top_fix_close.all {top: 26px;right: 5px;}
.CSS_podoal .liveTvWrap .top_fix_profile .profileDOM {padding:0;background: transparent;}
.CSS_podoal .liveTvWrap .top_fix_profile .profileDOM .fixedIn li {position: relative;}
.CSS_podoal .liveTvWrap .top_fix_profile .profileDOM .fixedIn li:nth-child(1) span {width: 40px;height: 40px;border: 2px solid #fff;box-sizing: border-box;}
.CSS_podoal .liveTvWrap .top_fix_profile .profileDOM .fixedIn li:nth-child(2) .tit {color: #fff;margin-top:0;font-weight: 400;}
.CSS_podoal .liveTvWrap .top_fix_profile .profileDOM .fixedIn li ._plusTac {position:absolute;top:29px;left:50%;width: 16px;height: 16px;transform:translateX(-50%);display:inline-block;background-image: url(/m/images/svg/livemain_add.svg);-webkit-background-size:16px;background-size: 16px;border-radius:100%;}

.CSS_podoal .footListWrap .fl-left li .talkLink {background: rgba(255,255,255,0.2);border: solid 1px rgba(255, 255, 255, 0.2);height: 38px;opacity: 0.5;}
.CSS_podoal .liveTvWrap .footIcon.set-cart {background-image: url(/m/images/svg/livemain_cart-w.svg);background-color: rgba(250,32,80,1);background-color: rgba(255, 255, 255, 0.2);width: 38px;height: 38px;}
.CSS_podoal .liveTvWrap .footIcon.set-viewer {background-image: url(/m/images/svg/livemain_size-w.svg);background-color: rgba(250,32,80,1);background-color: rgba(255, 255, 255, 0.2);width: 38px;height: 38px;}
.CSS_podoal .liveTvWrap .footIcon.set-like {background-image: url(/m/images/svg/livemain_heart-w.svg);background-color: rgba(250,32,80,1);background-color: rgba(255, 255, 255, 0.2);width: 38px;height: 38px;}
.CSS_podoal .liveTvWrap .footIcon .tac {top: -2px;right: -4px;width: 16px;height: 16px;line-height: 16px;font-size: 10px;}

.CSS_podoal .liveTvWrap .top_fix_profile .liveTacDOM {display: inline-block;margin-top: 47px;}

.CSS_podoal .liveTvWrap .top_fix_profile .profileDOM .fixedIn li:nth-child(2) .txt2 {padding: 0 5px 0 20px;margin-left: 0;color: #fff;background: url(/m/images/svg/livemain_viewer-w.svg)no-repeat left center/18px auto;}
.CSS_podoal .liveTvWrap .top_fix_profile .profileDOM .fixedIn li:nth-child(2) .txt3 span {color: #fff;font-size: 16px;font-weight: 400;}
.CSS_podoal .liveTvWrap .top_fix_profile .profileDOM .fixedIn li:nth-child(2) .txt3 em {color: #fff;}
.CSS_podoal .liveTvWrap .top_fix_profile .profileDOM .fixedIn li:nth-child(3) a {display: none;}

.CSS_podoal .liveSettingWrap .settingTop .top_fix_close {top: 3px;right: 16px;}

.CSS_podoal .liveTvWrap .couponEnrightWrap {top:70px;}
.CSS_podoal .liveTvWrap .couponEnrightWrap .btnSplitDOM {position: absolute;right: 0;top: 0;}
.CSS_podoal .liveTvWrap .couponEnrightWrap .btnSplitDOM ul {display:flex;}
.CSS_podoal .liveTvWrap .couponEnrightWrap .btnSplitDOM ul li + li {margin-left:6px;}
.CSS_podoal .liveTvWrap .setIcon {background-color: rgba(255, 255, 255, 0.2);}
.CSS_podoal .liveTvWrap .setIcon.set-share {background-image: url(/m/images/svg/livemain_share.svg);}

/* 방송 종료 */
.CSS_podoal .broadEndWrap .profileSet .txt {display: none;}
.CSS_podoal .broadEndWrap .profileSet .follo {display: none;}
.broadEndWrap .profileSet .img {width: 70px;height: 70px;}
.CSS_podoal .broadEndWrap .subTxtSet .tit {font-size: 15px;}
.CSS_podoal .broadEndWrap .subTxtSet .txt1 {display: none;}
.CSS_podoal .broadEndWrap .subTxtSet .txt2 {display: none;}
.CSS_podoal .broadEndWrap .footendList {padding:5px 10px 0;box-sizing:border-box;position:absolute;bottom:0;width:100%;background:#fff;border-radius:20px 20px 0 0;}
.CSS_podoal .broadEndWrap .footendList .foot-tit {font-size: 16px;font-weight: 700;color: #373c40;border-bottom:1px solid #f1f2f3;height: 52px;line-height: 52px;}
.broadEndWrap dt {width: 150px;height: 90px;}
.broadEndWrap dt .timeTac {position:absolute;right:2px;top:5px;overflow:hidden;height:16px;line-height:16px;color:#fff;padding:0 5px;font-size:13px; font-weight:700; text-shadow: 1px 1px 1px rgb(0 0 0 / 30%);}
.broadEndWrap dt .liveTac {position:absolute;left:0;top:5px;background:none;border-radius:0 3px 3px 0;overflow:hidden;height:16px;line-height:16px;color:#fff;padding:0;font-size:10px;}

.broadEndWrap dd {padding: 6px 10px 6px 160px;height: 90px;}
.broadEndWrap dd .tit {font-size: 14px;line-height: 14px;max-height: 48px;color: #373c40;font-weight: 400;word-wrap: break-word;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.broadEndWrap dd .viewerDOM {}
.broadEndWrap dd .viewerDOM .viewerNm {background: url(/m/images/visibility.png)no-repeat left center;padding-left:20px;color: #9b9b9b;background-size:16px;}
.broadEndWrap .btnSet ul {padding:0 20px;}
.broadEndWrap .btnSet span {display: inline-block;width:100%;height: 50px;line-height: 50px;border:1px solid #fff;border-radius:10px;box-sizing:border-box;font-size: 16px;background-color: transparent;padding: 0 30px;}
.broadEndWrap .btnSet span.btnView {border:0;background-color: #111617;}

.chat_wrap .key_box {padding: 0 10px 7px;}
/* .chat_wrap .key_box > input {height: 38px;background: rgba(255, 255, 255, 0.2);border: solid 1px rgba(255, 255, 255, 0.2);color: #fff;opacity: 0.5;} */

