/* init */
html {font-size: 10px;}
@media only screen and (min-width : 361px) and (max-width : 1024px) {
	html {font-size: 11px;}
}
html, body {width: 100%; min-width: 320px; min-height: 100%; padding:0; margin:0;}
body, div, span, h1, h2, h3, h4, h5, h6, p, ul, ol, li, table, a, button, input, textarea, select, dl, dd {padding:0; margin:0; background: none; font-family: 나눔고딕, NanumBarunGothic, NanumGothic, 맑은고딕, "Malgun Gothic", "Apple SD Gothic Neo", 돋움, dotum, sans-serif;}
input, textarea, select, button {letter-spacing: inherit;}
h1, h2, h3, h4, h5, h6 {font-weight: bold; font-size: 1.4rem;}
body {background: #FFF; color: #000; font-size: 1.4rem; letter-spacing: -0.3px;}
li {list-style: none;}
table {border-collapse: collapse; border: 0;}
a {text-decoration: none; color: inherit;}
button {border:0; font-size:0;}
textarea {background: #FFF; box-sizing: border-box; border: 1px solid #CCC;}
select , input[type="text"], input[type="password"] {background: #FFF; box-sizing: border-box; border: 1px solid #CCC; font-size: inherit; height: 25px;}
input[type="text"], input[type="password"] {-webkit-appearance: none; -webkit-border-radius: 0;}
input:focus, select:focus, button:focus {outline: none;}
select {-webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(http://img.toto-romance.com/upfile/icon/btn_arrow_bottom.png) no-repeat 93% 50%; background-size: 15px 18px; padding: 0 30px 0 5px; border-radius: 0; height: 25px; line-height: 25px; font-size: 1.3rem;}

.txt_rd {color: red;}
.txt_bl {color: #009dfd;}
.ft_right {float: right;}
.ft_left {float: left;}
.cl_b {clear: both;}

.keyword_type1 a {display: inline-block; background: #EEE; font-size: 1.3rem; padding: 5px 10px; margin:5px 7px 0 0; border-radius: 5px; letter-spacing: -1px;}
.ellipsis1 {overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.ellipsis2 {overflow: hidden; line-height: 1.4; display: -webkit-box; white-space: normal; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; }
.ellipsis {overflow: hidden; line-height: 1.4; display: -webkit-box; white-space: normal; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; }

#backDimmed {display: none; width: 100%; height: 100%; position: fixed; top:0; left:0; background: #000; opacity: 0.8; background: rgba(0, 0, 0, 0.8); z-index:999;}

/* checkbox */
/************ chkbox *************/
.chkbox_vt:not(:checked), .chkbox_vt:checked {position: absolute; left: -9999px;}
.chkbox_vt:not(:checked) + label, .chkbox_vt:checked + label {position: relative;padding-left: 25px; cursor: pointer;}
/* checkbox aspect */
.chkbox_vt:not(:checked) + label:before, .chkbox_vt:checked + label:before {content: ''; position: absolute; left:0; top: -1px; width: 16px; height: 16px; border: 1px solid #ddd; background: #FFF; border-radius: 2px; box-shadow: inset 0 0px 2px rgba(0,0,0,.2)}
/* checked mark aspect */
.chkbox_vt:not(:checked) + label:after, .chkbox_vt:checked + label:after {content: ''; font-weight: bold;  position: absolute; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; transition: all .2s; width: 16px; height: 16px; top: -1px; left: 1px; background: url(http://img.toto-romance.com/upfile/serial/icon/icon_check_mark.png) no-repeat center center; background-size: 80% 90%;}
/* checked mark aspect changes */
.chkbox_vt:not(:checked) + label:after { opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); transform: scale(0);}
.chkbox_vt:checked + label:after {opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}
/* disabled checkbox */
.chkbox_vt:disabled:not(:checked) + label:before, .chkbox_vt:disabled:checked + label:before {box-shadow: none; border-color: #ddd; background-color: #ddd;}
.chkbox_vt:disabled:checked + label:after {color: #AD9CC9;}
.chkbox_vt:disabled + label {color: #000;}

/************ radio *************/
.radio_vt:checked, .radio_vt:not(:checked) {position: absolute; left: -9999px;}
.radio_vt:checked + label,.radio_vt:not(:checked) + label {position: relative;padding-left: 28px;cursor: pointer;line-height: 20px;display: inline-block; color: #666;}
.radio_vt:checked + label:before, .radio_vt:not(:checked) + label:before { content: ''; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border: 1px solid #ddd; border-radius: 100%; background: #fff; box-shadow: inset 0 0px 2px rgba(0,0,0,.2);}
.radio_vt:checked + label:after, .radio_vt:not(:checked) + label:after {content: ''; width: 12px; height: 12px; background: #AD9CC9; position: absolute; top: 4px; left: 4px; border-radius: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
.radio_vt:not(:checked) + label:after { opacity: 0; -webkit-transform: scale(0); transform: scale(0);}
.radio_vt:checked + label:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1);}

/* paging */
#mPaging {text-align: center; padding: 25px 0; position: relative; clear: both;}
#mPaging > a {font-size: 0; display: inline-block; width: 30px; height: 30px; vertical-align: middle; background: url(http://img.toto-romance.com/upfile/icon/btn_paging_move.jpg) no-repeat center center; background-size: auto 90%; background-position: -28px 1px;}
#mPaging > a span {border-radius: 3px; display:  block; width: 22px; height: 22px; border: 1px solid #CACBCD; border-radius: 3px; margin: 3px;}
#mPaging > a.next {background-position: -58px 1px;}
#mPaging ul {display: inline-block; height: 30px; vertical-align: middle; width: auto; margin: 0 5px;}
#mPaging li {display: table; width: 33px; height: 30px; float: left;}
#mPaging li a {display: table-cell; vertical-align: middle; font-size: 1.4rem; color: #949597;}
#mPaging li a.on {color: #000; font-weight: 800;}


/* loading */
#data_loading {position: fixed; z-index: 100; width: 100%; height: 100%; top: 0; left: 0; display: none;}
#data_loading > img {position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin-left: -25px;  margin-top: -25px;}

/* thumb badge*/
.badge_rt {width: 25px !important; height: auto !important; position: absolute !important; top: 0 !important; right: 0 !important;}
.thumb_badge {width: 25px !important; height: 25px !important; margin: 0 !important;}


/* common - header */
#header {background:#FFF; font-size: 1.3rem; position: relative;}
#header .top {padding: 0; height: 42px; background: #551A8B; color: #FFF; line-height: 42px;}
#header .top ul {height: 42px; overflow: hidden;}
#header .top li {float: left; height: 100%; font-size: 0; box-sizing: border-box; width: 50%;}
#header .top li > a {display: inline-block; height: 100%; font-size: 0; vertical-align: top;}
#header .top .img_menu {height: 30px; width: auto; margin-top: 6px;}
#header .top .img_logo {height: 18px; margin-top: 13px;}
#header .top .img_my {height: 24px; margin-top: 9px;} 
#header .top .img_srch {height: 24px; margin-top: 9px;}
#header .top .left {text-align: left;}
#header .top .left img {padding-left: 10px;}
#header .top .right {text-align: right;}
#header .top .right img {padding-right: 10px;}

#header .menu {background: #FFF; overflow: hidden;}
#header .menu ul {height: 35px; border-bottom: 2px solid #551A8B;}
#header .menu ul::after {content: ''; clear: both;}
#header .menu li {float: left; display: table; width: 25%; text-align: center; font-weight: 700; color: #58595B; height: 100%; font-size: 1.5rem;}
#header .menu li:nth-child(1), #header .menu li:nth-child(2),#header .menu li:nth-child(4) {width: 33%;}
#header .menu li:nth-child(3) {width: 34%;}
#header .menu li a {display: table-cell; vertical-align: middle; position: relative; font-size: 12pt !important;}
#header .menu li a span{font-size:12pt !important; font-weight:500 !important; font-family:나눔고딕, NanumBarunGothic, NanumGothic, 맑은고딕, "Malgun Gothic", "Apple SD Gothic Neo", 돋움, dotum, sans-serif}
#header .menu .on > span {color: #551A8B;}
#header .menu .on::after {content: ''; width: 70%; height: 4px; background: #551A8B; position: absolute; bottom: 0; left: 15%;}

#header .ebook_sub {background: #FCFCFE; border-bottom: 1px solid #DEDEDE; color: #58595B; text-align: center; letter-spacing: -0.5px;}
#header .ebook_sub ul {height: 35px; overflow: hidden;}
#header .ebook_sub li {float: left; display: table; width: 12.5%; height: 100%; overflow: hidden; font-size: 0;}
#header .ebook_sub li a {display: table-cell; vertical-align: middle; position: relative; font-size: 1.35rem;}
#header .ebook_sub li:nth-child(1), #header .ebook_sub li:nth-child(4), #header .ebook_sub li:nth-child(5), #header .ebook_sub li:nth-child(6) {width: 11%;} 
#header .ebook_sub li:nth-child(2), #header .ebook_sub li:nth-child(3), #header .ebook_sub li:nth-child(7), #header .ebook_sub li:nth-child(8) {width: 14%;} 
#header .ebook_sub li a.on {color: #551A8B; font-weight: 700;}
#header .ebook_sub li .bookmoney {font-size: 1.2rem; background: #551A8B; color: #FFF; padding: 4px 3px;}


/* mypage - header */
#header .top.my_page {}
#header .top.my_page h1 {height: 30px; line-height: 30px; font-size: 1.6rem; text-align: left; padding-left: 40px;}


/* ebook */
#header .ebook_menu {height:30px; line-height:31px; overflow:hidden; border-bottom:1px solid #CCC; position:relative;}
#header .ebook_menu ul {height:30px; padding-right: 30px; float:left; width: 100%; box-sizing: border-box;}
#header .ebook_menu ul.row2 {border-top: 1px solid #CCC; width: 100%;}
#header .ebook_menu li {float:left; overflow: hidden; position: relative; width: 14%;}
#header .ebook_menu li:nth-child(2) {width: 17%;}
#header .ebook_menu li:nth-child(3) {width: 20%;}
#header .ebook_menu li:nth-child(4) {width: 17%;}
#header .ebook_menu li.on::after {content: ''; position: absolute; width: 100%; left: 0; height: 2px; background: #745AA9; bottom: 1px;}
#header .ebook_menu li a {display:block; width:100%; height: 100%; /*padding:0 11px; */ position:relative; text-align: center;}
#header .ebook_menu .btn_ext {display: block; position: absolute; right: 0; top: 0; width: 30px; height: 31px; text-align: center; border: 1px solid #CCC; border-top: 0; border-bottom: 0; background: url(../images/button/btn_arrow_bottom.png) no-repeat center center /18px;}
@media only screen and (min-width : 320px) and (max-width : 359px) {
	#header .ebook_menu {font-size: 1.2rem;}
	#header .ebook_menu li a {padding: 0 6px;}
}

/*하얀형태의 Header*/
#whiteHeader{background:#fff; font-size:1.3rem; position:relative;}
#whiteHeader .top{padding: 0; height: 42px; background: #fff; line-height: 42px;}
#whiteHeader .top ul{height: 42px; overflow: hidden;}
#whiteHeader .top ul li{float: left; height: 100%; font-size: 0; box-sizing: border-box; width: 50%; list-style:none;}
#whiteHeader .top ul .left{text-align: left;}
#whiteHeader .top ul .right{text-align: right;}
#whiteHeader .top li > a{display: inline-block; height: 100%; font-size: 0; vertical-align: top;}
#whiteHeader .top .left img{padding-left: 10px;}
#whiteHeader .top .right img {padding-right: 10px;}
#whiteHeader .top .img_menu{height: 30px; width: auto; margin-top: 6px;}
#whiteHeader .top .img_logo {height: 18px; margin-top: 13px;}
#whiteHeader .top .img_my {height: 24px; margin-top: 9px;}
#whiteHeader .top .img_srch {height: 24px; margin-top: 9px;}

#whiteHeader .menu {background: #FFF; overflow: hidden;}
#whiteHeader .menu ul {height: 35px; border-bottom: 1px solid #DEDEDE; border-top: 1px solid #DEDEDE;}
#whiteHeader .menu li:nth-child(1), #whiteHeader .menu li:nth-child(2), #whiteHeader .menu li:nth-child(4) {width: 33%;}
#whiteHeader .menu li:nth-child(3) {width: 34%;}
#whiteHeader .menu li {float: left;display: table;width: 25%;text-align: center;font-weight: 700;color: #58595B;height: 100%;font-size: 1.5rem;}
#whiteHeader .menu li a {display: table-cell;vertical-align: middle;position: relative;font-size: 12pt !important;}
#whiteHeader .menu li a span {font-family: 나눔고딕, NanumBarunGothic, NanumGothic, 맑은고딕, "Malgun Gothic", "Apple SD Gothic Neo", 돋움, dotum, sans-serif;font-size: 1.5rem !important;font-weight: 500 !important;}
#whiteHeader .menu .on > span { color: #551A8B;}
#whiteHeader .menu .on::after {content: '';width: 70%;height: 2px;background: #551A8B;position: absolute;bottom: 0;left: 15%;}

#whiteHeader .community_sub {border-bottom: 1px solid #DEDEDE; color: #58595B; text-align: center; letter-spacing: -0.5px;}	
#whiteHeader .community_sub ul {height: 35px; overflow: hidden;}
#whiteHeader .community_sub li {float: left; display: table; width: auto; height: 100%; overflow: hidden; font-size: 0; padding: 0 15px;}
#whiteHeader .community_sub li a {display: table-cell; vertical-align: middle; position: relative; font-size: 12pt;}
#whiteHeader .community_sub li a.on {color: #551A8B; font-weight: 650;}

/* common - footer */
#footerTopBtn {padding: 10px; text-align: right; }
#footerTopBtn button {font-size: 1.2rem; color: #818286; text-align: center; font-weight: 700; border: 1px solid #DEDEDE; background: #FFF; width: 55px; padding: 7px 0 3px;}
#footerTopBtn .arrow {display: block; margin: 0 auto; height: 20px;}
#footerTopBtn .txt {height: 12px; margin-top: 3px;}
#footer {background: #818286; color: #FFF; padding: 0 0 80px; font-size: 1.2rem; text-align: center;}
#footer .top_button {height: 35px;} 
#footer .top_button li {float: left; width: 33.3%; box-sizing: border-box; color: #59585B; border: 1px solid #DEDEDE; border-right: 0; background: #FFF;} 
#footer .top_button li:nth-child(1) {border-left: 0;}
#footer .top_button li a {display: table; width: 100%; height: 35px;}
#footer .top_button li span {display: table-cell; vertical-align: middle;}
#footer .button_area {clear: both;}
#footer .button_area ul {}
#footer .button_area li {float: left; display: table; width: 25%; box-sizing: border-box; padding: 0 10px;}
#footer .button_area li a {display: table-cell; vertical-align: middle; text-align: center; height: 25px;}
#footer .link {margin: 15px 0; clear: both;}
#footer .link ul {display: block; width: 100%; text-align: center;}
#footer .link li {display: inline-block; vertical-align: middle; position: relative; margin-right: 20px;}
#footer .link li::after {content: ''; width:1px; height: 70%; background: #CCC; position: absolute; right: -10px; top: 15%;}
#footer .link li:last-child {margin: 0;}
#footer .link li:last-child::after {display:none; }

#footer .info {clear: both; margin-bottom: 10px;}

#fixMenu {position:fixed; bottom:0; left:0; width:100%; height: 40px; background: #FFF; z-index:999; border-top: 1px solid #CCC; overflow: hidden; text-align:center; color: #000;     box-sizing: border-box;}
#fixMenu li {float:left; width:25%; font-size: 0; height: 40px;}
#fixMenu li a {display: block; position: relative;}
#fixMenu .icon {height: 25px;}
#fixMenu .icon img {width: 17px; height: 17px; margin-top: 4px;}
#fixMenu .icon img.menu {box-sizing: border-box; padding: 2px;}
#fixMenu .cart {display: inline-block; width: 25px; height: 25px; position: relative;}
#fixMenu .cart .cart_cnt {position: absolute; right: -2px; top: 0px; color: #FFF;  background: #C31B28; border-radius: 8px; font-size: 10px; height: 12px; width: 12px; box-sizing: border-box; display: table;}
#fixMenu .cart .cart_cnt > span {display: table-cell; vertical-align: middle; line-height: 12px;}
#fixMenu .title {font-size: 11px; height: 15px; line-height: 15px;}

#dimmed {position: fixed; top:0; left:0; bottom:0; right:0; z-index:1000; background: #000; opacity: 0.7; display: none;}


/* common - left menu (test) */
#leftSlideMenu {display: none; position: fixed; top:0; left:0; bottom:0; width: 95%; background: #FFF; z-index: 1001; font-size: 1.5rem; overflow-y: scroll;}
#leftSlideMenu .close {position: absolute; right: 10px; top: 12.5px; color: #FFF; width: 20px; height: 20px; font-size: 0; background: url(../images/button/btn_close_wht.png) no-repeat; background-size: 20px;}
#leftSlideMenu .top button {font-size: 1.4rem; background: #FFF; color: #000; height: 25px; line-height: 25px; box-sizing: border-box; width: 80px; margin-right: 5px;}
#leftSlideMenu .ad a {display: block; font-size: 0;}
#leftSlideMenu .ad img {width: 100%;}
#leftSlideMenu .sub_title {border-bottom: 1px solid #745AA9; background: #E6E7E9; height: 35px; line-height: 35px; padding: 0 10px; font-weight:bold; font-size: 1.5rem;}
#leftSlideMenu .sub_title button {float: right; background: url(../images/button/btn_arrow_top.png) no-repeat center center; width: 20px; height:100%;}
#leftSlideMenu .sub_title a {display: inline-block; width: 20px; height: 100%; vertical-align: top;}
#leftSlideMenu .icon_sub1 {background: url(../images/icon/icon_slide_sub1.png) no-repeat left center; background-size:15px;}
#leftSlideMenu .icon_sub2 {background: url(../images/icon/icon_slide_sub2.png) no-repeat left center; background-size:15px;}
#leftSlideMenu .icon_sub3 {background: url(../images/icon/icon_slide_sub3.png) no-repeat left center; background-size:15px;}
#leftSlideMenu .icon_sub4 {background: url(../images/icon/icon_slide_sub4.png) no-repeat left center; background-size:15px;}
#leftSlideMenu .sub_lst .empty {text-indent: 10px; color: #888; height: 35px; line-height: 35px;}
#leftSlideMenu .sub_lst a {display: block; width: 50%; float: left; text-indent: 10px; height: 35px; line-height: 35px;}
#leftSlideMenu .sub_lst button {width: 35px; height: 35px; vertical-align: top; float: right; background: url(../images/button/btn_star_empty.png) no-repeat center center; background-size:15px;}
#leftSlideMenu .sub_lst .on {background: url(../images/button/btn_star_full.png) no-repeat center center; background-size:15px;}
#leftSlideMenu .sub_lst .del {}
#leftSlideMenu .login_before {background: #745AA9;}
#leftSlideMenu .login_before .btn_area {padding: 10px;}
#leftSlideMenu .login_after .profile {line-height: 45px; height: 45px; background: #745AA9;}
#leftSlideMenu .login_after .cover {height: 35px; width: 35px; position: absolute; top: 5px; left: 5px; overflow: hidden; border-radius: 20px;}
#leftSlideMenu .login_after .cover img {width: 100%; height: 100%;}
#leftSlideMenu .login_after .nickname {display: inline-block; margin-left: 45px; color: #FFF;}
#leftSlideMenu .my_cash {background: #333B46; color: #FFF; overflow: hidden; text-align: center; font-size: 1.3rem;}
#leftSlideMenu .my_cash ul {width: 100%;}
#leftSlideMenu .my_cash li {float: left; width: 25%; padding: 10px 0;}
#leftSlideMenu .my_info {width: 100%; height: 130px; font-size: 1.2rem; text-align: center;}
#leftSlideMenu .my_info ul {width: 100%;}
#leftSlideMenu .my_info li {float: left; width: 33.3%; box-sizing: border-box; padding: 10px; position: relative;}
#leftSlideMenu .my_info .box {width: 86px; height: 86px; margin: 0 auto;}
#leftSlideMenu .my_info .time {position: absolute; top: 40px; font-size: 1.3rem; width: 100%; height: 20px; line-height: 20px;text-align: center; left: 0; letter-spacing: -0.7px;}
#leftSlideMenu .my_info .letter {background: url(../images/icon/icon_letters.png) center center no-repeat; background-size: 70px;}
#leftSlideMenu .my_info .letter_cnt {top: 33px;}
#leftSlideMenu .my_info .letter_cnt strong {font-size: 2.5rem;}
#leftSlideMenu .my_info p {height: 20px; line-height:20px;margin-top: 3px;}
#leftSlideMenu .my_page {border: 1px solid #D7D7D7; border-right:0; border-left:0; box-sizing: border-box; overflow: hidden; font-size: 1.3rem;}
#leftSlideMenu .my_page li {float: left; width: 50%; text-align: center; box-sizing: border-box;}
#leftSlideMenu .my_page li:first-child {border-right: 1px solid #D7D7D7;}
#leftSlideMenu .my_page li a {display: block; padding: 12px 0;}
#leftSlideMenu .login_after a.more {display: block;}
#leftSlideMenu .login_after a.more::after {content: ''; background: url(../images/icon/bg_arrow_next_wht.png) right center no-repeat; background-size: 15px; float: right; width: 10px; height: 30px;}

/* common - left menu (service) */
#leftSlideMenu {/*display: block;*/ position: fixed; top: 0; left: 0; bottom: 0; width: 80%; background: #FFF; z-index: 1001; font-size: 1.5rem; overflow-y: scroll;}
#leftSlideMenu .btn_close {position: absolute; right: 10px; top: 0; color: #FFF; width: 40px; height: 40px; font-size: 0; background: url(http://img.toto-romance.com/upfile/icon/btn_close_blk.png) no-repeat center right; background-size: 20px;}
#leftSlideMenu .before_area {}
#leftSlideMenu .before_area .logo {height: 40px; padding: 8px 15px; box-sizing: border-box;}
#leftSlideMenu .before_area .logo img {height: 100%; width: auto;}
#leftSlideMenu .before_area .login_btn {background: #F5F5F5; padding: 15px; font-size: 0; border: 1px solid #DEDEDE; border-right: 0; border-left: 0;}
#leftSlideMenu .before_area .login_btn > a {border: 1px solid #DEDEDE; color: #818085; font-weight: 700; text-align: center; border-radius: 3px; background: #FFF; height: 30px; line-height: 30px; display: inline-block; width: 49%; font-size: 1.4rem;}
#leftSlideMenu .before_area .login_btn > a.join {float: right;}
#leftSlideMenu .before_area .sub_btn {margin-top: 12px; text-align: right;}
#leftSlideMenu .before_area .sub_btn > a {font-size: 1.3rem; color: #949599; position: relative;}
#leftSlideMenu .before_area .sub_btn .find_id {padding-right: 20px;}
#leftSlideMenu .before_area .sub_btn .find_id::after {content: ''; position: absolute; top: 10%; right: 10px; width: 1px; height: 80%; background: #DEDEDE;}
#leftSlideMenu .group_list {padding: 0 15px;}
#leftSlideMenu .group_list li {border-bottom: 1px solid #DEDEDE; font-size: 0;}
#leftSlideMenu .group_list li > a {display: block; font-size: 1.4rem; text-align: left; position: relative; height: 40px; line-height: 40px;}
#leftSlideMenu .group_list .more::after {content: ''; position: absolute; right: 0; top: 0; width: 40px; height: 40px; background: url(http://img.toto-romance.com/upfile/icon/btn_round_plus.png) no-repeat center right; background-size: 20px;}
#leftSlideMenu .group_list dd {display: inline-block; width: 50%; height: 32px; line-height: 32px;}
#leftSlideMenu .group_list dd > a {font-size: 1.3rem; color: #949599; display: block;}
#leftSlideMenu .group_list dl {border-top: 1px solid #DEDEDE; display: none;}
#leftSlideMenu .menu_footer {height: 40px; line-height: 40px; font-size: 0; text-align: right; padding: 0 15px; margin-bottom: 20px;}
#leftSlideMenu .menu_footer a {font-size: 1.4rem; color: #414143; position: relative;}
#leftSlideMenu .menu_footer .notice {padding-right: 20px;}
#leftSlideMenu .menu_footer .notice::after {content: ''; position: absolute; top: 10%; right: 10px; width: 1px; height: 80%; background: #DEDEDE;}
#leftSlideMenu .after_area .top {height: 40px; line-height: 40px; padding: 0 15px; box-sizing: border-box; font-size: 1.4rem;}
#leftSlideMenu .after_area .top strong {margin-right: 3px; color: #551A8B;}
#leftSlideMenu .after_area .my_table {background: #F5F5F5; padding: 15px; font-size: 0; border: 1px solid #DEDEDE; border-right: 0; border-left: 0;}
#leftSlideMenu .after_area .cash_list {height: auto; background: #FFF; border: 1px solid #DEDEDE; font-size: 0;}
#leftSlideMenu .after_area .cash_list li {display: inline-block; width: 25%; height: auto;}
#leftSlideMenu .after_area .cash_list li a {font-size: 1.2rem; text-align: center; display: block; box-sizing: border-box; border-right: 1px solid #E0E0E0; padding: 3px 0 5px;}
#leftSlideMenu .after_area .cash_list li:last-child a {border-right: 0;}
#leftSlideMenu .after_area .cash_list li strong {display: block; padding-top: 5px; color: #FC6A07; font-size: 1.2rem;}
#leftSlideMenu .after_area .cash_list a > div {width: 30px; height: 30px; margin: 0 auto; background-image: url(http://img.toto-romance.com/upfile/icon/icon_my_head_gray.png); background-size: auto 30px; background-repeat: no-repeat;}
#leftSlideMenu .after_area .cash_list .point {background-position: -51px 0px;}
#leftSlideMenu .after_area .cash_list .mileage {background-position: -100px 0px;}
#leftSlideMenu .after_area .cash_list .romanCash {background-position: -149px 0px;}
#leftSlideMenu .after_area .cash_list .deposit {background-position: -198px 0px;}
#leftSlideMenu .after_area .my_list {margin-top: 10px;}
#leftSlideMenu .after_area .my_list li {height: 28px; line-height: 28px; }
#leftSlideMenu .after_area .my_list img {width: 10px; vertical-align: middle; margin-right: 7px;}
#leftSlideMenu .after_area .my_list a {font-size: 1.4rem; display: block;}
#leftSlideMenu .after_area .my_list a strong {float: right; color: #551A8B;}

/* popup */
#layerWrap {position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; background: none;}

#eookThumbLayer {display: none; position: fixed; top: 50%; left: 50%; z-index: 1001; width: 90%; height: auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
#eookThumbLayer img {width: 100%; height: auto;}
#loginLayer {position:fixed; top:50%; left:50%; z-index: 1001; width:300px; background:#FFF;  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
#cartLayer {position:fixed; top:50%; left:50%; z-index: 1001; width:300px; background:#FFF;  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.pop_container .notice .top {background: #745AA9; height: 30px; line-height: 30px; font-size: 1.5rem; color: #FFF; font-weight: bold; padding: 0 10px;}
.pop_container .notice .desc {padding: 15px 10px;}
.pop_container .notice .btnArea {padding: 10px;}
.pop_container .notice button {font-size: 1.4rem; width: 48%; display: inline-block; height: 30px; line-height: 30px; margin-right: 2%; color: #000; border: 1px solid #CCC;}
.pop_container button.btn_right {color: #745AA9; border: 1px solid #745AA9; float: right; margin: 0;}

/* center popup */
#centerPopLayer {position:fixed; z-index:1001;top:150px;width:94%;left:3%; overflow: hidden; border: 1px solid #000; display: none;}
#centerPopLayer .contents a {display: block; font-size: 0;}
#centerPopLayer img {width:100%;height:100%;}
#centerPopLayer .popBottom {font-size: 1.4rem; display: table; width: 100%; text-align: center; color: #FFF; border-top: 1px solid #000;}
#centerPopLayer .popBottom li {float: left; display: table-cell; padding: 10px 0; box-sizing: border-box;}
#centerPopLayer .popBottom .close_today {width: 70%; background: #353535;}
#centerPopLayer .popBottom .close {width: 30%; background: #000;}
#centerPopLayer .contents {font-size: 0;}



/* 공유하기 */
#snsBoxWrap {display: none; z-index:1001; position:fixed; top:50%;left:50%; width:300px; padding: 10px;  background:#FFF;  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
#snsBoxWrap .top {text-align: center; font-size: 1.6rem; position: relative;}
#snsBoxWrap h1 {display: inline-block; margin: 0 0 7px; padding: 0 0 7px; border-bottom: 2px solid red; font-size: 1.6rem;}
#snsBoxWrap .top button {padding:0; font-size: 0; border: 0; background: url(../images/button/btn_popup_close.gif) no-repeat center center; float: right; width: 20px; height: 20px; position: absolute; right: 0; top: 0;}
#snsBoxWrap .list {text-align: left;}
#snsBoxWrap .list li {display: inline-block; width: 31%; vertical-align: top; text-align:center; margin-top: 20px; font-size: 1.3rem;}
#snsBoxWrap .list li img {width: 40px; border-radius: 4px;}


/* paging */
#listPaging {padding: 15px 0; background: #FFF; text-align:center; font-size: 1.2rem;}
#listPaging a {width: 30px; height: 27px; display: inline-block; line-height: 27px; vertical-align: top; margin:0 2px;}
#listPaging .page a {width: 33px; border: 1px solid #CCC; box-sizing:border-box; background: #FFF;}
#listPaging .page .on {border: 1px solid #745AA9; color: #FFF; background: #745AA9;}
#listPaging .prev {background: url(../images/button/paging_prev.gif) no-repeat; background-size: 30px 27px; font-size: 0;}
#listPaging .next {background: url(../images/button/paging_next.gif) no-repeat; background-size: 30px 27px; font-size: 0;}


/* top banner */
#eventTopBnr {display:none; width:100%; height:auto; position:relative; font-size:0;}
#eventTopBnr img.top_banner {width:100%; height:auto;}
#eventTopBnr a.btn_cancel {position:absolute; right:5px; top:5px;}
#eventTopBnr a.btn_cancel img {width:28px; height:auto;}

/* 전자책 뱃지 */
#wrap .badge_top {position: absolute; top: 5px; right: 5px; width: auto; font-size: 0;}
#wrap .badge_top img {width: 20px; height: 20px; border: 0 !important;}
#wrap .badge_bt {position: absolute; bottom: 0px; left: 0px; width: 30px; height: auto; font-size: 0;}
#wrap .badge_bt img {width: 30px; height: 30px; border: 0 !important; border-radius: 0px;}
@media only screen and (min-width : 320px) and (max-width : 359px) {
	#wrap .badge_top img {width: 17px; height: 17px;}
	#wrap .badge_bt img {width: 27px; height: 27px;}
}
@media only screen and (max-width: 1200px) and (min-width: 700px) {
	#wrap .main_const .badge_top img {width: 30px; height: 30px;}
	#wrap .main_const .badge_bt img {width: 45px; height: 45px;}
	#wrap #mainBestLoad .badge_top img, #wrap #popularWriter .badge_top img {width: 20px; height: 20px;}
}
#wrap .detail_head .badge_top img {width: 20px; height: 20px;}
#wrap .detail_head .badge_bt img {width: 30px; height: 30px;}


/* 검색 */
#searchTopWrap {padding: 20px;}
#searchTopWrap .keyword {height: 35px; line-height: 35px; border: 1px solid #551A8B; box-sizing: border-box; overflow: hidden; font-size: 0; position: relative;}
#searchTopWrap .keyword input {width: 100%; border:0; height: 100%; padding-left: 10px; padding-right: 80px; font-size: 1.4rem; box-sizing: border-box;}
#searchTopWrap .submit {position: absolute; top: 0; right: 0; height: 34px; width: auto;}
#searchTopWrap .submit button {height: 34px; width: 34px; float: right;}
#searchTopWrap .submit button img {width: 55%; height: auto;}
#searchTopWrap .submit a {float: left; display: inline-block; width: 25px; height: 34px; text-align: center;}
#searchTopWrap .submit a img {width: 14px; height: 14px; margin-top: 10px;}

#searchBeforeWrap {}
#searchBeforeWrap .popular_area {padding: 20px; border: 1px solid #DEDEDE; border-left: 0; border-right: 0; background: #FAF8F9;}
#searchBeforeWrap .popular_area h1 {background: #A8A9AD; display: block; height: 35px; line-height: 35px; color: #FFF; font-size: 1.5rem; margin-bottom: 5px; text-align: center; font-weight: normal;}
#searchBeforeWrap .popular_area li {height: 35px; line-height: 35px; font-size: 1.4rem; border-bottom: 1px solid #E8E8EA;}
#searchBeforeWrap .popular_area li:last-child {border: 0;}
#searchBeforeWrap .popular_area li span {color: #551A8B; font-weight: 600; padding: 0 15px; margin-right: 10px;}
#searchBeforeWrap .recom_area {padding: 20px; position: relative;}
#searchBeforeWrap .sub_title {margin-bottom: 10px;}
#searchBeforeWrap .work_container {padding-bottom: 10px; overflow: hidden;}



/* 하단 알람창 */
#basicAlert {display: none; background: rgba(0, 0, 0, 0.7); color: #FFF; position: fixed; width: 70%; padding: 10px 0; border-radius: 5px; bottom: 20%; left: 15%; z-index: 1000; text-align: center; font-size: 1.3rem;}
#basicAlert strong {font-weight: 500; color: #FB6808;}


/* 이용약관 */
.agree_conts {padding: 0; position: relative;}
.agree_conts h1 {color: #551A8B; font-size: 1.6rem; background: #FAF8F9; padding: 10px; border-bottom: 1px solid #DEDEDE;}
.agree_conts .agree_txt {line-height: 1.5; font-size: 1.4rem; padding: 15px;}