@charset "utf-8";
html, body {min-height:100vh;font-size:20px;font-weight:300;line-height:1.5rem;letter-spacing:0.05em;}
body {background:#f0efe2;min-width:320px;}
a {all:unset;}
em{font-style:normal;}

.hide {display:block;overflow:hidden;position:absolute;left:-9999px;width:1px;height:1px;font-size:0;line-height:0;text-indent:-9999px}

/*btn*/
.btn_area {display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;}
.btn_area.type2 .btn {width:calc(50% - 0.4rem);}
.btn {display:inline-block;width:100%;height:3rem;line-height:2.8rem;font-size:1rem;background:#fff;text-align:center;box-sizing:border-box;border-radius:0.5rem;border:1px solid #a00200;color:#a00200;/*-webkit-text-fill-color: rgba(160, 2, 0, 1);*/}
.btn.red {background:#a00200;color:#fff;-webkit-text-fill-color: rgba(255, 255, 255, 1);}
.btn.white {background:#fff;border:1px solid #cbc8b9;color:#333333;}
.btn.gray {background:#bbb2a6;color:#fff;border:1px solid #a59c90;}
.btn.small {height:2rem;font-size:0.8rem;line-height:1.8rem;color:#666;}

textarea {resize:none;border:1px solid #c8c7c2;}

/*input*/
.inp_area {position:relative;}
input[type="text"],
input[type="password"],
input[type="number"] {width:100%;height:4rem;line-height:3.8rem;padding-left:1.5rem;font-family:'samyang';font-size:1.2rem;font-weight:300;letter-spacing:-0.05em;background:#f0efe2;border:0.1rem solid #f0efe2;border-radius:0.5rem;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;outline:none;vertical-align:top;}
input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder {font-family:'samyang';font-size:1.2rem;color:#000;}

.inp_area .ti {width:100%;font-size:1.1rem;line-height:1.1rem;color:#222;margin-bottom:0.8rem;}
.inp_area + .inp_area {margin-top:1rem;}


/*checkbox*/
.chk {position:relative;display:inline-block;padding-left:2.3rem;height:2rem;vertical-align:middle;cursor:pointer;}
.chk input[type="checkbox"] {position:absolute;top:0px;left:-4px;width:1px;height:1px;opacity:0;filter:alpha(opacity=0);}
.chk input[type="checkbox"] + span {display:inline-block;line-height:2rem;}
.chk input[type="checkbox"] + span:before {content:'';position:absolute;left:0;top:0;width:2rem;height:2rem;border-radius:0.5rem;background:#f0efe2;}
.chk input[type="checkbox"]:checked + span:before {background:#f0efe2 url("/mobile/mobileCom/images/common/chk.png") no-repeat 0 0;background-size:cover;}

/*radio*/
.radio {position:relative;display:inline-block;padding-left:27px;height:20px;vertical-align:top;cursor:pointer;}
.radio input[type="radio"] {position:absolute;top:0px;left:-4px;width:1px;height:1px;opacity:0;filter:alpha(opacity=0);}
.radio input[type="radio"] + span {display:block;line-height:20px;}
.radio input[type="radio"] + span:before {content:'';position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;border:1px solid #d6d6d6;background:#fff;box-sizing:border-box;}
.radio input[type="radio"]:checked + span:before {background:#fff url("/mobile/mobileCom/images/common/radio.png") no-repeat 0 0;border:none;background-size:20px;}



/*select*/
.selbox {position:relative;height:4rem;line-height:4rem;background:#f0efe2;border-radius:0.5rem;padding-right:2.4rem;box-sizing:border-box;}
.selbox select {position:absolute;right:0;top:0;z-index:10;width:100%;height:100%;opacity:0;}
.selbox .seltxt {position:absolute;left:0;top:0;width:100%;height:100%;padding-left:1.5rem;box-sizing:border-box;}
.selbox .bl {position:absolute;right:0;top:0;width:2.3rem;height:100%;background:url('/mobile/mobileCom/images/common/sel_arrow.png') no-repeat left center;background-size:100%;}
.selbox.type2 .seltxt {display:none;}
.selbox.direct select {width:2.3rem;}
.hypen {position:relative;display:flex;height:4rem;align-items:center;justify-content:center;}
.bul {position:relative;display:inline-block;height:4rem;line-height:4rem;text-align:center;}
.hypen:before {content:'';display:block;width:0.9rem;height:1px;background:#b4b4a9;}

/* copytext */
.copytext {position:fixed;left:50%;bottom:100%;z-index:100;padding:1rem 2rem;background:rgba(0,0,0,0.8);color:#fff;border-radius:0.5rem;transform:translate(-50%,0);transition:opacity 0.6s 0s, bottom 0s 0.6s;opacity:0;pointer-events:none;}
.copytext.active {bottom:20%;opacity:1;transition:opacity 0.6s 0s, bottom 0s 0s;}

/* table */
.tbl th,
.tbl td{border:1px solid #c8c7c2;padding:0.3rem 0.2rem;}

/* 페이징 */
.paging_comm {font-weight:bold;font-size:12px;line-height:18px;text-align:center;vertical-align:top;}
.paging_comm .inner_paging {display:inline-block;zoom:1;}
.paging_comm .inner_paging:after {content:" "; display:block; clear:both;}
.paging_comm .inner_paging span,
.paging_comm a,
.paging_comm em {float:left;padding:0 9px 0 10px;font-weight:normal;color:#999;text-decoration:none;vertical-align:middle;}
.paging_comm a:hover,
.paging_comm em {font-weight:bold;color:#b62126;text-decoration:none;}
.paging_comm .btn_prev,
.paging_comm .btn_next {overflow:hidden;width:10px;height:14px;margin-top:3px;background-image:url(/slpCom/images/common/btn_paging.gif);background-repeat:no-repeat;font-size:0;line-height:0;text-indent:-9999px;}
.paging_comm .btn_prev {padding:0 17px 0 0;background-position:0 0}
.paging_comm .btn_next {padding:0 0 0 23px;background-position:100% 0}
.paging_comm a.btn_prev:hover {background-position:0 -48px;color:#333}
.paging_comm a.btn_next:hover {background-position:100% -48px;color:#333}
.paging_comm .btn_first,
.paging_comm .btn_last {overflow:hidden;width:18px;height:16px;margin-top:3px;background-image:url(/slpCom/images/common/btn_paging.gif);background-repeat:no-repeat;font-size:0;line-height:0;text-indent:-9999px;}
.paging_comm .btn_first {background-position:0 -100px;}
.paging_comm .btn_last {background-position:100% -100px;}
.paging_comm .btn_first:hover {background-position:0 -148px;}
.paging_comm .btn_last:hover {background-position:100% -148px;}

.paging_comm span.btn_prev {background-position:0 0;}
.paging_comm span.btn_next {background-position:100% 0;}

/* popup */
body.fix-mode {position:fixed;width:100%;}
.popup {position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.5);display:flex;align-items:center;align-content:center;justify-content:center;transition:opacity 0.6s;opacity:0;pointer-events:none;}
.popup .btn_close {position:absolute;right:1rem;top:1.7rem;background:none;outline:none;border:none;}
.popup .btn_close img {width:2.2rem;}

.popup .inner {position:relative;top:10%;max-height:100%;background:#fff;transition:top 0.6s;overflow-y:auto;box-sizing:border-box;}
.popup .inner .ti {padding:1.9rem 3.2rem 1.9rem 0;font-size:1.8rem;line-height:1.5rem;font-weight:600;color:#555;}
.popup .inner .tx {line-height:1.5em;}
.popup.full .inner {top:0;padding:0 1rem 1rem;border-top:3px solid #ab1e23;}

.popup.popup_alert .inner {width:20rem;margin:0 auto;border-radius:0.5rem;overflow:hidden;}
.popup.popup_alert .inner .tx {padding:3rem 1rem;font-size:0.8rem;text-align:center;letter-spacing:-0.05em;}
.popup.popup_alert .inner .btn_area .btn.red {font-size:0.9rem;font-weight:600;border-radius:0;}

.popup.active {opacity:1;pointer-events:auto;}
.popup.active .inner {top:0%;}


/* popup - agree, privacy */
.popup.popup_privacy .inner .tx,
.popup.popup_agree .inner .tx {position:relative;padding:2em 1.5em;height:100%;overflow-y:auto;font-size:0.8rem;color:#666;background:#fff;border-radius:0.5rem 0.5rem;border:1px solid #c8c7c2;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;z-index:10;text-align:left;}

@media (max-width:767px) {
	.popup.popup_alert .inner {width:calc(100% - 4rem);}
	.popup.popup_alert .inner .tx {font-size:1.2rem;}
	.popup.popup_alert .inner .btn_area .btn.red {font-size:1.2rem;}
	.popup.popup_privacy .inner .tx,
	.popup.popup_agree .inner .tx {font-size:1.2rem;}
}

/* page - title */
.h_logo {text-align:center;}
.h_logo img {max-width:6rem;}
.page_tit {margin-top:1.2rem;text-align:center;}
.page_txt {margin-top:1rem;text-align:center;}

/* menu */
.btn-menu-open {position:absolute;top:30px;left:30px;width:34px;height:25px;text-indent:-9999px;border:none;background:url('/mobile/mobileCom/images/common/btn_menu.png') no-repeat 0 0;}
#menu {transition-duration:500ms;position:fixed;z-index:9;top:0;left:-360px;width:360px;height:100%;padding:65px 30px 30px;background-color:#fff;box-sizing:border-box;}
#menu.active {left:0;}
#menu > .tit {font-weight:400;font-size:24px;color:#000;margin-bottom:25px;}
#menu ul li {border-top:1px solid #e7e7e7;}
#menu ul li:first-child {border-top:none;}
#menu ul li a {display:block;position:relative;height:64px;line-height:64px;font-size:18px;color:#666;padding-left:55px;}
#menu ul li a:before {content:"";position:absolute;top:0;bottom:0;left:0;margin:auto;background:url('/mobile/mobileCom/images/common/ico_menu.png') no-repeat 0 0;}
#menu ul li.menu-current a:before {width:32px;height:21px;background-position:0 0;}
#menu ul li.menu-past a:before {width:27px;height:32px;background-position:-40px 0;}
#menu ul li.menu-report a:before {width:24px;height:32px;background-position:-80px 0;}
#menu ul li.menu-myinfo a:before {width:25px;height:32px;background-position:-120px 0;}
#menu ul li.menu-nhkphonics a:before {width:32px;height:30px;background-position:-160px 0;} /* 2021.06.16 : 추가 */
#menu .btn-menu-close {position:absolute;top:40px;right:30px;width:24px;height:24px;text-indent:-9999px;border:none;background:url('/mobile/mobileCom/images/common/btn_menu.png') no-repeat -40px 0;}

#menu ul.parent li a {display:block;position:relative;height:50px;line-height:50px;font-weight:bold;font-size:15px;color:#222;padding-left:30px;}
#menu ul.parent li a:before {background:url('/mobile/mobileCom/images/myslp/ico-menu.png') no-repeat 0 0;background-size:80px;}
#menu ul.parent li.menu-pay a:before {width:16px;height:14px;background-position:0 0;}
#menu ul.parent li.menu-history a:before {width:15px;height:16px;background-position:-20px 0;}
#menu ul.parent li.menu-account a:before {width:16px;height:15px;background-position:-40px 0;}
#menu ul.parent li.menu-report a:before {width:13px;height:16px;background-position:-60px 0;}
@media (max-width:767px) {
	.btn-menu-open {left:15px;top:22px;}
	#menu {width:270px;}
	#menu > .tit {font-size:18px;}
}

/* commonlayout */
#contents {padding-top:1.5rem;border-top:0.3rem solid #ab1e23;}
.container {position:relative;margin:0 auto;max-width:600px;box-sizing:border-box;}
.container .btn_home {position:absolute;right:0;top:0.4rem;}
.container .btn_home img {width:3.6rem;height:3.6rem;}

/* footer */
#footer {max-width:600px;margin:2rem auto 0;padding-bottom:1.5rem;text-align:center;}
#footer .btn_area {display:block;text-align:center;font-size:0;}
#footer .btn_area .btn {width:5.5rem;}
#footer .btn_area .btn + .btn {margin-left:0.4rem;}
#footer .btn_area .btn:last-child {color:#333;}
#footer .copy {margin-top:1rem;font-size:0.6rem;line-height:1.3em;color:#555;}
#footer .copy span {font-family:Arial;}
#footer .footerlink_area {margin-top:0.8rem;font-size:0;}
#footer .footerlink_area a {position:relative;display:inline-block;color:#666;font-size:0.8rem;line-height:1rem;vertical-align:top;}
#footer .footerlink_area a + a {margin-left:1rem;}
#footer .footerlink_area a + a:before {content:'';position:absolute;left:-0.5rem;top:50%;display:block;width:1px;height:0.9rem;transform:translateY(-50%);background:#999999;}

.main.tu #footer .btn_area .btn {color:rgba(255, 255, 255, 0.8);border-color:#431a52;background-color:#431a52;}
.main.tu #footer .copy {color:rgba(255, 255, 255, 0.6);}
.main.tu #footer .footerlink_area a {color:rgba(255, 255, 255, 0.6);}

/* 20220113 sap 2022// */
.main.sap_g1 #footer .btn_area .btn {color:rgba(255, 255, 255, 0.8);border-color:#431a52;background-color:#431a52;}
.main.sap_g1 #footer .copy {color:rgba(255, 255, 255, 0.6);}
.main.sap_g1 #footer .footerlink_area a {color:rgba(255, 255, 255, 0.6);}

.main.sap_g2 #footer .btn_area .btn {color:rgba(255, 255, 255, 0.8);border-color:#172e70;background-color:#172e70;}
.main.sap_g2 #footer .copy {color:rgba(255, 255, 255, 0.6);}
.main.sap_g2 #footer .footerlink_area a {color:rgba(255, 255, 255, 0.6);}
/* //20220113 sap 2022 */

/* sap3 20230808 // */
.main.sap_g3 #contents { border-color: #3ab020; }
.main.sap_g3 #footer .btn_area .btn {color:rgba(255, 255, 255, 0.8);border-color:#144412;background-color:#144412;}
.main.sap_g3 #footer .copy {color:rgba(255, 255, 255, 0.6);}
.main.sap_g3 #footer .footerlink_area a {color:rgba(255, 255, 255, 0.6);}
/* // sap3 20230808 */

/* 202502324 */
.mobile_banner {background-color: #ab1e23;text-align: center;padding: 8px;}
.mobile_banner p {display: inline-block;font-size: 12px;font-weight: 400;line-height: 21px;letter-spacing: -0.6px; text-align: center; color:#fff;}
.mobile_banner p img { width: 13px;margin-right: 6px;vertical-align: middle;}
.mobile_banner p strong {display: inline-block; margin-right: 10px;}
.mobile_banner a {padding: 0px 10px;background-color: #fff;font-size: 10px;font-weight: 600;letter-spacing: -0.5px;color: #B00401;border-radius: 4px;margin-left: 12px;display:inline-block;line-height: 24px;vertical-align: middle;}


@media (max-width:767px) {
	html, body {font-size:10px;}
	body {background:#f0efe2; }

	.container {max-width:none;margin:0 1em;}
	#footer .copy {font-size:0.9rem;}
}