@charset "utf-8";
/*!
 * common.css
 * 기본 Layout 및 module Style Guide 정의.
*/

html{font-size:62.5%;width:100%;overflow-x:hidden} /* 폰트 기준 정의. 10px = 1.0rem */
body{width:100%;overflow-x:hidden;position:relative}

/* Layout */
#wrap{position:relative;transform:translateX(0);transition:transform 250ms ease;-webkit-transition:-webkit-transform 250ms ease}
#wrap.active{transform:translateX(260px);-webkit-transform:translateX(260px)}
.btn-top{position:fixed;bottom:10px;right:7px;z-index:1;opacity:.8;filter:alpha(opacity=80);display:none}

#header{position:relative;height:56px;background:#fff;border-bottom:1px solid #ddd;text-align:center;}
#header .page-ttl{padding:18px 50px;font-size:19px;font-size:1.9rem;font-weight:bold;color:#8e45d2;line-height:29px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
#header .page-ttl .logo{margin:0 auto}
#header .btn-menu{position:absolute;top:13px;left:13px}
#header .btn-srch{position:absolute;top:13px;right:13px}
#header .btn-prev{position:absolute;top:13px;left:13px}
#header .srch-field{padding:10px 11px 10px 45px;}
#header .srch-field .field-area{position:relative;padding:0 30px;height:35px;border-bottom:1px solid #b2b2b2}
#header .srch-field .field-area .label{position:absolute;top:5px;left:6px;height:35px}
#header .srch-field .field-area .label .srch-word{display:inline-block;vertical-align:middle}
#header .srch-field .field-area .i-txt{padding:5px 0;width:100%;height:35px;box-sizing:border-box;border:none;font-size:16px;color:#7a7a7a;}/* 원래 사이즈는 12px이지만 ios에서 자동 zoom되지 않게 하려면 16px 이상이어야 함 */
#header .srch-field .field-area .srch-del {position:absolute;top:50%;right:6px;margin-top:-10px}

#tab.tab-list{height:40px;background:#fff;border-bottom:1px solid #ddd;display:block}
#tab.tab-list ul{width:100%}
#tab.tab-list ul li{float:left}
#tab.tab-list ul li.active{position:relative}
#tab.tab-list ul li.active:before{position:absolute;bottom:0;left:0;width:100%;height:2px;background:#8e45d2;content:""}
#tab.tab-list ul li a{padding:10px 0;width:100%;height:20px;text-align:center;font-size:14px;font-size:1.4rem;line-height:20px;display:block}
#tab.tab-list ul.tab02 li{width:50%;height:40px}
#tab.tab-list ul.tab03 li{width:33.3%;height:40px}
#tab.tab-list ul.tab03 li:first-child{width:33.4%}
#tab.tab-list ul.tab04 li{width:25%;height:40px}
#tab.tab-list ul.tab05 li{width:20%;height:40px}

.tab-btn{padding:11px;}
.tab-btn ul{width:100%;}
.tab-btn ul:after{display:block;content:"";clear:both}
.tab-btn ul li{float:left;padding-left:2px;box-sizing:border-box}
.tab-btn ul li:first-child{padding-left:0;padding-right:2px}
.tab-btn ul li a{width:100%;height:32px;text-align:center;line-height:32px;font-size:12px;font-size:1.2rem;color:#484848;font-weight:bold;background:#fff;display:block}
.tab-btn ul li.current a{color:#fff;background:#8e45d2}
.tab-btn ul.tab02 li{width:50%;}
.tab-btn ul.tab03 li{margin-bottom:2px; width:33.33%;}
.tab-btn ul.tab03 li:first-child {padding-right:0;}
.tab-btn ul.tab03 li:nth-child(4) {padding-left:0;}

#nav{position:fixed;top:0;left:0;width:260px;height:100%;min-height:560px;background:#fff;text-align:center;display:none;z-index:600;
	transform:translateX(-260px);transition:transform 250ms ease;-webkit-transition:-webkit-transform 250ms ease;
}
#nav.active{display:block;transform:translateX(0);-webkit-transform:translateX(0)}
#nav ul{}
#nav li{padding:0 15px;text-align:left}
#nav li a{position:relative;padding:15px 0 15px 55px;border-bottom:1px solid #e5e5e5;font-size:14px;font-size:1.4rem;font-weight:bold;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
#nav li a span{position:absolute;top:50%;left:5px;margin-top:-13px}
#nav li.top{background:#9346ec}
#nav li.top a{border:none;color:#fff}
#nav li:nth-child(3) a,
#nav li:nth-child(4) a,
#nav li:nth-child(5) a,
#nav li:nth-child(9) a{border-bottom:none}
#nav .btn-app{overflow:hidden;display:block;margin-left:15px;margin-top:28px;width:175px;height:37px}
#nav .btn-app:before{content:url(/images/common/app-install.png)}
.nav-shadow{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;opacity:.5;filter:alpha(opacity=50);content:"";z-index:500;display:none}

#container{margin:0 auto;max-width:100%;overflow:hidden}
#container .tab-list{height:40px;background:#fff;border-bottom:1px solid #ddd;display:block}
#container .tab-list ul{width:100%}
#container .tab-list ul li{float:left}
#container .tab-list ul li.active{position:relative}
#container .tab-list ul li.active:before{position:absolute;bottom:0;left:0;width:100%;height:2px;background:#8e45d2;content:""}
#container .tab-list ul li a{padding:10px 0;width:100%;height:20px;text-align:center;font-size:14px;font-size:1.4rem;line-height:20px;display:block}
#container .tab-list ul.tab03 li{width:33.3%;height:40px}
#container .tab-list ul.tab03 li:first-child{width:33.4%}
#container .tab-list ul.tab05 li{width:20%;height:40px}

/*! icon */
.sp-img{background:url(../images/common/sp_ico.png) no-repeat;background-size:500px auto;text-indent:-999px;overflow:hidden;vertical-align:middle;font-size:0;display:block}
.sp-img.menu{width:30px;height:30px;background-position:0 0} /* 전체메뉴 */
.sp-img.srch{width:30px;height:30px;background-position:-30px 0} /* 검색 */
.sp-img.prev{width:30px;height:30px;background-position:-130px 0} /* 이전 */
.sp-img.logo{
    /* 로고 */
    width:98px;
    height:20px;
    background:url(../images/common/logo-wavve.png) no-repeat;
    background-size: 98px 20px;
    }
.sp-img.top{width:35px;height:30px;background-position:-90px 0} /* top */
.sp-img.user{width:25px;height:25px;background-position:0 -60px} /* 로그인 */
.sp-img.home{width:25px;height:25px;background-position:-25px -60px} /* 홈 */
.sp-img.live{width:25px;height:25px;background-position:-50px -60px} /* 실시간TV */
.sp-img.vod{width:25px;height:25px;background-position:-75px -60px} /* VOD */
.sp-img.movie{width:25px;height:25px;background-position:-100px -60px} /* 영화 */
.sp-img.play{width:25px;height:25px;background-position:-125px -60px} /* PLAYY 영화 */
.sp-img.my{width:25px;height:25px;background-position:-150px -60px} /* 마이푹 */
.sp-img.ticket{width:25px;height:25px;background-position:-175px -60px} /* 이용권구매 */
.sp-img.customer{width:25px;height:25px;background-position:-200px -60px} /* 고객센터 */
.sp-img.app{width:44px;height:30px;background-position:-225px -60px} /* 버튼로고 */
.sp-img.more{width:15px;height:15px;background-position:-60px 0} /* 더보기 */
.sp-img.view{width:10px;height:15px;background-position:-80px -35px} /* 이어보기 */
.sp-img.premium{width:46px;height:17px;background-position:0 -90px} /* 프리미엄 */
.sp-img.sale{width:31px;height:17px;background-position:0 -110px} /* 할인 */
.sp-img.pick{width:32px;height:17px;background-position:0 -130px} /* 추천 */
.sp-img.arrow01{width:10px;height:10px;background-position:-80px -50px} /* > */
.sp-img.arrow02{width:10px;height:10px;background-position:-90px -50px} /* V */
.sp-img.arrow03{width:10px;height:15px;background-position:-90px -35px} /* > */
.sp-img.close{width:25px;height:25px;background-position:-270px -60px} /* layer 닫기 */
.sp-img.vod-play{width:60px;height:65px;background-position:-50px -90px} /* vod 재생 */
.sp-img.radio{width:20px;height:20px;background-position:-110px -90px} /* radio btn off */
.sp-img.radio.active{width:20px;height:20px;background-position:-130px -90px} /* radio btn on */
.sp-img.radio02{width:20px;height:20px;background-position:-210px -90px} /* radio btn off */
.sp-img.radio02.active{width:20px;height:20px;background-position:-230px -90px} /* radio btn on */
.sp-img.chk{width:20px;height:20px;background-position:-110px -110px} /* checkbox btn off */
.sp-img.chk.active{width:20px;height:20px;background-position:-130px -110px} /* checkbox btn on */
.sp-img.chk02{width:25px;height:25px;background-position:-155px -90px} /* checkbox btn off */
.sp-img.chk02.active{width:25px;height:25px;background-position:-180px -90px} /* checkbox btn on */
.sp-img.age0{width:25px;height:25px;background-position:0 -155px} /* 전체관람가 */
.sp-img.age12{width:25px;height:25px;background-position:-25px -155px} /* 12세관람가 */
.sp-img.age15{width:25px;height:25px;background-position:-50px -155px} /* 15세관람가 */
.sp-img.age18{width:25px;height:25px;background-position:-75px -155px} /* 청소년관람불가 */
.sp-img.theater{width:50px;height:18px;background-position:-105px -155px} /* 극장동시 */
.sp-img.event{width:43px;height:18px;background-position:-160px -155px} /* 이벤트 */
.sp-img.drm{width:50px;height:18px;background-position:-205px -155px} /* DRM */
.sp-img.event-btn{width:15px;height:10px;background-position:-100px -50px} /* 이벤트 열기 버튼 */
.sp-img.event-btn.open{width:15px;height:10px;background-position:-100px -35px} /* 이벤트 닫기 버튼 */
.sp-img.star-bg{width:105px;height:21px;background-position:0 -205px} /* 별점 0점 */
.sp-img.star{width:105px;height:21px;background-position:0 -180px} /* 별점 5점 */
.sp-img.new{width:41px;height:18px;background-position:-260px -155px} /* 새글 */
.sp-img.srch-word{width:20px;height:20px;background-position:-160px 0} /* 검색영역 */
.sp-img.srch-del{width:20px;height:20px;background-position:-180px 0} /* 검색삭제 */
.sp-img.download{width:30px;height:30px;background-position:-265px 0} /* 다운로드 */
.sp-img.free{width:30px;height:30px;background-position:-297px -2px} /* FREE태그 */
.sp-img.using{width:46px;height:18px;background-position:-110px -180px} /* 이용중 */
.sp-img.etc-logo{width:142px;height:49px;background-position:-350px 0} /* 앱설치 로고 */
.sp-img.android{width:25px;height:25px;background-position:-350px -120px} /* 안드로이드 */
.sp-img.ios{width:25px;height:25px;background-position:-350px -145px} /* ios */
.sp-img.login-logo{ /* 로그인 로고 */
    width:98px;
    height:20px;
    background:url(../images/common/logo-wavve.png) no-repeat;
    background-size: 98px 20px;
}
.sp-img.btn-arrow01{width:15px;height:10px;background-position:-150px -50px} /* 닫힌버튼 */
.sp-img.btn-arrow02{width:15px;height:10px;background-position:-150px -35px} /* 열린버튼 */
.sp-img.v-arrow{width:10px;height:10px;background-position:-130px -50px} /* 이용권 화살표 */
.sp-img.v-super{width:20px;height:20px;background-position:-110px -130px} /* 이용권 아이콘_슈퍼팩 */
.sp-img.v-live{width:20px;height:20px;background-position:-130px -130px} /* 이용권 아이콘_live */
.sp-img.v-vod{width:20px;height:20px;background-position:-150px -130px} /* 이용권 아이콘_vod */
.sp-img.v-month{width:20px;height:20px;background-position:-170px -130px} /* 이용권 아이콘_슈퍼팩 */
.sp-img.v-super02{width:20px;height:20px;background-position:-190px -130px} /* 이용권 아이콘_슈퍼팩plus */
.sp-img.v-playy{width:20px;height:20px;background-position:-210px -130px} /* 이용권 아이콘_playy */
.sp-img.won{width:20px;height:20px;background-position:-230px -130px}/* 가격아이콘_원 */
.sp-img.pay{width:25px;height:20px;background-position:-250px -130px}/* 결제아이콘 */

/* input */
.select-area{background:#d0d0d0;height:44px;display:block}
.select-area .full{}
.select-area .half02{float:left;width:50%}
.select-area .half03{float:left;width:33.3%}
.select-area .half03:first-child{width:33.4%}
.i-select{position:relative;padding:0 11px;height:44px;box-sizing:border-box;z-index:10}
.i-select:before{position:absolute;top:17px;right:17px;width:10px;height:10px;background:url(../images/common/sp_ico.png) no-repeat;background-size:500px auto;background-position:-60px -15px;vertical-align:middle;content:""}
.i-select dl{position:relative; width:100%}
.i-select dt a,
.i-select dt button{padding:0 44px 0 16px;width:100%;height:44px;font-size:12px;font-size:1.2rem;line-height:44px;box-sizing:border-box;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
@media all and (max-width: 360px ) {
	.i-select dt a,
	.i-select dt button{padding:0;text-align:center;}
}
.i-select dd{position:absolute;top:5px;left:0;width:100%;}
.i-select dd .opt-list{max-height:420px;overflow:hidden;overflow-y:auto;background:#f9f9f9}
.i-select dd .opt-list li{border:1px solid #cbcbcb;border-top:none}
.i-select dd .opt-list li:first-child{border-top:1px solid #cbcbcb;}
.i-select dd .opt-list li a{padding:0 16px;width:100%;font-size:12px;font-size:1.2rem;color:#484848;line-height:44px;box-sizing:border-box;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.i-select dd .opt-list li a:hover{color:#7438ac}
.i-select dd .shadow{position:fixed;top:0;left:0;width:100%;height:100%;content:"";z-index:-1}

.i-radio {}
.i-radio .radio{cursor:pointer; transition:none;display:inline-block;vertical-align:text-top}
.i-radio .radio input{opacity:0;}
.i-radio label {line-height:18px;font-size:12px;font-size:1.2rem;color:#777;display:inline-block;cursor:pointer;vertical-align:text-top}

.i-chk {}
.i-chk .chk{cursor:pointer; transition:none;display:inline-block;vertical-align:text-top}
.i-chk .chk input{opacity:0;}
.i-chk label {line-height:18px;font-size:12px;font-size:1.2rem;color:#777;display:inline-block;cursor:pointer;vertical-align:text-top}

.i-chk {}
.i-chk .chk02{cursor:pointer; transition:none;display:inline-block;vertical-align:text-top}
.i-chk .chk02 input{opacity:0;}
.i-chk label {line-height:18px;font-size:12px;font-size:1.2rem;color:#777;display:inline-block;cursor:pointer;vertical-align:text-top}

/* layer */
#layer{}
.modal{position:absolute;top:57px;left:0;width:100%;height:100%;z-index:99;display:none}
.modal.full{top:0}
.modal:before{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:.8;filter:alpha(opacity=80);content:"";z-index:-1}

/*******************
	web css
********************/
@media all and (min-width:768px){
	
	html{font-size:81.3%;line-height:1.2}
	/*#container{margin:0 auto;max-width:1024px;overflow:hidden}*/
	#header .srch-field .field-area .i-txt{font-size:12px;font-size:1.2rem}/* 원래 사이즈 */
}


/*******************
	common
********************/
.a11y-hidden{overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;position:absolute !important;width:1px !important;height:1px !important}

.leading-app-install{
	position:fixed;
}

.leading-app-install .diemed{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:rgba(0,0,0,.8);
	z-index:900;
}
.leading-app-install .diemed-layer{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:910;
}
.leading-app-install .centered-layer{
	position:fixed;
	left:50%;
	top:50%;
	width:82.8125%;
	max-height:100%;
	-webkit-transform:translate(-50%, -50%);
	-moz-transform:translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
	-o-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
	text-align:center;
	overflow-y:auto;
}
.leading-app-install .centered-layer img{
	max-width:100%;
	width:100%;
}
.leading-app-install .use-app-desc,
.leading-app-install .use-app-btn{
	display:block;
}
.leading-app-install .use-app-btn img{
	display:block;
	max-width:100%;
	width:100%;
}
.leading-app-install .not-use-app{
	display:block;
	width:100%;
	padding-top:6.1321%;
	text-align:center;
}
.leading-app-install .not-use-app button{
	color:#bbb;
	border-bottom:1px solid #bbb;
	line-height:1.75;
	font-size:16px;
}
@media screen and (min-width: 480px ) {
	.leading-app-install .not-use-app button{
		font-size:20px;
		border-bottom-width:2px
	}
}
@media screen and (min-width: 768px ) {
	.leading-app-install .not-use-app button{
		font-size:26px;
		border-bottom-width:2px
	}
}