/***************************************************************/
/*                          Animation                          */
/***************************************************************/
/* fade in */
@-webkit-keyframes fade_in {
	0% { opacity: 0; margin-left: 1.5rem; }
	50% { opacity: 0;  margin-left: 1.5rem; }
	100% { opacity: 1;  margin-left: 0rem; }
}
@-moz-keyframes fade_in {
	0% { opacity: 0; margin-left: 1.5rem; }
	50% { opacity: 0;  margin-left: 1.5rem; }
	100% { opacity: 1;  margin-left: 0rem; }
}
@-ms-keyframes fade_in {
	0% { opacity: 0; margin-left: 1.5rem; }
	50% { opacity: 0;  margin-left: 1.5rem; }
	100% { opacity: 1;  margin-left: 0rem; }
}
@-o-keyframes fade_in {
	0% { opacity: 0; margin-left: 1.5rem; }
	50% { opacity: 0;  margin-left: 1.5rem; }
	100% { opacity: 1;  margin-left: 0rem; }
}
@keyframes fade_in {
	0% { opacity: 0; margin-left: 1.5rem; }
	50% { opacity: 0;  margin-left: 1.5rem; }
	100% { opacity: 1;  margin-left: 0rem; }
}


/***************************************************************/
/*                          Reset CSS                          */
/***************************************************************/
* { margin: 0; padding: 0; letter-spacing: 0; font-family:'Noto Sans CJK KR'; -webkit-tap-highlight-color: rgba(0,0,0,0) !important; -webkit-tap-highlight-color: transparent; -webkit-focus-ring-color: rgba(0, 0, 0, 0) !important; outline: none !important; word-break: keep-all; }
a { text-decoration: none; letter-spacing: 0; font-family:'Noto Sans CJK KR'; color: #000000; word-break: keep-all; }
li { list-style: none; }
img { border: none; display: block; }

body { -ms-overflow-style: none; }
body::-webkit-scrollbar { display: none; }
input,button,select { border: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-ms-border-radius: 0;
	-o-border-radius: 0;
	border-radius: 0;  }

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

/* 공통 */
.page { width: 100%; height: auto; min-height: 100vh;
	position: absolute; top: 0; left: 0; padding-top: 4rem; box-sizing: border-box; }
.page_wrap { width: 100%; display: inline-block; position: relative; top: 0; left: 0;  }

/* 헤더 */
.header { width: 100%; height: 4rem; position: fixed; top: 0; left: 0; z-index: 8;
	display: flex; justify-content: center;  align-items: center; }
.header_left, .header_right { height: 100%; position: absolute; top: 0;
	padding: 0; box-sizing: border-box; display: flex; align-items: center; }
.header_left img, .header_right img { height: 1rem; /*margin-top: 1.5rem;*/ }
.header_left { left: 1rem; justify-content: flex-start; }
.header_right { right: 1rem; justify-content: flex-end; font-size: 0.9rem; line-height: 1; color: #73787E; font-weight: 500; }
.header_txt { font-size: 1.25rem; line-height: 1; font-weight: 600; color: #303030; }


/***************************************************************/
/*                        00_인트로 페이지                      */
/***************************************************************/
#pIntro { height: 100%; position: fixed; top: 0; left: 0; min-height: initial;
	padding: 0 2.5rem; box-sizing: border-box;
	display: flex; justify-content: center; align-items: center; background-color: #fff;
	background-image: url(../img/bg_intro.png); background-position: top; background-repeat: no-repeat; background-size: 100%; }
#pIntro .page_wrap { height: 100%; display: flex; justify-content: center; align-items: center; }

/* 로고 */
.logo { width: 70%; margin: 0 auto; margin-top: -3rem; display: block; }
.logo img { width: 100%; }

/* 인트로 메인 텍스트 */
.txtArea { width: 100%; padding: 0 1rem; box-sizing: border-box; display: none; }
#icon_wekorea { width: 14%; margin-bottom: 1rem; }
.tit { color: #1A3867; margin-bottom: 2.2rem;
	font-weight: 600; font-size: 1.95rem; line-height: 1.4; letter-spacing: -0.06rem; }
.txt { width: auto; height: 1rem; }
#img_introTxt { height: 100%; }

/* 구글 계정 버튼 */
.btn_google { width: 100%; padding: 1rem 0;
	position: absolute; bottom: 13%; left: 0rem;
	display: flex; justify-content: center; align-items: center;
	font-size: 1rem; line-height: 1; color: #73787E; font-weight: 500;
	border: 1px solid #B8B8B8; box-sizing: border-box; display: none; }
#icon_google { width: 8%; margin-right: 3%; }

/* 하단 텍스트 이미지 */
.logoTxt { width: 100%; height: 0.65rem; position: absolute; left: 0; bottom: 5%; }
.logoTxt img { height: 100%; margin: 0 auto; }

/* 클래스 추가 (인트로 페이지 전환) */
#pIntro.on { padding-top: 5rem; }
#pIntro.on .page_wrap { display: block; }
#pIntro.on .logo { display: none; }
#pIntro.on .txtArea { display: block;
	-webkit-animation: fade_in 0.5s linear;
	-moz-animation: fade_in 0.5s linear;
	-ms-animation: fade_in 0.5s linear;
	-o-animation: fade_in 0.5s linear;
	animation: fade_in 0.5s linear; }
#pIntro.on .btn_google { display: flex; }


/***************************************************************/
/*                        01_프로필 페이지                      */
/***************************************************************/
#pProfile { background-color: #F8F7F4; }
/* #pProfile .page_wrap { height: 100%; } */

#pProfile .header { background-color: #F8F7F4; }

#pProfile .contents { width: 100%; padding-bottom: 0rem; box-sizing: border-box; }
#pProfile .contentsArea { width: 100%; padding: 0 0.5rem; padding-bottom: 0; box-sizing: border-box; }
#pProfile .contents_wrap { width: 100%; height: 100%; padding: 2.2rem 0; box-sizing: border-box; background-color: #fff; }

/* 프로필 사진 */
.profilePicArea { width: 31%; position: relative; margin: 0 auto; background-color: #D6D6D6;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%; }
.profilePicArea img { width: 100%; }
#icon_camera { width: 32%; position: absolute; right: 0; bottom: 0; }
#input_pic { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }


/* 입력 영역 */
.inputArea { width: 100%; padding: 2.0rem 1.5rem 2.8rem 1.5rem; border-bottom: 1.5px solid #F8F7F4; box-sizing: border-box; }
.input_div { width: 100%; padding: 0.85rem 0; display: table;
	font-size: 1rem; line-height: 1.2; position: relative;
	/*display: flex; justify-content: flex-end; align-items: center;*/
	border-bottom: 1px solid #B8B8B8; box-sizing: border-box; margin-bottom: 0.5rem; }
.input_div label, .interestArea label { width: 30%; display: table-cell; font-size: 1rem; line-height: 1; font-weight: 600; color: #1A3867; box-sizing: border-box;}
.input_div input, .input_div select { width: 100%; text-align: right; direction: rtl;
	display: table-cell; /*display: flex; justify-content: flex-start; align-items: center;*/
	border: none; font-size: 1rem; line-height: 1; box-sizing: border-box; }

/* 연령대 */
.input_div select { width: auto; /*text-align-last: right; text-align: right;*/
	 position: absolute; top: 0; right: 0; background-color: transparent; }
.input_div select { height: 100%; font-size: 1rem; line-height: 1; }
.input_div select option { direction: ltr; width: auto; text-align: right; height: 100%; font-size: 1rem; line-height: 1; color: #000; }
/* .input_div selec
t option.age_option_default { color: #B8B8B8; } */

/* 성별 */
.input_div_gender { height: 1.7rem; border-bottom: none; padding: 0; margin: 0; margin-top: 1.5rem; display: flex; justify-content: flex-start; align-items: center; position: relative; }
.input_div_gender_wrap { display: flex; justify-content: center; align-items: center; float: right; position: absolute; top: 0; right: 0; }

.input_div_gender input { width: 1.7rem; height: 1.8rem; margin-right: 1rem; border: none;
  background-image: url(../img/icon_radio.png); background-position: center; background-size: 100%; background-repeat: no-repeat;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none; }
.input_div_gender input:checked { background-color: #fff; border: none;
	background-image: url(../img/icon_radioChecked.png); }
.input_div_gender input:nth-child(2) { margin-left: 1.5rem; }

/* placeholder */
input::-webkit-input-placeholder { color: #B8B8B8; font-size: 1rem; line-height:1; }
input::-moz-placeholder { color: #B8B8B8; font-size: 1rem; line-height:1; }
input:-ms-input-placeholder { color: #B8B8B8; font-size: 1rem; line-height:1; }
input:-moz-placeholder { text-align: right;  color: #B8B8B8; font-size: 1rem; line-height:1; }

/* 필수 입력 표시 */
.input_div_name label::after,
.input_div_phone label::after,
.interestArea label::after
{ content: '*'; color: #F15929; margin-left: 0.3rem; font-size: 1rem; line-height: 1;  }


/* 관심 카테고리 */
.interestArea { width: 100%; padding: 2.0rem 1.5rem 2.8rem 1.5rem; box-sizing: border-box; }
.interest_wrap { width: 100%; margin-top: 1.2rem; }
.interest_inner { width: 50%; display: inline-block; margin-bottom: 0.65rem; }
.interest_inner > p { width: 100%; display: inline-block; font-size: 0.9rem; line-height: 1; color: #231F20;
	display: flex; justify-content: flex-start; align-items: center; }
.interestArea label { width: 100%; display: block; }
.interestArea label span { color: #B8B8B8; font-size: 0.9rem; line-height: 1rem; font-weight: 400; float: right; }
.interestArea input { width: 1.7rem; height: 1.8rem; margin-right: 0.75rem; border: none;
	background-image: url(../img/icon_checkbox.png); background-position: center; background-size: 100%; background-repeat: no-repeat;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none; }
.interestArea input:checked { background-color: #fff; border: none;
	background-image: url(../img/icon_checkboxChecked.png); }


/* 약관보기 */
.termsArea { width: 100%; padding: 2.5rem 0; text-align: center; font-size: 0.9rem; line-height: 1.2; color: #73787E; box-sizing: border-box; }

.btn_terms { color: #73787E; font-weight: 600; display: flex; justify-content: center; align-items: center; margin-top: 1rem; }
.btn_terms img { display: inline-block; height: 0.9rem; margin-left: 0.2rem; }

/* 회원가입 완료 버튼 */
.btnArea { width: 100%; height: 4rem; position: relative; top: 0; left: 0; }
.btn_inner { height: 100%; display: flex; justify-content: center; align-items: center;
	font-size: 1rem; line-height: 1; font-weight: 600; background-color: #F15929; color: #fff; }
.btn_full { width: 100%; }


/***************************************************************/
/*                        02_생방송 페이지                      */
/***************************************************************/
#pLive { background-color: #F8F7F4; padding-top: 0; position: fixed; top: 0; left: 0; }
/* #pLive .page_wrap { height: 100%; position: absolute; top: 0; left: 0; border: 1px solid red; box-sizing: border-box; } */

/* 헤더 */
#pLive .header { background-color: #fff; z-index: 7; position: relative; top: 0rem; left: 0; }
#pLive .header_left { padding: 0; }
#pLive .header_txt { height: 2.9rem; padding: 0; box-sizing: border-box; }
#pLive .icon_header_center { height: 100%; }

#pLive_header_wrap { width: 100%; height: 100vh; position: absolute; top: 0; left: 0; overflow-y: scroll; -ms-overflow-style: none; }
#pLive_header_wrap::-webkit-scrollbar { display: none; }

/* ### 180703_추가 */
/* 배너영역 */
.bannerArea { width: 100%; height: 5.2rem; z-index: 7; position: relative; top: 0; left: 0;
    display: block; justify-content: center; align-items: center;
    color: #B8B8B8; font-size: 0.9rem; line-height: 1; background-color: #F8F7F4; }
.slick-list { height: 100% !important; }
.slick-track { height: 100% !important; }
.banner_inner { /*opacity: 0;*/ width: 100%; height: 100%; display: flex !important; justify-content: center; align-items: center; }
.slick-current { /*opacity: 1 !important;*/ }

/* 네비탭 */
#pLive .contents { width: 100%;  z-index: 6; overflow-y: scroll; -ms-overflow-style: none;
	position: fixed; bottom: 0; left: 0; }
#pLive .contents::-webkit-scrollbar { display: none; }

.navi_tab { width: 100%; height: 3.2rem; position: relative; z-index: 7; display: flex; justify-content: center; align-items: center; background-color: #002E6D; }
.navi_tab_inner { width: 50%; height: 100%; /*padding: 0.95rem 0; box-sizing: border-box;*/
	display: flex; justify-content: center; align-items: center;
	color: #fff; line-height: 1; }
.navi_tab_inner img { height: 100%; }

#navi_onAir {  }
#navi_onAir .icon_onair { font-family: Arial; font-size: 0.75rem; font-weight: 900;
	display: flex; justify-content: center; align-items: center;
	padding: 0.28rem 0.4rem; box-sizing: border-box; background-color: #607FAA; color: #002E6D;
	-webkit-border-radius: 0.25rem;
	-moz-border-radius: 0.25rem;
	-ms-border-radius: 0.25rem;
	-o-border-radius: 0.25rem;
 	border-radius: 0.25rem; }
#navi_prevBroadcast { font-size: 0.9rem; font-weight: 600; opacity: 0.6; }

/* 클래스추가 (네비탭 활성화) */
.navi_tab_inner.on { opacity: 1; }
#navi_onAir.on .icon_onair { background-color: #F15929; color: #fff; }
#navi_prevBroadcast.on { color: #F15929; opacity: 1; }


/* 동영상 영역 */
.videoArea { width: 100%; /*height: 100vh;*/ height: auto; z-index: initial;/*min-height: 100vh;*/
	position: relative; top: 0; left: 0; background-color: transparent; }
iframe { width: 100%;  width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

/* 실시간 스트리밍 영역 */
.video_player { width: 100%; height: auto; z-index: 7; min-height: 55vw; position: relative; }
.videoArea #live_video { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
/* 동영상 썸네일 */
#img_cover { width: 100%; height: 100%; z-index: 1; position: absolute; top: 0; left: 0; display: block; }

/* 동영상 정보 */
/*.video_info { width: 100%; height: auto; z-index: 7;
	display: flex; justify-content: center; align-items: center;
	position: relative; box-sizing: border-box; background-color: #fff;
	box-shadow: 0 0.1rem 0.5rem rgba(0,0,0,0.08); }*/
.video_info { width: 100%; min-height: 4.3rem; height: auto; z-index: 7; position: relative; box-sizing: border-box; background-color: #fff; box-shadow: 0 0.1rem 0.5rem rgba(0,0,0,0.08); }
/*.video_info_left { width: 80vw; height: 100%; display: inline-block;
	padding: 0.85rem 0; box-sizing: border-box; }*/
.video_info_left { /*width: 80vw;*/ width: 60vw; height: 100%; display: inline-block; padding: 0.85rem 0; box-sizing: border-box; position: relative; top: 0; left: 0; }
/*.video_info_right { width: 40vw; height: 100%; display: flex; justify-content: flex-start; align-items: center; padding: 0.85rem 0; box-sizing: border-box; }*/
.video_info_right { /*width: 20vw;*/ width: 40vw; height: 100%; position: absolute; top: 0; right: 0; display: flex; justify-content: flex-start; align-items: center; padding: 0.85rem 0; box-sizing: border-box; }
.video_info_inner_wrap { width: 100%; height: 100%; overflow: hidden; font-size: 0; }
.video_info_left .video_info_inner_wrap { /*border-right: 1px solid #B8B8B8;*/ padding: 0 1rem; box-sizing: border-box; }
/*.video_info_right .video_info_inner_wrap { width: 50%; display: inline-block; padding: 0 1rem; box-sizing: border-box; }*/
.video_info_right .video_info_inner_wrap { width: 50%; display: inline-block; padding: 0 1rem; box-sizing: border-box; display: flex; justify-content: center; align-items: center; }
.video_info_right .video_info_inner_wrap:first-child { border-right: 1px solid #E2E2E2; box-sizing: border-box; }
/*
.video_info_right { width: 20vw; height: 100%;
	padding: 0.85rem 0; box-sizing: border-box; display: inline-block; }
.video_info_inner_wrap { width: 100%; height: 100%; overflow: hidden; font-size: 0; }
.video_info_left .video_info_inner_wrap { border-right: 1px solid #B8B8B8; padding: 0 1rem; box-sizing: border-box; }
.video_info_right .video_info_inner_wrap { padding: 0 1rem; box-sizing: border-box; }
 */

/* 정보 */
#v_tit { display: block; font-size: 1.0rem; line-height: 1.2; font-weight: 600; margin-bottom: 0.4rem; }
/*#v_time, #v_host { position: relative; color: #9F9F9F; font-size: 0.8rem; line-height: 1; font-weight: 500; box-sizing: border-box; }*/
#v_time, #v_host { position: relative; color: #9F9F9F; font-size: 0.8rem; line-height: 1.2; font-weight: 500; box-sizing: border-box;
    -webkit-box-orient: vertical; display: -webkit-box;
    word-wrap: break-word;
    word-break: break-all;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
}
#v_time { padding-right: 0.7rem; padding-right: 0; }
#v_time::after { content: ''; width: 1px; height: 0.75rem; position: absolute; top: 0.25rem; right: 0; background-color: #B8B8B8; }
#v_host { padding-left: 0.5rem; }

/* 좋아요 아이콘 */
.icon_like, .icon_chat { height: 1.4rem; margin: 0 auto; margin-bottom: 0.4rem; }
.v_like, .v_chat { color: #9F9F9F; font-size: 0.8rem; line-height: 1; font-weight: 400; text-align: center; display: block; }

/* 클래스 추가(좋아요 아이콘 클릭시) */
.v_like.active { color: #F15929; font-weight: 500; }

/* 클래스 추가(채팅 아이콘 클릭시) */
/*#btn_chat_active { display: none; }*/
/*.v_chat.active { color: #F15929; font-weight: 500; }*/

/*#btn_chat_wrap.active .v_chat { color: #F15929 !important; font-weight: 500; }*/
/*#btn_chat_wrap.active .icon_chat { display: none; }*/
/*#btn_chat_wrap.active .icon_chat#btn_chat_active { display: block; }*/

/* 채팅 영역 */
.chatArea { width: 100%; z-index: 3; /*max-height: 100vh;*/ /*position: fixed; bottom: 0;*/
	position: absolute; top: initial; bottom: 0; left: 0; box-sizing: border-box;
	 /*-ms-overflow-style: none;*/ box-sizing: border-box; }
/* .chatArea::-webkit-scrollbar { display: none; } */
#chatArea_wrap { width: 100%; position: absolute; bottom: 0; left: 0; }
#main_chat_wrap_div { width: 100%;  height: auto; position: absolute; bottom: 0;/*height:100%;*/ /*position: initial; bottom: initial;*/ }

.chat_wrap { width: 100%; height: auto; overflow: initial;
	position: absolute; bottom: 0; left: 0;
    /*padding-bottom: 2.4rem;*/ padding-bottom: 0; box-sizing: border-box; }

.chat_inner { width: 100%; height: auto; padding: 0.5rem 1rem; box-sizing: border-box;
	display: flex; justify-content: flex-start; align-items: center;
	/* border-spacing: 0; border-style: solid; padding: 0; border-collapse: collapse; */ }
.chat_pic { width: 1.8rem; min-width: 1.8rem; height: 1.8rem; overflow: hidden; margin-right: 0.3rem;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%; }
.chat_pic img { width: 100%; }

.chat_time { min-width: 3.3rem; display: inline-block; color: #B8B8B8;
	margin-right:0.5rem; font-size: 0.7rem; line-height: 1; font-weight: 300; }
.chat { font-size: 0.9rem; line-height: 1.4; color: #231F20; font-weight: 400; word-break: break-word; }
.chat_id { color: #1A3867; margin-right: 0.8rem; white-space: nowrap; }

/* 메세지 입력 영역 */
.msgArea { width: 100%; height: 3.2rem; overflow: hidden;
	position: fixed; bottom: 0; left: 0; padding: 0 1rem; padding-right: 0; box-sizing: border-box;
	display: flex; justify-content: flex-start; align-items: center;
	background-color: #fff; display: none; }
.chat_pic { margin-right: 0.35rem; }

.chat_input { width: 100%; height: 100%; padding: 0.5rem 0; padding-right: 4rem; box-sizing: border-box; }
.chat_input input { width: 100%; height: 100%; }
.chat_input input::-webkit-input-placeholder { font-size: 0.9rem; line-height:1.2; }
.chat_input input::-moz-placeholder { font-size: 0.9rem; line-height:1.2; }
.chat_input input:-ms-input-placeholder { font-size: 0.9rem; line-height:1.2; }
.chat_input input:-moz-placeholder { font-size: 0.9rem; line-height:1.2;  }

/* 보내기 아이콘 */
.icon_send { width: 4rem; height: 100%; position: absolute; top: 0; right: 0;
	display: flex; justify-content: flex-end; align-items: center;
	padding: 1rem; box-sizing: border-box; }
.icon_send img { height: 100%; }


/* 다음방송 영역 */
.nextArea { width: 100%; height: 2.4rem; position: relative; bottom: 0; left: 0;
	display: flex; justify-content: flex-end; align-items: center;
	padding: 0 1rem; box-sizing: border-box; }
.nextImg { position: relative; line-height: 1;
	padding: 0.25rem 0.5rem; padding-right: 0.6rem; margin-right: 0.5rem; box-sizing: border-box;
	display: flex; justify-content: center; align-items: center; }
.img_next { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.nextImg span { position: relative; font-size: 0.5rem; line-height: 1; color: #fff; font-weight: 300; }
.nextImg span:nth-child(2) { font-weight: 600; margin-right: 0.25rem; }
.nextImg span:nth-child(3)::after { content: '~'; }

/* 방송 타이틀 */
.next_tit { font-size: 0.9rem; line-height: 1; font-weight: 500; }


/* 클래스 추가 (스크롤 시, 채팅창 활성화) */
#pLive.scroll { padding-top: 0; /*height: 100%;*/ overflow: hidden;  }
#pLive.scroll .header { z-index: 6; display: none; }
#pLive.scroll .bannerArea { z-index: 6; display: none !important; }
#pLive.scroll .navi_tab { display: none; }
/* #pLive.scroll .contents { position: relative; top: 0;/* margin-top: -3.2rem; */} */

#pLive.scroll .videoArea { /*height: auto; min-height: auto;*/ position: relative; z-index: 8; /*position: absolute;*/ top: 0; left: 0; }

#pLive.scroll .chatArea { /*position: relative;*/top: initial; bottom: 0; }
#pLive.scroll #main_chat_wrap_div { position: absolute; bottom: 3.2rem; }
#pLive.scroll .chat_wrap { position: relative; height: auto; bottom: 0; padding-bottom: 0; overflow-y: scroll; -ms-overflow-style: none; }
#pLive.scroll .chat_wrap::-webkit-scrollbar { display: none; }
#pLive.scroll .msgArea { display: flex; }

#pLive.scroll .nextArea { display: none; }


/***************************************************************/
/*                       03_지난방송 페이지                     */
/***************************************************************/
#pPrevBc { background-color: #F8F7F4; /*padding-top: 0;*/ }
#pPrevBc_header_wrap { width: 100%; }
#pPrevBc_header_wrap::-webkit-scrollbar { display: none; }

/* 헤더 */
#pPrevBc .header { background-color: #fff; z-index: 7; position: fixed; top: 0rem; left: 0; }
#pPrevBc .header_left { padding: 0; }
#pPrevBc .header_txt { height: 2.9rem; padding: 0; box-sizing: border-box; }
#pPrevBc .icon_header_center { height: 100%; }

/* 배너 */
#pPrevBc_banner { /*position: absolute; top: 4rem;*/ z-index: 6; position: relative; top: 0; left: 0; }
#pPrevBc_navi { /*position: absolute; top: 9.2rem;*/ z-index: 6; position: relative; top: 0; left: 0; }


/* 날짜 영역 */
.dateArea { width: 100%; height: 3.4rem;
	position: absolute; top: 12.4rem; left: 0; z-index: 5;
	display: flex; justify-content: center; align-items: center;
	color: #fff; background-color: #052858; padding: 0; box-sizing: border-box; }

/* 클래스 추가(탭 상단에 고정) */
.dateArea.scroll { position: fixed; top: 0; z-index: 5; }


/* 날짜 이동 버튼 */
.btn_arrow { width: auto; height: 100%;
	position: absolute; top: 0;
	display: flex; justify-content: center; align-items: center; }
.btn_arrow img { height: 30%; }

/* 이전 버튼 */
#btn_prev { left: 1rem; }
/* 다음 버튼 */
#btn_next { right: 1rem;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg); }

/* 오늘 날짜 영역 */
/* #today { font-size: 1.1rem; line-height: 1; font-weight: 600; font-family: Helvetica; } */
#datepicker { width: 7.2rem; height: 1.1rem;
	font-size: 1.1rem; line-height: 1.1; font-weight: 600;
	display: inline-block; text-align: center;
	color: #fff; border: none; background: transparent; }
#ui-datepicker-div { z-index: 8 !important; }
.ui-datepicker-trigger { height: 1.4rem !important; line-height: 1 !important; margin-top: -0.15rem; }


#pPrevBc .contents { width: 100%; position: absolute; top: 15.8rem; left: 0; }

/* 방송 리스트 영역 */
.bcListArea { width: 100%; height: auto; box-sizing: border-box; }
.bcList_inner { width: 100%; height: auto; position: relative;
	border-bottom: 1px solid #E3E3E3; background-color: #fff; overflow: hidden; }

.bcList_inner:last-child { border-bottom: none; }
.bcList_inner:first-child { border-bottom: 1px solid #E3E3E3; }

/* 리스트 상단 */
.bcList_inner_top { width: 100%; height: 100%; position: relative;
	display: flex; justify-content: flex-start; align-items: center;
	padding: 1.5rem 1rem; box-sizing: border-box; background-color: #fff; }

/* 이미지 영역 */
.bcList_pic { width: 25%; margin-right: 5%; height: 4rem; overflow: hidden; position: relative; display: inline-block; }
.bcList_pic_wrap { width: 100%; height: 100%;  display: flex; justify-content: center; align-items: center;}
.bcList_pic img { height: 100%; width: auto; }

/* 텍스트 영역 */
.bcList_info { width: 60%; display: inline-block; font-size: 0; }
.bcList_info #v_tit { margin-bottom: 0.6rem; }

/* 재생 아이콘 영역 */
.bcList_play { width: 10%; height: 100%; position: absolute; top: 0; right: 1rem;
	display: flex; justify-content: center; align-items: center; }
.bcList_play img { width: 100%; }


/* 리스트 하단 */
.bcList_inner_bottom { width: 100%; height: auto; position: relative; display: none;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-ms-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s; }

/* 클래스 추가 (동영상 탭 생성) */
.bcList_inner_bottom.on { display: block; }


/* 달력 */
/* deault */
.ui-state-default, .ui-widget-content .ui-state-default, .ui-button, .ui-widget-header .ui-state-default,  html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active
{ background: transparent !important; border: none !important; text-align: center !important; }

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 1px solid #F15929 !important; box-sizing: border-box !important; }

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover
{  background: #F15929 !important; color: #fff !important; border: 1px solid #F15929 !important; box-sizing: border-box !important; }


/***************************************************************/
/*                              메뉴                           */
/***************************************************************/
.menuArea { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 10; }
.menuArea::after { content: ''; width: 100%; height: 100%;
position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.5); }

.menu { width: 68vw; height: 100%; position: relative; z-index: 1; background-color: #fff; }
.profileArea { width: 100%; height: 47%; position: relative; display: flex;justify-content: center; align-items: center; }
.profile_wrap { text-align: center; width: 100%; }
.userPic { height: 16vh; margin: 0 auto; display: block; margin-bottom: 1.5rem; }
.userPic img { height: 100%; display: inline-block; }
.userName { color: #231F20; margin-bottom: 1.3rem; font-size: 1.3rem; line-height: 1; font-weight: 600; display: block; }
.btn_menu_wrap { width: 75%; height: 2.2rem; display: block; margin: 0 auto;
	border: 1px solid #B8B8B8; box-sizing: border-box;
	display: flex; justify-content: center; align-items: center;
	-webkit-border-radius: 1.1rem;
	-moz-border-radius: 1.1rem;
	-ms-border-radius: 1.1rem;
	-o-border-radius: 1.15rem;
	border-radius: 1.1rem; }
.btn_setting, .btn_logout { width: 50%; height: 100%; color: #73787E;
	display: flex; justify-content: center; align-items: center;
	font-size: 0.9rem; line-height: 1; font-weight: 400; }
.btn_setting { border-right: 1px solid #B8B8B8; box-sizing: border-box; }

.menuListArea { width: 100%; height: 53%; position: relative; display: flex; justify-content: center; align-items: center; }
.menu_wrap { width: 75%; margin-top: -2vh; }
.menu_inner { margin-bottom: 1.7rem;
	display: flex; justify-content: flex-start; align-items: center;
	 font-size: 1.1rem; line-height: 1.2; font-weight: 600; color: #231F20; letter-spacing: 0;}

.menu_icon { height: 1.3rem; width: 2rem; text-align: center; margin-right: 1rem; }
.menu_icon img { height: 100%; display: inline-block; }

/* 아이콘 푸터 */
.icon_footer { width: 100%; position: absolute; bottom: 1rem; left: 0;
	display: flex; justify-content: center; align-items: center;
	font-family: arial;
	font-size: 0.6rem; line-height: 1; color: #9F9F9F; font-weight: 600; }
.icon_footer img { height: 0.55rem; margin-right: 0.5rem; }


/* 닫기 버튼 */
.btn_close { width: 1.6rem; height: 1.6rem; z-index: 1; position: absolute; top: 5vw; left: 73vw; }
.btn_close img { width: 100%; }


/***************************************************************/
/*                         04_설정 페이지                       */
/***************************************************************/
#pSetting { background-color: #F8F7F4; }
#pSetting .header { background-color: #F8F7F4; }

#pSetting .contents { width: 100%; padding-bottom: 1.5rem; box-sizing: border-box; }
#pSetting .contentsArea { width: 100%; padding: 0 0.5rem; padding-bottom: 0; box-sizing: border-box; }
#pSetting .contents_wrap { width: 100%; height: 100%; padding: 0.5rem 0; box-sizing: border-box;  }

/* 프로필 사진 영역 */
#pSetting .picArea { width: 100%; height: 100%; margin-bottom: 0.65rem; position: relative; display: flex; justify-content: center; align-items: center; background-color: #fff; }
#pSetting .profile_wrap { display: inline-block; text-align: center; padding: 2.5rem 0; box-sizing: border-box; }

#pSetting .userPic { width: 27%; height: auto; margin-bottom: 1.2rem; }
#pSetting .userPic img { width: 100%; height: auto; }
#pSetting .userName { margin-bottom: 1.1rem; }
#pSetting .userEmail { color: #231F20; font-size: 0.9rem; line-height: 1; font-weight: 700 !important; }

/* 정보 영역 */
.infoArea { width: 100%; height: 100%; position: relative;
	padding: 1.8rem 1.65rem 1.2rem 1.65rem; box-sizing: border-box; background-color: #fff; }
.info_div { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;
	margin-bottom: 0.65rem; }
.info_div > p { display: inline-block; font-size: 1rem; line-height: 1.4; }
.info_div_tit { width: 40%; color: #1A3867; font-weight: 600; }
.info_div_txt { width: 60%; text-align: right; font-weight: 400; }

/* 약관보기 */
#pSetting .btn_terms { width: 100%; font-size: 0.92rem; line-height: 1; padding: 1.25rem 0; background-color: #fff; border: 1px solid #ccc; box-sizing: border-box; margin-bottom: 2.5rem; }

/* 하단 앱버전 및 탈퇴 영역 */
.setting_bottom { width: 100%; position: relative; padding: 0 0.35rem; box-sizing: border-box; }

/* 앱버전 */
.versionArea { width: auto; position: relative; display: inline-block;
	font-size: 0.9rem; line-height: 1.5; color: #73787E; font-weight: 400; }
.versionArea > span { color: #F15929; font-weight: 700 !important; }

/* 회원 탈퇴 */
.secessionArea { width: auto; position: relative; float: right; margin-top: 1.4rem;
	text-align: right; font-size: 0.9rem; line-height: 1.2; color: #73787E; box-sizing: border-box; }
.btn_secession { color: #73787E; font-weight: 600; display: flex; justify-content: flex-end; align-items: center; }
.btn_secession img { display: inline-block; height: 0.9rem; margin-left: 0.2rem; }


/***************************************************************/
/*                       05_정보수정 페이지                     */
/***************************************************************/
#pEdit { background-color: #F8F7F4; }
#pEdit .header { background-color: #F8F7F4; }

#pEdit .contents { width: 100%;  box-sizing: border-box; }
#pEdit .contentsArea { width: 100%; padding: 0 0.5rem; padding-bottom: 0; box-sizing: border-box; }
#pEdit .contents_wrap { width: 100%; height: 100%; padding: 0.5rem 0; padding-bottom: 3.2rem; box-sizing: border-box;  }

/* 프로필 사진 영역 */
#pEdit .picArea { width: 100%; height: 100%; margin-bottom: 0.65rem; position: relative; display: flex; justify-content: center; align-items: center; background-color: #fff; }
#pEdit .profile_wrap { display: inline-block; text-align: center; padding: 2.5rem 0; box-sizing: border-box; }

#pEdit .userPic { width: 27%; height: auto; margin-bottom: 1.2rem; }
#pEdit .userPic img { width: 100%; height: auto; }
#pEdit .userName { margin-bottom: 1.1rem; }
#pEdit .userEmail { color: #231F20; font-size: 0.9rem; line-height: 1; font-weight: 700; }

#pEdit .inputArea { background-color: #fff; }
#pEdit .interestArea { background-color: #fff; }

/***************************************************************/
/*                       06_이용약관 페이지                     */
/***************************************************************/
#pTerms { background-color: #fff; }
#pTerms .header { background-color: #F8F7F4; }

#pTerms_navi { background-color: #F8F7F4; position: relative; }
#pTerms_navi .navi_tab_inner { position: relative; color: #9F9F9F; font-size: 0.9rem; line-height: 1; font-weight: 600; }

/* 클래스 추가 (내비 활성화) */
#pTerms_navi .navi_tab_inner.on { color: #F15929; }
#navi_service::after { content: ''; width: 1px; height: 32%; position: absolute; top: 34%; right: 0; background-color: #ccc; }

#pTerms .contents { color: #231F20; font-size: 0.9rem; line-height: 1.45;
	padding: 1.8rem 1rem; box-sizing: border-box;
	background-color: #fff; }
#pTerms .contents_inner { width: 100%; display: none; }
#pTerms .contents_inner.on { display: block; }

/***************************************************************/
/*                       07_공지사항 페이지                     */
/***************************************************************/
#pNotice { background-color: #F8F7F4; }
#pNotice .header { background-color: #F8F7F4; }

#pNotice_contents { width: 100%; position: relative; }
.notice_inner { width: 100%; position: relative;
	border-top: 1px solid #E3E3E3; box-sizing: border-box; }

.notice_inner:last-child { border-bottom: 1px solid #E3E3E3; }

/* 상단 리스트 영역 */
.notice_inner_top { width: 100%; height: 100%; position: relative;
	display: flex; justify-content: flex-start; align-items: center;
	padding: 1.45rem 1rem 1.75rem 1rem; box-sizing: border-box; background-color: #fff; }
.notice_info { width: 92%; display: inline-block; padding-right: 1.5rem; box-sizing: border-box; font-size: 0; }
#n_tit { color: #231F20; display: block; font-size: 1rem; line-height: 1.3; font-weight: 400; margin-bottom: 0.75rem; }
#n_time { position: relative; color: #B8B8B8;
	font-size: 0.8rem; line-height: 1; font-weight: 400; box-sizing: border-box; }

/* 탭 아이콘 */
.notice_tabIcon { width: 8%; display: inline-block;
	-webkit-transition: 0s;
	-moz-transition: 0s;
	-ms-transition: 0s;
	-o-transition: 0s;
	transition: 0s; }
.notice_tabIcon img { width: 100%; }


/* 하단 공지사항 영역 */
.notice_inner_bottom { width: 100%; background-color: #F8F7F4;
	padding: 1.45rem 1rem 3.75rem 1rem; box-sizing: border-box; display: none; }
.notice_img_wrap { width: 100%; margin-bottom: 1.7rem; }
.notice_img_wrap img { width: 100%; }
.notice_txt { width: 100%; font-size: 0.9rem; line-height: 1.5; color: #231F20; font-weight: 400; }

/* 클래스 추가 (탭 활성화) */
.notice_inner.on {  }
.notice_inner.on .notice_inner_top { background-color: #F8F7F4; }
.notice_inner.on #n_tit { color: #F15929; }

.notice_inner.on .notice_tabIcon {
	-webkit-transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	transform: rotate(-180deg); }

.notice_inner.on .notice_inner_bottom { display: block; }

/* ### 180706_추가 (링크이동) */
.btn_link { color:#F15929;margin-top: 1.5rem;
    font-size:0.9rem;line-height:1;font-weight: 400;text-decoration:underline; }


/***************************************************************/
/*                        08_편성표 페이지                      */
/***************************************************************/
#pSchedule { background-color: #F8F7F4; padding-bottom: 5.2rem; }
#pSchedule .header { background-color: #F8F7F4; }

/* ### 180706_추가 (LA시간기준 텍스트) */
#pSchedule .header_right { color:#B8B8B8;font-size:0.8rem; }

#pSchedule .navi_tab { height: 4.7rem; background-color: #052858;
	padding: 0 1.5rem; box-sizing: border-box; }

#pSchedule .navi_tab_inner { width: 14.28%; z-index: 2; position: relative; text-align: center;
	font-size: 1.1rem; line-height: 1; font-weight: 600; opacity: 1; }
#pSchedule .navi_tab_inner.on::before { content: ''; z-index: -1; width: 100%; height: 100%;
position: absolute; top: 0; left: 0; background-image: url(../img/icon_tabOn.png);
background-position: center; background-size: 78%; background-repeat: no-repeat; }

/* 내용 */
#pSchedule .contents { width: 100%; height: auto; }
.schedule_inner { width: 100%; min-height: 4.2rem; padding: 1rem 1rem;
	display: flex; justify-content: flex-start; align-items: center;
	background-color: #fff; border-bottom: 1px solid #E3E3E3; box-sizing: border-box; }
.schedule_inner:last-child {  }

#s_time { width: 30%; color: #707070; font-size: 1.1rem; line-height: 1; font-weight: 400; }
#s_time::before { content: '●'; color: #F15929; font-size: 0.7rem; margin-right: 1rem; }
#s_tit { width: 60%; color: #231F20; font-size: 1.1rem; line-height: 1; font-weight: 600;  }


.schedule_tabIcon { width: 10%; height: 100%; display: inline-block; }
.schedule_tabIcon img { width: 30%; margin-left: 70%; }

/* 배너 */
#pSchedule .bannerArea { position: fixed; top: initial; bottom: 0; left: 0; background-color: #73787E; color: #B8B8B8; }


/***************************************************************/
/*                      09_편성표 상세페이지                    */
/***************************************************************/
#pDetail { background-color: #F8F7F4; padding-bottom: 5.2rem; }
#pDetail .header { background-color: #F8F7F4; }

/* 동영상 상세 영역 */
.detail_videoArea { width: 100%; position: relative; }

/* 동영상 상세 텍스트 */
.video_detail { width: 100%; padding: 1.4rem 1rem; box-sizing: border-box; }
.d_inner { width: 100%; display: table; margin-bottom: 0.25rem; font-size: 0; }
#d_tit { margin-bottom: 0.8rem; font-size: 1.25rem; line-height: 1; font-weight: 600; }
.d_inner_left, .d_inner_right { display: table-cell; color: #9F9F9F; font-size: 0.8rem; line-height: 1.2; font-weight: 500; }

.d_inner_left { width: 20% }
/* .d_inner_right { width: 50% } */

#d_pd { margin-bottom: 0.7rem; }
#d_txt { font-size: 0.9rem; line-height: 1.5; font-weight: 400; color: #231F20; }

/* 지난방송 영역 */
.detail_prevBcArea { width: 100%; background-color: #fff; }
.detail_prevBcArea .d_prevBc_tit { width: 100%; color: #B8B8B8; text-align: center;
	font-size: 0.9rem; line-height: 1; font-weight: 600;
	padding: 1.2rem 0; border-bottom: 1px solid #E3E3E3; box-sizing: border-box; }

/* 배너 */
#pDetail .bannerArea { position: fixed; top: initial; bottom: 0; left: 0; background-color: #73787E; color: #B8B8B8; }


/* ### 180702_ 추가 */
/***************************************************************/
/*                            Popup                            */
/***************************************************************/
.popup_wrap { width: 100%; height: 100%; z-index: 10;
    position: fixed; top: 0; left: 0; box-sizing: border-box;
    background-color: rgba(0,0,0,0.3); }

.popup_contents { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.popupArea { width: 86%; padding: 3rem 2rem; box-sizing: border-box; background-color: #fff; }

.topTxt_wrap { width: 100%; height: auto; text-align: center; margin-bottom: 2.5rem;
    font-weight: 600; font-size: 0.9rem; line-height: 1.45; }

.btnArea { width: 100%; display: flex; justify-content: center; align-items: center; }
.p_btn_inner { width: 48.2%; color: #fff; font-size: 1rem; line-height: 1;
    display: flex; justify-content: center; align-items: center;
    padding: 0.9rem 0; box-sizing: border-box; }
.btn_cancel { background-color: #9F9F9F; margin-right: 3.6%; }
.btn_ok { background-color: #F15929; }

/* 클래스 추가 */
.popup_wrap.full .btn_cancel { display: none; }
.popup_wrap.full .btn_ok { width: 100%; }

/* ### 180703_추가(내용없음) */
.noContents { width:100%; position:relative;
    padding: 1rem; box-sizing:border-box;
    font-size: 0.9rem; line-height: 1; color: #73787E; font-weight: 500;
    display: none; }
.noContents_wrap { width: 100%; height: 100%; padding: 6.5rem 1rem; box-sizing:border-box; display:flex; justify-content: center; align-items: center; }
#pNotice .noContents_wrap { background-color: #fff; }

.contents.default .noContents { display: flex; }

/* ### 180720 추가 */
/* 날짜부분 */
.date_inner { display: inline-block; text-align: center; margin: 0.5rem 0;
    font-size: 0.7rem; color: #ACACAC; font-weight: 400; position: relative; z-index: 2; }
.date_inner_wrap { width: 100%; position: relative; }
.date_inner_wrap::after { content: ''; width: 100%; height: 1px; z-index: 1;
    position: absolute; top: 50%; left: 0; margin-top: -0.5px; background-color: #E6E6E6; }
.chat_date { position: relative; z-index: 2; padding: 0 0.5rem; box-sizing: border-box; background-color: #F8F7F4; }


/************************************media query***********************************/
@media only screen and (max-width: 339px){
	html { font-size: 13.5px !important; }
}
@media only screen and (min-width: 340px){
	html { font-size: 14px !important; }
}
@media only screen and (min-width: 360px){
	html { font-size: 15px !important; }
}
@media only screen and (min-width: 375px){
	html { font-size: 16px !important; }
}
@media only screen and (min-width: 410px){
	html { font-size: 17px !important; }
}
@media only screen and (min-width: 450px){
	html { font-size: 18px !important; }
}
@media only screen and (min-width: 500px){
	html { font-size: 25px !important; }
}
@media only screen and (min-width: 600px){
	html { font-size: 27px !important; }
}
@media only screen and (min-width: 700px){
	html { font-size: 28px !important; }
}
@media only screen and (min-width: 800px){
	html { font-size: 30px !important;
}
@media only screen and (min-width: 900px){
	html { font-size: 33px !important; }
}
@media only screen and (min-width: 1000px){
	html { font-size: 35px !important; }
}
@media only screen and (min-width: 1100px){
	html { font-size: 35px !important; }
}
@media only screen and (min-width: 1200px){
	html { font-size: 35px !important; }
}