@charset "utf-8";

@font-face {
font-family: 'NotoSansCJKkr';
font-weight: 500;
src: url(../html/fonts/srtplay/NotoSans-Medium.eot);
src: url(../html/fonts/srtplay/font/NotoSans-Medium.eot?#iefix) format('embedded-opentype'),
	url(../html/fonts/srtplay/font/NotoSans-Medium.woff) format('woff'),
	url(../html/fonts/srtplay/font/NotoSans-Medium.otf) format('opentype');
}
@font-face {
font-family: 'NotoSansCJKkr';
font-weight: 400;
src: url(../html/fonts/srtplay/font/NotoSans-Regular.eot);
src: url(../html/fonts/srtplay/font/NotoSans-Regular.eot?#iefix) format('embedded-opentype'),
	url(../html/fonts/srtplay/font/NotoSans-Regular.woff) format('woff'),
	url(../html/fonts/srtplay/font/NotoSans-Regular.otf) format('opentype');
}

/* ========== reset ========== */
/* html{min-width:320px;} */
*{margin:0;padding:0;border:none;word-break:break-all;box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-overflow-scrolling:touch;-webkit-hyphens:auto;hyphens:auto;vertical-align:baseline;font-size:inherit;line-height:inherit;font-family:inherit;} 
*:before, *:after{box-sizing:border-box;-webkit-box-sizing:border-box;}
html,body{height:100%;}
body{font-size:13px;line-height:1.25;font-family:"Roboto", "NotoSansCJKkr","Sans-serif";-webkit-text-size-adjust:none;color:#333333;word-break:keep-all;word-wrap:break-word;}
dl,ul,ol,menu,li {list-style:none;}
table {width:100%;border-collapse:collapse;border-spacing:0}
table caption {visibility:hidden;overflow:hidden;width:0;height:0;font-size:0;line-height:0;}
img,fieldset{border:0 none;}
img{vertical-align:middle;max-width:100%;max-height:100%;}
a{color:inherit;text-decoration:none;cursor:pointer;color:inherit;font-family:inherit;}
a:hover{text-decoration:none}
i,em,address{font-style:normal;}

label,button{cursor:pointer;}
i,em{font-style:normal;}
br,hr{border:none;line-height:inherit;}

/* ========== form ========== */
/* input 기본 스타일 초기화 */
input {
	-webkit-appearance: none;
	   -moz-appearance: none;
			appearance: none;
}

/* IE10 이상에서 input box 에 추가된 지우기 버튼 제거 */
input::-ms-clear { display: none; }

/* input type number 에서 화살표 제거 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	   -moz-appearance: none;
			appearance: none;
}

legend{visibility:hidden;overflow:hidden;position:absolute;top:0;left:-999em;width:0;height:0;font-size:0;line-height:0;text-align:left;}
textarea{height:auto;resize:none;color:#888;padding:0.33rem;border:solid 1px #c9c9c9;border-radius:3px;background-color:#fff;box-shadow:none;-webkit-appearance:none;}
textarea:focus{outline-width:0;}
input[type=text], input[type=password], input[type=email],input[type=number], input[type=phone], input[type=date], input[type=tel], textarea{-webkit-appearance:none;-webkit-box-shadow:none;box-shadow:none;border-radius:0;background:#ffffff;}
select{-webkit-appearance:none;-webkit-box-shadow:none;box-shadow:none;border-radius:0;background:#ffffff;}
button{border:none;background:none;outline:none;cursor:pointer;border-radius:0;}
input[type="submit"]{border-radius:0;}

/* disabled */
select[disabled=disabled], textarea[disabled=disabled], input[disabled=disabled],input:disabled {color:#999;border-color:#c9c9c9;background-color:#ddd;}

/* scrollbar */
/*body{-ms-overflow-style: -ms-autohiding-scrollbar;}*/
::-webkit-scrollbar{-webkit-appearance:none}
::-webkit-scrollbar:vertical{width:5px;}
::-webkit-scrollbar:horizontal{height:5px;} 
::-webkit-scrollbar-thumb{
	background-color:rgba(0,0,0,.2);
	border-radius:10px;
}
::-webkit-scrollbar-track{
/*  background-color:rgba(255,255,255,.2);*/
	background-color:rgba(0,0,0,.05);
	border-radius:10px;
}

/* placeholder */
::-webkit-input-placeholder {color:#999999;vertical-align:middle;}
:-webkit-input-placeholder {color:#999999;vertical-align:middle;}
::-moz-placeholder {color:#999999;vertical-align:middle;}
:-moz-placeholder {color:#999999;vertical-align:middle;}

/* ==========================================
	content
========================================== */

/* etc */
.c-red {color: #f05050 !important;}
.c-black{color: #000000 !important;}

.wrapper{display:flex;min-width:320px;min-height:100%;overflow:hidden;flex-direction:column;}
.wrapper .content{flex:1;display:flex;flex-direction:column;}

/* layout */
.header.noline{border-bottom:none;}
.header .header-wrapper{display:flex;flex-direction:row;height:53px;background:#fff;}
.header .left .back {display:block;height:100%;width:53px;display:flex;flex-direction: column;justify-content:center;align-items:center;}
.header .left + .title{padding-left:0px;}
.header .right .close {display:block;height:100%;width:53px;display:flex;flex-direction: column;justify-content:center;align-items:center;}
.header .title {flex:1;height:53px;padding-left:20px;font-size:17px;color:#000;line-height:54px;font-weight:500;}
.header .title.logo{height:52px;background:#89348b;display:flex;padding-left:20px;flex-direction:row;align-items:center;}
.header .title.logo .logo{display:inline-block;width:56px;height:15px;background:url('../images/srtplay/common/logo2_w.png') no-repeat 0 0;background-size:auto 100%;}

.footer{background:#fff;}
.footer .btn-box-wrap{padding:15px 20px;}
.footer.fixed{position:fixed;bottom:0;left:0;width:100%;z-index:10;min-width:320px;}

/* nodata */
.no-data{padding:67px 0;text-align:center;}
.no-data .ico{display:inline-block;width:50px;height:50px;background:url('../images/srtplay/common/ico_nodata.png') no-repeat 0 0;background-size:auto 100%;}
.no-data .txt{margin-top:20px;font-size:15px;color: #666666;}

/* ico */
.ico{display:inline-block;background-size:100% 100% !important;vertical-align: middle;}
.ico.ico-del{width:16px;height:16px;background:url('../images/srtplay/common/ico_del.png') no-repeat 0 0;}
.ico.ico-close{width:16px;height:16px;background:url('../images/srtplay/common/ico_close.png') no-repeat 0 0;}

/* tab */
.tab-menu ul{border-bottom:1px solid #dedede;background:#fff;display:flex;flex-direction:row;align-items:center;}
.tab-menu ul:after{content:"";display:block;clear:both;}
.tab-menu ul li{flex:1;}
.tab-menu ul li a{display:block;position:relative;height:40px;line-height:38px;font-weight:500;font-size:15px;color:#000000;text-align:center;}
.tab-menu ul li a span{vertical-align:baseline;}
.tab-menu ul li.on a{color:#89348b;}
.tab-menu ul li.on a:after{content:"";display:block;position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:#89348b;}

.inp_chk{display:inline-block;cursor:pointer;white-space:nowrap;margin-right:5px;}
.inp_chk .inp{display:inline-block;position:relative;width:23px;height:23px;vertical-align: middle;}
.inp_chk .inp input{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;}
.inp_chk .inp .ic{display:block;overflow:hidden;position:absolute;top:0;left:0;width:100%;height:100%;background:url('../images/srtplay/common/ico_inp_check.png') no-repeat 0 0;background-size:auto 23px;}
.inp_chk .inp input:checked  + .ic{background-position-x:-23px !important;}
.inp_chk .inp input:disabled  + .ic{background-position-y:-23px !important;}
.inp_chk .txt{display:inline-block;margin-left:5px;font-size:15px;vertical-align: middle;color: #666666;}

.inp_chk.type2 .inp .ic {border:1px solid #89348b;background-position-x:-999px;}

/* btn type */
.btn-box.row{display:flex;flex-direction:row;align-items:center;}
.btn-box.row .box{flex:1;}
.btn-box.row.space{margin-left:-5px;}
.btn-box.row.space .box{padding-left:5px;}

.btn-type2{display:block;width:100%;height:50px;line-height:48px;font-size:17px;color: #fff;font-weight:500;text-align: center;}
.btn-type2.c-type1{border:1px solid #89348b;background:#89348b;}
.btn-type2.c-type2{border:1px solid #b6b6b6;background:#b6b6b6;}
.btn-type2.disabled,
.btn-type2[disabled]{color: #fff;border:1px solid #6d7580;background:#6d7580;}

/* 로그인 */
.login-wrap{flex:1;display:flex;flex-direction: column;padding-top:17px;justify-content:flex-end;}
.login-wrap .login-area{background:#f3f4f6;}
.login-wrap .login-tit {text-align: center;font-weight:500;}
.login-wrap .login-tit .tit {padding-top:25px;font-size:22px;color: #4c2f45;font-weight:500;}
.login-wrap .login-tit .txt {margin-bottom:16px;font-size:18px;color: #000000;font-weight:500;padding-top:25px;}
.login-wrap .login-tit .logo {display:inline-block;width:128px;height:35px;overflow: hidden;text-indent: -9999%;;background:url('../images/srtplay/common/logo.png') no-repeat 0 0;background-size:auto 100%;}
.login-wrap .login-tit .logo.type2{display:inline-block;width:185px;height:25px;overflow: hidden;text-indent: -9999%;;background:url('../images/srtplay/common/logo_type2.png') no-repeat 0 0;background-size:auto 100%;}
.login-wrap .noti-text{padding:0 20px;}
.login-wrap .noti-text ~ .noti-text{margin-top:40px;}
.login-wrap .noti-text .noti-tit {font-size:23px;color: #000;font-weight:300;line-height:1.3em;font-weight:500;color:#89348b;}
.login-wrap .noti-text .noti-txt {margin-top:12px;font-size:16px;color: #999999;line-height:1.4em;}
.login-wrap .noti-text .noti-txt .link{display:inline-block;color: #89348b;border-bottom:1px solid #89348b;}
.login-wrap .noti-text .noti-txt2 {margin-top:12px;font-size:14px;color: #999999;line-height:1.4em;}
.login-wrap .noti-text .noti-txt2 .link{display:inline-block;color: #89348b;border-bottom:1px solid #89348b;}

.login-wrap .tab-menu{margin-top:30px;}
.login-wrap .login-area{padding:20px;}
.login-wrap .login-area .login-noti{margin-top:29px;font-size:15px;text-align: center;color: #666666;line-height:1.4em;}
.login-wrap .login-area .login-noti b{font-weight:400;color: #89348b;}

.login-wrap .login-box ul li {margin-bottom:10px;}
.login-wrap .login-box ul li .inp{display:block;position:relative;}
.login-wrap .login-box ul li input {height:50px;width:100%;line-height:48px;padding:0 50px 0 20px;font-size:15px;color: #89348b;border:1px solid #dedede;}
.login-wrap .login-box ul li .btn-del{display:none;position:absolute;top:50%;right:19px;transform:translateY(-50%);-webkit-transform:translateY(-50%);opacity:0.5;}
.login-wrap .login-box ul li input:focus{border:1px solid #89348b;outline:none;}
.login-wrap .login-box .idpw-svave {margin-top:10px;}
.login-wrap .login-box .agree-check {margin-top:10px;}
.login-wrap .login-box .add-menu {margin-top:10px;font-size:14px;display:flex;flex-direction:row;align-items:center;}
.login-wrap .login-box .add-menu .left{flex:1;}
.login-wrap .login-box .add-menu .link{font-size:15px;text-decoration:underline;color: #000;}
.login-wrap .btn-login {margin-top:15px;}
.login-wrap .btn-login .btn{display:block;width:100%;height:50px;line-height:50px;text-align:center;font-size:19px;color: #fff;background:#89348b;cursor:pointer;}
.login-wrap .btn-login .btn[disabled]{color: #fff;background:#aaa;}

.login-wrap .agree-rules{}
.login-wrap .agree-rules .rules{height:200px;overflow-y:auto;padding:15px 20px;font-size:13px;color: #666666;background:#f3f4f6;line-height:1.4em;}
.login-wrap .agree-rules .agree-check{padding:0 20px;margin-top:10px;}
.login-wrap .agree-rules .btn-box{padding:20px;}

.agree-area{margin-top:25px;padding:20px;background:#f3f4f6;}
.agree-area .agree-txt p {font-size:15px;color:#000000;margin-top:21px;line-height:1.4em;}
.agree-area .agree-txt p:first-child{margin-top:0;}
.agree-area .agree-chk-list {font-size:15px;}
.agree-area .agree-chk-list li {margin-top:29px;}
.agree-area .agree-chk-list li:first-child{margin-top:0;}
.agree-area .agree-chk-list li b {display:block;margin-bottom:10px;color:#89348b;font-weight:500;}
.agree-area .agree-chk-list li p {color:#000000;}
.agree-area .agree-chk-list li .chek-item{position:relative;}
.agree-area .agree-chk-list li .chek-item:after{content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;}
.agree-area .agree-chk-list li .inp_chk{margin-right:12px;}
.agree-area .agree-chk-list li .inp_chk:last-child{margin-right:0;}
.agree-area .agree-noti {margin-top:12px;font-size:15px;color:#999999;line-height:1.4em;}
.agree-area .btn-box{margin-top:27px;}


/* layerpopup */
.layerpopup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;min-width:320px;z-index:50;}
.layerpopup .dim{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);}
.layerpopup .pop-wrap{display:flex;flex-direction:column;position:absolute;top:0;left:0;width:100%;min-width:312px;}
.layerpopup .pop-wrap .pad-wrapper{padding:0 20px;}
.layerpopup .pop-wrap.center{top:50%;left:50%;transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);}
.layerpopup .pop-wrap .popup{display:flex;flex-direction:column;height:100%;width:100%;background:#fff;}
.layerpopup .pop-wrap .popup .pop-footer .border-line{border-top:1px solid #dedede;}
.layerpopup .pop-wrap .popup .pop-footer .btn-box{display:flex;flex-direction:row;align-items:center;}
.layerpopup .pop-wrap .popup .pop-footer .btn-box .box{flex:1;}
.layerpopup .pop-wrap .popup .pop-footer .btn-box .box + .box{border-left:1px solid #ab7484}
.layerpopup .pop-wrap .popup .text-alert-wrap{padding:27px 18px;}
.layerpopup .pop-wrap .popup .tit-alert{margin-bottom:18px;font-size:17px;color: #000;font-weight:500;}
.layerpopup .pop-wrap .popup .text-alert{font-size:15px;color: #000;line-height:1.4em;}
.layerpopup .pop-wrap .popup .text-alert p{margin-top:23px;}
.layerpopup .pop-wrap .popup .text-alert p:first-child{margin-top:0;}